Fennister
Tillbaka till dagboken
Ny MDX-dagbok — vad som förändrats på fennister.com
3 min läsning
webbnextjsmdxfennister

Ny MDX-dagbok — vad som förändrats på fennister.com

Dagboken har flyttats från hårdkodad TypeScript till MDX-filer med egna sidor, bättre typografi och tydligare SEO. Här är vad som är nytt och hur du skriver nästa inlägg.

Dagboken på fennister.com har fått en ordentlig ombyggnad. Det som tidigare låg som långa textblock i translations.ts och visades som expanderbara kort på en enda sida är nu en riktig blogg med egna URL:er, Markdown/MDX och en läsupplevelse som faktiskt känns som att läsa artiklar — inte bara scrolla i en FAQ.

Från hårdkodad data till MDX

Tidigare fanns varje inlägg som ett objekt med sections, paragraphs och bullets i TypeScript. Det fungerade för några inlägg, men blev snabbt tungt att underhålla och omöjligt att formatera med vanlig skrivvana (rubriker, listor, kod, bilder).

Nu ligger innehållet i content/diary/<slug>/sv.mdx och en.mdx. Frontmatter bär metadata — titel, datum, utdrag, taggar, valfri omslagsbild och relaterade länkar. Brödtexten är vanlig Markdown med GFM (tabeller, listor, länkar).

Sajten har fortfarande ingen route-baserad i18n: språkväxlaren i headern styr vilket språk som visas. Båda MDX-filerna serialiseras på servern; klienten väljer sv eller en utifrån localStorage.

Vad du märker som läsare

  • Egna sidor — /diary/[slug] per inlägg, delningsbara länkar och tydligare SEO (BlogPosting, canonical, Open Graph).
  • Lista på /diary — kort med omslag (bild eller gradient), datum, lästid, taggar och utdrag. Taggfilter högst upp.
  • Läsupplevelse — Tailwind Typography (prose-diary), bekväm radlängd, innehållsförteckning på längre inlägg, föregående/nästa mellan inlägg.
  • Startsidan — de tre senaste inläggen visas i en teaser mellan startups och kontakt-CTA.
  • RSS och sitemap — varje dagboksinlägg finns i /feed.xml och sitemap.xml med rätt URL.

Teknik under huven

Stacken för rendering:

  • gray-matter — frontmatter vid listning
  • next-mdx-remote-client — serialisering på servern, MDXClient i React
  • remark-gfm och remark-flexible-toc — GFM + innehållsförteckning
  • rehype-slug — ankare på rubriker
  • @tailwindcss/typography — prose-tema anpassat till sajtens färger

Omslagsbilder läggs under public/images/diary/<slug>/ och refereras som cover: "/images/diary/..." i frontmatter. Saknas bild används en slug-baserad gradient — inget tomt utan omslag.

Skriva ett nytt inlägg

  1. Skapa mappen content/diary/min-slug/.
  2. Lägg till sv.mdx och en.mdx med samma frontmatter-struktur (titlar och texter på respektive språk).
  3. Bygg om (npm run build) eller kör dev — Next genererar statiska sidor via generateStaticParams.

Exempel på frontmatter:

---
title: "Min rubrik"
date: "2026-06-01"
excerpt: "Kort sammanfattning för listor och SEO."
tags: ["devops", "webb"]
cover: "/images/diary/mdx-dagbok-ombyggnad/cover.jpg"
related:
  - label: SpokN
    href: /startups/spokn
---

Varför det var värt det

Konsult- och startup-innehåll ska kunna växa utan att translations.ts sväller. MDX gör att jag kan skriva som i en vanlig blogg, versionera inlägg i git och låta sitemap/RSS följa med automatiskt när nya mappar läggs till.

Nästa steg för mig är riktiga omslagsbilder per inlägg — gradienterna fungerar, men en bild säger mer när man delar länken i sociala flöden.