Vom Template zum Magazin: So ist The Weekly Dash entstanden

Wir, Kevin Kyburz und Daniel Müller, arbeiten beide als Maintainer an EmDash mit und schreiben hier auf, was wir dabei lernen, auf Deutsch und auf Englisch. Was EmDash ist und für wen sich der Umstieg lohnt, erklärt Kevin in seinem Leitfaden für Agenturen.

Mit dem Release von EmDash 1.0 war die Zeit für diesen Blog gekommen. Zum Start zeigen wir dir, wie aus einem Standard-Template eine Seite mit eigenem Gesicht geworden ist. Vieles davon kannst du in deinem eigenen EmDash-Projekt genauso machen, vom Schema über die Cover bis zum Caching und den zwei Sprachen.

Angefangen hat alles beim Namen.

Der Name ist das Konzept

„The Weekly Dash“ bringt schon alles mit, was die Seite braucht. Also nehmen wir den Namen wörtlich, statt drumherum zu dekorieren:

• Weekly steht für Ausgaben. Die Seite denkt in Kalenderwochen.
• Dash steht für den Strich. Er ist das einzige grafische Motiv.

Mehr Konzept gibt es nicht, der Rest folgt aus diesen zwei Regeln. Fangen wir mit der Woche an.

Weekly: Ausgaben nach Kalenderwoche

Eine Ausgabe ist bei uns alles, was in einer Kalenderwoche erscheint. Ganz oben sitzt eine Ausgabenleiste, zum Beispiel „Ausgabe KW 40 / 2026“. Darunter sortiert die Startseite die Artikel nach Kalenderwoche. Jede Woche beginnt mit ihrer Nummer in groß, daneben stehen Zeitraum und Zahl der Artikel. Archiv und Rubrikseiten nutzen dasselbe Raster.

Dahinter steckt wenig Code. Wir rechnen mit ISO-Kalenderwochen in der Zeitzone der Seite, Europe/Berlin. So rutscht ein Artikel vom Sonntagabend nicht in die falsche Woche, nur weil der Server in UTC zählt.

Den Auftakt macht der neueste Artikel, als Block über die volle Breite in der Farbe seiner Rubrik, mit großer Headline und dem Zeichen der Rubrik, bei einem Changelog mit der Versionsnummer. Daneben steht eine Spalte mit Changelog, Autoren und RSS-Kasten, die dir beim Scrollen nicht davonläuft.

Die Woche sorgt für Ordnung, fürs Aussehen ist die zweite Hälfte des Namens zuständig.

Dash: ein Strich, sonst nichts

Hinter der Wortmarke sitzt ein Strich mit Verlauf von Orange #ff5a1f zu Gelb #ffd200. Er steht auf der Grundlinie, etwa so kräftig wie die Stämme der Buchstaben, und liest sich deshalb als Teil der Schrift statt als danebengeklebtes Logo.

Diese Variante hat sich in einer eigenen Runde durchgesetzt, gegen einen Strich auf Geviertstrich-Höhe, zwei Unterstriche, einen Rahmen und eine Markierung unter „Dash“.

Sonst taucht der Strich nur dort auf, wo er etwas markiert: als Schlusszeichen nach jedem Artikel, auf der 404-Seite und als Marker unter Links. Farbflächen und dunkler Footer bekommen ein feines Raster aus versetzten Strichen, der Seitenhintergrund bleibt leer.

Damit das so bleibt, steht die Regel in unserer AGENTS.md. Der Verlauf gehört dem Strich, also gibt es weder Verlaufsflächen noch Zustände, die plötzlich einen Verlauf bekommen.

Ein einziges Motiv wirkt aber nur, wenn der Rest ruhig bleibt, und dafür haben wir zwei Designrunden gebraucht.

Vom Zeitungslook zum Tech-Magazin

Die erste Runde hatte Serifen-Headlines auf Papierton und las sich wie eine Zeitung. Die zweite hat die Struktur behalten und ihr den Ton eines Tech-Magazins gegeben.

