feat(native-el-ui): convert all component files to el-html vessel API

Replaced raw HTML heredoc returns with native el_ function calls across all 21 component files. styles.el intentionally excluded.
2026-05-08 22:35:41 -05:00
parent f2ab12e65b
commit 2553a6b7ac
21 changed files with 2550 additions and 2105 deletions
@@ -3,52 +3,72 @@
 // Responsive: desktop shows full link bar, ≤1060px collapses to hamburger.
 // Hamburger toggles .nav-mobile panel. Closes on link click or outside click.

+extern fn el_nav(attrs: String, children: String) -> String
+extern fn el_div(attrs: String, children: String) -> String
+extern fn el_a(href: String, attrs: String, children: String) -> String
+extern fn el_img(src: String, alt: String, attrs: String) -> String
+extern fn el_button(attrs: String, label: String) -> String
+extern fn el_span(attrs: String, children: String) -> String
+extern fn el_script_src(src: String, defer_load: Bool) -> String
+
 fn nav() -> String {
-    return <nav id="nav">
-  <div class="nav-inner">
-    <a href="/" class="nav-logo" aria-label="Neuron home"><img src="/assets/brand/neuron-wordmark-on-light.png" srcset="/assets/brand/neuron-wordmark-on-light@2x.png 2x" alt="Neuron" height="28"></a>
+    let logo_img: String = el_img(
+        "/assets/brand/neuron-wordmark-on-light.png",
+        "Neuron",
+        "srcset=\"/assets/brand/neuron-wordmark-on-light@2x.png 2x\" height=\"28\""
+    )
+    let logo: String = el_a("/", "class=\"nav-logo\" aria-label=\"Neuron home\"", logo_img)

-    <!-- Order mirrors page section order: how-it-works → enterprise →
-         mission/safety/environment → marketplace → pricing. -->
-    <div class="nav-links">
-      <a href="/#how-it-works"  class="nav-link">How it works</a>
-      <a href="/#enterprise"    class="nav-link">Enterprise</a>
-      <div class="nav-dropdown">
-        <button class="nav-link nav-dropdown-btn" aria-haspopup="true" aria-expanded="false">Mission &#9662;</button>
-        <div class="nav-dropdown-menu">
-          <a href="/#mission"       class="nav-dropdown-item">Our mission</a>
-          <a href="/#safety"        class="nav-dropdown-item">Safety</a>
-          <a href="/#environmental" class="nav-dropdown-item">Environment</a>
-        </div>
-      </div>
-      <a href="/#marketplace"   class="nav-link">Marketplace</a>
-      <a href="/#pricing"       class="nav-link">Pricing</a>
-      <a href="/about"          class="nav-link">About</a>
-      <a href="/said"           class="nav-link">Gallery</a>
-      <a href="/account"        class="nav-link">Account</a>
-      <a href="/#pricing"       class="nav-cta">Get Access</a>
-    </div>
+    let dropdown_menu: String = el_div(
+        "class=\"nav-dropdown-menu\"",
+        el_a("/#mission", "class=\"nav-dropdown-item\"", "Our mission") +
+        el_a("/#safety", "class=\"nav-dropdown-item\"", "Safety") +
+        el_a("/#environmental", "class=\"nav-dropdown-item\"", "Environment")
+    )
+    let dropdown: String = el_div(
+        "class=\"nav-dropdown\"",
+        el_button("class=\"nav-link nav-dropdown-btn\" aria-haspopup=\"true\" aria-expanded=\"false\"", "Mission &#9662;") +
+        dropdown_menu
+    )

-    <button class="nav-hamburger" id="nav-hamburger" aria-label="Open navigation" aria-expanded="false" aria-controls="nav-mobile">
-      <span></span>
-      <span></span>
-      <span></span>
-    </button>
+    let nav_links: String = el_div(
+        "class=\"nav-links\"",
+        el_a("/#how-it-works", "class=\"nav-link\"", "How it works") +
+        el_a("/#enterprise", "class=\"nav-link\"", "Enterprise") +
+        dropdown +
+        el_a("/#marketplace", "class=\"nav-link\"", "Marketplace") +
+        el_a("/#pricing", "class=\"nav-link\"", "Pricing") +
+        el_a("/about", "class=\"nav-link\"", "About") +
+        el_a("/said", "class=\"nav-link\"", "Gallery") +
+        el_a("/account", "class=\"nav-link\"", "Account") +
+        el_a("/#pricing", "class=\"nav-cta\"", "Get Access")
+    )

-    <div class="nav-mobile" id="nav-mobile" role="navigation" aria-label="Mobile navigation">
-      <a href="/#how-it-works" class="nav-mobile-link">How it works</a>
-      <a href="/#enterprise"    class="nav-mobile-link">Enterprise</a>
-      <a href="/#mission"       class="nav-mobile-link">Mission</a>
-      <a href="/#safety"        class="nav-mobile-link" style="padding-left:1.75rem;font-size:0.8rem;color:var(--t3)">- Safety</a>
-      <a href="/#environmental" class="nav-mobile-link" style="padding-left:1.75rem;font-size:0.8rem;color:var(--t3)">- Environment</a>
-      <a href="/#marketplace"   class="nav-mobile-link">Marketplace</a>
-      <a href="/#pricing"       class="nav-mobile-link">Pricing</a>
-      <a href="/about"          class="nav-mobile-link">About</a>
-      <a href="/said"           class="nav-mobile-link">Gallery</a>
-      <a href="/account"        class="nav-mobile-link">Account</a>
-      <a href="/#pricing"       class="nav-mobile-cta">Get Access</a>
-    </div>
-  </div>
-  <script src="/js/nav.js" defer></script>
-</nav>
+    let hamburger_spans: String =
+        el_span("", "") +
+        el_span("", "") +
+        el_span("", "")
+    let hamburger: String = el_button(
+        "class=\"nav-hamburger\" id=\"nav-hamburger\" aria-label=\"Open navigation\" aria-expanded=\"false\" aria-controls=\"nav-mobile\"",
+        hamburger_spans
+    )
+
+    let nav_mobile: String = el_div(
+        "class=\"nav-mobile\" id=\"nav-mobile\" role=\"navigation\" aria-label=\"Mobile navigation\"",
+        el_a("/#how-it-works", "class=\"nav-mobile-link\"", "How it works") +
+        el_a("/#enterprise", "class=\"nav-mobile-link\"", "Enterprise") +
+        el_a("/#mission", "class=\"nav-mobile-link\"", "Mission") +
+        el_a("/#safety", "class=\"nav-mobile-link\" style=\"padding-left:1.75rem;font-size:0.8rem;color:var(--t3)\"", "- Safety") +
+        el_a("/#environmental", "class=\"nav-mobile-link\" style=\"padding-left:1.75rem;font-size:0.8rem;color:var(--t3)\"", "- Environment") +
+        el_a("/#marketplace", "class=\"nav-mobile-link\"", "Marketplace") +
+        el_a("/#pricing", "class=\"nav-mobile-link\"", "Pricing") +
+        el_a("/about", "class=\"nav-mobile-link\"", "About") +
+        el_a("/said", "class=\"nav-mobile-link\"", "Gallery") +
+        el_a("/account", "class=\"nav-mobile-link\"", "Account") +
+        el_a("/#pricing", "class=\"nav-mobile-cta\"", "Get Access")
+    )
+
+    let nav_inner: String = el_div("class=\"nav-inner\"", logo + nav_links + hamburger + nav_mobile)
+
+    el_nav("id=\"nav\"", nav_inner + el_script_src("/js/nav.js", true))
 }