Authoring MDX Content

    DNScale’s Docs and Blog are file-based and use MDX with YAML frontmatter.

    File Locations

    • Docs: src/content/docs/**/*.mdx
    • Blog: src/content/blog/**/*.mdx

    Frontmatter Fields

    Docs:

    ---
title: Your Doc Title
slug: your-doc-slug
# Optional
# description: Short summary
# order: Number used for sorting in the docs list
---

    Blog:

    ---
title: Your Blog Title
slug: your-blog-slug
# Optional
# description: Short summary
# date: YYYY-MM-DD (or full ISO timestamp)
# tags: ["tag1", "tag2"]
---

    Writing Content

    MDX lets you write Markdown and embed React components. The app includes a basic MDXProvider with styled elements.

    # Heading
 
Regular paragraph with **bold** text.
 
- List item 1
- List item 2
 
> Blockquote example

    Linking

    Use regular Markdown links, or link to routes in the app (e.g., /docs/authoring, /blog/getting-started).

    Code Blocks

    You can add fenced code blocks:

    export function hello(name: string) {
  return `Hello, ${name}!`
}

    Adding a New Page

    1. Create an .mdx file in the correct folder
    2. Add frontmatter at the top
    3. Use a unique slug
    4. Save — Vite will hot-reload in dev

    Rendering Behavior

    • The docs index uses order (then title) for sorting.
    • The blog index uses date (descending) for sorting.
    • Frontmatter is read by a Vite import.meta.glob loader in src/lib/content.ts.

    Happy writing!

    Callouts

    Use the Callout component for notes, warnings, tips, or info blocks:

    <Callout type="note" title="Heads up">
  This is a note-style callout.
</Callout>
 
<Callout type="warning" title="Caution">
  This is a warning.
</Callout>
 
<Callout type="tip" title="Pro tip">
  This is a helpful tip.
</Callout>
 
<Callout type="info" title="FYI">
  This is an informational callout.
</Callout>