Site | Presentation

A minimal site: examples/site-embed declares its stories/ folder in a single recit.config.ts and exposes one prerendered route per story, indexed slide by slide.

AdvancedRécit sitePagefindSequence diagramPrerendered pages

pnpm --filter recit-example-site-embed dev

▶ Open the demoexamples/site-embed/stories/lorem-ipsum.md

The demo

Click the deck, then use ← → · 4 slides · 00:32Open fullscreen →

Try it

Run pnpm --filter recit-example-site-embed dev.
Add a file to stories/: a new route appears.
Search for « consectetur » in the site.

Source code

---
title: Lorem Ipsum Review
description: "A review deck published inside a Récit site, with a sequence diagram."
lang: en
---

--- { "layout": "center", "id": "intro" }

# Lorem Ipsum Review
### Dolor sit amet consectetur

**Adipiscing elit sed do**

:::notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
:::

--- { "layout": "grid", "cols": 2, "id": "pillars" }

# Duo pilares

:::card
### Lorem ipsum

- Sed do eiusmod tempor
- Incididunt ut labore
- Dolore magna aliqua
:::

:::card
### Dolor sit amet

- Ut enim ad minim veniam
- Quis nostrud exercitation
- Ullamco laboris nisi
:::

:::notes
Duis aute irure dolor in reprehenderit in voluptate velit esse.
:::

--- { "layout": "default", "id": "flow" }

# Fluxus lorem

```mermaid title="Lorem ipsum sequence"
sequenceDiagram
  autonumber
  Lorem->>Ipsum: Dolor sit amet
  Ipsum->>Consectetur: Adipiscing elit
  Consectetur-->>Lorem: Sed do eiusmod
  Lorem->>Consectetur: Tempor incididunt
  Consectetur-->>Ipsum: Ut labore et dolore
  Ipsum-->>Lorem: Magna aliqua
```

:::notes
Excepteur sint occaecat cupidatat non proident.
:::

--- { "layout": "center", "id": "end" }

# Gratias tibi!

### Quaestiones?

Sunt in culpa qui officia deserunt mollit anim.

Configuration

import "@recit/site-stories/styles.css";
import { defineConfig } from "recit/config";

/**
 * One file for the site and its Récit stories: the stories of
 * ./stories are served under /stories/<slug> (no vite.config.ts needed).
 */
export default defineConfig({
  metadata: {
    title: "%s | Lorem Ipsum Docs",
    description: "Lorem ipsum documentation with Récit stories.",
  },
  site: {
    title: "Lorem Ipsum Docs",
    showPoweredBy: false,
  },
  search: {
    type: "pagefind",
  },
  docs: {
    files: ["./docs/**/*.md"],
  },
  navigation: [
    {
      type: "category",
      label: "Documentation",
      items: [{ type: "doc", file: "index" }],
    },
    {
      type: "category",
      label: "Stories",
      items: [
        {
          type: "link",
          label: "Lorem Ipsum Review",
          to: "/stories/lorem-ipsum",
        },
      ],
    },
  ],
  redirects: [{ from: "/", to: "/index" }],
  // Récit sections
  publish: { dir: "./stories", routePrefix: "/stories" },
  app: {
    productName: "Lorem Ipsum Docs",
    identifier: "com.example.loremipsum",
    // Android refuses 0.0.0, the default when the package.json has no version
    version: "0.1.0",
  },
  footer: { left: "{title}", right: "{slide} / {total}" },
});