Hello world — the new mteke.com

This site is built on Next.js 16 + MDX + Tailwind v4 and is published to GitHub Pages. This post is a short tour of the new content format — copy, edit, ship.

Three theme modes #

Use the toggle in the header to switch between Light, Dark, and Navy. The whole palette — backgrounds, accents, code highlight — re-tunes automatically.

Colored callouts #

Code blocks — language-aware highlighting #

Default theme (matches the active site theme — light / dark / navy):

from netmiko import ConnectHandler
 
def add(a: int, b: int) -> int:
    return a + b
 
def connect(host: str) -> ConnectHandler:
    """Open an SSH session to a Cisco device."""
    return ConnectHandler(device_type="cisco_ios", host=host)

Per-block alternate themes #

Add style="<name>" to the fence to opt a single block into a different syntax-highlight palette. Available: dracula, nord, solarized, monokai.

Dracula:

def greet(name: str) -> str:
    return f"Hello, {name}!"
 
print(greet("world"))

Nord:

type User = { id: number; name: string };
 
const users: User[] = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Linus" },
];
 
users.forEach((u) => console.log(`${u.id}: ${u.name}`));

Solarized:

# Deploy with one command
git add . && git commit -m "post: hello world" && git push

Monokai:

package main
 
import "fmt"
 
func main() {
    fmt.Println("Hello, monokai!")
}

Inline syntax: variables like count and strings like "hello" get colored individually. Plain inline code works too.

YouTube embeds #

Full width (default):

60% wide, centered:

GitHub repo cards #

Use the <GitHubRepo> component for a rounded-square link card:

You can also just drop a plain GitHub link inline like https://github.com/anthropics/claude-code and it picks up a rounded chip style automatically.

Spotify embeds #

Track:

Album:

Playlist:

Podcast episode:

Podcast embeds (Apple / RSS / etc.) #

Apple Podcasts — paste the page URL, the component upgrades it to an embed:

Any provider that supplies an embeddable iframe URL also works:

Tables, lists, and more #

A blockquote — replaces the yellow-bordered boxes from Ghost.

What's next #

• Import existing Ghost posts: npm run migrate <ghost-export.json>
• Tweak the palette in src/app/globals.css (CSS variables)
• Update social links in src/lib/social.ts

Happy writing 🚀