Charted Data.

Command Palette

Search for a command to run...

3 min readCharted Data

Configuration Guide

Learn how to customize and configure your Charted Data boilerplate.

Developmentmdxcodesyntax-highlightingtutorial

The Charted Data boilerplate is designed to be highly configurable through a single source of truth: the config/site.ts file. This guide explains each section of the configuration and how you can tailor the platform to your needs.

Centralized Config

Most site-wide changes—from branding and SEO to navigation and feature flags—are managed directly in config/site.ts. You don't need to hunt through multiple files to update your site's identity.

Core Site Information#

This section defines the basic identity of your website.

export const siteConfig = {
    name: "Charted Data",
    title: "Charted Data Blog",
    tagline: "Insights on development, design, and technology",
    description: "A modern, typographic blog template built with Next.js, MDX, and Shadcn UI.",
    url: "https://your-site-url.com",
    locale: "en_US",
    language: "en",
}
  • name: The short name of your site (used in the header and copyright).
  • title: The default SEO title for the homepage.
  • tagline: A catchy slogan displayed in various parts of the site.
  • description: The default meta description for search engines.
  • url: The production URL of your site (critical for SEO and canonical links).

Branding & Assets#

Customize your visual identity including logos and themes.

  • Logo: Choose between a text-based logo or an image logo. Set logo.image to null to use text.
  • OG Image: The social sharing image displayed when your links are shared on Twitter/LinkedIn.
  • Theme: Set your defaultTheme ("light", "dark", or "system") and enable/disable the theme toggle.

Author & Social Links#

Define who is behind the content and where users can find you.

  • author: Set your name, bio, and avatar. This information is used in post footers and the About page.
  • social: Provide URLs for your Twitter, GitHub, LinkedIn, etc. The boilerplate automatically handles icons and links.

Social links are not only used for UI icons but are also injected into JSON-LD Structured Data, helping search engines understand your social presence.

SEO Configuration#

Fine-tune how your site appears in search results.

  • keywords: An array of terms relevant to your niche.
  • allowIndexing: Set to true for production. If false, it adds a noindex tag to keep your site private during development.
  • googleSiteVerification: Paste your Google Search Console verification ID here.

Manage your header and footer links easily.

  • mainNav: Links appearing in the top navigation bar.
  • footerNav: Divided into main links and legal links (Privacy, Terms).

Feature Flags#

Toggle powerful features on or off with a single boolean change.

features: {
    search: true,             // Enable/disable the global search
    rss: true,                // Generate and link an RSS feed
    sitemap: true,            // Automatically generate sitemap.xml
    codeHighlighting: true,   // Enable syntax highlighting for code blocks
    pageTransitions: true,    // Smooth transitions between pages
    readingProgress: true,    // The progress bar at the top of posts
}

Blog & Content Settings#

  • postsPerPage: Number of posts shown before pagination kicks in.
  • showReadingTime: Displays "5 min read" on post cards.
  • categories: Define the valid categories for your blog. These are used for filtering and breadcrumbs.

Analytics#

The boilerplate includes built-in support for:

  • Google Analytics 4
  • Plausible Analytics
  • Umami Analytics

Simply provide your IDs/URLs in the analytics section to start tracking visitors.

Ensure you comply with local privacy laws (like GDPR) when enabling analytics tracking.

Helper Functions#

The site.ts file also exports several utility functions:

  • getFullUrl(path): Returns a fully qualified URL for a given path.
  • getPageMetadata(options): Generates complex SEO metadata objects effortlessly.
  • getActiveSocialLinks(): Filters out null social links for clean UI rendering.
Download This Boilerplate ⚡