Charted Data.

Command Palette

Search for a command to run...

About.

The story behind Charted Data and why this blog exists.

Welcome

Charted Data is a modern blog template built with the latest web technologies. It's designed to provide an exceptional reading experience while being easy to customize and maintain.

Features

  • Interactive Charts — Render beautiful, data-driven charts directly in your Markdown using Recharts. Check out the interactive guide.
  • MDX Support — Write content in Markdown with the power of React components.
  • Full SEO — Comprehensive meta tags, Open Graph, Twitter cards, and JSON-LD structured data.
  • Light/Dark Mode — Automatic theme switching based on system preferences.
  • Search — Fast, full-text search powered by Pagefind.
  • RSS Feed — Subscribe to updates via RSS at /feed.xml.
  • Syntax Highlighting — Beautiful code blocks with line numbers and copy functionality.
  • Table of Contents — Auto-generated TOC with active section highlighting.
  • Responsive Design — Optimized for all screen sizes.

Technology Stack

This template is built with:

  • Next.js 16 — React framework with App Router
  • TypeScript — Type-safe development
  • Tailwind CSS v4 — Utility-first CSS
  • Shadcn UI — Accessible component library
  • MDX — Markdown with React components
  • Shiki — Syntax highlighting
  • Framer Motion — Smooth animations
  • Pagefind — Static search

Get Started

To start writing your own content, create MDX files in the content/blog/ directory. Each file should include frontmatter with title, description, date, and other metadata.

Check out the sample posts for examples of available MDX components and formatting options.

Download This Boilerplate ⚡