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:
+163
-130
@@ -1,140 +1,119 @@
|
||||
// components/marketplace.el - Marketplace section.
|
||||
// Explains the plugin marketplace - what it is, how it works, coming soon.
|
||||
|
||||
fn marketplace() -> String {
|
||||
return <section id="marketplace" aria-label="Neuron Marketplace">
|
||||
<div class="container">
|
||||
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_h3(attrs: String, text: String) -> String
|
||||
extern fn el_p(attrs: String, children: String) -> String
|
||||
extern fn el_button(attrs: String, label: String) -> String
|
||||
extern fn el_form(attrs: String, children: String) -> String
|
||||
extern fn el_label(for_id: String, attrs: String, children: String) -> String
|
||||
extern fn el_input(type_attr: String, attrs: String) -> String
|
||||
extern fn el_textarea(attrs: String, value: String) -> String
|
||||
extern fn el_script_src(src: String, defer_load: Bool) -> String
|
||||
|
||||
<div class="marketplace-header">
|
||||
<div class="marketplace-label-row reveal">
|
||||
<div class="navy-line-left" style="width:4rem;flex-shrink:0"></div>
|
||||
<span class="label" style="color:var(--navy-85)">Marketplace</span>
|
||||
<div style="margin-left:1rem;background:rgba(0,82,160,.1);color:var(--navy);font-family:var(--body);font-size:0.65rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:0.25rem 0.75rem;border-radius:2px">Coming soon</div>
|
||||
</div>
|
||||
fn marketplace_svg1() -> String {
|
||||
"<svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">" +
|
||||
"<path d=\"M12 2L2 7l10 5 10-5-10-5z\"/><path d=\"M2 17l10 5 10-5\"/><path d=\"M2 12l10 5 10-5\"/>" +
|
||||
"</svg>"
|
||||
}
|
||||
|
||||
<h2 class="display-lg reveal" style="transition-delay:80ms;max-width:38rem">
|
||||
Extend Neuron.<span class="gold" style="display:block">Build for it.</span>
|
||||
</h2>
|
||||
<p class="reveal" style="transition-delay:160ms;font-weight:300;font-size:.9375rem;color:var(--t2);line-height:1.75;max-width:36rem;margin-top:1.25rem">
|
||||
Neuron does one thing exceptionally well: it knows you. The Marketplace extends what it can do with that knowledge - connecting it to your tools, your workflows, and capabilities built by people who understand your domain better than any general-purpose AI ever will.
|
||||
</p>
|
||||
</div>
|
||||
fn marketplace_svg2() -> String {
|
||||
"<svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">" +
|
||||
"<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 8v4l3 3\"/>" +
|
||||
"</svg>"
|
||||
}
|
||||
|
||||
<div class="marketplace-grid reveal" style="transition-delay:200ms">
|
||||
fn marketplace_svg3() -> String {
|
||||
"<svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">" +
|
||||
"<path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"/>" +
|
||||
"</svg>"
|
||||
}
|
||||
|
||||
<div class="marketplace-card card-dark">
|
||||
<div class="marketplace-card-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="display-md marketplace-card-title">Plugins that know you</h3>
|
||||
<p class="marketplace-card-body">Every plugin in the Marketplace has access to your memory - with your permission. A legal plugin knows your deal history. A coding plugin knows your architecture decisions. An email plugin knows your relationships and communication style. The context travels with you.</p>
|
||||
</div>
|
||||
fn marketplace_cards() -> String {
|
||||
let card1: String = el_div(
|
||||
"class=\"marketplace-card card-dark\"",
|
||||
el_div("class=\"marketplace-card-icon\"", marketplace_svg1()) +
|
||||
el_h3("class=\"display-md marketplace-card-title\"", "Plugins that know you") +
|
||||
el_p("class=\"marketplace-card-body\"", "Every plugin in the Marketplace has access to your memory - with your permission. A legal plugin knows your deal history. A coding plugin knows your architecture decisions. An email plugin knows your relationships and communication style. The context travels with you.")
|
||||
)
|
||||
let card2: String = el_div(
|
||||
"class=\"marketplace-card card-dark\" style=\"transition-delay:120ms\"",
|
||||
el_div("class=\"marketplace-card-icon\"", marketplace_svg2()) +
|
||||
el_h3("class=\"display-md marketplace-card-title\"", "Built by domain experts") +
|
||||
el_p("class=\"marketplace-card-body\"", "General AI is good at general things. The Marketplace is for specialists. The person building a plugin for contract attorneys or orthopedic surgeons or professional traders isn't us. It's someone who has spent years in that world. We give them the platform. They bring the depth.")
|
||||
)
|
||||
let card3: String = el_div(
|
||||
"class=\"marketplace-card card-dark\" style=\"transition-delay:240ms\"",
|
||||
el_div("class=\"marketplace-card-icon\"", marketplace_svg3()) +
|
||||
el_h3("class=\"display-md marketplace-card-title\"", "Revenue for builders") +
|
||||
el_p("class=\"marketplace-card-body\"", "Developers earn recurring revenue when users install their plugins. We handle billing, distribution, and the infrastructure. You handle the product. Every plugin that ships earns you a share of every subscription for as long as that user stays. Build once, earn indefinitely.")
|
||||
)
|
||||
el_div("class=\"marketplace-grid reveal\" style=\"transition-delay:200ms\"", card1 + card2 + card3)
|
||||
}
|
||||
|
||||
<div class="marketplace-card card-dark" style="transition-delay:120ms">
|
||||
<div class="marketplace-card-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="display-md marketplace-card-title">Built by domain experts</h3>
|
||||
<p class="marketplace-card-body">General AI is good at general things. The Marketplace is for specialists. The person building a plugin for contract attorneys or orthopedic surgeons or professional traders isn't us. It's someone who has spent years in that world. We give them the platform. They bring the depth.</p>
|
||||
</div>
|
||||
fn marketplace_tags_block(label: String, tags: String) -> String {
|
||||
el_div(
|
||||
"style=\"margin-bottom:2rem\"",
|
||||
el_p("class=\"label\" style=\"margin-bottom:1rem;color:var(--navy-65)\"", label) +
|
||||
el_div("class=\"marketplace-tags\"", tags)
|
||||
)
|
||||
}
|
||||
|
||||
<div class="marketplace-card card-dark" style="transition-delay:240ms">
|
||||
<div class="marketplace-card-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="display-md marketplace-card-title">Revenue for builders</h3>
|
||||
<p class="marketplace-card-body">Developers earn recurring revenue when users install their plugins. We handle billing, distribution, and the infrastructure. You handle the product. Every plugin that ships earns you a share of every subscription for as long as that user stays. Build once, earn indefinitely.</p>
|
||||
</div>
|
||||
fn marketplace_tag(t: String) -> String {
|
||||
el_span("class=\"marketplace-tag\"", t)
|
||||
}
|
||||
|
||||
</div>
|
||||
fn marketplace_categories() -> String {
|
||||
let connectors: String =
|
||||
marketplace_tag("Gmail") + marketplace_tag("Slack") + marketplace_tag("Google Calendar") + marketplace_tag("Google Drive") +
|
||||
marketplace_tag("Notion") + marketplace_tag("GitHub") + marketplace_tag("Linear") + marketplace_tag("More connectors at launch")
|
||||
let following: String =
|
||||
marketplace_tag("Process packets") + marketplace_tag("Knowledge packets")
|
||||
let imprints: String =
|
||||
marketplace_tag("CEO") + marketplace_tag("CTO") + marketplace_tag("CFO") + marketplace_tag("CMO") + marketplace_tag("COO") + marketplace_tag("More C-suite")
|
||||
|
||||
<div class="marketplace-categories reveal" style="transition-delay:320ms">
|
||||
el_div(
|
||||
"class=\"marketplace-categories reveal\" style=\"transition-delay:320ms\"",
|
||||
marketplace_tags_block("Connectors - day one", connectors) +
|
||||
marketplace_tags_block("Following launch", following) +
|
||||
el_div(
|
||||
"",
|
||||
el_p("class=\"label\" style=\"margin-bottom:1rem;color:var(--navy-65)\"", "Imprints - starting with") +
|
||||
el_div("class=\"marketplace-tags\"", imprints)
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
<div style="margin-bottom:2rem">
|
||||
<p class="label" style="margin-bottom:1rem;color:var(--navy-65)">Connectors - day one</p>
|
||||
<div class="marketplace-tags">
|
||||
<span class="marketplace-tag">Gmail</span>
|
||||
<span class="marketplace-tag">Slack</span>
|
||||
<span class="marketplace-tag">Google Calendar</span>
|
||||
<span class="marketplace-tag">Google Drive</span>
|
||||
<span class="marketplace-tag">Notion</span>
|
||||
<span class="marketplace-tag">GitHub</span>
|
||||
<span class="marketplace-tag">Linear</span>
|
||||
<span class="marketplace-tag">More connectors at launch</span>
|
||||
</div>
|
||||
</div>
|
||||
fn marketplace_dev_form() -> String {
|
||||
let input_style: String = "class=\"dev-input\""
|
||||
let field_name: String = el_div(
|
||||
"class=\"dev-field\"",
|
||||
el_label("dev-name", "class=\"dev-label\"", "Name") +
|
||||
el_input("text", "id=\"dev-name\" required placeholder=\"Your name\" " + input_style)
|
||||
)
|
||||
let field_email: String = el_div(
|
||||
"class=\"dev-field\"",
|
||||
el_label("dev-email", "class=\"dev-label\"", "Email") +
|
||||
el_input("email", "id=\"dev-email\" required placeholder=\"you@example.com\" " + input_style)
|
||||
)
|
||||
let field_idea: String = el_div(
|
||||
"class=\"dev-field dev-field-full\"",
|
||||
el_label("dev-idea", "class=\"dev-label\"", "What do you want to build?") +
|
||||
el_textarea("id=\"dev-idea\" required rows=\"5\" placeholder=\"Tell me about the plugin or integration you have in mind...\" class=\"dev-input dev-textarea\"", "")
|
||||
)
|
||||
let submit_row: String = el_div(
|
||||
"class=\"dev-field-full\"",
|
||||
el_button("type=\"submit\" class=\"btn-primary\"", "Send interest →") +
|
||||
el_p("id=\"dev-msg\" style=\"font-family:var(--body);font-size:0.8rem;color:var(--t3);margin-top:0.75rem;display:none\"", "")
|
||||
)
|
||||
el_form("id=\"dev-form\" class=\"dev-form-grid\"", field_name + field_email + field_idea + submit_row)
|
||||
}
|
||||
|
||||
<div style="margin-bottom:2rem">
|
||||
<p class="label" style="margin-bottom:1rem;color:var(--navy-65)">Following launch</p>
|
||||
<div class="marketplace-tags">
|
||||
<span class="marketplace-tag">Process packets</span>
|
||||
<span class="marketplace-tag">Knowledge packets</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="label" style="margin-bottom:1rem;color:var(--navy-65)">Imprints - starting with</p>
|
||||
<div class="marketplace-tags">
|
||||
<span class="marketplace-tag">CEO</span>
|
||||
<span class="marketplace-tag">CTO</span>
|
||||
<span class="marketplace-tag">CFO</span>
|
||||
<span class="marketplace-tag">CMO</span>
|
||||
<span class="marketplace-tag">COO</span>
|
||||
<span class="marketplace-tag">More C-suite</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="marketplace-cta reveal" style="transition-delay:400ms">
|
||||
<div class="marketplace-cta-inner">
|
||||
<div>
|
||||
<p style="font-family:var(--body);font-weight:500;font-size:1rem;color:var(--t1);margin-bottom:0.5rem">Building something?</p>
|
||||
<p style="font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.6">The developer program opens before the Marketplace does. If you're interested in building a plugin, get in touch early - early developers shape the API.</p>
|
||||
</div>
|
||||
<button onclick="document.getElementById('developer-interest').style.display='block';document.getElementById('developer-interest').scrollIntoView({behavior:'smooth',block:'start'});this.style.display='none';" class="btn-ghost" style="white-space:nowrap;flex-shrink:0">Developer interest →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Developer interest form — hidden until button click -->
|
||||
<div id="developer-interest" class="container" style="display:none;margin-top:4rem;padding-top:4rem;border-top:1px solid rgba(0,82,160,.10)">
|
||||
<div style="max-width:42rem">
|
||||
<p class="label" style="margin-bottom:0.75rem;color:var(--navy-85)">Developer Program</p>
|
||||
<h3 style="font-family:var(--display);font-size:1.75rem;font-weight:400;color:var(--t1);letter-spacing:-0.01em;margin-bottom:1rem;line-height:1.2">Get early access</h3>
|
||||
<p style="font-family:var(--body);font-weight:300;font-size:0.9rem;color:var(--t2);line-height:1.75;margin-bottom:2.5rem">The developer program opens before the Marketplace does. Early developers shape the plugin API. Tell me what you want to build.</p>
|
||||
<form id="dev-form" class="dev-form-grid">
|
||||
<div class="dev-field">
|
||||
<label for="dev-name" class="dev-label">Name</label>
|
||||
<input id="dev-name" type="text" required placeholder="Your name" class="dev-input">
|
||||
</div>
|
||||
<div class="dev-field">
|
||||
<label for="dev-email" class="dev-label">Email</label>
|
||||
<input id="dev-email" type="email" required placeholder="you@example.com" class="dev-input">
|
||||
</div>
|
||||
<div class="dev-field dev-field-full">
|
||||
<label for="dev-idea" class="dev-label">What do you want to build?</label>
|
||||
<textarea id="dev-idea" required rows="5" placeholder="Tell me about the plugin or integration you have in mind..." class="dev-input dev-textarea"></textarea>
|
||||
</div>
|
||||
<div class="dev-field-full">
|
||||
<button type="submit" class="btn-primary">Send interest →</button>
|
||||
<p id="dev-msg" style="font-family:var(--body);font-size:0.8rem;color:var(--t3);margin-top:0.75rem;display:none"></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/marketplace.js" defer></script>
|
||||
|
||||
<style>
|
||||
#marketplace { padding: 6rem 0; }
|
||||
fn marketplace_style() -> String {
|
||||
let css: String = "#marketplace { padding: 6rem 0; }
|
||||
.marketplace-header { margin-bottom: 4rem; }
|
||||
.marketplace-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
|
||||
.marketplace-grid {
|
||||
@@ -187,8 +166,6 @@ fn marketplace() -> String {
|
||||
background: rgba(0,82,160,.02);
|
||||
}
|
||||
@media (max-width: 640px) { .marketplace-cta-inner { flex-direction: column; align-items: flex-start; } }
|
||||
|
||||
/* Developer interest form */
|
||||
.dev-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -225,8 +202,64 @@ fn marketplace() -> String {
|
||||
border-color: var(--navy);
|
||||
box-shadow: 0 0 0 3px rgba(0,82,160,.08);
|
||||
}
|
||||
.dev-textarea { resize: vertical; min-height: 120px; }
|
||||
</style>
|
||||
|
||||
</section>
|
||||
.dev-textarea { resize: vertical; min-height: 120px; }"
|
||||
"<style>" + css + "</style>"
|
||||
}
|
||||
|
||||
fn marketplace() -> String {
|
||||
let header: String = el_div(
|
||||
"class=\"marketplace-header\"",
|
||||
el_div(
|
||||
"class=\"marketplace-label-row reveal\"",
|
||||
el_div("class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0\"", "") +
|
||||
el_span("class=\"label\" style=\"color:var(--navy-85)\"", "Marketplace") +
|
||||
el_div("style=\"margin-left:1rem;background:rgba(0,82,160,.1);color:var(--navy);font-family:var(--body);font-size:0.65rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:0.25rem 0.75rem;border-radius:2px\"", "Coming soon")
|
||||
) +
|
||||
el_h2(
|
||||
"class=\"display-lg reveal\" style=\"transition-delay:80ms;max-width:38rem\"",
|
||||
"Extend Neuron." + el_span("class=\"gold\" style=\"display:block\"", "Build for it.")
|
||||
) +
|
||||
el_p("class=\"reveal\" style=\"transition-delay:160ms;font-weight:300;font-size:.9375rem;color:var(--t2);line-height:1.75;max-width:36rem;margin-top:1.25rem\"",
|
||||
"Neuron does one thing exceptionally well: it knows you. The Marketplace extends what it can do with that knowledge - connecting it to your tools, your workflows, and capabilities built by people who understand your domain better than any general-purpose AI ever will."
|
||||
)
|
||||
)
|
||||
|
||||
let cta: String = el_div(
|
||||
"class=\"marketplace-cta reveal\" style=\"transition-delay:400ms\"",
|
||||
el_div(
|
||||
"class=\"marketplace-cta-inner\"",
|
||||
el_div(
|
||||
"",
|
||||
el_p("style=\"font-family:var(--body);font-weight:500;font-size:1rem;color:var(--t1);margin-bottom:0.5rem\"", "Building something?") +
|
||||
el_p("style=\"font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.6\"",
|
||||
"The developer program opens before the Marketplace does. If you're interested in building a plugin, get in touch early - early developers shape the API."
|
||||
)
|
||||
) +
|
||||
el_button(
|
||||
"onclick=\"document.getElementById('developer-interest').style.display='block';document.getElementById('developer-interest').scrollIntoView({behavior:'smooth',block:'start'});this.style.display='none';\" class=\"btn-ghost\" style=\"white-space:nowrap;flex-shrink:0\"",
|
||||
"Developer interest →"
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
let dev_section: String = el_div(
|
||||
"id=\"developer-interest\" class=\"container\" style=\"display:none;margin-top:4rem;padding-top:4rem;border-top:1px solid rgba(0,82,160,.10)\"",
|
||||
el_div(
|
||||
"style=\"max-width:42rem\"",
|
||||
el_p("class=\"label\" style=\"margin-bottom:0.75rem;color:var(--navy-85)\"", "Developer Program") +
|
||||
el_h3("style=\"font-family:var(--display);font-size:1.75rem;font-weight:400;color:var(--t1);letter-spacing:-0.01em;margin-bottom:1rem;line-height:1.2\"", "Get early access") +
|
||||
el_p("style=\"font-family:var(--body);font-weight:300;font-size:0.9rem;color:var(--t2);line-height:1.75;margin-bottom:2.5rem\"",
|
||||
"The developer program opens before the Marketplace does. Early developers shape the plugin API. Tell me what you want to build."
|
||||
) +
|
||||
marketplace_dev_form()
|
||||
)
|
||||
)
|
||||
|
||||
el_section(
|
||||
"id=\"marketplace\" aria-label=\"Neuron Marketplace\"",
|
||||
el_div("class=\"container\"", header + marketplace_cards() + marketplace_categories() + cta) +
|
||||
dev_section +
|
||||
el_script_src("/js/marketplace.js", true) +
|
||||
marketplace_style()
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user