MLF

← Claude Sessions

OnionBlog Complete - Multi-Layered Portfolio Blog System

November 5, 2025 • 4 hour session

Tonight we completed the OnionBlog infrastructure - a multi-layered blog publishing system that treats Obsidian as the source of truth and Claude as the publishing engine. The result is what we're now calling "CLI Claude CMS" or "ClaudePress" - a simple but powerful workflow for converting markdown notes into a beautiful portfolio blog.

The Problem

We started the session attempting to configure the Obsidian Templater plugin for auto-generating blog post templates. The community plugin UI was difficult to use, showing every markdown file in the vault instead of just the template files. Even after directly editing the plugin's JSON configuration file, the user decided to abandon the approach entirely with the observation: "community plugins rarely work."

The Solution: CLI Claude CMS

Instead of fighting with plugins, we established a simple workflow:

  • User writes content in Obsidian (any markdown format)
  • User tells Claude to publish
  • Claude converts markdown to HTML, copies media, and updates indexes
  • Git push deploys to GitHub Pages in 1-2 minutes

User's feedback: "this is awesome! the obsidian source of truth is the perfect interface to the cli claude blog engine"

OnionBlog Architecture

The blog system has multiple layers, like an onion:

Layer 1: Main Blog Directory

A hub page (blog.html) with 4 clickable section cards providing navigation to independent blog categories.

Layer 2: Blog Section Indexes

  • Announcements - Software releases & updates
  • Support - FAQs & help documentation
  • Claude Sessions - Development logs & transcripts
  • Personal - Life, photos & journal

Layer 3: Individual Posts

Each section contains individual blog post pages in the posts/ directory structure, maintaining complete independence between sections.

Photo Gallery System

We built a full-screen carousel gallery system with these features:

  • Gallery card component showing preview grid of 4 recent photos
  • Tap to open full-screen carousel viewer
  • Support for images, GIFs, and videos
  • Videos auto-play muted, tap to restart with sound
  • Swipe navigation (mobile) and keyboard arrows (desktop)
  • Position counter showing current slide

UX Refinements

Several improvements based on user feedback:

  • Made entire blog preview cards clickable (removed "Read more" links)
  • Changed navigation text to "← Blog Directory" for clarity
  • Added optimized 32x32 PNG favicon to all 22 pages
  • Consistent dark overlay styling across all blog pages

Self-Documenting Files

Established naming convention: YYYY MMM DD [Title][Section/Subsection].md

This ensures files remain traceable even if moved or if folder structure changes. The breadcrumb system makes the "onion expandable" for future subsections.

Technical Implementation

Video Carousel

The carousel uses touch event listeners for swipe detection and handles video playback states across slide transitions:

  • Pauses all videos when switching slides
  • Auto-plays current video muted
  • Click/tap handler restarts video from beginning with sound
  • Keyboard navigation with arrow keys and Escape to close

Favicon Optimization

Used macOS sips command to resize and properly convert the avatar background image to an optimized 32x32 PNG (4.8KB). Applied to all pages in the portfolio.

GitHub Pages Deployment

Discovered that changes take 1-2 minutes to appear after pushing to the repository. Browser caching requires hard refresh (Option + Cmd + R in Safari) to see favicon changes.

Rollback Point

Created git tag: rollback-2025-11-05-onionblog-complete

Next Steps

  • Timeline page updates (scheduled for tomorrow)
  • Investigate GIF animation display (user suspects it's just 4 copies of same GIF, probably not broken)
  • Consider adding gallery systems to other blog sections

Lessons Learned

Sometimes the simplest solution is the best. Instead of wrestling with complex plugins and configurations, we established a clean workflow that leverages each tool's strengths:

  • Obsidian - Beautiful markdown editor with cross-device sync
  • Claude - Content transformation and publishing automation
  • GitHub Pages - Fast, free static site hosting

The result is "ClaudePress" - a blog CMS that feels magical to use.