A major overhaul of the template with a new theme system, enhanced reading experience, and comprehensive documentation.
What's New
- 8 accent color palettes —
emerald,indigo,rose,amber,blue,violet,teal,orange. Set one value insite.jsand it brands your entire site via CSS custom properties - Reader-controlled dark mode — Light/dark/auto toggle in the footer with localStorage persistence and anti-FOUC script
- Enhanced navigation — Keyboard shortcuts (arrow keys), swipe gestures on mobile, mobile bottom nav bar, and sidebar with focus trapping
- Reading experience — Progress bar scoped to chapter content, reading time estimates, scroll-to-top button, and next-chapter prefetch at 50% scroll
- SEO & structured data — JSON-LD schemas (Book + Article), Open Graph tags, Twitter Cards, XML sitemap, robots.txt, and canonical URLs
- Accessibility — Skip-to-content link, focus-visible styles with accent color, keyboard navigation, noscript fallback, and print stylesheet
- Custom 404 page — Styled error page with chapter directory
- Chapter template —
_chapter-template.mdstarter file for quick chapter creation - Comprehensive wiki — https://github.com/deepakness/putout/wiki covering configuration, chapters, theming, SEO, accessibility, PDF/EPUB, and deployment
Breaking Changes
- Theme system replaced — Old
themes.js(4 themes) removed. Now usessite.themeto select an accent color fromaccentColors.js. Update yoursite.jsaccordingly - Permalink field — Chapters now use standard Eleventy permalink frontmatter instead of custom slug logic
- Eleventy v3 — Upgraded from v2. Requires Node.js 18+
Improvements
- Redesigned homepage hero, chapter layout, and chapter cards
- Tailwind CSS v3 with accent color utilities via CSS custom properties
- Improved PDF/EPUB generation with title page, table of contents, and page numbers
- Google Fonts as single source of truth in
site.js - Netlify config with 404 redirect handling