diff options
| -rw-r--r-- | integrationtests/integration_test.go | 5 | ||||
| -rw-r--r-- | internal/generator/doc.go | 3 | ||||
| -rw-r--r-- | internal/generator/generator.go | 11 | ||||
| -rw-r--r-- | internal/generator/generator_test.go | 4 | ||||
| -rw-r--r-- | internal/generator/shared.go | 139 | ||||
| -rw-r--r-- | internal/generator/theme_aurora.go | 59 | ||||
| -rw-r--r-- | internal/generator/theme_brutalist.go | 49 | ||||
| -rw-r--r-- | internal/generator/theme_glass.go | 68 | ||||
| -rw-r--r-- | internal/generator/theme_matrix.go | 61 | ||||
| -rw-r--r-- | internal/generator/theme_minimal.go | 63 | ||||
| -rw-r--r-- | internal/generator/theme_neon.go | 67 | ||||
| -rw-r--r-- | internal/generator/theme_ocean.go | 57 | ||||
| -rw-r--r-- | internal/generator/theme_paper.go | 60 | ||||
| -rw-r--r-- | internal/generator/theme_retro.go | 54 | ||||
| -rw-r--r-- | internal/generator/theme_synthwave.go | 72 | ||||
| -rw-r--r-- | internal/generator/theme_terminal.go | 48 | ||||
| -rw-r--r-- | internal/version.go | 2 |
17 files changed, 787 insertions, 35 deletions
diff --git a/integrationtests/integration_test.go b/integrationtests/integration_test.go index 0ee0183..834d878 100644 --- a/integrationtests/integration_test.go +++ b/integrationtests/integration_test.go @@ -118,6 +118,8 @@ func TestTxtInput(t *testing.T) { // index.html must contain the post text. index := readFile(t, filepath.Join(outputDir, "index.html")) assertContains(t, index, "Hello, Nexus!", "index.html") + assertContains(t, index, "splash-gl-canvas", "index.html splash WebGL canvas") + assertContains(t, index, `href="atom.xml"`, "index.html atom feed link") } // TestMarkdownInput verifies Markdown files are converted to HTML. @@ -282,7 +284,8 @@ func TestPaginationNavLinks(t *testing.T) { } page2 := readFile(t, filepath.Join(outputDir, "page2.html")) - // page2.html should have a prev link (index.html) and no next. + // page2.html should have a prev link to index with splash=0 (keyboard nav has no reliable Referer). + assertContains(t, page2, `href="index.html?splash=0"`, "page2.html prev href skips splash") assertContains(t, page2, "NEWER TRANSMISSIONS", "page2.html prev link") if strings.Contains(page2, "OLDER TRANSMISSIONS") { t.Error("page2.html should not have a next-page link") 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 — <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}}">← 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 →</a></div>{{end}} + {{if or .PrevPage .NextPage}} + <div class="page-nav page-nav-dual"> + {{if .PrevPage}}<a href="{{.PrevPage}}">← Newer</a>{{end}} + {{if .NextPage}}<a href="{{.NextPage}}">Older →</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 — <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}}">← 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 →</a></div>{{end}} + {{if or .PrevPage .NextPage}} + <div class="page-nav page-nav-dual"> + {{if .PrevPage}}<a href="{{.PrevPage}}">← NEWER</a>{{end}} + {{if .NextPage}}<a href="{{.NextPage}}">OLDER →</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 — <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}}">← 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 →</a></div>{{end}} + {{if or .PrevPage .NextPage}} + <div class="page-nav page-nav-dual"> + {{if .PrevPage}}<a href="{{.PrevPage}}">← Newer</a>{{end}} + {{if .NextPage}}<a href="{{.NextPage}}">Older →</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"> |