Introdução

Este guia acompanha-o desde a instalação até publicar o primeiro artigo num site EmDash.

Pré-requisitos

• Node.js v22.12.0 ou superior (versões ímpares não são suportadas)
• npm, pnpm ou yarn
• Um editor de código (recomendado VS Code)

Criar um projeto novo

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash

Siga as instruções para nomear o projeto e definir as preferências.

Iniciar o servidor de desenvolvimento

Concluir o assistente de configuração

Na primeira visita ao painel de administração, o assistente de configuração do EmDash guia-o na configuração inicial:

Quando a passkey estiver registada, fica autenticado e é redirecionado para o painel de administração.

O seu primeiro artigo

Estrutura do projeto

O projeto EmDash segue a estrutura Astro padrão com algumas adições:

my-emdash-site/
├── astro.config.mjs      # Configuração Astro + EmDash
├── src/
│   ├── live.config.ts    # Configuração das Live Collections
│   ├── pages/
│   │   ├── index.astro   # Página inicial
│   │   └── posts/
│   │       └── [...slug].astro  # Páginas dinâmicas de artigos
│   ├── layouts/
│   │   └── Base.astro    # Layout base
│   └── components/       # Os seus componentes Astro
├── .emdash/
│   ├── seed.json         # Ficheiro seed do modelo
│   └── types.ts          # Tipos TypeScript gerados
└── package.json

Ficheiros de configuração

astro.config.mjs

Configura o EmDash como integração 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

Liga o EmDash ao sistema de conteúdos do Astro:

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

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

Variáveis de ambiente

Em implementações de produção precisa de definir:

# Required for authentication
EMDASH_AUTH_SECRET=your-secret-here

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

Gere um segredo de autenticação seguro com:

npx emdash auth secret

Consultar conteúdo nas páginas

Use as funções de consulta do EmDash nas páginas Astro. Seguem o padrão de live collections do Astro e devolvem { entries, error } para coleções e { entry, error } para entradas individuais:

---
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>

Para uma única entrada:

---
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>

Gerar tipos TypeScript

Para segurança de tipos completa, gere tipos a partir do esquema da base de dados:

npx emdash types

Isto cria .emdash/types.ts com interfaces para todas as coleções. O editor completa nomes de campos e deteta erros de tipo.

Próximos passos

Já tem um site EmDash a funcionar! Continue aqui:

• Conceitos centrais — Como o EmDash funciona por dentro
• Trabalhar com conteúdo — Consultar e renderizar conteúdo
• Biblioteca multimédia — Carregar e gerir imagens e ficheiros
• Criar um blog — Construir um blog com categorias e etiquetas
• Implementar no Cloudflare — Levar o site para produção