astro
Posts tagged astro
-
Astro client islands under a strict CSP — pinning the hydration inlines by sha256 hash
Why react islands with `client:load` silently fail under `script-src 'self'`, how I allowed the two deterministic Astro hydration inlines via hash, and how to refresh the hashes after Astro updates.
-
Astro Justified Gallery Layout — a modern replacement for the Flickr classic
My new npm package @altner/astro-justified-gallery-layout: a lean justified-layout gallery for Astro with EXIF/IPTC/GPS, LQIP previews, a virtualized variant for huge collections, and a built-in lightbox.
-
A Callout component for Astro — info boxes with socials and band members
A reusable Astro callout: info / note / warning, optional title, social links, and a members section with name, role, and multiple platforms per person.
-
Embedding Google Maps GDPR-compliant — consent box with app links
A lightweight Google Maps embed component for Astro: no request before consent, localStorage-based consent, automatic Apple Maps and Google Maps app links from GPS coordinates.
-
Embedding YouTube videos GDPR-compliant — three-tier consent box without a cookie
A lightweight YouTube embed component for Astro with real consent (once / remember / external), no cookie, and no third-party request before the click.
-
Leaflet + Stadia Maps behind a strict CSP: two gotchas
Wiring up a photo world map with Leaflet and Stadia Maps tiles on an Astro site behind Caddy — and why it didn't work in production despite a correct CSP.
-
Caching webmention avatars locally at build time
A small Astro helper that downloads webmention author photos during the build, dedupes them, and serves them locally — for a strict CSP, stronger privacy, and better availability.
-
Security headers for an Astro site behind Caddy
How I hardened my site with a strict Content Security Policy, clean response headers, and a GDPR-compliant configuration — and solved the Astro inline-script gotcha along the way.
-
Resolving Obsidian Wiki-Links in Astro with a Custom Remark Plugin
How I wrote a small Remark plugin that converts [[wiki-links]] from Obsidian into proper HTML links at build time — without changing how I write in the editor.
-
My Website
I’m cultivating my own digital garden, a small piece of the internet.
-
Syndication Links Without Frontmatter Editing
How .bluesky-posted.json auto-populates u-syndication links on every article and note page — no manual frontmatter required after each post.
-
Microformats2: Marking Up Posts for the IndieWeb
How h-entry, h-feed, and the rest of the MF2 vocabulary make articles, notes, and photos machine-readable without changing how they look.
-
Obfuscating Contact Data on a Static Site
How I protect email addresses and personal contact details on a static Astro site from harvesting bots, using a combination of Base64 obfuscation and a CSS RTL trick that also defends against copy-paste.
-
Live Webmentions Without SSR: A Hybrid Approach
Upgrading the WebMentions component from build-time-only to a hybrid model: static HTML renders instantly, a silent client-side fetch updates the count without a redeploy.
-
Adding Notes, Links, and Archives
Three new content sections built on Astro content collections — short-form notes, a curated link log, and a unified chronological archive.
-
Distinguishing Collection Sets from Category Collections
A single boolean flag in the frontmatter separates navigational collection nodes from publishable photo sets — keeping the archive clean without adding structural complexity.
-
Structuring Photos as a Collection Tree
How the photos section grew from flat albums into a recursive collection hierarchy with nested routes, breadcrumbs, and a tag browsing system.
-
Building the Photo Stream
How the photos section works — JSON sidecars from Vision, import.meta.glob, Flickr's justified-layout, and batch loading with IntersectionObserver.
-
Migrating the Vision Script from OpenAI to Claude
How scripts/vision.ts was rewritten to use the Anthropic SDK with claude-opus-4-6 and tool use instead of OpenAI's json_schema response format.
-
Photo Albums with Astro's Content Layer
How the albums section is structured — from content collection to justified grid, album-scoped photo routes, and a sub-nav to switch between stream and albums.
-
How to build your Website from Local Setup to VPS
A complete local setup for running an Astro SSR site in Podman with the Node standalone adapter.