Dokumentation

Parameter (Blog)

Parameter	Typ	Beschreibung
`title`	String	Titel des Blogposts
`date`	Datetime	Veröffentlichungsdatum im ISO-Format (`2024-08-17T00:43:17`)
`tags`	Array	Liste von Tags zur Kategorisierung
`showTitle`	Boolean	Steuert, ob der Titel in Listenansichten angezeigt wird
`linkURL`	String (URL)	Externer Link zum Beitrag (wird mit 🔗 angezeigt)
`viaURL`	String (URL)	Quell-URL als Quellenangabe (wird als “via @user” oder Domain angezeigt)
`layout`	String	Template für die Einzelansicht (z.B. `post`)
`listLayout`	String	Darstellung in Listenansichten: `full` (Standard) oder `article`
`postStyle`	String	Zusätzliche Stilvariante für die Post-Darstellung
`description`	String	Kurzbeschreibung, wird im `article`-Layout angezeigt
`hidden`	Boolean	Beitrag wird in der Blogliste ausgeblendet
`updated`	Boolean	Zeigt “aktualisiert”-Label an, wenn das Datum abweicht

Parameter (Bento / Index)

Parameter	Typ	Beschreibung
`title`	String	Titel der Kachel
`overline`	String	Überzeile oberhalb des Titels
`subtitle`	String	Untertitel in Akzentfarbe
`size`	Number	Spaltenbreite im 12er-Grid (Standard: `12`)
`weight`	Number	Sortierreihenfolge der Kacheln
`bentoLayout`	String	Partial-Template für die Kachel (Standard: `bento/hidden`)
`button_link`	String (URL)	Link für den Button der Kachel
`button_label`	String	Beschriftung des Buttons
`hidden`	Boolean	Kachel wird auf der Startseite ausgeblendet
`featured_image`	String (URL)	Bild für die Kachel (z.B. bei `profile`, `promo/m`)
`start`	String	Startdatum (z.B. bei `promo/s`)
`end`	String	Enddatum (z.B. bei `promo/s`, `promo/m`)

Index

Die layouts/index.html zeigt alle Seiten der Sektion “bento” als Kacheln in einem Grid mit 12 Spalten auf der Startseite an. Kacheln mit hidden: true werden ausgeblendet.

{{ define "main" }}
<div class="container">

    <div class="row mt-3 g-4">
        {{ range where (where .Site.Pages "Section" "bento") ".Params.hidden" "ne" true }}
        {{ $layout := .Params.bentoLayout | default "bento/hidden" }}
        <div class="col-lg-{{ .Params.size | default "12" }}">
            {{ partial (print $layout ".html") . }}
        </div>
        {{ end }}
    </div>
</div>
{{ end }}

Bento-Layouts

Jedes Bento-Layout wird über den bentoLayout-Parameter in der Frontmatter gesetzt.

`bento/profile`

Profilkarte mit Bild, Inhalt und mehreren Buttons.

Parameter	Typ	Beschreibung
`featured_image`	String	URL zum Profilbild
`name`	String	Name der Person
`buttons`	Array	Liste von Buttons mit `button_link` und `button_label`

`bento/blog`

Widget mit den 10 neuesten Blogposts. Zeigt Titel und Zeitstempel als scrollbare Liste.

Parameter	Typ	Beschreibung
`overline`	String	Überschrift (z.B. “What I’m working on”)
`button_link`	String	Link zum vollständigen Blog
`button_label`	String	Button-Text

`bento/skills`

Skill-Balken mit Emoji-Icons und Stufenanzeige (0–100%).

Parameter	Typ	Beschreibung
`skills`	Array	Liste mit `name`, `level` (0–100) und `icon` (Emoji)

`bento/social`

Social-Media-Links als Icon-Grid mit Bootstrap Icons.

Parameter	Typ	Beschreibung
`overline`	String	Überschrift
`social_links`	Array	Liste mit `platform`, `url` und `icon` (Bootstrap-Icon-Name)

`bento/clients`

Kundenliste mit Punkt-Trennzeichen, alphabetisch sortiert.

Parameter	Typ	Beschreibung
`overline`	String	Überschrift
`clients`	Array	Liste mit `client` (Name als String)

`bento/cv`

Lebenslauf-Timeline mit Abschlüssen und Institutionen.

Parameter	Typ	Beschreibung
`overline`	String	Überschrift (z.B. “Education”)
`education`	Array	Liste mit `degree`, `institution` und `year`

`bento/references`

Testimonials mit Profilbildern.

Parameter	Typ	Beschreibung
`overline`	String	Überschrift
`reference`	Array	Liste mit `name`, `position`, `content` (Zitat) und `picture` (Bild-URL)

`bento/gallery`

Horizontale Bildergalerie mit Scroll-Container.

Parameter	Typ	Beschreibung
`images`	Array	Liste von Bild-URLs
`title`	String	Galerie-Titel
`description`	String	Galerie-Beschreibung

`bento/video`

Eingebetteter YouTube-Player mit Thumbnail und Play-Button.

Parameter	Typ	Beschreibung
`video`	String	YouTube-Video-ID (ohne URL)

