$ show WebDevSimplified/Web-Dev-Simplified-Official-Blog
This repository is the official blog for the 'Web Dev Simplified' educational brand, built with Astro as a static site generator. It contains hundreds of MDX tutorial articles covering JavaScript, CSS, React, TypeScript, and other web development topics, published on a strict Monday schedule. The architecture is a static blog with selective client-side interactivity via React components (islands) embedded in articles to demonstrate concepts. Key infrastructure includes a custom theme system with light/dark mode, Plausible analytics with a custom proxy, ConvertKit newsletter integration, dynamic Open Graph image generation using Satori/Sharp, and a set of custom Remark plugins for YouTube embeds, responsive images, and syntax highlighting with line highlights. Deployment is on Netlify with redirect handling and RSS feed generation. The content creation pipeline is augmented by AI agent skills defined in the `.agents/` directory, which enforce a strict writing style and publishing workflow. While the codebase is well-organized and demonstrates solid engineering practices for a content site, it carries some technical debt including a pinned outdated Node.js version (v17.9.0), use of deprecated Shiki API, and a dead service worker that only self-unregisters. The docs/ directory contains comprehensive guides but has drifted from the actual code version (references Astro 2.4.5 while using 3.6.5). Overall, it is a well-crafted, feature-rich blog platform with reusable patterns in its utility modules and plugins.
The LLM identified 5 files worth highlighting for reuse:
Provides `useLocalStorage` and `useSessionStorage` custom hooks that wrap browser storage APIs with serialization/deserialization. Self-contained, no internal imports, follows a clean React hook pattern. Can be extracted into any React project for typed, reactive state persistence.
A set of modular social share button components (Facebook, Twitter, LinkedIn, Reddit, WhatsApp, Email, Native) plus a `useShareDialog` hook. Each button is a self-contained component that receives a URL and builds the appropriate share intent. The collection demonstrates a clean separation of concerns and can be reused in any web project with minimal adaptation.
A custom Remark plugin that transforms markdown image references like `youtube: VIDEO_ID` into responsive YouTube iframe embeds. It is a standalone function that follows the Unified/Remark plugin interface, processes AST nodes, and returns a container element. Easily extracted into any MDX or markdown pipeline that needs automated video embeds.
A Remark plugin that adds responsive image handling: it wraps `<img>` tags with `<picture>` elements, applies modern image formats, and adds lazy loading attributes. Self-contained and well-parameterized, it demonstrates a practical approach to image optimization in markdown-based static sites. Can be reused in any Astro or remark-based project.
A function to dynamically generate Open Graph images using Satori (for HTML-to-SVG conversion) and Sharp (for SVG-to-PNG). It takes parameters like title, date, and tags, and produces a properly sized image. Isolated from the rest of the codebase (only imports Satori, Sharp, and asset files). Can be extracted into any web project needing server-side OG image generation.