neuron-technologies/neuron-web
3
0
Fork 0
Code Issues 2 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: convert web El source to native HTML template syntax

Browse Source 
Replace all return "..." HTML string literals with native El templates —
removes all \" escapes, converts + interpolations to {expr}/{raw(expr)},
and replaces conditional string concatenation with {#if}/{#else}/{/if}.
No functional changes; output is identical.
This commit is contained in:
Will Anderson
2026-05-05 05:18:01 -05:00
parent 1127dcd278
commit 5cb13d67f7
24 changed files with 1443 additions and 1494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gallery.el
+70 -70
View File
@@ -65,17 +65,17 @@ fn gallery_page(cards_json: String, supabase_url: String, supabase_anon_key: Str
"<div style=\"grid-column:1/-1;padding:4rem 0;text-align:center\"><p class=\"label\" style=\"margin-bottom:1rem\">Nothing yet</p><p style=\"font-family:var(--body);font-weight:300;color:var(--t2);line-height:1.7\">Nothing shared yet.</p></div>"
} else { "" }
return "<!DOCTYPE html>
<html lang=\"en\">
return <!DOCTYPE html>
<html lang="en">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Things Neuron Said</title>
<meta name=\"description\" content=\"Real conversations with Neuron, voted up by users.\">
<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/assets/favicon-32.png\">
<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
<link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">
<meta name="description" content="Real conversations with Neuron, voted up by users.">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
@@ -120,9 +120,9 @@ body::before {
.nav-cta:hover { background: #0078D4; }
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px 4px; z-index: 101; -webkit-tap-highlight-color: transparent; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--t1); border-radius: 1px; transition: transform 280ms ease, opacity 200ms ease; transform-origin: center; }
.nav-hamburger[aria-expanded=\"true\"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded=\"true\"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded=\"true\"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile { display: none; position: absolute; top: 4rem; left: 0; right: 0; background: rgba(250,250,248,.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: .5rem 0 1.5rem; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.nav-mobile.open { display: flex; }
.nav-mobile-link { display: block; padding: .875rem 2rem; font-family: var(--body); font-size: .75rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--t2); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.05); transition: color 150ms, background 150ms; }
@@ -192,90 +192,90 @@ body::before {
</head>
<body>
<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>
<div class=\"nav-links\">
<a href=\"/#how-it-works\" class=\"nav-link\">How it works</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>
<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>
<div class="nav-links">
<a href="/#how-it-works" class="nav-link">How it works</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=\"/#pricing\" class=\"nav-link\">Pricing</a>
<a href=\"/#marketplace\" class=\"nav-link\">Marketplace</a>
<a href=\"/#enterprise\" class=\"nav-link\">Enterprise</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>
<a href="/#pricing" class="nav-link">Pricing</a>
<a href="/#marketplace" class="nav-link">Marketplace</a>
<a href="/#enterprise" class="nav-link">Enterprise</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>
<button class=\"nav-hamburger\" id=\"nav-hamburger\" aria-label=\"Open navigation\" aria-expanded=\"false\" aria-controls=\"nav-mobile\">
<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>
<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=\"/#mission\" class=\"nav-mobile-link\">Mission</a>
<a href=\"/#safety\" class=\"nav-mobile-link\" style=\"padding-left:1.75rem;font-size:.8rem;color:var(--t3)\">- Safety</a>
<a href=\"/#environmental\" class=\"nav-mobile-link\" style=\"padding-left:1.75rem;font-size:.8rem;color:var(--t3)\">- Environment</a>
<a href=\"/#pricing\" class=\"nav-mobile-link\">Pricing</a>
<a href=\"/#enterprise\" class=\"nav-mobile-link\">Enterprise</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 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="/#mission" class="nav-mobile-link">Mission</a>
<a href="/#safety" class="nav-mobile-link" style="padding-left:1.75rem;font-size:.8rem;color:var(--t3)">- Safety</a>
<a href="/#environmental" class="nav-mobile-link" style="padding-left:1.75rem;font-size:.8rem;color:var(--t3)">- Environment</a>
<a href="/#pricing" class="nav-mobile-link">Pricing</a>
<a href="/#enterprise" class="nav-mobile-link">Enterprise</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>
</nav>
<div class=\"gallery-wrap\">
<div class=\"gallery-header\">
<p class=\"label\" style=\"margin-bottom:1rem\">Things Neuron Said</p>
<h1 class=\"display-lg\" style=\"margin-bottom:1rem\">Real conversations.<br>No curation.</h1>
<p style=\"font-family:var(--body);font-weight:300;font-size:.9375rem;color:var(--t2);line-height:1.75;max-width:36rem\">
<div class="gallery-wrap">
<div class="gallery-header">
<p class="label" style="margin-bottom:1rem">Things Neuron Said</p>
<h1 class="display-lg" style="margin-bottom:1rem">Real conversations.<br>No curation.</h1>
<p style="font-family:var(--body);font-weight:300;font-size:.9375rem;color:var(--t2);line-height:1.75;max-width:36rem">
People chatted with Neuron and shared the exchanges that mattered. Voted up by readers. The best ones rise.
</p>
</div>
<div class=\"gallery-controls\">
<input type=\"search\" id=\"gal-search\" class=\"gallery-search\" placeholder=\"Search conversations...\" autocomplete=\"off\">
<div style=\"display:flex;gap:.5rem;flex-shrink:0\">
<button class=\"sort-btn active\" id=\"sort-top\" onclick=\"setSort('top',this)\">Top</button>
<button class=\"sort-btn\" id=\"sort-new\" onclick=\"setSort('new',this)\">Newest</button>
<div class="gallery-controls">
<input type="search" id="gal-search" class="gallery-search" placeholder="Search conversations..." autocomplete="off">
<div style="display:flex;gap:.5rem;flex-shrink:0">
<button class="sort-btn active" id="sort-top" onclick="setSort('top',this)">Top</button>
<button class="sort-btn" id="sort-new" onclick="setSort('new',this)">Newest</button>
</div>
</div>
<div class=\"gallery-grid\" id=\"gallery-grid\">" + cards_html + empty_html + "</div>
<div id=\"no-results\" style=\"display:none;padding:3rem 0;text-align:center\">
<p style=\"font-family:var(--body);font-weight:300;color:var(--t3)\">No conversations match that search.</p>
<div class="gallery-grid" id="gallery-grid">{raw(cards_html)}{raw(empty_html)}</div>
<div id="no-results" style="display:none;padding:3rem 0;text-align:center">
<p style="font-family:var(--body);font-weight:300;color:var(--t3)">No conversations match that search.</p>
</div>
<div style=\"margin-top:3rem\">
<a href=\"/\" class=\"btn-ghost\">&#8592; Back to site</a>
<div style="margin-top:3rem">
<a href="/" class="btn-ghost">&#8592; Back to site</a>
</div>
</div>
<!-- Magic-link sign-in modal -->
<div class=\"signin-modal\" id=\"signin-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"signin-title\">
<div class=\"signin-modal-card\">
<h2 id=\"signin-title\">Sign in to vote</h2>
<div class="signin-modal" id="signin-modal" role="dialog" aria-modal="true" aria-labelledby="signin-title">
<div class="signin-modal-card">
<h2 id="signin-title">Sign in to vote</h2>
<p>We will email you a sign-in link. No password needed.</p>
<input type=\"email\" id=\"signin-email\" placeholder=\"your@email.com\" autocomplete=\"email\">
<div class=\"signin-modal-actions\">
<button type=\"button\" class=\"signin-modal-cancel\" id=\"signin-cancel\">Cancel</button>
<button type=\"button\" class=\"btn-primary\" id=\"signin-send\">Send link</button>
<input type="email" id="signin-email" placeholder="your@email.com" autocomplete="email">
<div class="signin-modal-actions">
<button type="button" class="signin-modal-cancel" id="signin-cancel">Cancel</button>
<button type="button" class="btn-primary" id="signin-send">Send link</button>
</div>
<p class=\"signin-modal-msg\" id=\"signin-msg\"></p>
<p class="signin-modal-msg" id="signin-msg"></p>
</div>
</div>
<script src=\"https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js\"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
<script>
window.NEURON_CFG=window.NEURON_CFG||{};
window.NEURON_CFG.supabase_url=\"" + supabase_url + "\";
window.NEURON_CFG.supabase_anon_key=\"" + supabase_anon_key + "\";
window.NEURON_CFG.supabase_url="{supabase_url}";
window.NEURON_CFG.supabase_anon_key="{supabase_anon_key}";
</script>
<script src=\"/js/gallery.js\" defer></script>
<script src="/js/gallery.js" defer></script>
</body>
</html>"
</html>
}