This is an automated email from the ASF dual-hosted git repository.

hansva pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/hop-website.git


The following commit(s) were added to refs/heads/main by this push:
     new ce13f47bd2 [DOCS] add native type for spark engine (#281)
ce13f47bd2 is described below

commit ce13f47bd20c1b74c2ab1607059ac334d56d8545
Author: Hans Van Akelyen <[email protected]>
AuthorDate: Mon Sep 14 17:30:05 2026 +0200

    [DOCS] add native type for spark engine (#281)
---
 README.md               |  5 ++++-
 ui/css/site.css         |  7 +++++--
 ui/helpers/engines.js   | 23 +++++++++++++++++------
 ui/partials/engines.hbs |  8 ++++++--
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 500128e6ae..f3eb63a32e 100644
--- a/README.md
+++ b/README.md
@@ -98,7 +98,10 @@ UI rather than by Asciidoctor:
 ```
 
 The first becomes the engine tags under the breadcrumb - names written out in
-full, states `yes`, `no` or anything else for unknown. The second marks a page
+full, states `yes`, `no`, `native` or anything else for unknown. `native` is
+for an engine that implements the transform itself where `yes` would mean the
+Hop transform runs wrapped inside it, as most transforms do on Spark; use it
+only where the engine draws that line. The second marks a page
 as documenting a plugin the standard client does not ship, and takes the id the
 marketplace installs by, so the note can give the exact command.
 
diff --git a/ui/css/site.css b/ui/css/site.css
index 016b8b7cc7..75407bfb2a 100644
--- a/ui/css/site.css
+++ b/ui/css/site.css
@@ -56,8 +56,10 @@
 /* ---------- engine tags ----------
    Which engines a transform runs on, under the breadcrumb. The state is drawn
    by a symbol, never by colour alone, so the colours here reinforce a
-   distinction that is already made without them. All three sit on --surface
-   and are pairs check-contrast already gates. */
+   distinction that is already made without them. All of them sit on --surface
+   and are pairs check-contrast already gates. Native and supported share a
+   colour on purpose: both mean "runs here", and the double check alone says
+   which is the engine's own implementation. */
 .engines {
   display: flex; flex-wrap: wrap; gap: 6px;
   list-style: none; margin: 0 0 20px; padding: 0;
@@ -71,6 +73,7 @@
   white-space: nowrap;
 }
 .engine__mark { flex: none; }
+.engine--native .engine__mark,
 .engine--supported .engine__mark { color: var(--tip); }
 .engine--unknown .engine__mark { color: var(--warning); }
 /* An unsupported engine is still worth stating, but it is not the news on the
diff --git a/ui/helpers/engines.js b/ui/helpers/engines.js
index eabf8512ba..6f8ce3cf9e 100644
--- a/ui/helpers/engines.js
+++ b/ui/helpers/engines.js
@@ -27,13 +27,21 @@
  * of and it still renders: when a new engine arrives, the docs declare it and
  * nothing here needs changing. The order is the page's own.
  *
- * States are normalised to three - supported, unsupported, unknown - so the
- * docs can write yes/no, true/false or supported/unsupported and mean the same
- * thing. Anything unrecognised, "maybe" included, lands on unknown, which is
- * the honest reading of a value this does not understand.
+ * States are normalised to four - native, supported, unsupported, unknown - so
+ * the docs can write yes/no, true/false or supported/unsupported and mean the
+ * same thing. Anything unrecognised, "maybe" included, lands on unknown, which
+ * is the honest reading of a value this does not understand.
+ *
+ * "native" is a step above "supported": the engine has its own implementation
+ * of the transform (Spark doing the sort or the join itself), where "yes" on 
an
+ * engine like Spark means the Hop transform runs wrapped inside the engine -
+ * it works, but sees one partition at a time. The distinction is only stated
+ * where an engine makes it; for the Hop engine every "yes" is native and the
+ * pages simply say yes.
  */
 
-const SUPPORTED = new Set(['yes', 'true', 'supported'])
+const NATIVE = new Set(['native'])
+const SUPPORTED = new Set(['yes', 'true', 'supported', 'wrapped'])
 const UNSUPPORTED = new Set(['no', 'false', 'unsupported'])
 
 const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, 
'-').replace(/^-|-$/g, '')
@@ -48,7 +56,10 @@ module.exports = (value) => {
     return {
       label,
       slug: slug(label),
-      state: SUPPORTED.has(state) ? 'supported' : UNSUPPORTED.has(state) ? 
'unsupported' : 'unknown',
+      state: NATIVE.has(state) ? 'native'
+        : SUPPORTED.has(state) ? 'supported'
+        : UNSUPPORTED.has(state) ? 'unsupported'
+        : 'unknown',
     }
   }).filter(Boolean)
 }
diff --git a/ui/partials/engines.hbs b/ui/partials/engines.hbs
index 9735379e94..7ed7b14e73 100644
--- a/ui/partials/engines.hbs
+++ b/ui/partials/engines.hbs
@@ -22,18 +22,22 @@
     The state is carried by a symbol and by a word, never by colour alone
     (1.4.1). The word is for screen readers only: the symbol says it on screen,
     and reading "Hop Engine supported, Native Spark not supported" is what 
makes
-    the list usable when the symbols cannot be seen. }}
+    the list usable when the symbols cannot be seen.
+
+    A native state gets a double check: the engine runs the transform itself
+    rather than wrapping the Hop implementation. Supported is a single check. 
}}
 {{#with (engines page.attributes.engines)}}
 <ul class="engines" data-pagefind-ignore>
   {{#each this}}
   <li class="engine engine--{{state}}" data-engine="{{slug}}">
     <svg class="engine__mark" width="12" height="12" viewBox="0 0 12 12" 
aria-hidden="true" focusable="false">
+      {{#if (eq state 'native')}}<path d="M1 6.4 3.4 9 8 3.2M5.2 8.6 6.2 9.8 
11 4" fill="none" stroke="currentColor" stroke-width="1.6" 
stroke-linecap="round" stroke-linejoin="round"/>{{/if}}
       {{#if (eq state 'supported')}}<path d="M2 6.4 4.6 9 10 3.2" fill="none" 
stroke="currentColor" stroke-width="1.8" stroke-linecap="round" 
stroke-linejoin="round"/>{{/if}}
       {{#if (eq state 'unsupported')}}<path d="M3 3l6 6M9 3l-6 6" fill="none" 
stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>{{/if}}
       {{#if (eq state 'unknown')}}<path d="M4.1 4.3a1.9 1.9 0 1 1 2.6 
1.8c-.5.2-.7.6-.7 1.1v.3" fill="none" stroke="currentColor" stroke-width="1.6" 
stroke-linecap="round"/><circle cx="6" cy="9.3" r=".85" 
fill="currentColor"/>{{/if}}
     </svg>
     {{label}}
-    <span class="visually-hidden">{{#if (eq state 
'supported')}}supported{{/if}}{{#if (eq state 'unsupported')}}not 
supported{{/if}}{{#if (eq state 'unknown')}}support unknown{{/if}}</span>
+    <span class="visually-hidden">{{#if (eq state 'native')}}native 
implementation{{/if}}{{#if (eq state 'supported')}}supported{{/if}}{{#if (eq 
state 'unsupported')}}not supported{{/if}}{{#if (eq state 'unknown')}}support 
unknown{{/if}}</span>
   </li>
   {{/each}}
 </ul>

Reply via email to