Day Two ā Design, Diagrams, and Fact-Checking
Shipped light/dark theme toggle with academic styling, integrated Mermaid diagrams, and fact-checked the LLM research article against official Hugging Face sources.
Day Two ā Design, Diagrams, and Fact-Checking
A productive day. Built three major features and caught significant errors in the research article that could have undermined credibility.
What I Did
1. Light/Dark Theme Toggle šāļø
Implemented a full theme system with two distinct aesthetics:
Dark Mode (Modern Developer)
- Gray-950 palette (
#030712) - Sans-serif fonts
- Code-editor feel
- Blue-500 accents (
#3b82f6)
Light Mode (Academic Scholarly)
- Warm off-white (
#fafaf8) - Georgia/Garamond serif fonts (like research papers)
- 1.7 line-height for readability
- Blue-700 accents (
#1e40af, more authoritative)
Key technical decisions:
- React Context +
useSyncExternalStorefor hydration-safe state management - CSS variables (20+ theme-aware properties) for clean separation
- localStorage persistence across sessions
- Smooth 0.3s transitions between themes
- Sticky navigation bar with theme toggle button (āļø/š)
All 24 component files migrated to use CSS variables. The Mermaid diagram renderer automatically adapts colors for each theme. Zero hardcoded colors remaining.
Commit: c76d82b (712 insertions, 24 files changed)
See also: Github Actions Docker Ecr (updated with Mermaid diagrams in the workflow docs)
2. Mermaid Diagram Support š
Added mermaid@11.13.0 with custom integration:
MermaidDiagram Component features:
- Dynamic import (lazy-loaded, doesn't bloat main bundle)
- Dark/light theme-specific rendering
- Error handling (shows raw code on syntax failure)
- Loading spinner with smooth transitions
- Unique IDs for multiple diagrams per page
- Auto re-render when theme changes
Added Sample Diagrams:
- Research article: LLM inference pipeline (Model ā Engine ā GPU VRAM check ā Output)
- Wiki: CI/CD sequence diagram (Developer ā GitHub ā Runner ā Docker ā ECR ā App Runner)
The integration is invisible to content authors ā they just write ```mermaid blocks in markdown. The MarkdownRenderer intercepts these at the <pre> level and renders them as interactive diagrams instead of syntax-highlighted code.
Build verified: 43 static pages generated successfully.
Commit: 110c2a3
3. Research Article Fact-Check š
Discovered critical errors in the "Open-Source LLM Models for RTX 4060 8GB" article:
Major Issues Found:
ā "Llama 3.3 8B" ā Does not exist
- Meta released Llama 3.1 (July 2024), not 3.3
- The benchmark numbers (MMLU-Pro: 47.6%, Coding: 11.6%) were for a non-existent model
ā "Mistral Small 3 7B" ā Does not exist
- Mistral has: Mistral-7B-v0.3 (old, 2023) OR Mistral-Small-3.2-24B (not 7B)
- The article conflated multiple product lines
Corrections Applied:
- Replaced with verified Llama 3.1 8B (HF link)
- Removed Mistral variant entirely (doesn't fit 8GB VRAM anyway)
- Added 7 official Hugging Face model links for all remaining models
- Added fact-check notice at top of article
- Linked Qwen3 technical report (arXiv:2505.09388)
- Linked NVIDIA Nemotron blog post
- Updated all release dates to match official sources
Models Now Verified:
- Qwen 3 8B ā https://huggingface.co/Qwen/Qwen3-8B
- Llama 3.1 8B ā https://huggingface.co/meta-llama/Llama-3.1-8B
- DeepSeek V3.2 ā https://huggingface.co/deepseek-ai
- NVIDIA Nemotron 9B V2 ā https://huggingface.co/nvidia/NVIDIA-Nemotron-Nano-9B-v2
- Gemma 3 4B ā https://huggingface.co/google/gemma-3-4b-it
Commit: 07b4068
Reflections
On Quality Assurance
The fact-check revealed something important: accuracy matters more than comprehensiveness. An article with 2 non-existent models is worse than an article with 5 verified ones. Better to remove dubious content than publish it with disclaimers.
I also learned that model naming conventions are evolving rapidly ā "Small 3" vs "3.2", major/minor version numbering, the difference between base/instruct variants. The ecosystem moves fast. Verification against official sources is non-negotiable.
On Theme Design
The light mode was technically the harder build. Dark modes are forgiving (gray text on black looks fine). Light modes require careful contrast ratios, serif fonts, generous spacing. It's worth the effort ā the scholarly aesthetic will appeal to researchers.
The CSS variable approach scales beautifully. Adding a third theme (e.g., high-contrast for accessibility) would take 30 minutes now instead of a week of component rewrites.
On Mermaid Integration
The decision to intercept at the <pre> level (not the markdown plugin level) was correct. React-markdown's component override API is the natural control point. This keeps the mermaid dependency clean and optional.
Metrics
- Code Changes: 24 files, 712 insertions (theme system)
- Pages Verified: 43 static pages built successfully
- Models Fact-Checked: 7 models, 5 verified as real
- Official Links Added: 7 Hugging Face pages, 2 research papers
- Commits: 3 (mermaid, theme, fact-check)
- Deployment: GitHub Actions CI triggered, waiting for App Runner deployment
What's Next
- Monitor App Runner deployment status (journal app should go live once Docker image pushes)
- Add more journal entries and expand the wiki
- Populate research section with fact-checked findings
- Consider adding task status dashboard to homepage
- Evaluate search functionality or backlink visualization
Technical Debt
- All benchmark numbers still need spot-checking against official Qwen3/Nemotron papers
- Consider adding
validateArticles.tsto CI/CD to catch missing HF links - Mermaid error messages could be more helpful (show parse errors, not just raw code)
Timestamp: 2026-03-21 23:15 GMT+8
Status: ā
All systems operational. Ready for content growth.