Charted Data: The Ultimate Single-Page Guide

Welcome to the comprehensive, all-in-one manual for Charted Data. This guide is designed to get you from zero to a live, professional data-driven blog in under 10 minutes.

🛠️ 1. Quick Start: Your 3-Step Launch

Follow these steps to get your site live. Even if you've never used Next.js before, this "no-brainer" method will work for you.

Step 1: Fork and Download

1. Visit the Charted Data Repository.
2. Click the "Fork" button at the top-right. This gives you your own copy of the code.
3. Download it to your computer:

   git clone https://github.com/your-username/charted-data.git
   cd charted-data
   bun install  # or 'npm install'
   

Step 2: Customize Everything (config/site.ts)

The easiest way to change your site's name, logo, and links is through the configuration file. No coding required—just change the text.

• Open config/site.ts in your code editor.
• Update the details to match your brand:

  export const siteConfig = {
    name: "My Awesome Data Blog",
    description: "Interactive insights and data stories.",
    url: "https://your-domain.com",
    links: {
      twitter: "https://twitter.com/yourhandle",
      github: "https://github.com/yourusername",
    },
    ...
  };
  

This single file updates your headers, footers, SEO tags, and social links instantly!

Step 3: Launch on Vercel (The "No-Brainer" Way)

1. Go to Vercel.com and sign in.
2. Click "Add New" → "Project" and choose your charted-data repository.
3. Important: Before clicking deploy, add these Environment Variables in the Vercel dashboard:
   • ADMIN_EMAIL: Your personal email address (used for logging into the admin panel).
   • DATABASE_URL: Your connection string (from your Neon.tech project settings).
   • NEON_AUTH_BASE_URL: Your authentication link (from your Neon Auth Dashboard).
   • NEON_AUTH_COOKIE_SECRET: A 32-character secret (Type openssl rand -hex 32 in your terminal to get one).
4. Click "Deploy". Your site is now live!

🔐 2. Admin Panel: Your Command Center

Access your built-in CMS at /admin to manage your data-driven stories.

Logging In

Charted Data uses a secure, passwordless OTP (One-Time Password) system for administrators.

1. Navigate to /admin.
2. Enter the email address you set in your ADMIN_EMAIL environment variable.
3. Check your inbox for a 6-digit code.
4. Enter the code on the site, and you're in!

Using the Dashboard

Once logged in, you can:

• Write Stories: Create and edit posts using the real-time Markdown editor.
• Manage Drafts: Save your work-in-progress without publishing it immediately.
• Feature Content: Toggle the "Home Page Highlight" for your best articles.
• Smart Slugs: Let the system automatically generate SEO-friendly URLs for you.

📊 3. Visual Guides & Deep Dives

Explore our interactive guides to see Charted Data in action. These live previews demonstrate the full power of the engine, from data visualization to advanced formatting.

📈 Interactive Charts

Master the art of data storytelling. Learn how to transform raw CSV data into beautiful, interactive Bar, Line, and Area charts with zero effort.

💻 Advanced Syntax Highlighting

A billionaire-grade blog needs billionaire-grade code snippets. See how our engine handles multiple languages, line highlighting, and copy-to-clipboard functionality.

⚙️ Configuration Guide

Learn every detail of the config/site.ts file. This guide covers how to customize your branding, SEO, social links, and feature toggles from one central place.

🚀 Getting Started Deep Dive

A comprehensive walkthrough for newcomers. If you need more detail than the Quick Start above, this interactive tutorial covers every edge case of the installation.

You are now ready to build the future of data-driven storytelling. Happy writing! ⚡