Val Town Blog

The Val Town Blog has undergone a migration from its original hosting on Astro and Cloudflare Pages to being hosted directly on Val Town. This repository contains the code that powers the current blog implementation.

• New Posts: New blog posts are written in markdown with YAML frontmatter and stored in the /blog-posts directory
• Legacy Posts: For older blog posts, we proxy requests to the original blog hosted at Cloudflare Pages
• Homepage: The homepage is dynamically constructed by:
  1. Reading local markdown files from the /blog-posts directory
  2. Parsing the RSS feed from the old blog at https://val-town-blog.pages.dev/rss.xml
  3. Merging and sorting the posts by date
  4. Rendering the combined content with a consistent design using Tailwind CSS

• /index.tsx: Main entry point that handles routing and proxying
• /components/: React components for rendering the blog
  • Layout.tsx: Shared layout component with header and Tailwind setup
  • HomePage.tsx: Renders the blog homepage with the list of posts
  • BlogPost.tsx: Renders individual blog posts
• /utils/blogPosts.ts: Utilities for fetching, parsing, and caching blog posts
• /blog-posts/: Directory containing markdown files for blog posts

• React: For rendering components
• Tailwind CSS: For styling (via CDN)
• Unified/Remark/Rehype: For markdown processing with GitHub Flavored Markdown support
• RSS Parser: For fetching posts from the old blog's RSS feed
• Gray Matter: For parsing YAML frontmatter

To add a new blog post to the Val Town Blog:

1. Create a markdown file in the /blog-posts directory with YAML frontmatter:

---
title: My New Blog Post
description: A brief description of the post
pubDate: 2025-04-01T00:00:00.000Z
author: Your Name
---

Content of your blog post in markdown format...

2. The post will automatically appear on the homepage and be accessible at /blog/[filename] (without the .md extension)

The blog supports GitHub Flavored Markdown (GFM) with:

• Tables
• Task lists
• Strikethrough
• Autolinks
• Code syntax highlighting
• Heading IDs (via rehype-slug)

When modifying the blog system:

1. Update the React components in the /components directory
2. Modify the blog post utilities in /utils/blogPosts.ts
3. Test changes by visiting the homepage and individual blog posts
4. For styling changes, use Tailwind CSS classes

Blog posts are cached in memory to improve performance:

• The cache is initialized when the server starts
• It has a TTL of 5 minutes before being refreshed
• This reduces the need to read files and parse RSS on every request