Die Flächen sind jetzt weiß und fast schwarz, Header und Footer in beiden Farbschemata dunkel. Schatten, Glas und runde Ecken gibt es nicht, die Seite gliedern Linien von 1 und 4 Pixeln.

Farbe setzen wir sparsam ein. Es gibt eine Signalfarbe, Kevins Markengelb #ffd200, und dazu pro Rubrik eine Füllfarbe. Auf Farbflächen steht immer dunkler Text, mit einem Kontrast von mindestens 7:1. Die Flächen sind in beiden Farbschemata gleich, also gilt das auch im Dark Mode.

Jede Sektion richtet sich an einem Container von 1240 Pixeln aus, die Textspalte im Artikel bleibt bei 680 Pixeln.

Welche Rubriken diese Farben tragen, haben wir kurz vor dem Start noch einmal umgebaut.

Vier Rubriken, sortiert nach deinem Ziel

Anfangs waren die Rubriken nach Thema geschnitten: Anleitungen, Changelog, Plugins. Fast jeder Artikel landete dabei in Anleitungen, auch der Agentur-Leitfaden, der eher eine Analyse ist. Und Plugins ist ein Gegenstand und keine Art von Artikel.

Jetzt richten sich die Rubriken danach, was du gerade vorhast. Die Einteilung folgt grob Diátaxis:

• Einstieg in Mint #4fe3b8: Du bist neu bei EmDash und willst verstehen und loslegen.
• Anleitungen in Gelb #ffd200: Deine Site läuft, und du willst eine konkrete Aufgabe lösen.
• Hintergrund in Pink #ff8fc8: Du willst etwas verstehen oder einordnen, mit Analysen, Tests und Blicken hinter die Kulissen wie diesem hier.
• Changelog in Violett #9d8cff: Was ist in einer Version neu, und was musst du tun?

Die Grenze zwischen Einstieg und Anleitungen ist einfach. Brauchst du zum Mitmachen eine laufende EmDash-Site, ist es eine Anleitung. Worum es geht, also Plugins, Astro, Cloudflare, Performance oder WordPress, steht in den Themen, und davon darf ein Artikel mehrere haben. Wer noch einen Link auf die alte Rubrik Plugins hat, landet beim gleichnamigen Thema.

Bei den Farben hat Mint die Rubrik gewechselt. Vorher gehörte es Plugins, und Grün liest sich ohnehin wie „los geht's“. Für Hintergrund haben wir Pink genommen, weil ein Blau zwischen Mint und Violett beiden zu nah gekommen wäre. Pink liegt auch weit genug weg vom Orange des Strichs.

Jede Rubrik hat außerdem ein Zeichen für den Auftakt und für Cover ohne Cover-Zeile: » für Einstieg, ein Geviertstrich für Anleitungen, ¶ für Hintergrund und beim Changelog die Versionsnummer oder, wenn der Titel keine hat, ein Δ.

Im Header stehen die vier Rubriken und das Archiv. Unter 1000 Pixeln Breite passen die fünf Einträge nicht mehr neben Wortmarke, Suche und Sprachwahl. Dort klappt ein Knopf „Menü“ sie als Liste über der Seite auf.

Bleibt die Schrift, und die muss bei so wenig Deko Charakter mitbringen.

Die Schrift: Funnel Display

Funnel Display nehmen wir für Headlines, die Wortmarke und alle Wochen- und Versionsnummern. Ihre eckigen Anschnitte wirken wie Serifen, die jemand in Pixeln gezeichnet hat, und ihr quadratischer Punkt hält Versionsnummern wie 1.0.1 sauber.

Gewählt haben wir sie, weil sie modern und kreativ wirkt. Darin passt sie zu EmDash selbst, einem neuen CMS, das von Grund auf für den heutigen Web-Stack gebaut ist, statt ein altes System weiterzuführen.

Interface und Fließtext laufen in der Schwesterschrift Funnel Sans, Labels, Daten, Navigation und Code in JetBrains Mono.

Alle drei Schriften sind variabel und self-hosted über die Fonts-API von Astro, und alle drei laden wir vor: Funnel Display und Funnel Sans mit je etwa 18 KB, JetBrains Mono mit etwa 40 KB, weil Navigation und Labels ganz oben auf jeder Seite darin stehen.

