Cybtek Matrix / Intégration ← Templates

Starter kit

Brancher Outline à un blog Astro existant

Tu as déjà un blog Astro en prod avec ton propre design ? Garde tout, change juste la source du contenu. ~30 minutes pour intégrer.

En 5 étapes

  1. 1

    Installer marked

    npm install marked (ou bun add / pnpm add)

  2. 2

    Copier le fichier outline.ts

    Le client API, ~150 lignes, aucune autre dépendance

  3. 3

    Configurer 3 variables d'env

    OUTLINE_API_URL · OUTLINE_API_TOKEN · OUTLINE_COLLECTION_IDS

  4. 4

    Adapter tes pages list + détail

    getAllDocuments() + getDocument() + render markdown

  5. 5

    Builder

    npm run build → site statique généré depuis Outline au build

Variables d'environnement

À ajouter dans .env à la racine :

OUTLINE_API_URL=https://ton-outline.tld/api
OUTLINE_API_TOKEN=ol_api_xxxxxxxxxxxxx
OUTLINE_COLLECTION_IDS=uuid-de-ta-collection

Le token se crée dans Outline → Settings → Personnal Token. L'ID de collection se trouve dans l'URL Outline d'une collection.

Code minimal — page liste

---
import { getAllDocuments } from '../lib/outline';
const posts = await getAllDocuments();
---

<ul>
  {posts.map((p) => (
    <li>
      <a href={`/blog/${p.urlId}`}>
        <h2>{p.title}</h2>
      </a>
    </li>
  ))}
</ul>

Code minimal — page détail

---
import { getAllDocuments, getDocument } from '../lib/outline';
import { renderMarkdownEnhanced } from '../lib/outline-helpers';

export async function getStaticPaths() {
  const docs = await getAllDocuments();
  return docs.map((d) => ({
    params: { urlId: d.urlId },
    props: { docId: d.id },
  }));
}

const doc = await getDocument(Astro.props.docId);
const html = renderMarkdownEnhanced(doc.text);
---

<article>
  <h1>{doc.title}</h1>
  <div set:html={html} />
</article>

Helpers fournis dans le kit

getAllDocuments() Liste des docs publiés (toutes collections configurées)
getDocument(idOrUrlId) Détail d'un document
getUser(userId) Infos auteur (avec cache)
excerpt(md, maxLen) Texte court pour les listes
readingTime(md) Minutes de lecture estimées
extractTags(md) Tags depuis "Tags: foo, bar"
extractCoverImage(doc) Cover Outline native ou 1ère image du body
renderMarkdown(md) Markdown → HTML (simple)
renderMarkdownEnhanced(md) Markdown → HTML avec callouts + embeds vidéo
injectTocIds(html) Ajoute IDs sur h2/h3 + retourne le sommaire

Auto-rebuild via webhook

Outline supporte les webhooks signés HMAC (format Stripe-style t=...,s=...). Configure un webhook dans Outline pointant vers un Deploy Hook (Cloudflare Pages, Vercel, Netlify) OU vers un mini service de relais qui vérifie la signature avant de trigger le rebuild.

Exemple FastAPI / Node prêt à l'emploi

Voir le doc complet : guide complet de mise en place webhook + vérif HMAC + anti-replay + debounce.

Le service matrix-webhook du repo Cybtek Matrix sert d'exemple de référence (Python + Docker socket).

Conventions Outline supportées

Tags

Ligne au début du doc : Tags: lean, devops, retrospective

Callouts GitHub-style

> [!INFO]
> Voici une note utile.

> [!WARN]
> Voici un avertissement.

> [!TIP]
> Voici une astuce.

Embeds vidéo automatiques

Colle une URL YouTube / Vimeo / Loom / Figma seule sur une ligne → iframe responsive au build.

Aller plus loin

Voir tous les templates