MDX Blog Template Reference

Use this file as a copy-paste reference whenever you forget syntax.

1) Frontmatter template

---
title: "Your Post Title"
author: Vetcha Pankaj Nath
pubDatetime: 2026-01-01T10:00:00Z
description: "Short summary for cards, SEO, and social previews."
draft: false
tags: ["tag-1", "tag-2"]
featured: false
modDatetime: 2026-01-02T18:30:00Z
canonicalURL: "https://example.com/original-post"
hideEditPost: false
timezone: "Asia/Kolkata"
---

2) Text formatting

Normal text, bold, italic, bold+italic, strikethrough, and inline code.

You can also use HTML where needed: highlighted text, H₂O, 10⁶.

Current year via MDX expression: 2026.

3) Links and headings

• Internal link: Go to Notes
• External link: Astro Docs

H3 heading1

H3 heading2

H3 heading3

H3 heading4

what to do now i dont know do you have any suggestions

H4 heading

4) Quotes, lists, tasks

Blockquote example.

Nested quote style works too.

• Unordered item
  • Nested item
• Another item

1. Ordered item
2. Ordered item two

5) Tables

6) Code blocks

Basic fenced code: ¹

const greet = (name: string) => `Hello, ${name}!`;
console.log(greet("Pankaj"));

Code block with filename label (uses your custom file="..." meta):

export function sum(a: number, b: number) {
  return a + b;
}src/utils/example.ts

Shiki notation examples (highlight, word highlight, diff):

const apiBase = "https://old.api.dev"; 
const apiBase = "https://new.api.dev"; 

const apiKey = process.env.API_KEY; 
const enableBeta = true; src/config/feature.ts

Shell snippet:

pnpm install
pnpm devterminal

7) Images (all common styles)

A) Markdown image

B) Astro Image component (recommended)

C) Plain HTML image using imported asset

8) Reusable components in MDX

Callout

Definition

Bloom Filter

A space-efficient probabilistic data structure used to test whether an element is a member of a set. False positives are possible, but false negatives are not.

Accordion (collapsible section)

Badge (inline label)

Status: Draft

Tabs (language/code switcher)

fn main() {
    println!("Hello from Rust!");
}

def main():
    print("Hello from Python!")

echo "Hello from shell!"

VideoEmbed

9) Footnotes

MDX also supports footnotes in Markdown style.[^2]

10) Quick publish checklist

• Title is clear and searchable
• description is concise and useful
• tags are relevant
• All images have good alt text
• Code blocks are tested
• No secrets/private data
• draft: false before publishing