Eine Lücke hat Funnel Display allerdings, Griechisch fehlt komplett. Das Δ für Changelogs ohne Versionsnummer setzen wir deshalb in JetBrains Mono. Die griechische Schriftdatei mit 9 KB lädt der Browser nur auf Seiten, die tatsächlich ein Δ zeigen.

Rubrikfarben und Funnel Display treffen sich gleich wieder, und zwar dort, wo andere Blogs ein Foto hätten.

Cover ohne Stockfotos

Ein Blog über ein CMS hat ein Bildproblem. Von Datenbank-Migrationen gibt es keine guten Fotos, und Stockfotos mit Laptop und Kaffeetasse erzählen niemandem etwas. Also lassen wir sie weg.

Ein Artikel ohne Beitragsbild bekommt stattdessen ein Datenblatt als Cover, in der Farbe seiner Rubrik:

• Changelog zeigt die Versionsnummer, groß in Funnel Display.
• Alle anderen Rubriken zeigen eine Cover-Zeile als Terminal-Prompt, etwa › npm install emdash@latest auf Kevins Artikel übers Aktualisieren.

Ein Befehl muss es nicht sein. Über Kevins Agentur-Leitfaden steht zum Beispiel › Wo EmDash neben WordPress passt.

Die Cover-Zeile ist ein eigenes, optionales Feld im Schema, cover_line, mit bis zu drei Zeilen. Fehlt sie, nimmt das Cover die erste Zeile des ersten Codeblocks im Artikel, und fehlt auch der, die Headline mit dem Zeichen der Rubrik. Umbrochen wird nur zwischen Wörtern, damit Paketnamen und Befehle am Stück bleiben.

Für die Beispieldaten gilt eine Regel: keine erfundenen Versionsnummern. Gerade im Changelog wäre ein Cover mit einer Version, die es nicht gibt, schlicht falsch.

Ein echtes Bild geht trotzdem. Hat ein Artikel ein Beitragsbild, erscheint es anstelle des Datenblatts.

Für geteilte Links rendert der Worker dieselbe Komposition mit Satori und resvg als PNG mit 1200 × 630 Pixeln, und der Edge-Cache hält sie danach vor. Anders als das Cover trägt dieses Bild immer die Headline, weil es im Feed allein stehen muss.

Dass cover_line ein Feld im Schema ist und kein Code, führt uns direkt unter die Haube.

Unter der Haube: EmDash auf Cloudflare

Die Seite läuft auf EmDash selbst und ist aus dem Template blog-cloudflare entstanden. Gehostet ist sie auf Cloudflare Workers, die Inhalte liegen in D1, die Medien in R2, beides in der Region WEUR.

In EmDash lebt das Schema in der Datenbank, deshalb ist cover_line ein Textfeld und kein Code. Angelegt haben wir es im Seed, bevor es die Produktionsdatenbank gab, und mit dem ersten Import kam es dorthin. Seitdem ändern wir das Schema im Adminbereich unter Inhaltstypen, und der Seed zieht nur nach, damit neue lokale Datenbanken dasselbe Schema bekommen.

Öffentliche Seiten kommen aus dem Edge-Cache von Cloudflare, fünf Minuten frisch und danach einen Tag lang per stale-while-revalidate. Dasselbe gilt für RSS-Feeds und Vorschaubilder. Veröffentlichen wir einen Artikel oder drehen an Navigation und Einstellungen, purgt EmDash die betroffenen Seiten über Cache-Tags. Was für eingeloggte Nutzer gerendert wird, kommt nie in den Cache, weil das Kommentarformular Name und E-Mail enthält. Redakteure bekommen auf gecachten Seiten trotzdem einen Edit-Button, der eine frische Fassung öffnet.

Jeder Branch bekommt eine eigene Worker Preview, die nur Mitglieder unseres Cloudflare-Kontos über Cloudflare Access sehen. Die Previews hängen an einer eigenen D1, einer Kopie der Produktion, und an eigenem R2-Bucket und KV, nichts davon berührt die Produktion. Änderungen kommen per Pull Request nach main, jeder Merge geht sofort live.

