VoidTales Gallery - Community Screenshots

Built for the VoidTales community. Players needed an easy way to share screenshots, builds, and epic moments without relying on third-party image hosts that shut down or start limiting uploads.

Recently rebuilt from the ground up: a polished hero, a masonry grid, a redesigned lightbox with author attribution, and navigation that ties the gallery into the wider VoidTales portal (Wiki, Forum, Map, Blog, Discord).

The site itself is a pure static site generator - no upload UI, no database, no backend. Everything is pre-rendered at build time for instant loading. Automation lives outside the site: a custom n8n workflow listens to a dedicated Discord channel, processes each image, writes its markdown metadata, and feeds the build. Players just post in Discord like they normally would; the gallery updates itself.

Static site built with Astro 7 and TypeScript, with a few Preact islands for the interactive bits. Vanilla CSS/JS otherwise - no heavy frameworks, just speed. The whole site is config-driven (src/config/): navigation, meta tags, and hero text are data, not hard-coded markup.

Automatic WebP thumbnail generation via a Sharp-based Node script, lazy loading with infinite scroll, and a responsive masonry layout that adapts from phone to ultrawide. GLightbox provides smooth, accessible image viewing with share buttons and view-original links. Every image gets a unique ID for reliable sharing and direct linking, plus proper attribution back to the Discord user who posted it.

Self-hosted means full control and no random shutdowns when a company pivots its business model. The VoidTales community owns its content.

Technical Features

• Discord-Fed Content - Players post images in Discord. An n8n workflow processes them and feeds the static build. No separate upload UI
• Static Site Generation - Built with Astro 7. Everything pre-rendered at build time for instant loading
• Preact Islands - Interactive pieces hydrate selectively; the rest ships as static HTML
• Config-Driven Site - Navigation, meta tags, and hero copy live in src/config/ - content, not markup
• Automatic WebP Thumbnails - A Sharp-based Node script generates optimized thumbnails at multiple resolutions
• Markdown-Driven Metadata - Each photo gets a markdown file with user attribution, date, and captions
• Smart Sorting - By date (newest first, millisecond precision), name, or random order
• Infinite Scroll - Lazy loading with animated transitions. Loads more images seamlessly as you scroll
• Redesigned Lightbox - GLightbox with author attribution, share buttons, and view-original functionality
• Responsive Masonry Grid - Adapts to any screen size. Phone, tablet, desktop, ultrawide - all covered
• Instant Dark/Light Mode - Flicker-free theme switching with local-storage persistence
• Staff Badges - Highlights staff-member images directly in the grid
• Refresh Button - Reloads thumbnails and resources without cache, so the newest images always show
• Direct Linking - Every image gets a unique ID for reliable sharing and direct linking
• External-Download Build Step - Optionally fetches markdown and images from internal/external URLs at build time (env-configurable) - how the Discord pipeline hands off to the build

The Automation Pipeline

The gallery is intentionally dumb - a fast static renderer. The smart part is the n8n workflow that feeds it:

1. Discord Webhook - Listens for new images in the VoidTales gallery channel
2. Pre-Checks - Validates image format, size, and content before processing
3. Image Processing - Downloads the image, generates WebP thumbnails at multiple resolutions
4. Metadata Generation - Writes a markdown file with user attribution, timestamp, and description
5. File Organization - Places images and metadata where the build expects them
6. Deployment Trigger - Rebuilds and deploys the updated gallery

Players drop images in Discord and see them live within minutes. Zero friction for users, full automation behind the scenes.

Why This Works

For Players: Dead simple. Post in Discord like normal. The image shows up on the gallery automatically.

For Performance: Static generation means instant loading. No database queries, no server processing - just pre-rendered HTML and optimized images served fast.

For Control: Self-hosted on VoidTales infrastructure. No reliance on third-party services that might shut down. The community owns its content.

For Flexibility: The n8n workflow is fully customizable. Want watermarks? Content moderation? Different image processing? Just adjust the workflow nodes - the static site stays simple.

Stack: Astro 7 · TypeScript · Preact · Sharp · GLightbox · Node.js · WebP Optimization

Automation: n8n workflow orchestrating the Discord-to-gallery pipeline