summaryrefslogtreecommitdiff
path: root/internal/generator
diff options
context:
space:
mode:
authorPaul Buetow <paul@buetow.org>2026-04-10 10:23:20 +0300
committerPaul Buetow <paul@buetow.org>2026-04-10 10:23:20 +0300
commitf40fee44e8f256328ca1419863b5441123a1014e (patch)
treeb3a5eabc0b8ac0801240544392edaadf5a6d8ac4 /internal/generator
parentbc45b7af3bc93ccd3e4359d29e93417d0af407e1 (diff)
Release v0.1.0v0.1.0
Splash: skip via ?splash=0 on pagination to index; frosted panel and vignette for readable copy; brighter hint/tag colors. Pagination links only at bottom of each page. Tests updated for prev href to index. Made-with: Cursor
Diffstat (limited to 'internal/generator')
-rw-r--r--internal/generator/doc.go3
-rw-r--r--internal/generator/generator.go11
-rw-r--r--internal/generator/generator_test.go4
-rw-r--r--internal/generator/shared.go139
-rw-r--r--internal/generator/theme_aurora.go59
-rw-r--r--internal/generator/theme_brutalist.go49
-rw-r--r--internal/generator/theme_glass.go68
-rw-r--r--internal/generator/theme_matrix.go61
-rw-r--r--internal/generator/theme_minimal.go63
-rw-r--r--internal/generator/theme_neon.go67
-rw-r--r--internal/generator/theme_ocean.go57
-rw-r--r--internal/generator/theme_paper.go60
-rw-r--r--internal/generator/theme_retro.go54
-rw-r--r--internal/generator/theme_synthwave.go72
-rw-r--r--internal/generator/theme_terminal.go48
15 files changed, 782 insertions, 33 deletions
diff --git a/internal/generator/doc.go b/internal/generator/doc.go
index 55db6cb..b22ede6 100644
--- a/internal/generator/doc.go
+++ b/internal/generator/doc.go
@@ -9,7 +9,8 @@
// - themes.go — Theme registry (name → template string) and getTheme /
// ListThemes for the CLI.
// - theme_*.go — One file per visual theme: full-page HTML that invokes
-// {{template "navhints" .}}, {{template "navmodal" .}}, {{template "navscript" .}}.
+// {{template "splashGate"}}, {{template "navhints" .}}, {{template "navmodal" .}},
+// {{template "navscript" .}}.
// - shared.go — navDefs: shared {{define}} blocks merged at parse time with
// the chosen theme so a single html/template parse sees every name.
// - templates.go — Short pointer: where templates and registry live.
diff --git a/internal/generator/generator.go b/internal/generator/generator.go
index 9fed673..e880ba3 100644
--- a/internal/generator/generator.go
+++ b/internal/generator/generator.go
@@ -114,6 +114,11 @@ func pageFilename(index int) string {
return fmt.Sprintf("page%d.html", index+1)
}
+// indexPageNavURL is the href for pagination links to the first page. splash=0
+// is read by splashGate so the splash does not run (referrer is unreliable for
+// keyboard / programmatic navigation from page2.html → index.html).
+const indexPageNavURL = "index.html?splash=0"
+
// writePage renders one HTML page and writes it to cfg.OutputDir.
func writePage(tmpl *template.Template, posts []*post.Post, pageIndex, totalPages int, cfg *config.Config) error {
data := buildPageData(posts, pageIndex, totalPages)
@@ -148,7 +153,11 @@ func buildPageData(posts []*post.Post, pageIndex, totalPages int) pageData {
// "Prev" means newer — page index decreases.
if pageIndex > 0 {
- prevPage = pageFilename(pageIndex - 1)
+ if pageIndex == 1 {
+ prevPage = indexPageNavURL
+ } else {
+ prevPage = pageFilename(pageIndex - 1)
+ }
}
// "Next" means older — page index increases.
diff --git a/internal/generator/generator_test.go b/internal/generator/generator_test.go
index ba0964e..cfab15e 100644
--- a/internal/generator/generator_test.go
+++ b/internal/generator/generator_test.go
@@ -130,9 +130,9 @@ func TestBuildPageData_navLinks(t *testing.T) {
name: "middle",
pageIndex: 1,
totalPages: 3,
- wantPrev: "index.html",
+ wantPrev: "index.html?splash=0",
wantNext: "page3.html",
- wantPrevJSON: `"index.html"`,
+ wantPrevJSON: `"index.html?splash=0"`,
wantNextJSON: `"page3.html"`,
wantPostsCount: 1,
},
diff --git a/internal/generator/shared.go b/internal/generator/shared.go
index a34c5a5..583851c 100644
--- a/internal/generator/shared.go
+++ b/internal/generator/shared.go
@@ -1,15 +1,48 @@
package generator
// navDefs is appended to every theme template when parsing.
-// It defines three named sub-templates shared across all themes:
+// It defines named sub-templates shared across all themes:
+// - "splashGate" — synchronous script: first child of <body>; sets html.sno-splash-skip when
+// splash should not run (?splash=0, not index.html, or Referer from same-site index/pageN).
// - "navhints" — keyboard shortcut hint bar HTML
// - "navmodal" — full-screen expanded-post modal HTML + image-sizing CSS
// - "navscript" — keyboard navigation JavaScript with distinct sounds per action
//
-// Each theme calls {{template "navhints" .}}, {{template "navmodal" .}}, and
-// {{template "navscript" .}} at the appropriate points in its HTML.
+// Each theme calls {{template "splashGate"}}, {{template "navhints" .}}, {{template "navmodal" .}},
+// and {{template "navscript" .}} at the appropriate points in its HTML.
// All theme-specific CSS lives in each theme file so themes stay self-contained.
const navDefs = `
+{{define "splashGate"}}
+<script>
+(function(){
+ try {
+ var sp = new URLSearchParams(location.search);
+ if (sp.get('splash') === '0') {
+ document.documentElement.classList.add('sno-splash-skip');
+ return;
+ }
+ } catch (_) {}
+ var parts = location.pathname.split('/').filter(function(s) { return s.length; });
+ var seg = (parts.length ? parts[parts.length - 1] : '').toLowerCase();
+ var onIndex = (!seg || seg === 'index.html');
+ var ref = document.referrer;
+ function refIsSameSiteBlogPage(url) {
+ if (!url) return false;
+ try {
+ var ru = new URL(url), cu = new URL(location.href);
+ if (ru.origin !== cu.origin) return false;
+ var rp = ru.pathname.split('/').filter(function(s) { return s.length; });
+ var rs = (rp.length ? rp[rp.length - 1] : '').toLowerCase();
+ if (rs === 'index.html' || rs === '') return true;
+ if (/^page\d+\.html$/.test(rs)) return true;
+ return false;
+ } catch (_) { return false; }
+ }
+ if (!onIndex || refIsSameSiteBlogPage(ref)) document.documentElement.classList.add('sno-splash-skip');
+})();
+</script>
+{{end}}
+
{{define "navhints"}}
<div class="nav-hints" aria-label="keyboard shortcuts">
<span><kbd>j</kbd><kbd>k</kbd> or <kbd>↑</kbd><kbd>↓</kbd> select post</span>
@@ -29,6 +62,37 @@ const navDefs = `
.post-modal { background:rgba(0,0,0,0.55) !important; backdrop-filter:blur(6px) !important; }
/* Content area max-width across all themes */
.overlay { max-width:1200px; margin-left:auto; margin-right:auto; }
+/* Pagination: newer + older side by side at the bottom of the feed */
+.page-nav-dual { display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
+ gap:clamp(16px,4vw,48px); }
+/* Host note under the site subtitle (all themes) */
+.logo-host { font-size:0.65rem; opacity:0.55; margin-top:4px; letter-spacing:0.3px; line-height:1.3; }
+/* Atom feed link in header (paired with transmit in .nav) */
+.nav { display:flex; align-items:center; gap:clamp(10px,2.2vw,20px); flex-wrap:wrap; justify-content:flex-end; }
+a.header-feed-link { font-size:0.8rem; text-decoration:none; opacity:0.82; letter-spacing:0.04em; white-space:nowrap; }
+a.header-feed-link:hover { opacity:1; text-decoration:underline; }
+/* Full-viewport splash (theme-specific colours/animation on each .splash-THEMENAME) */
+#splash-overlay { position:fixed; inset:0; z-index:2000; display:flex; flex-direction:column; align-items:center;
+ justify-content:center; text-align:center; padding:max(16px,4vw); box-sizing:border-box; cursor:pointer;
+ transition:opacity .55s ease, visibility .55s ease, transform .55s ease; }
+#splash-overlay.splash--dismissed { opacity:0 !important; visibility:hidden !important;
+ pointer-events:none !important; transform:scale(1.02); }
+#splash-overlay:focus { outline:2px solid rgba(255,255,255,0.35); outline-offset:4px; }
+/* Vignette over WebGL so 3D motion does not overpower the edges */
+#splash-overlay::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
+ background: radial-gradient(ellipse 92% 82% at 50% 42%, rgba(0,0,0,0) 32%, rgba(0,0,0,0.26) 68%, rgba(0,0,0,0.48) 100%); }
+.splash-title { font-weight:700; letter-spacing:0.06em; line-height:1.15; }
+.splash-tag { margin-top:0.35rem; font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase; }
+.splash-hint { margin-top:1.25rem; font-size:0.72rem; letter-spacing:0.12em; }
+#splash-overlay .splash-gl-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
+/* Frosted panel so title/tag/hint stay readable over busy shaders */
+#splash-overlay .splash-inner { position:relative; z-index:2; max-width:min(520px,92vw);
+ padding: clamp(1.15rem, 3.2vw, 1.75rem) clamp(1.3rem, 3.8vw, 1.95rem); border-radius:14px;
+ background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
+ box-shadow: 0 14px 44px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
+#splash-overlay.splash-brutalist .splash-inner.splash-frame {
+ padding: clamp(1.4rem, 4.5vw, 2.25rem) clamp(1.1rem, 3.5vw, 1.9rem); background: rgba(0, 0, 0, 0.78); }
+html.sno-splash-skip #splash-overlay { display:none !important; visibility:hidden !important; pointer-events:none !important; }
</style>
<div class="post-modal" id="post-modal">
<div class="modal-inner">
@@ -40,6 +104,67 @@ const navDefs = `
{{define "navscript"}}
<script>
+ (function splashSetup() {
+ var el = document.getElementById('splash-overlay');
+ if (!el) return;
+ if (document.documentElement.classList.contains('sno-splash-skip')) {
+ if (typeof window._snonuxSplashWebGLCleanup === 'function') {
+ try { window._snonuxSplashWebGLCleanup(); } catch (_) {}
+ window._snonuxSplashWebGLCleanup = null;
+ }
+ el.remove();
+ return;
+ }
+ var splashAudioCtx = null;
+ var splashChimePlayed = false;
+ // Soft major arpeggio (G4 → C5 → E5 → G5); works once autopolicy allows audio.
+ function playSplashChime() {
+ if (splashChimePlayed) return;
+ try {
+ if (!splashAudioCtx) {
+ splashAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
+ }
+ var ctx = splashAudioCtx;
+ function ring() {
+ splashChimePlayed = true;
+ var now = ctx.currentTime;
+ var freqs = [392, 523.25, 659.25, 783.99];
+ var i, osc, g, t0;
+ for (i = 0; i < freqs.length; i++) {
+ osc = ctx.createOscillator();
+ g = ctx.createGain();
+ osc.connect(g);
+ g.connect(ctx.destination);
+ osc.type = 'sine';
+ osc.frequency.value = freqs[i];
+ t0 = now + i * 0.075;
+ g.gain.setValueAtTime(0, t0);
+ g.gain.linearRampToValueAtTime(0.1, t0 + 0.028);
+ g.gain.exponentialRampToValueAtTime(0.001, t0 + 0.52);
+ osc.start(t0);
+ osc.stop(t0 + 0.55);
+ }
+ }
+ ctx.resume().then(ring).catch(function() {});
+ } catch (_) {}
+ }
+ playSplashChime();
+ el.addEventListener('pointerdown', function() { playSplashChime(); }, { passive: true });
+ function dismiss() {
+ if (el.classList.contains('splash--dismissed')) return;
+ playSplashChime();
+ if (typeof window._snonuxSplashWebGLCleanup === 'function') {
+ try { window._snonuxSplashWebGLCleanup(); } catch (_) {}
+ window._snonuxSplashWebGLCleanup = null;
+ }
+ el.classList.add('splash--dismissed');
+ setTimeout(function() { if (el.parentNode) el.parentNode.removeChild(el); }, 600);
+ }
+ el.addEventListener('click', function(e) { e.preventDefault(); dismiss(); });
+ window._snonuxDismissSplash = dismiss;
+ el.focus({ preventScroll: true });
+ })();
+
// === KEYBOARD NAVIGATION ===
// j / ArrowDown → next post k / ArrowUp → previous post
// h / ArrowLeft → previous page l / ArrowRight → next page
@@ -121,6 +246,14 @@ const navDefs = `
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+ var splash = document.getElementById('splash-overlay');
+ if (splash && !splash.classList.contains('splash--dismissed')) {
+ if (e.key === 'Enter' || e.key === ' ' || e.key === 'Escape') {
+ e.preventDefault();
+ if (window._snonuxDismissSplash) window._snonuxDismissSplash();
+ }
+ return;
+ }
if (document.getElementById('post-modal').classList.contains('active')) {
if (e.key === 'Escape') { closeModal(); e.preventDefault(); }
return;
diff --git a/internal/generator/theme_aurora.go b/internal/generator/theme_aurora.go
index 4fa85f6..887f936 100644
--- a/internal/generator/theme_aurora.go
+++ b/internal/generator/theme_aurora.go
@@ -29,6 +29,8 @@ const auroraTemplate = `<!DOCTYPE html>
.transmit-btn { border:1px solid var(--teal); color:var(--teal); padding:9px 20px;
border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
.transmit-btn:hover { background:var(--teal); color:var(--navy); }
+ a.header-feed-link { color:var(--green); }
+ a.header-feed-link:hover { color:var(--teal); text-shadow:0 0 8px var(--green); }
.nav-hints { background:rgba(5,13,26,0.6); border-bottom:1px solid rgba(0,255,179,0.15);
color:rgba(224,248,240,0.45); padding:5px 28px; display:flex; gap:18px;
font-size:0.68rem; flex-wrap:wrap; }
@@ -62,9 +64,56 @@ const auroraTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--teal);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ .splash-overlay.splash-aurora {
+ background: linear-gradient(125deg, var(--navy) 0%, #0a1a2e 40%, #0d2840 70%, var(--navy) 100%);
+ background-size: 200% 200%;
+ animation: splashAuroraShift 8s ease infinite;
+ }
+ @keyframes splashAuroraShift { 0%,100%{background-position:0% 40%} 50%{background-position:100% 60%} }
+ .splash-aurora .splash-ribbons {
+ width:min(280px,75vw); height:8px; margin:0 auto 1.25rem; border-radius:4px;
+ background: linear-gradient(90deg, transparent, var(--green), var(--teal), var(--purple), transparent);
+ opacity:0.85; animation: splashRibbonFlow 3s ease-in-out infinite alternate;
+ box-shadow: 0 0 24px var(--green), 0 0 40px var(--purple);
+ }
+ @keyframes splashRibbonFlow { from { transform: scaleX(0.85); opacity:0.65; } to { transform: scaleX(1); opacity:1; } }
+ .splash-aurora .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:#e0f8f0;
+ text-shadow:0 0 20px var(--green); }
+ .splash-aurora .splash-tag { background:linear-gradient(90deg,var(--green),var(--teal));
+ -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
+ .splash-aurora .splash-hint { color:rgba(224,248,240,0.88); }
+ .splash-aurora .splash-inner { text-shadow: 0 2px 18px rgba(0,0,0,0.75); }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-aurora" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-inner">
+ <div class="splash-ribbons" aria-hidden="true"></div>
+ <div class="splash-title">snonux.foo</div>
+ <div class="splash-tag">Aurora uplink</div>
+ <div class="splash-hint">Click or Enter to open the feed</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now(),i,m;
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,80);ca.position.set(0,0.3,9);
+ var cols=[0x00ffb3,0x00cfe8,0xc084fc];
+ for(i=0;i<3;i++){m=new THREE.Mesh(new THREE.TorusKnotGeometry(1.05,0.28,48,6,2,3),new THREE.MeshBasicMaterial({color:cols[i],transparent:true,opacity:0.55,wireframe:i===2}));m.rotation.y=i*2.1;m.userData.o=i;g.add(m);}
+ sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.y=t*0.28;g.children.forEach(function(c,ix){c.rotation.x=Math.sin(t*0.8+c.userData.o)*0.35;});ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -73,15 +122,16 @@ const auroraTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>snonux.foo</h1>
<p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -91,7 +141,12 @@ const auroraTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_brutalist.go b/internal/generator/theme_brutalist.go
index aa0729d..2bb54da 100644
--- a/internal/generator/theme_brutalist.go
+++ b/internal/generator/theme_brutalist.go
@@ -30,6 +30,8 @@ const brutalistTemplate = `<!DOCTYPE html>
border-radius:0; text-decoration:none; font-family:Impact; font-size:1.05rem;
letter-spacing:2px; transition:all 0.1s; }
.transmit-btn:hover { background:var(--red); color:#000; }
+ a.header-feed-link { color:#aaa; font-family:'Courier New',monospace; font-size:0.78rem; }
+ a.header-feed-link:hover { color:var(--red); }
.nav-hints { background:#111; border-bottom:2px solid #333; color:#888;
padding:5px 24px; display:flex; gap:18px; font-family:'Courier New',monospace;
font-size:0.7rem; flex-wrap:wrap; }
@@ -62,9 +64,46 @@ const brutalistTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--red);
font-family:Impact; font-size:1.3rem; cursor:pointer; letter-spacing:2px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .logo-mark{font-size:2rem;} }
+ .splash-overlay.splash-brutalist { background:#000; }
+ .splash-brutalist .splash-frame {
+ border:6px solid #fff; padding:clamp(1.5rem,5vw,2.5rem) clamp(1.25rem,4vw,2rem);
+ box-shadow: 12px 12px 0 var(--red); animation: splashBrutalJolt 3s steps(2,end) infinite;
+ }
+ @keyframes splashBrutalJolt { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2px,-2px); } }
+ .splash-brutalist .splash-title { font-family:Impact,sans-serif; font-size:clamp(1.8rem,6vw,2.8rem); color:#fff; }
+ .splash-brutalist .splash-tag { font-family:'Courier New',monospace; color:var(--red); }
+ .splash-brutalist .splash-hint { font-family:'Courier New',monospace; color:#c8c8c8; }
+ .splash-brutalist .splash-inner { text-shadow: 0 0 12px #000, 0 2px 8px #000; }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-brutalist" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-inner splash-frame">
+ <div class="splash-title">SNONUX.FOO</div>
+ <div class="splash-tag">Brutalist channel</div>
+ <div class="splash-hint">[ CLICK OR ENTER TO TRANSMIT ]</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,80);ca.position.z=8;
+ var b1=new THREE.LineSegments(new THREE.EdgesGeometry(new THREE.BoxGeometry(3.4,2.4,2.4)),new THREE.LineBasicMaterial({color:0xffffff}));
+ var b2=new THREE.LineSegments(new THREE.EdgesGeometry(new THREE.BoxGeometry(2.2,1.6,1.6)),new THREE.LineBasicMaterial({color:0xff2200}));
+ b2.position.set(0.3,0.2,0.5);g.add(b1);g.add(b2);sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.x=t*0.51;g.rotation.y=t*0.73;ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -73,15 +112,16 @@ const brutalistTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>SNONUX.FOO</h1>
<p class="subtitle">MICROBLOG &mdash; <a href="https://foo.zone">FOO.ZONE</a> IS THE REAL BLOG</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">TRANSMIT</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; NEWER</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -91,7 +131,12 @@ const brutalistTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">OLDER &rarr;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; NEWER</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">OLDER &rarr;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_glass.go b/internal/generator/theme_glass.go
index 3fc951b..40e3ee3 100644
--- a/internal/generator/theme_glass.go
+++ b/internal/generator/theme_glass.go
@@ -30,6 +30,8 @@ const cosmosTemplate = `<!DOCTYPE html>
.transmit-btn { border:1px solid var(--gold); color:var(--gold); padding:9px 20px;
border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
.transmit-btn:hover { background:var(--gold); color:var(--bg); }
+ a.header-feed-link { color:var(--blue); }
+ a.header-feed-link:hover { color:var(--gold); }
.nav-hints { background:rgba(2,2,20,0.6); border-bottom:1px solid rgba(255,209,102,0.12);
color:rgba(212,232,255,0.4); padding:5px 28px; display:flex; gap:18px;
font-size:0.68rem; flex-wrap:wrap; }
@@ -62,9 +64,65 @@ const cosmosTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--gold);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ .splash-overlay.splash-cosmos { background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(155,93,229,0.2) 0%, transparent 55%), var(--bg); }
+ .splash-cosmos .splash-stars {
+ position:absolute; inset:0; pointer-events:none; opacity:0.5;
+ background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.9), transparent),
+ radial-gradient(1px 1px at 80% 20%, rgba(255,209,102,0.8), transparent),
+ radial-gradient(1px 1px at 40% 70%, rgba(76,201,240,0.7), transparent),
+ radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.6), transparent);
+ background-size: 100% 100%;
+ animation: splashTwinkle 4s ease-in-out infinite alternate;
+ }
+ @keyframes splashTwinkle { from { opacity:0.35; } to { opacity:0.65; } }
+ .splash-cosmos .splash-inner { position:relative; z-index:1; }
+ .splash-cosmos .splash-orbit {
+ width:72px; height:72px; margin:0 auto 1rem; border:2px solid rgba(255,209,102,0.5);
+ border-radius:50%; animation: splashOrbitSpin 12s linear infinite;
+ box-shadow: 0 0 30px rgba(155,93,229,0.4);
+ }
+ @keyframes splashOrbitSpin { to { transform: rotate(360deg); } }
+ .splash-cosmos .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:#d4e8ff; }
+ .splash-cosmos .splash-tag {
+ background:linear-gradient(90deg,var(--gold),var(--purple));
+ -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
+ .splash-cosmos .splash-hint { color:rgba(212,232,255,0.88); }
+ .splash-cosmos .splash-stars { z-index:1; }
+ .splash-cosmos .splash-inner { text-shadow: 0 2px 20px rgba(0,0,0,0.85); }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-cosmos" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-stars" aria-hidden="true"></div>
+ <div class="splash-inner">
+ <div class="splash-orbit" aria-hidden="true"></div>
+ <div class="splash-title">snonux.foo</div>
+ <div class="splash-tag">Cosmos gate</div>
+ <div class="splash-hint">Engage — click or Enter</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(48,1,0.1,90);ca.position.set(0,0.5,10);
+ var planet=new THREE.Mesh(new THREE.SphereGeometry(1.35,24,24),new THREE.MeshBasicMaterial({color:0xc8853a,transparent:true,opacity:0.92}));
+ var ring=new THREE.Mesh(new THREE.TorusGeometry(2.1,0.05,8,64),new THREE.MeshBasicMaterial({color:0xffd166,transparent:true,opacity:0.85}));
+ ring.rotation.x=Math.PI/2.25;var moon=new THREE.Mesh(new THREE.SphereGeometry(0.35,12,12),new THREE.MeshBasicMaterial({color:0x9b5de5,transparent:true,opacity:0.8}));
+ moon.position.set(2.8,0.6,0.5);g.add(planet);g.add(ring);g.add(moon);sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.y=t*0.22;planet.rotation.y=t*0.35;
+ moon.position.x=2.6*Math.cos(t*0.7);moon.position.z=2.6*Math.sin(t*0.7);ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -73,15 +131,16 @@ const cosmosTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>snonux.foo</h1>
<p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -91,7 +150,12 @@ const cosmosTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_matrix.go b/internal/generator/theme_matrix.go
index 8d35d7c..d964a11 100644
--- a/internal/generator/theme_matrix.go
+++ b/internal/generator/theme_matrix.go
@@ -40,6 +40,8 @@ const matrixTemplate = `<!DOCTYPE html>
text-decoration:none; font-size:0.82rem; letter-spacing:2px;
transition:all 0.1s; }
.transmit-btn:hover { background:var(--g); color:var(--bg); }
+ a.header-feed-link { color:var(--g2); }
+ a.header-feed-link:hover { color:var(--g); text-shadow:0 0 8px var(--g); }
.nav-hints { background:#000; border-bottom:1px solid var(--g3); color:var(--g2);
padding:4px 24px; display:flex; gap:18px; font-size:0.68rem; flex-wrap:wrap; }
.nav-hints kbd { background:transparent; border:1px solid var(--g3); color:var(--g);
@@ -70,9 +72,58 @@ const matrixTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--g2);
font-family:monospace; font-size:0.9rem; cursor:pointer; letter-spacing:2px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:10px 16px;} }
+ .splash-overlay.splash-matrix { background: #000; font-family:'Courier New',monospace; }
+ .splash-matrix .splash-rain {
+ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0.35; z-index:1;
+ font-size:11px; line-height:14px; color:var(--g2); text-align:left; padding:8px;
+ white-space:pre; animation: splashMatrixScroll 16s linear infinite;
+ }
+ @keyframes splashMatrixScroll { to { transform: translateY(-24px); } }
+ .splash-matrix .splash-title {
+ position:relative; z-index:1; font-size:clamp(1.1rem,3.5vw,1.5rem); color:var(--g);
+ text-shadow:0 0 20px var(--g); letter-spacing:0.35em;
+ animation: splashMatrixGlow 1.8s ease-in-out infinite alternate;
+ }
+ @keyframes splashMatrixGlow { from { opacity:0.85; } to { opacity:1; text-shadow:0 0 28px var(--g); } }
+ .splash-matrix .splash-tag { position:relative; z-index:1; color:rgba(0,255,65,0.88); }
+ .splash-matrix .splash-hint { position:relative; z-index:1; color:rgba(0,255,65,0.82); }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-matrix" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-rain" aria-hidden="true">01001110 01000101 01001111
+10101010 11001100 00110011
+01110011 01101110 01101111
+11001010 10100101 01011010</div>
+ <div class="splash-inner">
+ <div class="splash-title">SNONUX.FOO</div>
+ <div class="splash-tag">Follow the signal</div>
+ <div class="splash-hint">wake up — click or enter</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,pts,pos,t0=performance.now(),N=28,i,arr;
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(55,1,0.1,80);ca.position.set(0,0.5,10);
+ arr=new Float32Array(N*3*20);for(i=0;i<arr.length;i+=3){arr[i]=(Math.random()-0.5)*16;arr[i+1]=Math.random()*22;arr[i+2]=(Math.random()-0.5)*8;}
+ var geo=new THREE.BufferGeometry();geo.setAttribute('position',new THREE.BufferAttribute(arr,3));
+ pts=new THREE.Points(geo,new THREE.PointsMaterial({color:0x00ff41,size:0.14,transparent:true,opacity:0.85,blending:THREE.AdditiveBlending,depthWrite:false,sizeAttenuation:true}));
+ sc.add(pts);pos=geo.attributes.position;sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001,j,p;
+ for(j=0;j<pos.count;j++){p=j*3;pos.array[p+1]-=0.045+Math.sin(t+j*0.1)*0.012;if(pos.array[p+1]<-2)pos.array[p+1]=20;}
+ pos.needsUpdate=true;pts.rotation.y=t*0.15;ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -81,15 +132,16 @@ const matrixTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>SNONUX.FOO</h1>
<p class="subtitle">MICROBLOG / <a href="https://foo.zone">FOO.ZONE</a> IS THE REAL BLOG</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">atom.xml</a>
<a href="https://foo.zone/about" class="transmit-btn">TRANSMIT</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&lt;-- NEWER</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -99,7 +151,12 @@ const matrixTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">OLDER --&gt;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&lt;-- NEWER</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">OLDER --&gt;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_minimal.go b/internal/generator/theme_minimal.go
index 00e9a17..4b7de26 100644
--- a/internal/generator/theme_minimal.go
+++ b/internal/generator/theme_minimal.go
@@ -30,6 +30,8 @@ const plasmaTemplate = `<!DOCTYPE html>
.transmit-btn { border:1px solid var(--magenta); color:var(--magenta); padding:9px 20px;
border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
.transmit-btn:hover { background:var(--magenta); color:var(--bg); }
+ a.header-feed-link { color:var(--cyan); }
+ a.header-feed-link:hover { color:var(--magenta); }
.nav-hints { background:rgba(5,0,8,0.65); border-bottom:1px solid rgba(0,240,255,0.12);
color:rgba(232,224,255,0.4); padding:5px 28px; display:flex; gap:18px;
font-size:0.68rem; flex-wrap:wrap; }
@@ -63,9 +65,60 @@ const plasmaTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--cyan);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ .splash-overlay.splash-plasma { background: var(--bg); overflow:hidden; }
+ .splash-plasma .splash-blobs {
+ position:absolute; width:140%; height:140%; left:-20%; top:-20%; pointer-events:none;
+ background:
+ radial-gradient(ellipse at 30% 40%, rgba(0,240,255,0.25) 0%, transparent 45%),
+ radial-gradient(ellipse at 70% 60%, rgba(255,0,224,0.22) 0%, transparent 50%),
+ radial-gradient(ellipse at 50% 80%, rgba(255,238,0,0.12) 0%, transparent 40%);
+ animation: splashPlasmaDrift 10s ease-in-out infinite alternate;
+ filter: blur(2px);
+ }
+ @keyframes splashPlasmaDrift {
+ from { transform: translate(0,0) rotate(0deg); }
+ to { transform: translate(-4%,3%) rotate(8deg); }
+ }
+ .splash-plasma .splash-inner { position:relative; z-index:1; }
+ .splash-plasma .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:#e8e0ff;
+ text-shadow:0 0 24px var(--cyan), 0 0 48px rgba(255,0,224,0.35); }
+ .splash-plasma .splash-tag { color:var(--magenta); letter-spacing:0.18em; }
+ .splash-plasma .splash-hint { color:rgba(232,224,255,0.86); }
+ .splash-plasma .splash-blobs { z-index:1; }
+ .splash-plasma .splash-inner { text-shadow: 0 2px 22px rgba(0,0,0,0.9); }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-plasma" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-blobs" aria-hidden="true"></div>
+ <div class="splash-inner">
+ <div class="splash-title">snonux.foo</div>
+ <div class="splash-tag">Plasma lock</div>
+ <div class="splash-hint">Merge — click or Enter</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now(),spec=[[0x00f0ff,1.45,0,0,0],[0xff00e0,1.05,1.2,0.4,0],[0xffee00,0.75,-1.1,-0.3,0]];
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,60);ca.position.z=6.5;
+ spec.forEach(function(s){var m=new THREE.Mesh(new THREE.SphereGeometry(s[1],20,20),new THREE.MeshBasicMaterial({color:s[0],transparent:true,opacity:0.42,blending:THREE.AdditiveBlending,depthWrite:false}));
+ m.position.set(s[2],s[3],s[4]);m.userData.ph=s;g.add(m);});
+ sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;
+ g.children.forEach(function(c,ix){var ph=c.userData.ph;c.position.x=ph[2]+Math.sin(t*0.9+ix)*0.35;c.position.y=ph[3]+Math.cos(t*0.7+ix*1.3)*0.28;c.scale.setScalar(1+Math.sin(t*1.5+ix)*0.06);});
+ ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -74,15 +127,16 @@ const plasmaTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>snonux.foo</h1>
<p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -92,7 +146,12 @@ const plasmaTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_neon.go b/internal/generator/theme_neon.go
index 3197d6f..eccf558 100644
--- a/internal/generator/theme_neon.go
+++ b/internal/generator/theme_neon.go
@@ -27,7 +27,8 @@ const neonTemplate = `<!DOCTYPE html>
.logo-title .subtitle { font-size:0.68rem; opacity:0.6; letter-spacing:1px; margin-top:2px; }
.logo-title .subtitle a { color:var(--neon-cyan); text-decoration:none; }
.logo-title .subtitle a:hover { text-shadow:0 0 8px var(--neon-cyan); }
- .nav { display:flex; gap:16px; align-items:center; }
+ .nav { gap:16px; }
+ a.header-feed-link { color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,245,255,0.35); }
.transmit-btn { background:transparent; border:3px solid var(--neon-yellow); color:var(--neon-yellow);
padding:12px 28px; border-radius:9999px; font-weight:600; letter-spacing:1px;
display:flex; align-items:center; gap:10px; box-shadow:0 0 30px var(--neon-yellow);
@@ -80,9 +81,61 @@ const neonTemplate = `<!DOCTYPE html>
header { padding:14px 20px; } .transmit-btn { padding:9px 16px; font-size:0.8rem; }
.nav-hints { display:none; } .modal-inner { padding:24px 16px; }
}
+ .splash-overlay.splash-neon {
+ background: radial-gradient(ellipse 120% 80% at 50% 35%, rgba(0,245,255,0.14) 0%, transparent 55%),
+ radial-gradient(ellipse 90% 55% at 75% 85%, rgba(255,0,204,0.12) 0%, transparent 50%),
+ #0b001a;
+ }
+ .splash-neon .splash-deco {
+ width:100px; height:100px; margin:0 auto 1.25rem; border-radius:50%;
+ border:3px solid var(--neon-cyan); box-shadow:0 0 36px var(--neon-cyan), inset 0 0 26px rgba(0,245,255,0.15);
+ animation: splashNeonSpin 5s linear infinite;
+ }
+ @keyframes splashNeonSpin { to { transform: rotate(360deg); } }
+ .splash-neon .splash-title {
+ font-size: clamp(1.5rem, 5vw, 2.35rem);
+ animation: splashNeonPulse 2s ease-in-out infinite alternate;
+ }
+ @keyframes splashNeonPulse {
+ from { text-shadow: 0 0 12px var(--neon-cyan), 0 0 24px rgba(255,0,204,0.4); }
+ to { text-shadow: 0 0 26px var(--neon-cyan), 0 0 48px var(--neon-magenta); }
+ }
+ .splash-neon .splash-tag { color: var(--neon-yellow); }
+ .splash-neon .splash-hint { color: rgba(224,248,255,0.9); font-family: 'Orbitron', sans-serif; }
+ .splash-neon .splash-inner { text-shadow: 0 2px 24px rgba(0,0,0,0.85), 0 0 40px rgba(11,0,26,0.9); }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-neon" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-inner">
+ <div class="splash-deco" aria-hidden="true"></div>
+ <div class="splash-title">snonux.foo</div>
+ <div class="splash-tag">Neon Nexus</div>
+ <div class="splash-hint">Click or Enter &mdash; establish link</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren){ren.dispose();}ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});
+ ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(52,1,0.1,100);ca.position.set(0,0.4,9);
+ var cols=[0x00f5ff,0xff00cc,0xffe700],i,m;
+ for(i=0;i<3;i++){m=new THREE.Mesh(new THREE.TorusGeometry(1.55+i*0.48,0.055,8,48),new THREE.MeshBasicMaterial({color:cols[i],transparent:true,opacity:0.92}));m.rotation.x=Math.PI/2;m.userData.sp=0.01+i*0.004;g.add(m);}
+ g.add(new THREE.Mesh(new THREE.SphereGeometry(0.52,20,20),new THREE.MeshBasicMaterial({color:0xffe700,transparent:true,opacity:0.95})));
+ sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.y=t*0.42;g.rotation.x=Math.sin(t*0.65)*0.12;g.children.forEach(function(c){if(c.userData.sp)c.rotation.z+=c.userData.sp;});ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -123,9 +176,11 @@ const neonTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>snonux.foo</h1>
<p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">
<i class="fa-solid fa-feather-pointed"></i> TRANSMIT TO NEXUS
</a>
@@ -133,9 +188,6 @@ const neonTemplate = `<!DOCTYPE html>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}
- <div class="page-nav"><a href="{{.PrevPage}}">&larr; NEWER TRANSMISSIONS</a></div>
- {{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -145,8 +197,11 @@ const neonTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}
- <div class="page-nav"><a href="{{.NextPage}}">OLDER TRANSMISSIONS &rarr;</a></div>
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; NEWER TRANSMISSIONS</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">OLDER TRANSMISSIONS &rarr;</a>{{end}}
+ </div>
{{end}}
</div>
</div>
diff --git a/internal/generator/theme_ocean.go b/internal/generator/theme_ocean.go
index af4c80b..76469e5 100644
--- a/internal/generator/theme_ocean.go
+++ b/internal/generator/theme_ocean.go
@@ -28,6 +28,8 @@ const oceanTemplate = `<!DOCTYPE html>
.transmit-btn { border:1px solid var(--teal); color:var(--teal); padding:9px 20px;
border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
.transmit-btn:hover { background:var(--teal); color:var(--navy); }
+ a.header-feed-link { color:var(--aqua); }
+ a.header-feed-link:hover { color:var(--foam); }
.nav-hints { background:rgba(3,4,94,0.65); border-bottom:1px solid rgba(0,180,216,0.18);
color:rgba(202,240,248,0.45); padding:5px 28px; display:flex; gap:18px;
font-size:0.68rem; flex-wrap:wrap; }
@@ -60,9 +62,54 @@ const oceanTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--teal);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ .splash-overlay.splash-ocean {
+ background: linear-gradient(180deg, var(--navy) 0%, var(--deep) 45%, #001a3d 100%);
+ }
+ .splash-ocean .splash-wave {
+ width:min(320px,88vw); height:14px; margin:0 auto 1.2rem; border-radius:50%;
+ background: radial-gradient(ellipse at 50% 0%, var(--aqua), transparent 70%);
+ opacity:0.7; animation: splashWaveBob 2.8s ease-in-out infinite;
+ box-shadow: 0 8px 40px rgba(0,180,216,0.35);
+ }
+ @keyframes splashWaveBob { 0%,100%{ transform: translateY(0) scaleX(1); } 50%{ transform: translateY(-6px) scaleX(1.05); } }
+ .splash-ocean .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:var(--foam);
+ text-shadow:0 0 18px var(--teal); }
+ .splash-ocean .splash-tag { color:var(--aqua); letter-spacing:0.2em; }
+ .splash-ocean .splash-hint { color:rgba(202,240,248,0.88); }
+ .splash-ocean .splash-inner { text-shadow: 0 2px 16px rgba(3,4,94,0.9); }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-ocean" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-inner">
+ <div class="splash-wave" aria-hidden="true"></div>
+ <div class="splash-title">snonux.foo</div>
+ <div class="splash-tag">Deep channel</div>
+ <div class="splash-hint">Surface — click or Enter</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now(),i;
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,70);ca.position.set(0,0.2,9);
+ for(i=0;i<5;i++){var b=new THREE.Mesh(new THREE.SphereGeometry(0.25+Math.random()*0.35,12,12),new THREE.MeshBasicMaterial({color:0x48cae4,transparent:true,opacity:0.65}));
+ b.position.set((Math.random()-0.5)*7,(Math.random()-0.5)*4,(Math.random()-0.5)*3);b.userData.dy=0.02+Math.random()*0.03;b.userData.x=b.position.x;b.userData.y0=b.position.y;g.add(b);}
+ var jelly=new THREE.Mesh(new THREE.SphereGeometry(1.1,16,16),new THREE.MeshBasicMaterial({color:0x00b4d8,transparent:true,opacity:0.35,wireframe:true}));
+ g.add(jelly);sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;jelly.rotation.y=t*0.4;
+ g.children.forEach(function(c){if(c.userData.dy){c.position.y+=Math.sin(t*2+c.userData.x)*0.008;c.position.x=c.userData.x+Math.sin(t+c.userData.y0)*0.15;}});ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -71,15 +118,16 @@ const oceanTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>snonux.foo</h1>
<p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -89,7 +137,12 @@ const oceanTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_paper.go b/internal/generator/theme_paper.go
index 9ed40a2..02b0bb8 100644
--- a/internal/generator/theme_paper.go
+++ b/internal/generator/theme_paper.go
@@ -28,6 +28,8 @@ const volcanoTemplate = `<!DOCTYPE html>
.transmit-btn { border:1px solid var(--lava); color:var(--lava); padding:9px 20px;
border-radius:4px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
.transmit-btn:hover { background:var(--lava); color:var(--bg); }
+ a.header-feed-link { color:var(--ember); }
+ a.header-feed-link:hover { color:var(--hot); text-shadow:0 0 8px var(--lava); }
.nav-hints { background:rgba(13,8,2,0.7); border-bottom:1px solid rgba(255,68,0,0.15);
color:rgba(255,232,204,0.4); padding:5px 28px; display:flex; gap:18px;
font-size:0.68rem; flex-wrap:wrap; }
@@ -60,9 +62,57 @@ const volcanoTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--ember);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ .splash-overlay.splash-volcano {
+ background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,68,0,0.35) 0%, transparent 50%), var(--bg);
+ }
+ .splash-volcano .splash-ember {
+ width:min(200px,55vw); height:4px; margin:0 auto 1.3rem; border-radius:2px;
+ background: linear-gradient(90deg, transparent, var(--lava), var(--hot), var(--ember), transparent);
+ animation: splashEmberPulse 1.6s ease-in-out infinite alternate;
+ box-shadow: 0 0 20px var(--lava), 0 6px 30px rgba(255,68,0,0.4);
+ }
+ @keyframes splashEmberPulse { from { opacity:0.6; transform: scaleX(0.9); } to { opacity:1; transform: scaleX(1); } }
+ .splash-volcano .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:#ffe8cc;
+ text-shadow:0 0 20px var(--lava); }
+ .splash-volcano .splash-tag { color:var(--ember); letter-spacing:0.15em; }
+ .splash-volcano .splash-hint { color:rgba(255,232,204,0.88); }
+ .splash-volcano .splash-inner { text-shadow: 0 2px 18px rgba(0,0,0,0.85); }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-volcano" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-inner">
+ <div class="splash-ember" aria-hidden="true"></div>
+ <div class="splash-title">snonux.foo</div>
+ <div class="splash-tag">Volcano vent</div>
+ <div class="splash-hint">Erupt into feed — click or Enter</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now(),N=180,i,arr,geo,pts,pos;
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(52,1,0.1,70);ca.position.set(0,1.2,9);
+ var cone=new THREE.Mesh(new THREE.ConeGeometry(1.5,4.2,10,1,true),new THREE.MeshBasicMaterial({color:0xff4400,wireframe:true,transparent:true,opacity:0.55}));
+ cone.position.y=-0.8;g.add(cone);
+ arr=new Float32Array(N*3);for(i=0;i<N;i++){arr[i*3]=(Math.random()-0.5)*5;arr[i*3+1]=Math.random()*5;arr[i*3+2]=(Math.random()-0.5)*5;}
+ geo=new THREE.BufferGeometry();geo.setAttribute('position',new THREE.BufferAttribute(arr,3));
+ pts=new THREE.Points(geo,new THREE.PointsMaterial({color:0xff8c00,size:0.1,transparent:true,opacity:0.75,blending:THREE.AdditiveBlending,depthWrite:false,sizeAttenuation:true}));
+ g.add(pts);pos=geo.attributes.position;sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001,j,p,sp;
+ for(j=0;j<pos.count;j++){p=j*3;sp=0.05+Math.sin(t*2.2+j*0.13)*0.018;pos.array[p+1]+=sp;if(pos.array[p+1]>6){pos.array[p+1]=-0.5;pos.array[p]=Math.sin(j*1.7+t)*2.2;}}
+ pos.needsUpdate=true;cone.rotation.y=t*0.25;ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -71,15 +121,16 @@ const volcanoTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>snonux.foo</h1>
<p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -89,7 +140,12 @@ const volcanoTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_retro.go b/internal/generator/theme_retro.go
index 008fc92..563e37b 100644
--- a/internal/generator/theme_retro.go
+++ b/internal/generator/theme_retro.go
@@ -41,6 +41,8 @@ const retroTemplate = `<!DOCTYPE html>
text-decoration:none; font-size:0.82rem; letter-spacing:2px;
transition:all 0.1s; }
.transmit-btn:hover { background:var(--amber); color:var(--bg); }
+ a.header-feed-link { color:var(--dim); }
+ a.header-feed-link:hover { color:var(--amber); text-shadow:0 0 6px var(--amber); }
.nav-hints { background:var(--bg2); border-bottom:1px solid var(--dim); color:var(--dim);
padding:4px 24px; display:flex; gap:18px; font-size:0.68rem; flex-wrap:wrap; }
.nav-hints kbd { background:transparent; border:1px solid var(--dim); color:var(--amber);
@@ -73,9 +75,51 @@ const retroTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--dim);
font-family:monospace; font-size:0.9rem; cursor:pointer; letter-spacing:2px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:10px 16px;} }
+ .splash-overlay.splash-retro { background: var(--bg); font-family:'Courier New',monospace; }
+ .splash-retro::after {
+ content:''; position:absolute; inset:0; pointer-events:none; opacity:0.35;
+ background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px);
+ }
+ .splash-retro .splash-inner { position:relative; z-index:1; }
+ .splash-retro .splash-title {
+ font-size:clamp(1.15rem,3.8vw,1.55rem); color:var(--amber);
+ text-shadow:0 0 14px var(--amber); letter-spacing:0.3em;
+ animation: splashRetroFlicker 4s ease-in-out infinite;
+ }
+ @keyframes splashRetroFlicker { 0%,100%{opacity:1} 50%{opacity:0.92} }
+ .splash-retro .splash-tag { color:#d4a020; }
+ .splash-retro .splash-hint { color:#c99528; }
+ .splash-retro .splash-inner { text-shadow: 0 0 10px #000, 0 2px 8px #000; }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-retro" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-inner">
+ <div class="splash-title">*** SNONUX BBS ***</div>
+ <div class="splash-tag">Amber phosphor mode</div>
+ <div class="splash-hint">Press Enter or click to connect</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(48,1,0.1,60);ca.position.z=7.5;
+ var bx=new THREE.Mesh(new THREE.BoxGeometry(2.6,2.6,2.6),new THREE.MeshBasicMaterial({color:0xffb000,wireframe:true,transparent:true,opacity:0.9}));
+ var oc=new THREE.Mesh(new THREE.OctahedronGeometry(1.35,0),new THREE.MeshBasicMaterial({color:0xffb000,wireframe:true,transparent:true,opacity:0.55}));
+ g.add(bx);g.add(oc);sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.x=t*0.44;g.rotation.y=t*0.71;oc.rotation.z=t*0.9;ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -84,15 +128,16 @@ const retroTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>SNONUX.FOO</h1>
<p class="subtitle">MICROBLOG / <a href="https://foo.zone">FOO.ZONE</a> IS THE REAL BLOG</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">TRANSMIT</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&lt;-- NEWER</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -102,7 +147,12 @@ const retroTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">OLDER --&gt;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&lt;-- NEWER</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">OLDER --&gt;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_synthwave.go b/internal/generator/theme_synthwave.go
index 366c5b5..94aaf55 100644
--- a/internal/generator/theme_synthwave.go
+++ b/internal/generator/theme_synthwave.go
@@ -34,6 +34,7 @@ const synthwaveTemplate = `<!DOCTYPE html>
border-radius:4px; text-decoration:none; letter-spacing:1px;
font-size:0.88rem; transition:all 0.2s; }
.transmit-btn:hover { background:var(--orange); color:var(--bg); }
+ a.header-feed-link { color:var(--pink); font-family:'Share Tech Mono',monospace; }
.nav-hints { background:rgba(13,2,33,0.75); border-bottom:1px solid rgba(255,45,120,0.3);
color:rgba(255,255,255,0.45); padding:5px 20px; display:flex; gap:18px;
font-size:0.68rem; font-family:'Share Tech Mono',monospace; flex-wrap:wrap; }
@@ -64,9 +65,70 @@ const synthwaveTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--orange);
font-family:'Russo One',sans-serif; font-size:0.9rem; cursor:pointer; letter-spacing:2px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} }
+ .splash-overlay.splash-synthwave {
+ background: linear-gradient(180deg, #2a0a3e 0%, var(--bg) 38%, #1a0630 100%);
+ }
+ .splash-synthwave .splash-grid {
+ position:absolute; inset:0; opacity:0.35; pointer-events:none; z-index:1;
+ background: linear-gradient(90deg, rgba(255,45,120,0.08) 1px, transparent 1px) 0 0 / 48px 48px,
+ linear-gradient(rgba(191,63,255,0.06) 1px, transparent 1px) 0 0 / 48px 48px;
+ transform: perspective(280px) rotateX(68deg) scale(2.2);
+ transform-origin: 50% 85%;
+ animation: splashGridDrift 10s linear infinite;
+ }
+ @keyframes splashGridDrift { to { background-position: 48px 48px, 0 96px; } }
+ .splash-synthwave .splash-sun {
+ width:min(140px,35vw); height:min(140px,35vw); margin:0 auto 1rem; border-radius:50%;
+ background: radial-gradient(circle, var(--orange) 0%, var(--pink) 45%, transparent 70%);
+ box-shadow: 0 0 60px var(--pink), 0 0 100px var(--orange);
+ animation: splashSunPulse 2.5s ease-in-out infinite alternate;
+ }
+ @keyframes splashSunPulse {
+ from { transform: scale(0.95); opacity: 0.85; }
+ to { transform: scale(1.05); opacity: 1; }
+ }
+ .splash-synthwave .splash-title {
+ font-family:'Russo One',sans-serif; font-size:clamp(1.5rem,5vw,2.2rem);
+ background: linear-gradient(90deg,var(--pink),var(--orange));
+ -webkit-background-clip:text; -webkit-text-fill-color:transparent;
+ }
+ .splash-synthwave .splash-tag { font-family:'Share Tech Mono',monospace; color:var(--purple); }
+ .splash-synthwave .splash-hint { font-family:'Share Tech Mono',monospace; color:rgba(255,255,255,0.88); }
+ .splash-synthwave .splash-inner { text-shadow: 0 2px 20px rgba(13,2,33,0.95); }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-synthwave" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-grid" aria-hidden="true"></div>
+ <div class="splash-inner">
+ <div class="splash-sun" aria-hidden="true"></div>
+ <div class="splash-title">snonux.foo</div>
+ <div class="splash-tag">Synthwave uplink</div>
+ <div class="splash-hint">Click or Enter to ride the grid</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(58,1,0.1,120);ca.position.set(0,1.2,7);
+ var sun=new THREE.Mesh(new THREE.SphereGeometry(1.35,28,28),new THREE.MeshBasicMaterial({color:0xff6b2b,transparent:true,opacity:0.95}));
+ sun.position.y=2.1;g.add(sun);
+ var gr=new THREE.Mesh(new THREE.PlaneGeometry(28,28,20,20),new THREE.MeshBasicMaterial({color:0xbf3fff,wireframe:true,transparent:true,opacity:0.4}));
+ gr.rotation.x=-Math.PI/2.15;gr.position.y=-2.4;g.add(gr);
+ sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.y=Math.sin(t*0.35)*0.08;sun.position.y=2.1+Math.sin(t*1.2)*0.08;sun.scale.setScalar(1+Math.sin(t*2)*0.04);ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -75,15 +137,16 @@ const synthwaveTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>snonux.foo</h1>
<p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
<a href="https://foo.zone/about" class="transmit-btn">TRANSMIT TO NEXUS</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; NEWER</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -93,7 +156,12 @@ const synthwaveTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">OLDER &rarr;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; NEWER</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">OLDER &rarr;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
diff --git a/internal/generator/theme_terminal.go b/internal/generator/theme_terminal.go
index 0503d79..9464664 100644
--- a/internal/generator/theme_terminal.go
+++ b/internal/generator/theme_terminal.go
@@ -39,6 +39,8 @@ const terminalTemplate = `<!DOCTYPE html>
border-radius:0; text-decoration:none; letter-spacing:2px; font-size:0.85rem;
transition:all 0.2s; }
.nav a.transmit-btn:hover { background:var(--p); color:var(--bg); }
+ a.header-feed-link { color:var(--dim); }
+ a.header-feed-link:hover { color:var(--p); }
.nav-hints { background:var(--bg2); border-bottom:1px solid var(--dim); color:var(--dim);
padding:5px 24px; display:flex; gap:18px; font-size:0.68rem; flex-wrap:wrap; }
.nav-hints kbd { background:transparent; border:1px solid var(--dim); color:var(--p);
@@ -69,9 +71,45 @@ const terminalTemplate = `<!DOCTYPE html>
.modal-close { float:right; background:none; border:none; color:var(--p);
font-family:monospace; font-size:0.9rem; cursor:pointer; letter-spacing:2px; }
@media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:12px 16px;} }
+ .splash-overlay.splash-terminal { background: var(--bg); font-family:'Courier New',monospace; }
+ .splash-terminal .splash-prompt { text-align:left; font-size:0.9rem; color:rgba(51,255,51,0.78); margin-bottom:0.5rem; }
+ .splash-terminal .splash-title { font-size:clamp(1.2rem,4vw,1.65rem); color:var(--p);
+ text-shadow:0 0 12px var(--p); letter-spacing:0.15em; }
+ .splash-terminal .splash-cursor::after { content:'█'; animation: splashTermBlink 1s step-end infinite; color:var(--p); }
+ @keyframes splashTermBlink { 0%,100%{opacity:1} 50%{opacity:0} }
+ .splash-terminal .splash-tag { color:rgba(51,255,51,0.85); letter-spacing:0.25em; }
+ .splash-terminal .splash-hint { color:rgba(51,255,51,0.8); }
+ .splash-terminal .splash-inner { text-shadow: 0 0 8px #000, 0 2px 12px #000; }
</style>
</head>
<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-terminal" tabindex="-1" aria-label="Open microblog">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-inner">
+ <div class="splash-prompt">&gt; ./snonux --boot</div>
+ <div class="splash-title splash-cursor">LINK ESTABLISHED</div>
+ <div class="splash-tag">TERMINAL SESSION</div>
+ <div class="splash-hint">[ click / enter to continue ]</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,m,t0=performance.now();
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(48,1,0.1,60);ca.position.z=7;
+ m=new THREE.Mesh(new THREE.IcosahedronGeometry(2.3,1),new THREE.MeshBasicMaterial({color:0x33ff33,wireframe:true,transparent:true,opacity:0.88}));
+ sc.add(m);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;m.rotation.x=t*0.62;m.rotation.y=t*0.88;ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
<canvas id="three-canvas"></canvas>
<div class="overlay">
<header>
@@ -80,15 +118,16 @@ const terminalTemplate = `<!DOCTYPE html>
<div class="logo-title">
<h1>snonux.foo</h1>
<p class="subtitle">microblog / <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Site served by a Raspberry Pi 3</p>
</div>
</div>
<div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">atom.xml</a>
<a href="https://foo.zone/about" class="transmit-btn">&gt; TRANSMIT</a>
</div>
</header>
{{template "navhints" .}}
<div class="content" id="post-content">
- {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&lt;-- NEWER</a></div>{{end}}
{{range $i, $post := .Posts}}
<div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
<div class="post-header">
@@ -98,7 +137,12 @@ const terminalTemplate = `<!DOCTYPE html>
<div class="post-text">{{$post.ContentHTML}}</div>
</div>
{{end}}
- {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">OLDER --&gt;</a></div>{{end}}
+ {{if or .PrevPage .NextPage}}
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&lt;-- NEWER</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">OLDER --&gt;</a>{{end}}
+ </div>
+ {{end}}
</div>
</div>
{{template "navmodal" .}}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-17 16:29:18 +0000