Skip to content

Add blog system with drafts, RSS, and SEO metadata#7

Open
jrub wants to merge 2 commits intomainfrom
claude/plan-blog-feature-Vao4Y
Open

Add blog system with drafts, RSS, and SEO metadata#7
jrub wants to merge 2 commits intomainfrom
claude/plan-blog-feature-Vao4Y

Conversation

@jrub
Copy link
Copy Markdown
Owner

@jrub jrub commented May 5, 2026

Summary

Adds a complete blog system to the site with support for published posts, draft previews, RSS feeds, and comprehensive SEO metadata. Includes a Netlify Edge Function for basic auth protection of draft content.

Key Changes

  • Blog content structure: Created src/content/blog/ with Astro Content Collections schema supporting title, description, publication date, tags, hero images, draft status, and canonical URLs
  • Blog pages:
    • /blog/ index listing published posts sorted by date
    • /blog/[slug]/ for published posts with full article layout
    • /blog/draft/[slug]/ for draft previews (auth-gated)
  • BlogPost layout: New src/layouts/BlogPost.astro with support for:
    • Draft banner warning
    • Publication/update dates with semantic HTML
    • Tag display
    • Table of contents generation from headings
    • Hero images with responsive sizing
    • Structured data (JSON-LD Article schema)
    • Original source attribution for cross-posted content
  • RSS feed: /rss.xml endpoint that excludes drafts and includes post metadata
  • Draft protection: Netlify Edge Function at netlify/edge-functions/draft-auth.js requiring HTTP Basic Auth for /blog/draft/* paths (credentials from env vars)
  • SEO enhancements:
    • Canonical URL support with draft override
    • Open Graph and Twitter Card metadata with custom og:image per post
    • noindex meta tag for drafts
    • Sitemap generation excluding draft paths
    • robots.txt disallowing /blog/draft/
  • Styling: Comprehensive blog CSS covering list layouts, post typography, code blocks, blockquotes, images, and responsive design
  • Utilities: Reading time calculator for posts
  • 404 page: Custom not-found page with navigation links
  • Example post: "Hello, world" starter post demonstrating frontmatter and markdown features

Implementation Details

  • Draft posts are filtered at collection time, not at build time, allowing them to build separately
  • Reading time calculated at 220 words per minute
  • Responsive typography with larger font on desktop, scaled down on mobile
  • Code blocks use github-light Shiki theme with line wrapping enabled
  • Site config updated with https://javirubio.net as canonical site URL

https://claude.ai/code/session_01CafRDp1qQmXdtNqxURkWnE

claude added 2 commits May 4, 2026 16:44
Implements F1 + F3 of the blog plan:
- Blog index at /blog and posts at /blog/[slug]
- Astro Content Collection with frontmatter schema (title, description,
  pubDate, tags, heroImage, draft, showToc, canonicalURL, originalSource)
- BlogPost layout with reading time, optional TOC, JSON-LD Article schema
- Shiki syntax highlighting (github-light theme)
- Layout.astro extended with description, ogImage, canonical, noindex props
- Blog link in header nav
- RSS feed at /rss.xml (excludes drafts)
- Sitemap via @astrojs/sitemap
- robots.txt with /blog/_draft/ disallow (prepared for F4)
- 404 page
- Sample hello-world post
Posts with `draft: true` build to `/blog/draft/[slug]/`, gated by a Netlify
Edge Function that requires HTTP Basic Auth (DRAFT_USER / DRAFT_PASSWORD env
vars). Drafts ship with `noindex`, no canonical, and no Article JSON-LD; they
are also excluded from `/blog/`, RSS, and the sitemap.

https://claude.ai/code/session_01CafRDp1qQmXdtNqxURkWnE
@netlify
Copy link
Copy Markdown

netlify Bot commented May 5, 2026

Deploy Preview for javirubio ready!

Name Link
🔨 Latest commit 06eeb1a
🔍 Latest deploy log https://app.netlify.com/projects/javirubio/deploys/69f9a22decb8550008233556
😎 Deploy Preview https://deploy-preview-7--javirubio.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants