anjani

A personal corner of the web. Notes, projects and writing.

Browse

  • Home
  • Blog
  • Projects
  • About
  • Contact
+

Your card here

Open slot

A featured note, project or link can live here.

Coming soon

Made by anjani
© 2026 All Rights Reserved

BlogProjectsAbout
Contact
anjani
All writing
THE NOTEBOOK / 6 min read

A little more than words.

An open notebook for ideas of every shape. A living guide to everything you can put in a post.

Component guideNovember 15, 2026 RSS
GuideMDXComponents
An illustration of floating article and code cards on a blue dotted canvas
On this page
The everyday essentialsTables that don't break the pageA note worth noticingCode, with a little contextCode tabsA little room for mathsDraw the ideaImages with breathing roomA small galleryMoving pictures and soundYouTube, without the surpriseDetails, on demandCards, links, and next stepsYour components belong here, too
PART OF A SERIESThe writing toolkit
  1. A little more than words.
  2. Your first rich post.
COMPONENT PLAYGROUND MDX ready

Some ideas need a sentence. Others need a table, an interactive sketch, or a small diagram. This notebook has room for all of them.

This is a working showcase, not a screenshot of one. Open the tabs, copy some code, enlarge an image, and try the little counter at the end. The source is in content/posts/everything-you-can-write.mdx.

The everyday essentials#

Start with bold ideas, a little emphasis, a thought you changed your mind about, and inline code. Add a useful link, nested lists, or a footnote when the tangent deserves its own space.1

  • A place to collect your thoughts
  • A place to try something new
    • With room for the smaller details
    • And one more layer of context
  1. Notice something.
  2. Write it down.
  3. Make it your own.
  • Markdown and MDX, side by side
  • Light and dark themes
  • Your next good idea

A simple blockquote can make space for a thought without taking over the page.

Tables that don't break the page#

Building blockWrite it withGood for
Text and structureMarkdownThe everyday parts
Rich contentPremade componentsDiagrams, media, callouts
Something uniqueYour own ReactAnything you can build

A note worth noticing#

A quiet note
Use a callout when a detail deserves a little more attention than the surrounding paragraph.
A useful shortcut
Components can contain Markdown, links, lists, and other components. Leave a blank line around Markdown inside JSX.
Worth checking
Check your sources and preview the post before publishing.
Trusted authors only
MDX can run JavaScript. Only publish files from people you trust to change the site's code.
All set
Five callout styles, one small component.
Note

GitHub-style alerts work too, using plain Markdown.

Code, with a little context#

Syntax highlighting, filenames, line numbers, line highlights, word highlights, and a copy button are built in. Copying takes just the code, not the line numbers.

components/greeting.tsx
tsx
export function Greeting({ name }: { name: string }) {
  return (
    <p>Hello, {name}.</p>
  );
}

Code tabs#

bash
npm install
npm run dev
bash
pnpm install
pnpm dev
bash
bun install
bun dev

A little room for maths#

Inline notation sits right in the sentence: a2+b2=c2a^2 + b^2 = c^2a2+b2=c2. Display maths has a little more breathing room:

∫01x2 dx=[x33]01=13\int_0^1 x^2\,dx = \left[\frac{x^3}{3}\right]_0^1 = \frac{1}{3}∫01​x2dx=[3x3​]01​=31​ [1234][xy]=[x+2y3x+4y]\begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} x + 2y \\ 3x + 4y \end{bmatrix}[13​24​][xy​]=[x+2y3x+4y​]

Draw the idea#

A Mermaid diagram is text you can edit, not an image you need to redraw. Its source stays available below it.

Loading diagram…

Diagram source
graph TB
  A[An idea] --> B[A first draft]
  B --> C{Does it feel right?}
  C -->|Almost| B
  C -->|Yes| D[Publish]

Images with breathing room#

Images support captions and keyboard-accessible zoom. Select an image to enlarge it, then press Escape to return.

A local SVG illustration, included in the repository.
A floating editorial card illustration

A local SVG illustration, included in the repository.

A small gallery#

The first sketch.
Blue and lavender editorial cards

The first sketch.

A different point of view.
Warm peach and pink editorial cards

A different point of view.

Moving pictures and sound#

Local video and audio use the browser's own controls. These tiny demo files are included, so the examples don't depend on a media host.

A three-second motion test pattern. No autoplay.
A short, quiet tone to demonstrate audio playback.

YouTube, without the surprise#

Third-party players are click-to-load: no request goes to YouTube or X until you choose to load their embed. External embeds may be blocked by your privacy settings or the provider; their original links remain available.

Big Buck Bunny - Blender FoundationWatch on YouTube

Open the video on YouTube

XPost on X
Post on XView original post

Details, on demand#

The main thought belongs here. Tabs let related ideas share a little space without making the reader lose their place.

This is the second panel. Move between tabs with the arrow keys, Home, or End.

Can I nest components?

Yes. Any of these blocks can sit inside another when the structure makes sense.

Tip
Here is a callout inside an accordion.
What about regular HTML?

Use elements like ⌘ K, highlighted text, MDX, or a download link. JSX uses className instead of class.

Cards, links, and next steps#

Browse the notebook

Read the latest notes and explore by topic.

Make it your own

Cards work with or without a link. Add a title and whatever belongs below it.

mdxjs.comMDXMarkdown for the component era. The format behind this notebook.

Previews use metadata you supply. They don't send private URLs to an external scraping service.

Default badge Ready In progress

Create a file

Add a .md or .mdx file in content/posts/.

Write your way

Mix Markdown with the built-in components, or register a component of your own.

Preview and publish

Run the local preview, check the mobile layout, then commit and push.

Give the idea enough space to be understood.

Sample pull quote

Your components belong here, too#

This little counter is a custom React component. It has state, buttons, and room to become something completely different.

Custom React component
3

Register a component once in components/blog/mdx-components.tsx, then use it in any post. Server components work too. The README has the full authoring guide.

The rest is built in: heading links, a table of contents, reading time, tags, covers, author details, series, related posts, RSS, and a generated share image for every post.

Footnotes#

  1. This is a real footnote. The return link takes you back to the sentence you were reading. ↩

C
WRITTEN BYComponent guide

A sample post and a reference for writing with the blog's component library.

KEEP READING
Your first rich post.

From a blank file to a small corner of the internet.

Hello, world

First post on the new site. This is a placeholder - replace it with real writing.

Building a review schedule that actually sticks.

A short build log: what spaced repetition says about forgetting, and the small scheduler that came out of it.

ON THIS PAGEThe everyday essentialsTables that don't break the pageA note worth noticingCode, with a little contextCode tabsA little room for mathsDraw the ideaImages with breathing roomA small galleryMoving pictures and soundYouTube, without the surpriseDetails, on demandCards, links, and next stepsYour components belong here, tooBack to top ↑