From f3155cbc866a1b261a0aafe61683da1e3c25b1ef Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Fri, 10 Apr 2026 09:22:06 +0300 Subject: add WebGL scenes to all themes, sounds, image sizing, new themes - All 11 themes now have unique Three.js WebGL backgrounds: aurora: flowing sine-wave ribbon meshes with additive blending brutalist: harsh rotating white/red wireframe boxes glass: drifting crystal icosahedron shards, semi-transparent matrix: digital rain particle columns with per-vertex colour fade ocean: animated vertex-displaced wave surface with orbiting light retro: amber demo-scene cube with orbiting octahedrons synthwave: sunset sphere with scan-line rings and perspective grid terminal: green icosahedron wireframe with orbiting torus particles neon: existing Three.js orb and rings (unchanged) plasma (replaces minimal): drifting additive-blend colour blobs volcano (replaces paper): rising ember particles with lifecycle - shared.go: distinct sounds for j/k nav (220Hz beep), Enter (ascending triangle chime), and Esc (descending sine sweep) - shared.go: images are now thumbnails (max-height:220px) in list view and expand to full width inside the modal (CSS override in navmodal) - main.go: --list-themes flag prints all theme names and exits; --theme random picks a random theme at all generation time - themes.go: updated registry with plasma/volcano replacing minimal/paper Co-Authored-By: Claude Sonnet 4.6 --- PLAN.md | 85 ++++++++++++++ cmd/snonux/main.go | 18 ++- integrationtests/integration_test.go | 4 +- internal/generator/shared.go | 52 +++++++-- internal/generator/theme_aurora.go | 109 ++++++++++++++---- internal/generator/theme_brutalist.go | 68 +++++++++++- internal/generator/theme_glass.go | 114 ++++++++++++++----- internal/generator/theme_matrix.go | 102 ++++++++++++++++- internal/generator/theme_minimal.go | 180 +++++++++++++++++++++--------- internal/generator/theme_ocean.go | 91 +++++++++++++-- internal/generator/theme_paper.go | 202 +++++++++++++++++++++++++--------- internal/generator/theme_retro.go | 87 ++++++++++++++- internal/generator/theme_synthwave.go | 110 +++++++++++++++--- internal/generator/theme_terminal.go | 78 ++++++++++++- internal/generator/themes.go | 4 +- 15 files changed, 1110 insertions(+), 194 deletions(-) create mode 100644 PLAN.md diff --git a/PLAN.md b/PLAN.md new file mode 100644 index 0000000..3190323 --- /dev/null +++ b/PLAN.md @@ -0,0 +1,85 @@ +# Plan + +This is the plan for the microblog of snonux.foo + +## Style + +The style should be the same as in ./design.html + +* also link to foo.zone, my normal blog, at the top of every page of the microblog. +* dont have an archive link like in the design.html example. +* the "transmit to nexus" should just link to mailto:paul@nospan.buetow.org +* every microblog entry should have date/timestamp linke in the design.html exampl +* dont have the likes (hearts), comments, and rebroadcast buttons per blog post. +* we want to be able to navigat between the blog posts with cursor up-down keys and jk (vi style up-down keys) +* we also want to navigate with the left-right cursor keys to previous, next page (if any) and also hl(vi style up-down keys) +* when navigating, we want to highlight the active entry (with a border or background), so it's clear which post is selected.and also play a sound. +* when hit enter on a blog post, open it in a larger view. when hit ESC there, return. + +## Input dir + +I want to create a microblog. It should have an input directory, where i can put multiple source file formats: + +* Plain .txt +* Markdown .md +* Images (.png/.jpg/.gif) +* Audio (.mp3 files) + +And the blog should automatically generate a post out of it. Furthermore, it should also support a Markdown with a reference to an image file in the same directory. + +Once we invoke the microblog generator, it should process all files in the input dir into blog assets. + +### Plain text input + +Just add this as a plain text as a blog post + +### Markdown .md + +Add this as a formatted HTML entry with styling etc. For this, we need to convert the Markdown to HTML. + +### Images + +Just have the image displayed as its own entry. + +### Audio + +Just have a playback button for the audio in the resulting entry + +### After being processed + +After an input was procssed, remove the files from the input dir. + +## Output dir + +The output dir should only contain static assets. That the directory to be published via a webbrowser. + +We expect one directory per blog post. The microblog generator then combines all of them together into multiple pages. + +So we need to keep the individual directories per blog post since the pages need to be re-generated according to the total blog post count and same for the atom.xml feed, so we need the directories as intermediate formats. We can link to images directly to them, though. So the output directory format will be like this: + + +./outdir/index.html # Generated main page +./outdir/pageN.html # Older pages +./ourdir/posts/YYYY-MM-DD-HHmmss/ # Microblog post asset(s) + +Downscale any images to a maximum width of 1024px and compress to 80% JPEG quality + +## Page size limit + +Have max 42 entries on the single HTML page. Once more, allow paging (e.g. go to next 42 pages, etc). + +* Next page (if any) is only on the bottom of the page. +* Previous page button (if any) is at the top of the page. + +## atom.xml feed + +We should have an atom.xml feed with the last 42 entries generated every run. + +## Comprehensive testing + +* All features should have integration tests. + +## Technologies used + +* Implemented in Google Go +* Follow everything from the auditing-code-quality skill diff --git a/cmd/snonux/main.go b/cmd/snonux/main.go index 5a9c9d3..58d6cb5 100644 --- a/cmd/snonux/main.go +++ b/cmd/snonux/main.go @@ -11,8 +11,10 @@ import ( "flag" "fmt" "log" + "math/rand" "os" "path/filepath" + "strings" "codeberg.org/snonux/snonux/internal/config" "codeberg.org/snonux/snonux/internal/generator" @@ -31,15 +33,29 @@ func main() { } // parseFlags reads CLI flags and returns a validated Config. +// Special theme value "random" picks a theme at random from the registry. func parseFlags() (*config.Config, error) { cfg := &config.Config{} + listThemes := flag.Bool("list-themes", false, "print all available theme names and exit") flag.StringVar(&cfg.InputDir, "input", "./inbox", "directory containing new source files to process") flag.StringVar(&cfg.OutputDir, "output", "~/git/snonux.foo/dist", "root directory for generated static site output") flag.StringVar(&cfg.BaseURL, "base-url", "https://snonux.foo", "canonical base URL used in Atom feed links") - flag.StringVar(&cfg.Theme, "theme", "neon", "visual theme: aurora, brutalist, glass, matrix, minimal, neon, ocean, paper, retro, synthwave, terminal") + flag.StringVar(&cfg.Theme, "theme", "neon", "visual theme name, or \"random\" to pick one at random") flag.Parse() + if *listThemes { + fmt.Println(strings.Join(generator.ListThemes(), "\n")) + os.Exit(0) + } + + // Resolve the special "random" value before any further validation. + if cfg.Theme == "random" { + themes := generator.ListThemes() + cfg.Theme = themes[rand.Intn(len(themes))] + log.Printf("random theme selected: %s", cfg.Theme) + } + var err error cfg.InputDir, err = expandHome(cfg.InputDir) diff --git a/integrationtests/integration_test.go b/integrationtests/integration_test.go index 634971e..6d355b1 100644 --- a/integrationtests/integration_test.go +++ b/integrationtests/integration_test.go @@ -323,8 +323,8 @@ func TestKeyboardNavJS(t *testing.T) { // index.html containing core structural elements (post text, nav script). func TestThemeSelection(t *testing.T) { themes := []string{ - "aurora", "brutalist", "glass", "matrix", "minimal", - "neon", "ocean", "paper", "retro", "synthwave", "terminal", + "aurora", "brutalist", "glass", "matrix", "neon", + "ocean", "plasma", "retro", "synthwave", "terminal", "volcano", } for _, theme := range themes { diff --git a/internal/generator/shared.go b/internal/generator/shared.go index eed4de3..12a91f4 100644 --- a/internal/generator/shared.go +++ b/internal/generator/shared.go @@ -3,13 +3,12 @@ package generator // navDefs is appended to every theme template when parsing. // It defines three named sub-templates shared across all themes: // - "navhints" — keyboard shortcut hint bar HTML -// - "navmodal" — full-screen expanded-post modal HTML -// - "navscript" — keyboard navigation JavaScript +// - "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. -// All CSS for these elements (colours, borders, backdrop) lives in each theme -// so themes remain self-contained and independently styled. +// All theme-specific CSS lives in each theme file so themes stay self-contained. const navDefs = ` {{define "navhints"}}
@@ -21,6 +20,12 @@ const navDefs = ` {{end}} {{define "navmodal"}} +
@@ -51,8 +56,7 @@ const navDefs = ` playNavSound(); } - // playNavSound generates a short beep via the Web Audio API. - // A fresh AudioContext per call avoids state issues across navigations. + // playNavSound: short low beep for post selection (j/k navigation). function playNavSound() { try { const ctx = new (window.AudioContext || window.webkitAudioContext)(); @@ -60,21 +64,55 @@ const navDefs = ` const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); osc.frequency.value = 220; osc.type = 'sine'; - gain.gain.setValueAtTime(0.15, ctx.currentTime); + gain.gain.setValueAtTime(0.12, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.08); osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.08); } catch (_) {} } + // playOpenSound: bright ascending chime when modal opens (Enter key). + function playOpenSound() { + try { + const ctx = new (window.AudioContext || window.webkitAudioContext)(); + const osc = ctx.createOscillator(); + const gain = ctx.createGain(); + osc.connect(gain); gain.connect(ctx.destination); + osc.type = 'triangle'; + osc.frequency.setValueAtTime(440, ctx.currentTime); + osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.14); + gain.gain.setValueAtTime(0.10, ctx.currentTime); + gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.20); + osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.20); + } catch (_) {} + } + + // playCloseSound: descending sweep when modal closes (Esc key). + function playCloseSound() { + try { + const ctx = new (window.AudioContext || window.webkitAudioContext)(); + const osc = ctx.createOscillator(); + const gain = ctx.createGain(); + osc.connect(gain); gain.connect(ctx.destination); + osc.type = 'sine'; + osc.frequency.setValueAtTime(440, ctx.currentTime); + osc.frequency.exponentialRampToValueAtTime(110, ctx.currentTime + 0.15); + gain.gain.setValueAtTime(0.10, ctx.currentTime); + gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18); + osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.18); + } catch (_) {} + } + function openModal() { if (currentIndex < 0) return; document.getElementById('modal-content').innerHTML = posts[currentIndex].querySelector('.post-text').innerHTML; document.getElementById('post-modal').classList.add('active'); + playOpenSound(); } function closeModal() { document.getElementById('post-modal').classList.remove('active'); + playCloseSound(); } document.addEventListener('keydown', function(e) { diff --git a/internal/generator/theme_aurora.go b/internal/generator/theme_aurora.go index 9475320..4fa85f6 100644 --- a/internal/generator/theme_aurora.go +++ b/internal/generator/theme_aurora.go @@ -1,32 +1,21 @@ package generator -// auroraTemplate is a dark navy theme with a CSS-animated aurora borealis -// effect — shifting green/purple/teal gradients across the background sky. +// auroraTemplate is a dark navy theme with a WebGL aurora borealis effect — +// six wide ribbon meshes whose vertices are animated with overlapping sine waves, +// rendered with additive blending to create the characteristic glow. const auroraTemplate = ` snonux.foo ✦ AURORA + -
-
+
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_brutalist.go b/internal/generator/theme_brutalist.go index 214c103..aa0729d 100644 --- a/internal/generator/theme_brutalist.go +++ b/internal/generator/theme_brutalist.go @@ -1,19 +1,22 @@ package generator // brutalistTemplate is a raw brutalist theme — pure black, thick white borders, -// Impact font, red as the only accent. No rounded corners anywhere. +// Impact font, red as the only accent. WebGL scene: harsh slowly-rotating boxes, +// wireframe red and solid white, no fog — brutal clarity. const brutalistTemplate = ` SNONUX.FOO + +
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_glass.go b/internal/generator/theme_glass.go index 520f9b0..598a2f3 100644 --- a/internal/generator/theme_glass.go +++ b/internal/generator/theme_glass.go @@ -1,30 +1,21 @@ package generator -// glassTemplate is a glassmorphism theme — semi-transparent frosted panels -// using backdrop-filter:blur over a blurred gradient background. -// Light mode with subtle purple/blue gradient blobs and white glass cards. +// glassTemplate is a glassmorphism theme — semi-transparent frosted panels over +// a WebGL background of slowly drifting crystal icosahedron shards. +// CSS gradient blobs are replaced by the WebGL scene. const glassTemplate = ` snonux.foo · glass + -
-
+
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_matrix.go b/internal/generator/theme_matrix.go index 6d8b531..8d35d7c 100644 --- a/internal/generator/theme_matrix.go +++ b/internal/generator/theme_matrix.go @@ -3,22 +3,27 @@ package generator // matrixTemplate is a hacker-style theme inspired by The Matrix — black // background, bright matrix-green (#00ff41) text, monospace throughout, // no decorations beyond a faint scanline overlay. +// WebGL scene: digital rain particle columns that simulate the iconic falling +// green characters, with vertex-colour fading from bright head to dark tail. const matrixTemplate = ` snonux.foo // MATRIX + +
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_minimal.go b/internal/generator/theme_minimal.go index ebad091..00e9a17 100644 --- a/internal/generator/theme_minimal.go +++ b/internal/generator/theme_minimal.go @@ -1,67 +1,72 @@ package generator -// minimalTemplate is a clean white theme — system font, subtle borders, -// no animations or decorations. Maximum readability. -const minimalTemplate = ` +// plasmaTemplate is a dark psychedelic plasma theme — overlapping translucent +// spheres with additive blending drift on sine paths, creating lava-lamp-like +// colour blobs against a near-black background. +const plasmaTemplate = ` - snonux.foo + snonux.foo ◈ PLASMA + +
- Transmit to Nexus + Transmit
{{template "navhints" .}} @@ -91,6 +96,81 @@ const minimalTemplate = `
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_ocean.go b/internal/generator/theme_ocean.go index 422cf0b..12b2151 100644 --- a/internal/generator/theme_ocean.go +++ b/internal/generator/theme_ocean.go @@ -1,25 +1,20 @@ package generator // oceanTemplate is a deep-ocean theme — dark navy/midnight blue background, -// teal/aqua/seafoam accents, subtle wave gradient at the bottom. +// WebGL animated wave surface with per-vertex sine displacement, teal/aqua accents. const oceanTemplate = ` snonux.foo ~ OCEAN + -
+
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_paper.go b/internal/generator/theme_paper.go index 551e224..ebf6211 100644 --- a/internal/generator/theme_paper.go +++ b/internal/generator/theme_paper.go @@ -1,69 +1,70 @@ package generator -// paperTemplate is a warm vintage newspaper theme — Georgia serif, sepia tones, -// subtle texture simulation via CSS, no animations. -const paperTemplate = ` +// volcanoTemplate is a dark volcanic theme — ember and spark particles rise from +// below the screen, glowing orange/red/yellow with additive blending, set against +// a deep dark-rock background with a warm lava glow at the horizon. +const volcanoTemplate = ` - snonux.foo — the microblog + snonux.foo ▲ VOLCANO + +
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_retro.go b/internal/generator/theme_retro.go index 82dc605..008fc92 100644 --- a/internal/generator/theme_retro.go +++ b/internal/generator/theme_retro.go @@ -3,24 +3,29 @@ package generator // retroTemplate is an amber DOS terminal theme — black background, amber // phosphor (#ffb000) text, monospace throughout, no decorations. // Distinct from terminal.go (green) — this one evokes vintage PC monitors. +// WebGL scene: spinning amber wireframe cube with orbiting octahedrons and +// dim amber star particles for a retro demo-scene feel. const retroTemplate = ` SNONUX.FOO // RETRO + +
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_synthwave.go b/internal/generator/theme_synthwave.go index 8798d18..366c5b5 100644 --- a/internal/generator/theme_synthwave.go +++ b/internal/generator/theme_synthwave.go @@ -1,7 +1,8 @@ package generator -// synthwaveTemplate is the 80s retrowave theme — dark purple sky, CSS perspective -// grid floor, hot pink/orange accents, Russo One font. +// synthwaveTemplate is the 80s retrowave theme — dark purple sky, WebGL +// perspective grid with a glowing sun and scan-line rings, hot pink/orange +// accents, Russo One font. The CSS sky and grid-floor divs are replaced by WebGL. const synthwaveTemplate = ` @@ -10,21 +11,13 @@ const synthwaveTemplate = ` snonux.foo ⊕ SYNTHWAVE + -
-
+
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/theme_terminal.go b/internal/generator/theme_terminal.go index 075ec25..0503d79 100644 --- a/internal/generator/theme_terminal.go +++ b/internal/generator/theme_terminal.go @@ -2,24 +2,29 @@ package generator // terminalTemplate is the green phosphor CRT terminal theme. // Monospace throughout, scanline overlay via CSS, no external dependencies. +// WebGL scene: large IcosahedronGeometry wireframe with orbiting torus particles, +// giving a rotating phosphor-green 3D orb behind the terminal interface. const terminalTemplate = ` snonux.foo // TERMINAL + +
{{template "navmodal" .}} + {{template "navscript" .}} ` diff --git a/internal/generator/themes.go b/internal/generator/themes.go index 8de6193..1156982 100644 --- a/internal/generator/themes.go +++ b/internal/generator/themes.go @@ -7,9 +7,9 @@ var themeRegistry = map[string]string{ "neon": neonTemplate, "terminal": terminalTemplate, "synthwave": synthwaveTemplate, - "minimal": minimalTemplate, + "plasma": plasmaTemplate, // replaced "minimal" — psychedelic drifting blobs "brutalist": brutalistTemplate, - "paper": paperTemplate, + "volcano": volcanoTemplate, // replaced "paper" — rising ember particles "aurora": auroraTemplate, "matrix": matrixTemplate, "ocean": oceanTemplate, -- cgit v1.2.3