Skip to content

✨ Add blog to Effection website#1094

Merged
taras merged 6 commits intov4from
add-blog-to-website
Feb 3, 2026
Merged

✨ Add blog to Effection website#1094
taras merged 6 commits intov4from
add-blog-to-website

Conversation

@taras
Copy link
Copy Markdown
Member

@taras taras commented Feb 2, 2026

Motivation

The Effection website currently links to external blog posts on frontside.com. Having a dedicated blog section on the Effection website will allow for:

  • Tutorials and deep dives specific to Effection
  • Release announcements and changelog summaries
  • Ecosystem updates and community news
  • Better SEO and discoverability for Effection content

Approach

This PR adds a blog following the same patterns as frontside.com/blog, adapted to the existing Effection website architecture:

New Routes

  • /blog - Blog index with featured latest post and grid of all posts
  • /blog/:slug/ - Individual post pages with full MDX rendering
  • /blog/tags/:tag - Filter posts by tag
  • /blog/feed.xml - RSS 2.0 feed for syndication

Blog Post Format

Posts live in /blog/YYYY-MM-DD-slug/index.md with YAML frontmatter:

---
title: "Post Title"
description: "Short description"
author: "Author Name"
tags: ["tag1", "tag2"]
image: hero.png  # optional
---

Content here...

Features

  • MDX Support - Full MDX with syntax highlighting via Prism
  • Frontmatter - Title, description, author, tags, and optional image
  • Author Avatars - Configurable author images with fallback
  • RSS Feed - RSS 2.0 autodiscovery and feed endpoint
  • Dark Mode - Full dark theme support
  • Search - Integrated with Pagefind for site search
  • Trailing Slash Redirect - Ensures relative image paths work correctly

Files Added

  • www/resources/blog.ts - Blog context and MDX processing
  • www/routes/blog-*.tsx - Route handlers
  • www/components/blog/author-section.tsx - Author display component
  • www/lib/author-config.ts & get-author-image.ts - Author utilities
  • blog/2025-02-02-welcome-to-effection-blog/ - Sample post

Files Modified

  • www/main.tsx - Register blog routes
  • www/components/header.tsx - Add "Blog" nav link
  • www/routes/app.html.tsx - Add RSS autodiscovery
  • www/deno.json - Add remark-frontmatter dependencies

Testing

Run locally with:

cd www && deno task dev

Then visit:

Screenshots

image image

Add a blog section to the Effection website following the same patterns
as frontside.com/blog. Features include:

- Blog index page at /blog with featured latest post
- Individual post pages at /blog/:slug/
- Tag filtering at /blog/tags/:tag
- RSS 2.0 feed at /blog/feed.xml
- MDX support with frontmatter for post metadata
- Author avatars and date display
- Dark mode support
- Pagefind search integration
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Feb 2, 2026

Open in StackBlitz

npm i https://pkg.pr.new/thefrontside/effection@1094

commit: 8d67840

Copy link
Copy Markdown
Member

@cowboyd cowboyd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it! The only real suggestion is to make the xml builder, but other than that LGTM.

Comment thread www/routes/blog-feed-route.tsx Outdated
Addresses PR feedback to use the XML builder library instead of
string templates for safer XML generation.
@taras taras merged commit bc07769 into v4 Feb 3, 2026
15 checks passed
@taras taras deleted the add-blog-to-website branch February 3, 2026 19:14
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