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.

Landing page announcements

The landing page uses changelog entries in src/content/changelog/. Opt an entry in with homepage: true; the newest selected entry appears as a compact link above the hero heading, and up to three appear in the What's new section.

title: DNScale CLI 1.0.0
slug: cli-1-0-0
description: Manage DNS from your terminal with the DNScale CLI.
date: 2026-10-01
category: Product
homepage: true
homepageTitle: Meet the DNScale CLI
homepageHref: /blog/cli-launch

homepageTitle defaults to title. homepageHref defaults to the entry's /changelog#slug anchor and must be a site-relative URL. Keep the hero title short; the description belongs on the update card.

Only entries dated on or before the UTC build date are promoted. Selection does not depend on the visitor's clock; a future-dated announcement needs a new build to appear. This controls homepage promotion, not access to the changelog or linked page. With no eligible entries, both homepage placements are hidden. Set homepage: false to remove a promotion.

Run npm run test:announcements, npm run lint, and npm run build. Check the hero and update cards at desktop and mobile widths, follow their links, and verify the changelog anchor. Confirm installation examples and release destinations before promoting a release.

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>