feat(native-el-ui): convert all component files to el-html vessel API
Dev — Build & local smoke test / build-smoke (pull_request) Failing after 4m48s
Dev — Build & local smoke test / build-smoke (pull_request) Failing after 4m48s
Replaced raw HTML heredoc returns with native el_ function calls across all 21 component files. styles.el intentionally excluded.
This commit is contained in:
+141
-107
@@ -2,6 +2,15 @@
|
||||
// Accepts the founding counter values as parameters so main.el can inject
|
||||
// server-side rendered counts without JS.
|
||||
|
||||
extern fn el_section(attrs: String, children: String) -> String
|
||||
extern fn el_div(attrs: String, children: String) -> String
|
||||
extern fn el_span(attrs: String, children: String) -> String
|
||||
extern fn el_h2(attrs: String, text: String) -> String
|
||||
extern fn el_p(attrs: String, children: String) -> String
|
||||
extern fn el_ul(attrs: String, children: String) -> String
|
||||
extern fn el_li(attrs: String, children: String) -> String
|
||||
extern fn el_button(attrs: String, label: String) -> String
|
||||
|
||||
fn founding_spots_html(sold: Int, total: Int) -> String {
|
||||
let remaining: Int = total - sold
|
||||
let pct: Int = (sold * 100) / total
|
||||
@@ -9,11 +18,47 @@ fn founding_spots_html(sold: Int, total: Int) -> String {
|
||||
let remaining_str: String = int_to_str(remaining)
|
||||
let sold_str: String = int_to_str(sold)
|
||||
let total_str: String = int_to_str(total)
|
||||
return <div class="founding-spots">
|
||||
<p class="founding-spots-label">Only {remaining_str} left</p>
|
||||
<div class="founding-spots-bar"><div class="founding-spots-fill" style="width:{pct_str}%"></div></div>
|
||||
<p class="founding-spots-sub">{sold_str} of {total_str} claimed</p>
|
||||
</div>
|
||||
|
||||
el_div(
|
||||
"class=\"founding-spots\"",
|
||||
el_p("class=\"founding-spots-label\"", "Only " + remaining_str + " left") +
|
||||
el_div(
|
||||
"class=\"founding-spots-bar\"",
|
||||
el_div("class=\"founding-spots-fill\" style=\"width:" + pct_str + "%\"", "")
|
||||
) +
|
||||
el_p("class=\"founding-spots-sub\"", sold_str + " of " + total_str + " claimed")
|
||||
)
|
||||
}
|
||||
|
||||
fn pricing_free_features() -> String {
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Persistent memory - never resets")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Bring your own API keys (OpenAI, Anthropic, Grok...)")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Local inference via Ollama (coming)")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference included when it launches - Q3 2026")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Unlimited projects")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "3 marketplace plugins included")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Core built-in capabilities"))
|
||||
}
|
||||
|
||||
fn pricing_pro_features() -> String {
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Bring your own API keys - use any model, any provider")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference - Q3 2026, priced below OpenAI and Anthropic")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Everything in Free")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Unlimited projects")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Full plugin marketplace")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Advanced integrations - IDE, Slack, and more")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Early access to new features"))
|
||||
}
|
||||
|
||||
fn pricing_founding_features() -> String {
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference (Q3 2026) - founding member rate, priced below the major APIs")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Everything in Professional - forever")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Never pay again - lifetime updates included")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Founding member badge in the app")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Private founding member community")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Shape the roadmap - your votes carry more weight")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Beta features before general release")) +
|
||||
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Name in the credits"))
|
||||
}
|
||||
|
||||
fn pricing(sold: Int, total: Int) -> String {
|
||||
@@ -24,113 +69,102 @@ fn pricing(sold: Int, total: Int) -> String {
|
||||
let remaining_str: String = int_to_str(remaining)
|
||||
let total_str: String = int_to_str(total)
|
||||
|
||||
return <section id="pricing" aria-label="Pricing">
|
||||
<div class="container">
|
||||
let header: String = el_div(
|
||||
"class=\"pricing-header\"",
|
||||
el_div(
|
||||
"class=\"pricing-label-row reveal\"",
|
||||
el_div("style=\"height:1px;width:4rem;background:linear-gradient(to right,transparent,rgba(0,82,160,.35))\"", "") +
|
||||
el_span("class=\"label\" style=\"color:var(--navy-85)\"", "Pricing") +
|
||||
el_div("style=\"height:1px;width:4rem;background:linear-gradient(to left,transparent,rgba(0,82,160,.35))\"", "")
|
||||
) +
|
||||
el_h2("class=\"display-lg pricing-headline reveal\" style=\"transition-delay:80ms\"", "Own it. Don't rent it.") +
|
||||
el_p("class=\"pricing-sub reveal\" style=\"transition-delay:160ms\"",
|
||||
"Bring your own API keys on day one. Neuron Inference - our own model layer, priced below the major APIs - launches Q3 2026."
|
||||
)
|
||||
)
|
||||
|
||||
<div class="pricing-header">
|
||||
<div class="pricing-label-row reveal">
|
||||
<div style="height:1px;width:4rem;background:linear-gradient(to right,transparent,rgba(0,82,160,.35))"></div>
|
||||
<span class="label" style="color:var(--navy-85)">Pricing</span>
|
||||
<div style="height:1px;width:4rem;background:linear-gradient(to left,transparent,rgba(0,82,160,.35))"></div>
|
||||
</div>
|
||||
<h2 class="display-lg pricing-headline reveal" style="transition-delay:80ms">Own it. Don't rent it.</h2>
|
||||
<p class="pricing-sub reveal" style="transition-delay:160ms">Bring your own API keys on day one. Neuron Inference - our own model layer, priced below the major APIs - launches Q3 2026.</p>
|
||||
</div>
|
||||
let card_free: String = el_div(
|
||||
"class=\"pricing-card card-dark reveal\"",
|
||||
el_p("class=\"pricing-tier\"", "Free") +
|
||||
el_div(
|
||||
"class=\"pricing-price-row\"",
|
||||
el_span("class=\"pricing-price\"", "$0") +
|
||||
el_span("class=\"pricing-cadence\"", "forever")
|
||||
) +
|
||||
el_p("class=\"pricing-tagline\"", "Start building your memory. No card required.") +
|
||||
el_ul("class=\"pricing-features\"", pricing_free_features()) +
|
||||
el_div("style=\"flex:1\"", "") +
|
||||
el_div(
|
||||
"class=\"pricing-cta pricing-cta-ghost\"",
|
||||
el_button("class=\"pricing-cta-ghost\" data-checkout=\"free\"", "Preorder free tier →")
|
||||
)
|
||||
)
|
||||
|
||||
<div class="pricing-grid">
|
||||
let card_pro: String = el_div(
|
||||
"class=\"pricing-card card-dark reveal\" style=\"transition-delay:150ms\"",
|
||||
el_p("class=\"pricing-tier\"", "Professional") +
|
||||
el_div(
|
||||
"class=\"pricing-price-row\"",
|
||||
el_span("class=\"pricing-price\"", "$19") +
|
||||
el_span("class=\"pricing-cadence\"", "/ month")
|
||||
) +
|
||||
el_p("class=\"pricing-tagline\"", "Full access. Use your own API keys now. Neuron Inference when it launches.") +
|
||||
el_ul("class=\"pricing-features\"", pricing_pro_features()) +
|
||||
el_div("style=\"flex:1\"", "") +
|
||||
el_div(
|
||||
"class=\"pricing-cta pricing-cta-navy\"",
|
||||
el_button("class=\"pricing-cta-navy\" data-checkout=\"professional\"", "Preorder →")
|
||||
)
|
||||
)
|
||||
|
||||
<div class="pricing-card card-dark reveal">
|
||||
<p class="pricing-tier">Free</p>
|
||||
<div class="pricing-price-row">
|
||||
<span class="pricing-price">$0</span>
|
||||
<span class="pricing-cadence">forever</span>
|
||||
</div>
|
||||
<p class="pricing-tagline">Start building your memory. No card required.</p>
|
||||
<ul class="pricing-features">
|
||||
<li><span class="dash">-</span><span>Persistent memory - never resets</span></li>
|
||||
<li><span class="dash">-</span><span>Bring your own API keys (OpenAI, Anthropic, Grok...)</span></li>
|
||||
<li><span class="dash">-</span><span>Local inference via Ollama (coming)</span></li>
|
||||
<li><span class="dash">-</span><span>Neuron Inference included when it launches - Q3 2026</span></li>
|
||||
<li><span class="dash">-</span><span>Unlimited projects</span></li>
|
||||
<li><span class="dash">-</span><span>3 marketplace plugins included</span></li>
|
||||
<li><span class="dash">-</span><span>Core built-in capabilities</span></li>
|
||||
</ul>
|
||||
<div style="flex:1"></div>
|
||||
<div class="pricing-cta pricing-cta-ghost">
|
||||
<button class="pricing-cta-ghost" data-checkout="free">Preorder free tier →</button>
|
||||
</div>
|
||||
</div>
|
||||
let card_founding: String = el_div(
|
||||
"class=\"pricing-card featured reveal\" style=\"transition-delay:300ms\"",
|
||||
el_p("class=\"pricing-tier\"", "Founding Member") +
|
||||
el_div(
|
||||
"class=\"pricing-price-row\"",
|
||||
el_span("class=\"pricing-price\"", "$199") +
|
||||
el_span("class=\"pricing-cadence\"", "lifetime")
|
||||
) +
|
||||
el_p("class=\"pricing-tagline\"", "Pay once. Everything, forever. Including Neuron Inference when it launches.") +
|
||||
spots_html +
|
||||
el_ul("class=\"pricing-features\"", pricing_founding_features()) +
|
||||
el_div("style=\"flex:1\"", "") +
|
||||
el_div(
|
||||
"class=\"pricing-cta pricing-cta-solid\"",
|
||||
el_button("class=\"pricing-cta-solid\" data-checkout=\"founding\"", "Preorder — claim your spot →")
|
||||
)
|
||||
)
|
||||
|
||||
<div class="pricing-card card-dark reveal" style="transition-delay:150ms">
|
||||
<p class="pricing-tier">Professional</p>
|
||||
<div class="pricing-price-row">
|
||||
<span class="pricing-price">$19</span>
|
||||
<span class="pricing-cadence">/ month</span>
|
||||
</div>
|
||||
<p class="pricing-tagline">Full access. Use your own API keys now. Neuron Inference when it launches.</p>
|
||||
<ul class="pricing-features">
|
||||
<li><span class="dash">-</span><span>Bring your own API keys - use any model, any provider</span></li>
|
||||
<li><span class="dash">-</span><span>Neuron Inference - Q3 2026, priced below OpenAI and Anthropic</span></li>
|
||||
<li><span class="dash">-</span><span>Everything in Free</span></li>
|
||||
<li><span class="dash">-</span><span>Unlimited projects</span></li>
|
||||
<li><span class="dash">-</span><span>Full plugin marketplace</span></li>
|
||||
<li><span class="dash">-</span><span>Advanced integrations - IDE, Slack, and more</span></li>
|
||||
<li><span class="dash">-</span><span>Early access to new features</span></li>
|
||||
</ul>
|
||||
<div style="flex:1"></div>
|
||||
<div class="pricing-cta pricing-cta-navy">
|
||||
<button class="pricing-cta-navy" data-checkout="professional">Preorder →</button>
|
||||
</div>
|
||||
</div>
|
||||
let grid: String = el_div("class=\"pricing-grid\"", card_free + card_pro + card_founding)
|
||||
|
||||
<div class="pricing-card featured reveal" style="transition-delay:300ms">
|
||||
<p class="pricing-tier">Founding Member</p>
|
||||
<div class="pricing-price-row">
|
||||
<span class="pricing-price">$199</span>
|
||||
<span class="pricing-cadence">lifetime</span>
|
||||
</div>
|
||||
<p class="pricing-tagline">Pay once. Everything, forever. Including Neuron Inference when it launches.</p>
|
||||
let banner_fill: String = el_div(
|
||||
"class=\"founding-banner-fill\" style=\"width:" + pct_str + "%\"",
|
||||
""
|
||||
)
|
||||
let banner: String = el_div(
|
||||
"class=\"founding-banner reveal\"",
|
||||
el_div(
|
||||
"",
|
||||
el_p("class=\"founding-banner-label\"", "Founding Member Spots") +
|
||||
el_div(
|
||||
"style=\"display:flex;align-items:baseline;gap:.5rem;margin:.25rem 0\"",
|
||||
el_span("class=\"founding-banner-count\"", remaining_str) +
|
||||
el_span("class=\"founding-banner-sub\"", "remaining of " + el_span("", total_str))
|
||||
) +
|
||||
el_div("class=\"founding-banner-bar\"", banner_fill)
|
||||
) +
|
||||
el_button("class=\"btn-primary\" data-checkout=\"founding\" style=\"white-space:nowrap\"", "Preorder →")
|
||||
)
|
||||
|
||||
{raw(spots_html)}
|
||||
let fine1: String = el_p("class=\"pricing-fine reveal\" style=\"margin-top:2.5rem\"",
|
||||
"Bring your own API keys · Local inference via Ollama (coming) · Neuron Inference - Q3 2026 · Your data stays yours"
|
||||
)
|
||||
let fine2: String = el_p("class=\"pricing-fine reveal\" style=\"margin-top:1rem;font-size:0.8rem\"",
|
||||
"Includes 2 devices per plan · Additional devices available at a small extra cost · We're not greedy"
|
||||
)
|
||||
|
||||
<ul class="pricing-features">
|
||||
<li><span class="dash">-</span><span>Neuron Inference (Q3 2026) - founding member rate, priced below the major APIs</span></li>
|
||||
<li><span class="dash">-</span><span>Everything in Professional - forever</span></li>
|
||||
<li><span class="dash">-</span><span>Never pay again - lifetime updates included</span></li>
|
||||
<li><span class="dash">-</span><span>Founding member badge in the app</span></li>
|
||||
<li><span class="dash">-</span><span>Private founding member community</span></li>
|
||||
<li><span class="dash">-</span><span>Shape the roadmap - your votes carry more weight</span></li>
|
||||
<li><span class="dash">-</span><span>Beta features before general release</span></li>
|
||||
<li><span class="dash">-</span><span>Name in the credits</span></li>
|
||||
</ul>
|
||||
|
||||
<div style="flex:1"></div>
|
||||
<div class="pricing-cta pricing-cta-solid">
|
||||
<button class="pricing-cta-solid" data-checkout="founding">Preorder — claim your spot →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="founding-banner reveal">
|
||||
<div>
|
||||
<p class="founding-banner-label">Founding Member Spots</p>
|
||||
<div style="display:flex;align-items:baseline;gap:.5rem;margin:.25rem 0">
|
||||
<span class="founding-banner-count">{remaining_str}</span>
|
||||
<span class="founding-banner-sub">remaining of <span>{total_str}</span></span>
|
||||
</div>
|
||||
<div class="founding-banner-bar"><div class="founding-banner-fill" style="width:{pct_str}%"></div></div>
|
||||
</div>
|
||||
<button class="btn-primary" data-checkout="founding" style="white-space:nowrap">Preorder →</button>
|
||||
</div>
|
||||
|
||||
<p class="pricing-fine reveal" style="margin-top:2.5rem">
|
||||
Bring your own API keys · Local inference via Ollama (coming) · Neuron Inference - Q3 2026 · Your data stays yours
|
||||
</p>
|
||||
<p class="pricing-fine reveal" style="margin-top:1rem;font-size:0.8rem">
|
||||
Includes 2 devices per plan · Additional devices available at a small extra cost · We're not greedy
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
el_section(
|
||||
"id=\"pricing\" aria-label=\"Pricing\"",
|
||||
el_div("class=\"container\"", header + grid + banner + fine1 + fine2)
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user