Pour commencer

Ce guide vous accompagne de l’installation à la publication de votre premier article sur un site EmDash.

Prérequis

• Node.js v22.12.0 ou supérieur (les versions impaires ne sont pas prises en charge)
• npm, pnpm ou yarn
• Un éditeur de code (VS Code recommandé)

Créer un nouveau projet

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash

Suivez les invites pour nommer le projet et définir vos préférences.

Démarrer le serveur de développement

Terminer l’assistant de configuration

Lors de votre première visite sur le panneau d’administration, l’assistant de configuration d’EmDash vous guide pour la configuration initiale :

Une fois la passkey enregistrée, vous êtes connecté et redirigé vers le tableau de bord d’administration.

Votre premier article

Structure du projet

Votre projet EmDash suit la structure Astro standard avec quelques ajouts :

my-emdash-site/
├── astro.config.mjs      # Configuration Astro + EmDash
├── src/
│   ├── live.config.ts    # Configuration des Live Collections
│   ├── pages/
│   │   ├── index.astro   # Page d’accueil
│   │   └── posts/
│   │       └── [...slug].astro  # Pages d’articles dynamiques
│   ├── layouts/
│   │   └── Base.astro    # Mise en page de base
│   └── components/       # Vos composants Astro
├── .emdash/
│   ├── seed.json         # Fichier de graine du modèle
│   └── types.ts          # Types TypeScript générés
└── package.json

Fichiers de configuration

astro.config.mjs

Configure EmDash en tant qu’intégration Astro :

import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

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

src/live.config.ts

Relie EmDash au système de contenu d’Astro :

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

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

Variables d’environnement

Pour la production, vous devrez définir :

# Required for authentication
EMDASH_AUTH_SECRET=your-secret-here

# Optional: for content preview
EMDASH_PREVIEW_SECRET=your-preview-secret

Générez un secret d’authentification sécurisé avec :

npx emdash auth secret

Interroger le contenu dans les pages

Utilisez les fonctions de requête EmDash dans vos pages Astro. Elles suivent le modèle des live collections d’Astro et renvoient { entries, error } pour les collections et { entry, error } pour une entrée unique :

---
import { getEmDashCollection } from "emdash";
import Base from "../layouts/Base.astro";

const { entries: posts } = await getEmDashCollection("posts");
---

<Base title="Home">
  <h1>Latest Posts</h1>
  <ul>
    {posts.map((post) => (
      <li>
        <a href={`/posts/${post.slug}`}>{post.data.title}</a>
      </li>
    ))}
  </ul>
</Base>

Pour une entrée unique :

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

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

if (!post) {
  return Astro.redirect("/404");
}
---

<h1>{post.data.title}</h1>

Générer les types TypeScript

Pour une sécurité de types complète, générez les types à partir du schéma de base de données :

npx emdash types

Cela crée .emdash/types.ts avec des interfaces pour toutes vos collections. Votre éditeur complétera les noms de champs et signalera les erreurs de type.

Prochaines étapes

Vous avez maintenant un site EmDash fonctionnel ! Poursuivez ici :

• Concepts fondamentaux — Comprendre le fonctionnement interne d’EmDash
• Travailler avec le contenu — Interroger et afficher le contenu
• Médiathèque — Téléverser et gérer images et fichiers
• Créer un blog — Construire un blog avec catégories et étiquettes
• Déployer sur Cloudflare — Mettre le site en production