`bento/spotify`

Eingebetteter Spotify-Player.

Parameter	Typ	Beschreibung
`overline`	String	Überschrift
`spotify`	String	Spotify-Track-ID

`bento/map`

Interaktive Entfernungsanzeige von Düsseldorf. Nutzt Browser-Geolocation, keine Parameter nötig.

`bento/timezone`

Live-Zeitvergleich zwischen Berlin und dem Standort des Besuchers. Keine Parameter nötig.

`bento/talks`

Zeigt die 4 neuesten Einträge aus bento/talks/.

Parameter	Typ	Beschreibung
`overline`	String	Überschrift

Talks-Einträge benötigen: date, title, client, event, location, optional linkURL und button_label.

`bento/promo/s`

Kleine Promo-Karte mit Bild und Datumsbereich.

Parameter	Typ	Beschreibung
`featured_img`	String	Bild-URL
`overline`	String	Überschrift
`subtitle`	String	Untertitel
`start`	String	Startdatum
`end`	String	Enddatum

`bento/promo/m`

Mittlere Promo-Karte mit optionalem Seitenbild und Links.

Parameter	Typ	Beschreibung
`overline`	String	Überschrift
`subtitle`	String	Untertitel
`featured_image`	String	Optionales Cover-Bild
`links`	Array	Optionale Links mit `link_url` und `link_label`
`button_link`	String	Call-to-Action-Link
`button_label`	String	Button-Text
`end`	String	Wenn gesetzt, wird der Hintergrund weiß

`bento/hidden`

Unsichtbarer Container. Wird verwendet, wenn kein bentoLayout gesetzt ist.

Blog-Ansichten

Der Blog bietet verschiedene Ansichtsmodi, erreichbar über /blog, /blog/grid, /blog/titles, /blog/new.

Ansicht	URL	Beschreibung
List	`/blog`	Standard-Listenansicht, nach Datum gruppiert, mit Sidebar und Tag-Filter
Grid	`/blog/grid`	4-Spalten-Raster mit Tag-Filter-Badges
Titles	`/blog/titles`	Nur Titel mit Metadaten (minimale Ansicht)
New	`/blog/new`	Tagesgruppen mit aufklappbaren Sektionen
Old	`/blog/old`	Eingeklappte Posts, nur Titel sichtbar, ausklappbar pro Tag

Custom Pages

Standardmäßig werden .md-Dateien im Ordner content mit layouts/_default/single.html gerendert. Spezielle Seitentypen nutzen eigene Layouts:

Seitentyp	Layout	Beschreibung
Now	`bento/now.html`	“/now”-Seite mit Timeline, zeigt Einträge aus `bento/now/` sortiert nach `start`
Kontakt	`bento/kontakt.html`	Kontaktseite mit E-Mail/LinkedIn-Buttons und Profilbild
Services	`bento/services.html`	Dienstleistungen als 3-Spalten-Karten mit `services`-Array (je `title`, `description`, `details`)
Rolodex	`bento/rolodex.html`	Alphabetisches Link-Verzeichnis mit A–Z-Navigation und Tag-Filter
Talks	`bento/talks.html`	Vortragsarchiv, nach Monat gruppiert, mit Datums-Badges

Shortcodes

`circle`

Farbiger Punkt als Trennzeichen.

{{< circle >}}
{{< circle size="0.85em" >}}

`dotted-separator`

Horizontale Trennlinie.

{{< dotted-separator >}}

`palette`

Farbpalette mit Swatches und Labels.

{{< palette colors="#0f0,#00f,#f00" labels="Lime,Blue,Red" >}}

Parameter	Standard	Beschreibung
`colors`	—	Kommagetrennte Farbwerte (Pflicht)
`labels`	—	Kommagetrennte Farbnamen
`size`	`44px`	Swatch-Größe
`gap`	`8px`	Abstand zwischen Swatches
`direction`	`row`	`row` oder `column`
`radius`	`8px`	Eckenradius
`border`	`true`	Rand anzeigen
`showLabels`	`true`	Labels anzeigen
`circle`	`true`	Runde Swatches (50% Radius)

`quote`

Zitat mit Quellenangabe.

{{< quote >}}Quellentext{{< /quote >}}

Suche

Client-seitige Volltextsuche mit Lunr.js. Der Suchindex wird aus allen Blog-Posts generiert und enthält Titel, Tags und Inhalt. Erreichbar über /search.

CSS-Themes

Verfügbare Theme-Varianten in themes/brutal/static/css/:

Datei	Beschreibung
`style.css`	Haupt-Stylesheet
`barcelona.css`	Barcelona-Theme
`corp.css`	Corporate-Theme
`dieter.css`	Dieter-Theme
`elegant.css`	Elegant-Theme
`flair.css`	Flair-Theme
`telegraf.css`	Telegraf-Theme
`terminal.css`	Terminal/Monospace-Theme

Alle Themes nutzen CSS-Variablen: --primary, --secondary, --promo, --light, --dark, --text, --card-bg, --border-radius, --font-mono, --font-bold.