Detour is designed for static-first publishing with structured content, fast page loads, minimal dependencies, and reusable Astro components. Stories are managed through Astro content collections with validated frontmatter for titles, excerpts, sections, authors and coauthors, cover images with credits, article openings, place, tags, drafts, and featured, trending, and editor's pick flags. The front page, archives, feeds, search index, and share cards are all generated from the posts.
Key Features
- Built with Astro 7, Tailwind CSS 4, and TypeScript
- Photograph-led travel magazine design on a 1500px centred layout
- Home, article, archive, section, tag, author, search, saved, about, contact, privacy, RSS, robots, sitemap, and 404 pages
- Astro content collections with Markdown and MDX support
- Validated post schema with sections, bylines, cover credits, article opening, place, tags, drafts, and promotion flags
- Six article openings set per post: standard, split, banner, parallax, cover, and immersive
- Front page assembled from the archive with no repeats: auto-rotating story slider, most-read list, card grids, tinted topics line, poster wall, and section browser
- Section browser and slider that work without JavaScript
- Section, tag, and author archives as a card grid or image-led list, set per section
- Archive filters by section and read time, with the state kept in the URL
- Client-side search with a keyboard palette and results page over a build-time index
- Saved stories reading list stored per browser, with no accounts or backend
- Shared lightbox for every article image, Figure, and Gallery component
- Read time counted from the post body at build time
- A colour tint per section and a configurable accent
- Config-driven site metadata, sections, navigation, social links, newsletter settings, and SEO defaults
- Canonical URLs, Open Graph, Twitter/X cards, RSS feeds for the site, each section, and each author, robots.txt, and sitemap generation
- WebSite, Article, and BreadcrumbList JSON-LD structured data
- Share cards cropped from each cover at build time
- Provider-neutral newsletter and contact forms
- CSS-only scroll-driven motion with reduced-motion support
- Accessible skip link, landmarks, labelled controls, focus-trapped drawer, and visible focus styles
- Self-hosted Cormorant Garamond and Mulish fonts
- Local Bootstrap Icons
- Optimized Astro images from local assets
- Minimal dependencies and static-first output
- Deployable to Cloudflare, Vercel, Netlify, or any static host
Who It's For
- Travel blogs
- Travel magazines
- City guide sites
- Slow-travel and rail journals
- Road trip and outdoors writers
- Hotel and accommodation reviewers
- Destination and tourism publishers
- Independent travel writers
- Photography-led travel journals
- Static travel archives
