Blog

Technical documentation for the Blog app — a hybrid static + SPA architecture.

Hybrid Architecture

• Static post pages — every post has a standalone HTML page at apps/blog/{yyyy}/{mm}/{slug}/index.html for SEO, crawlers, and no-JS access.
• JSON data source — apps/blog/posts/posts.json holds all post metadata and content; the SPA fetches it for instant client-side navigation.
• Client-side routing — app.js handles filter, search, and pagination, and renders posts inline for offline deep links.

SEO Sync

• Blog index JSON-LD (Blog type with a blogPost array), ItemList, and WebSite + SearchAction must list every post.
• Each static post page includes BlogPosting and BreadcrumbList JSON-LD, per-post OG images, and full Open Graph/Twitter tags.
• sitemap.xml includes per-post URLs with image:image entries.
• feed.xml exposes an RSS feed; lastBuildDate updates when posts change.

Service Worker

sw.js uses a cache-first strategy for the app shell and static assets. The CACHE_NAME is bumped whenever the shell changes.

Writing a Post

New posts are added to posts.json, a static page is generated from the template, and every SEO sync point is updated (index JSON-LD, sitemap, feed, SW cache version).

← Back to Blog · README