Blog authoring tutorial (math, code, media, interactive HTML, and marimo)

This tutorial is a one-stop reference for creating rich blog posts in this repository.

Table of contents

1) Markdown basics

Use normal Markdown headings, emphasis, lists, links, and quotes.

Tip: Keep each section focused and use short paragraphs for readability.

Useful links:

• Astro content collections
• KaTeX docs

2) Write math with KaTeX

Inline math works directly in Markdown, for example $E = mc^2$ and $\sigma^2 = \frac{1}{n}\sum_i(x_i-\mu)^2$.

Display math works too:

3) Code blocks

Use fenced code blocks:

type Post = {
  title: string;
  tags: string[];
};

const post: Post = { title: "Rich markdown", tags: ["docs", "math"] };
console.log(post);

Inline code also works, like npm run dev.

4) Images

Add images with Markdown:

5) Quotes, links, and references

“Simplicity is prerequisite for reliability.” — Edsger W. Dijkstra

You can add references with footnotes enabled by GFM.¹

Linking to files in this repository

• Use deployed site paths for files that live under public/, because those files are served directly by Astro. In this repo, write them with the site base prefix, for example /maverick-chronicles/blog-photo.jpg or /maverick-chronicles/interactive/hello-interactive.html.

• Do not use local source paths like src/data/... as site links; those files are not publicly served in the built site.

• If you want readers to open a source file from the repository, link to the GitHub file URL on the source branch instead (gh-pages in this repo), for example:

  [tutorial source](https://github.com/Ramneet-Singh/maverick-chronicles/blob/gh-pages/src/data/blog/blog-authoring-tutorial.md)

6) Standalone interactive HTML + JavaScript

Put standalone files in public/interactive/*.html. They are served directly.

Example file in this repo:

• /public/interactive/hello-interactive.html

Direct link:

• /interactive/hello-interactive.html

Embed it inside a blog post:

7) Convert marimo notebooks to blog posts

1. Export a notebook to Markdown:

   marimo export md path/to/notebook.py -o src/data/blog/notebook-post.md

2. Ensure the exported file starts with required frontmatter keys:

   ---
   title: "My notebook post"
   description: "Summary of the notebook"
   pubDatetime: 2026-05-11T00:00:00Z
   author: "Ramneet Singh"
   tags:
     - marimo
   draft: false
   ---

3. Optionally edit the Markdown for structure and readability, then run:

   npm run dev

That is all you need to publish rich technical blogs in this project.