EmDash & Astro

EmDash ist ein Open-Source-Full-Stack-CMS, das speziell für Astro entwickelt wurde und deine Website um datenbankgestützte Inhalte, einen Adminbereich, eine Medienbibliothek, Menüs und Taxonomien erweitert.

Um ein neues Astro-Projekt mit EmDash von Grund auf zu erstellen, kannst du mit der CLI von EmDash ein vorkonfiguriertes Projekt erzeugen:

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash@latest

Integration in Astro

EmDash läuft innerhalb deines Astro-Projekts und benötigt eine Datenbank. Den Adminbereich erreichst du unter /_emdash/admin, um dort Inhalte zu bearbeiten. Deine Seiten zeigen diese Inhalte an, indem sie die Datenbank über Live-Content-Collections (EN) abfragen.

In dieser Anleitung werden der Node.js-Adapter (EN) und eine lokale SQLite-Datenbank verwendet. Eine Liste der unterstützten Datenbanken findest du in der EmDash-Dokumentation.

Voraussetzungen

Ein bestehendes Astro-Projekt (Astro 6 oder neuer), das mit einem Adapter (EN) und output: "server" (EN) konfiguriert ist.
Node.js v22.16.0 oder höher.

Abhängigkeiten installieren

React treibt den Adminbereich von EmDash an und ist eine erforderliche Abhängigkeit. Falls dein Projekt React nicht verwendet, installiere es mit dem Befehl astro add für deinen Paketmanager:

npx astro add react

pnpm astro add react

yarn astro add react

Außerdem musst du das EmDash-Paket installieren:

npm install emdash

pnpm add emdash

yarn add emdash

Die Integration hinzufügen

Füge die Integration emdash() zu deiner Astro-Konfigurationsdatei hinzu und konfiguriere eine Datenbank sowie ein Speicher-Backend für Medien:

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import react from "@astrojs/react";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
  output: "server",
  adapter: node({ mode: "standalone" }),
  integrations: [
    react(),
    emdash({
      database: sqlite({ url: "file:./data.db" }),
      storage: local({
        directory: "./uploads",
        baseUrl: "/_emdash/api/media/file",
      }),
    }),
  ],
});

Den Loader für Live-Collections hinzufügen

Erstelle eine Datei src/live.config.ts, damit der Content Layer von Astro die Inhalte von EmDash auflösen kann:

import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
  _emdash: defineLiveCollection({ loader: emdashLoader() }),
};

Die Content-Collection _emdash leitet intern an deine Inhaltstypen weiter (z. B. Beiträge und Seiten). Bereits vorhandene dateibasierte Collections in src/content.config.ts funktionieren weiterhin daneben.

EmDash lokal ausführen

Bevor du deine eigenen Seiten testen kannst, musst du den Einrichtungsassistenten von EmDash abschließen. Solange die Einrichtung nicht abgeschlossen ist, gibt es keine veröffentlichten Inhalte und Abfragen liefern leere Ergebnisse.

Starte den Entwicklungsserver von Astro, um die Datenbank zu initialisieren und den Adminbereich zu öffnen:
- npm
- pnpm
- Yarn
Terminal-Fenster
npm run dev
Terminal-Fenster
pnpm run dev
Terminal-Fenster
yarn run dev
Beim ersten Start erzeugt EmDash die Datei data.db mit ihrem Schema und den beiden Standard-Collections pages und posts.
Rufe http://localhost:4321/_emdash/admin im Browser auf. EmDash leitet dich zum Einrichtungsassistenten weiter.
Gib im Schritt Webseite einen Titel und optional einen Slogan ein.
Gib im Schritt Benutzerkonto deine E-Mail-Adresse und deinen Namen ein. Damit wird das Administratorkonto erstellt.
Sichere dein Konto im Schritt Anmelden ab. Wähle Passkey erstellen, um einen Passkey mit der biometrischen Authentifizierung deines Geräts, einem Sicherheitsschlüssel oder einer PIN zu registrieren.
Melde dich mit deinem neuen Passkey an, um zum Dashboard zu gelangen.

Deinen ersten Beitrag erstellen

Klicke im Dashboard auf die Schaltfläche + Post.
Füge einen Titel und etwas Inhalt hinzu. EmDash speichert Rich Text als Portable Text, der in einem Block-Editor bearbeitet wird. Aus dem Titel wird ein URL-Slug erzeugt, den du in der Seitenleiste bearbeiten kannst.
Klicke auf Speichern und anschließend auf Publizieren. Nur veröffentlichte Beiträge sind für Besucher deiner Website sichtbar.

EmDash-Inhalte darstellen

Frage deine Inhalte mit getEmDashCollection() und getEmDashEntry() ab. Beide folgen dem Muster der Live-Collections und liefern ihre Ergebnisse zum Zeitpunkt der Anfrage, sodass veröffentlichte Änderungen erscheinen, ohne dass die Website neu erzeugt werden muss.

Eine Liste von Beiträgen anzeigen

Das folgende Beispiel zeigt eine Liste aller veröffentlichten Beitragstitel, die jeweils auf die Seite des einzelnen Beitrags verlinken:

---
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts", {
  status: "published",
});
---
<ul>
  {posts.map((post) => (
    <li>
      <a href={`/posts/${post.data.slug}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Einen einzelnen Beitrag anzeigen

Um den Inhalt eines einzelnen Beitrags anzuzeigen, rufe ihn über seinen Slug ab und stelle den Portable-Text-Inhalt mit der Komponente <PortableText /> dar:

---
import { getEmDashEntry } from "emdash";
import { PortableText } from "emdash/ui";

const { slug } = Astro.params;
const { entry: post } = await getEmDashEntry("posts", slug);

if (!post) {
  return Astro.redirect("/404");
}
---
<article>
  <h1>{post.data.title}</h1>
  <PortableText value={post.data.content} />
</article>

Weitere Informationen zu Filtern, Paginierung, der Vorschau von Entwürfen und visueller Bearbeitung findest du in der EmDash-Anleitung zum Abfragen von Inhalten.

EmDash + Astro veröffentlichen

EmDash wird gemeinsam mit deiner Website als ein einziges Astro-Projekt veröffentlicht. Wähle einen Hosting-Anbieter, der deinen Adapter unterstützt, und richte eine Produktionsdatenbank sowie einen Medienspeicher ein.

Konkrete Anweisungen findest du in der EmDash-Anleitung zur Veröffentlichung mit Node.js und in der EmDash-Anleitung zur Veröffentlichung mit Cloudflare. Du kannst außerdem die Veröffentlichungs-Anleitungen (EN) von Astro besuchen und den Anweisungen für deinen bevorzugten Hosting-Anbieter folgen.