Drei kleine Site-Plugins haben wir selbst geschrieben. Eines ersetzt das JSON-LD von EmDash durch einen verknüpften schema.org-Graphen pro Seite, eines schickt uns eine Mail, wenn ein Kommentar auf Freigabe wartet, und das dritte passt auf die URLs auf, dazu gleich mehr. Seit Kurzem können wir außerdem Plugins aus der EmDash-Registry installieren. Sie laufen in einer Sandbox, jedes in einem eigenen Worker, und dürfen nur, was wir beim Installieren freigegeben haben. Was diese Sandbox wirklich sperrt, hat Kevin in seinem Artikel zur Plugin-Sandbox ausprobiert.

Gezählt wird mit Cloudflare Web Analytics, das ohne Cookies auskommt. Dazu läuft aus der Registry das Analytics-Plugin von danielmlr, also von Daniel selbst. Turnstile, der Spamschutz im Kommentarformular, lädt erst, wenn du in das Formular klickst. Ein eigenes Cookie setzen wir nur, wenn du im Footer ausdrücklich „Hell“ oder „Dunkel“ wählst. Im RSS-Kasten steht deshalb „Ohne Tracking-Cookies“ und nicht einfach „Ohne Tracking“.

Fehlt noch die zweite Sprache.

Zwei Sprachen, eine Seite

Deutsch ist die Standardsprache und kommt ohne Präfix aus, Englisch liegt unter /en/. Der Grund ist ganz praktisch: Bekommt die Standardsprache ein Präfix, bricht der Adminbereich von EmDash.

Artikel und Seiten liegen direkt unter der Domain, also unter /<slug> und /en/<slug>. Die Übersichten tragen ein Wort in deiner Sprache: /archiv, /rubrik/…, /thema/… und /autor/… auf Deutsch, /en/archive, /en/section/…, /en/topic/… und /en/author/… auf Englisch. Alte URLs leiten dauerhaft weiter. Weil sich Artikel, Seiten und Routen damit einen Namensraum teilen, lässt unser drittes Plugin nichts veröffentlichen, dessen Slug schon eine Route belegt oder in der anderen Sammlung vergeben ist.

Jede Seite hat einen DE/EN-Umschalter, der zur Übersetzung genau dieser Seite führt, dazu hreflang-Links. Die Rubriken haben eigene englische Slugs, aus anleitungen wird zum Beispiel guides, und ihre Farbe behalten sie. Suche, RSS-Feed, Datumsformate und Wochennummern richten sich nach der Sprache.

Jeder Artikel erscheint in beiden Sprachen, und beide gehen zusammen online. Die englische Fassung passt jeder von uns für seine eigenen Artikel selbst an, für ein internationales Publikum statt Wort für Wort.

Bleibt die Frage, ob die Seite bei all dem sauber geblieben ist.

Was Lighthouse dazu sagt

Vor dem Launch haben wir Lighthouse auf einem lokalen Production-Build laufen lassen, mobil gemessen. Die deutsche und die englische Startseite und eine Artikelseite bekamen jeweils 100 für Accessibility, Best Practices und SEO. Der Cumulative Layout Shift lag bei 0, auch mit den Webfonts.

Fazit

Am Anfang stand die Frage, wie aus einem Template eine Seite mit eigenem Gesicht wird. Fürs Design reichen zwei Regeln, die schon im Namen stecken: Ausgaben nach Kalenderwoche und ein einziger Strich als Motiv. Die vier Rubriken sortieren nach dem, was du vorhast, nicht nach Thema. Die Cover lösen das Bildproblem ohne Stockfotos, mit einem Feld im Schema und etwas CSS. Was du für dein eigenes Projekt mitnehmen kannst, also Caching, Previews und zwei Sprachen, bringen EmDash und Cloudflare mit.

Alles, was wir ab jetzt veröffentlichen, landet in der Ausgabe seiner Woche. Wenn du mitlesen willst, abonnier den RSS-Feed.