A single post that exercises every feature the blog pipeline supports. Everything below renders at build time via marked plus the custom extensions in app/vite/plugins/md-frontmatter.ts. Use this as a cheat sheet when writing future posts — if something on this page renders wrong on the deployed site, the renderer regressed, not the content.

Table of contents

The {{ toc }} token expands to a bullet list of the post's h2–h6 headings:

• Table of contents
• Headings
  • This is an h3
    • And this an h4
• Text formatting
• Links
  • Reusable references
• Site variables
• Lists
• Blockquote
• Horizontal rule
• Code
• Tables
• Definition list
• Images
• Footnotes
• Gist embed
• Frontmatter

Headings

Post titles come from frontmatter (title), so the body starts at h2. Use h3/h4 for subsections — anything deeper probably means the section should be split into its own post.

This is an h3

And this an h4

Text formatting

Standard emphasis: bold, italic, both, strikethrough. Inline code uses backticks.

Raw inline HTML passes through for semantic extras: highlight, HTML, — Mark Otto, deleted, inserted, H₂O, E = mc².

Links

Plain markdown [text](url) works for every link type. Internal links that start with / are intercepted at runtime by useInternalLinkNav and navigate through React Router — no full page reload.

• External: React Router docs.
• Internal route: blog index, CV page.
• Static artifact: RSS feed, 404 page.
• Reference-style: see the marked docs.
• Autolink: https://d3strukt0r.dev.
• In-page anchor: jump to code.

Reusable references

Reference-style links let you define a URL once and reuse it across the post. Define the label anywhere (convention: grouped at the bottom), then cite it with [text][label]:

Check out the marked docs for more info on how to get the most out of marked. File all bugs/feature requests at marked's GitHub repo. If you have questions, you can ask them on the marked discussions.

Site variables

Post content references central data through {{ path.to.key }} — expanded against content/site.yml at build. Keeps URLs, handles, and identity strings out of prose.

• Name: Manuele
• Site URL: https://d3strukt0r.dev
• Repository: https://github.com/Team-MaRo/d3strukt0r-portfolio
• Contact: gh-contact@d3st.dev
• GitHub: https://github.com/D3strukt0r
• Built on: June 24, 2026

Router paths are derived from app/routes.ts and exposed as {{ urls.<route-file-basename> }} — e.g. {{ urls.home }} → {{ urls.home }}, {{ urls.blog }} → {{ urls.blog }}. Anything under the urls: section of site.yml (static artifacts like feed and not_found) wins over the router-derived map.

Lists

Unordered:

• first item
• second item
  • nested once
  • also nested
• third item

Ordered:

1. one
2. two
3. three

Blockquote

The best code is no code at all. Every new line of code you willingly bring into the world is code that has to be debugged, code that has to be read and understood, code that has to be supported.

— Jeff Atwood

Horizontal rule

Three or more hyphens on their own line render as a dashed divider:

Code

Inline snippets use backticks: marked.use() registers an extension.

Fenced without a language — plain preformatted:

$ pnpm run build
$ pnpm run preview

Fenced with a language — shiki highlights at build time using real TextMate grammars, with dual light/dark themes that follow the site's theme toggle:

export function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^\w\s-]/g, '')
    .replace(/\s+/g, '-');
}

Append linenos to the info string for a two-column render with a line-number gutter:

1
2
3
4
5
6
7
8
9
export function expandTemplate(md: string, vars: Record<string, unknown>): string {
  return md.replace(/\{\{\s*([^}]+?)\s*\}\}/g, (match, raw) => {
    const inner = raw.trim();
    if (inner === 'toc') return buildTocList(md);
    if (inner === 'now') return formatNow();
    if (inner.startsWith('gist:')) return gistEmbed(inner.slice(5));
    return lookup(inner, vars) ?? match;
  });
}

Tables

GFM table syntax:

Definition list

Raw HTML — marked doesn't parse the Kramdown term\n: def shorthand, so write <dl> directly:

HTML

HyperText Markup Language. Structure.

CSS

Cascading Style Sheets. Presentation.

JS

JavaScript. Behavior.

Images

External placeholders via placehold.co:

Local images go under app/assets/ and are imported by the route component, not referenced from markdown.

Footnotes

Reference a footnote inline with [^id]¹ and define the body anywhere in the document. On render, marked-footnote collects all definitions into a <section class="footnotes"> at the bottom and wires up back-links automatically.

Multiple references to the same id collapse to a single footnote with multiple back-arrows¹.

Gist embed

{{ gist:ID }} expands to an iframe pointing at the gist's pibb URL (GitHub's iframe-safe render) — drops the embed inline without blocking on a <script> tag:

body {
  // matches data-theme="light" or data-theme="auto" with system instructing light mode
  @include light {
    background: white;
    color: black;
  }
  
  // matches data-theme="dark" or data-theme="auto" with system instructing dark mode
  @include dark {
    background: black;
    color: white;
  }
}

@use 'sass:selector';
@use 'sass:string';
@use 'sass:list';

@mixin mode($mode) {
  $opposite-mode: '';
  @if $mode == 'light' {
    $opposite-mode: 'dark';
  } @else {
    $opposite-mode: 'light';
  }
  
  $individual-selectors: selector.parse(&);

  $new-selectors: ();

  // Split into individual selectors
  @each $individual-selector in $individual-selectors {
    // Split by :: to find pseudo elements
    $parts: string.split(#{$individual-selector}, '::', 2);

    @if list.length($parts) > 1 {
      // Selector has pseudo elements:
      // Split up the selector, apply mode modifier and stick the pseudo element on again
      $new-selectors: list.append(
        $new-selectors,
        "#{selector.append(list.nth($parts, 1), ':where(:root:not([data-theme=#{$mode}]):not([data-theme=#{$opposite-mode}]) *)')}::#{list.nth($parts, 2)}",
        comma
      );
    } @else {
      // Selector has no pseudo elements: Simply append the :where() clause
      $new-selectors: list.append(
        $new-selectors,
        selector.append($individual-selector, ':where(:root:not([data-theme=#{$mode}]):not([data-theme=#{$opposite-mode}]) *)'),
        comma
      );
    }
  }

  @media (prefers-color-scheme: $mode) {
    @at-root #{$new-selectors} {
      @content;
    }
  }
  @at-root #{$new-selectors} {
    @content;
  }
}

@mixin light {
  @include mode('light') {
    @content;
  }
}

@mixin dark {
  @include mode('dark') {
    @content;
  }
}

Frontmatter

Every post needs frontmatter at the top:

---
title: Post title
date: 2026-04-23
---

title drives the page <title> and the rendered h1. date can come from the filename prefix (YYYY-MM-DD-slug.md) or the frontmatter field — frontmatter wins when both are present. Slug is derived from the filename with any leading YYYY-MM-DD- stripped.

That's the full surface. To add a new feature, extend expandTemplate (build-time tokens), register a marked.use({ renderer }) override (HTML shape), or add styles under app/styles/terminal-content.scss (appearance).