Workshop: build a site, step by step

/**
 * The site theme: colours, size scale, weights.
 */

:root {
  /* One colour per value of the schema's « color » enum */
  --color-primary: #2b211a;
  --color-secondary: #4a3d33;
  --color-muted: #8a7a6c;
  --color-accent: #a4622a;
  --color-inverse: #fffdf9;

  /* Backgrounds and rules */
  --color-surface: #fffdf9;
  --color-surface-alt: #f6f0e7;
  --color-border: #e3d8c9;

  /* One size per value of the « size » enum */
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1.0625rem;
  --size-lg: 1.3rem;
  --size-xl: 1.6rem;
  --size-2xl: 2.1rem;
  --size-3xl: 3rem;

  /* One weight per value of the « weight » enum */
  --weight-thin: 100;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --font-body: 'Iowan Old Style', Georgia, serif;
  --line-height: 1.65;

  /* Reading width and side margin */
  --measure: 46rem;
  --gutter: 6vw;
}

/**
 * The site layout. No hard-coded colour here: everything goes through the
 * theme's variables.
 */

/* --- The two top bars, placed by Base.astro --- */

.site-langs {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem var(--gutter) 0;
  font-size: var(--size-xs);
}
.site-langs a { color: var(--color-muted); text-decoration: none; }
.site-langs a[aria-current='true'] {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.site-nav {
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem var(--gutter) 1rem;
  border-bottom: 1px solid var(--color-border);
}
.site-nav a {
  color: var(--color-secondary);
  text-decoration: none;
  font-size: var(--size-sm);
}
.site-nav a:hover { color: var(--color-accent); }

/* --- The page body, placed by Page.astro --- */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) 5rem;
}

.page-head { padding: 4rem 0 2.5rem; }
.page-head h1 { margin: 0; }
.chapo { margin: 0.5rem 0 0; }

.page section { margin: 3.5rem 0; }

/* --- Images and videos --- */

img, iframe { max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption {
  margin-top: 0.5rem;
  font-size: var(--size-sm);
  color: var(--color-muted);
}

/* --- The list of steps, on the home page --- */

.etapes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.etapes > article {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-alt);
}
.etapes h3 { margin: 0 0 0.4rem; }
.etapes p { margin: 0; }

/* --- The list of works --- */

.pieces {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.pieces > article { margin: 0; }
.pieces img { width: 100%; border-radius: 6px; }
.pieces h2 { margin: 0.75rem 0 0; }
.piece-bois { margin: 0.2rem 0 0.6rem; }

/* --- The footer, placed by Base.astro --- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem var(--gutter) 3rem;
  color: var(--color-muted);
  font-size: var(--size-sm);
}
.site-footer p { margin: 0.2rem 0; }

{
  "meta": {
    "title": "Atelier Loriot — ébéniste à Nantes",
    "description": "Meubles sur mesure en bois massif, dessinés et fabriqués à Nantes depuis 1998."
  },
  "blocks": {
    "page": {
      "titre": {
        "type": "text",
        "value": "Le bois massif, dessiné pour durer",
        "style": { "size": "3xl", "weight": "bold", "italic": false, "align": "left", "color": "primary" }
      },
      "chapo": {
        "type": "text",
        "value": "Ébénisterie sur mesure à Nantes depuis 1998.",
        "style": { "size": "lg", "weight": "regular", "italic": false, "align": "left", "color": "muted" }
      }
    },
    "metier": {
      "titre": {
        "type": "text",
        "value": "Notre façon de travailler",
        "style": { "size": "2xl", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
      },
      "corps": {
        "type": "richtext",
        "value": "Chaque pièce part d'un <strong>relevé sur place</strong> et d'un dessin coté. Nous travaillons le chêne, le noyer et le frêne, tous issus de forêts françaises."
      },
      "photo": {
        "type": "media",
        "kind": "image",
        "src": "atelier-etabli.webp",
        "alt": "L'établi principal de l'atelier, outils à main alignés au mur",
        "width": 1600,
        "height": 1067
      }
    },
    "film": {
      "video": {
        "type": "media",
        "kind": "video",
        "provider": "youtube",
        "videoId": "aqz-KE-bpKQ",
        "title": "Trois jours de fabrication, en deux minutes"
      }
    }
  },
  "collections": {
    "etapes": [
      {
        "id": "e-001",
        "titre": {
          "type": "text",
          "value": "Le relevé",
          "style": { "size": "lg", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
        },
        "texte": {
          "type": "richtext",
          "value": "Nous venons mesurer, photographier, comprendre l'usage."
        }
      },
      {
        "id": "e-002",
        "titre": {
          "type": "text",
          "value": "Le dessin",
          "style": { "size": "lg", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
        },
        "texte": {
          "type": "richtext",
          "value": "Un plan coté, une essence, un devis. Rien ne commence avant votre accord."
        }
      },
      {
        "id": "e-003",
        "titre": {
          "type": "text",
          "value": "L'atelier",
          "style": { "size": "lg", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
        },
        "texte": {
          "type": "richtext",
          "value": "Débit, assemblage, finition à l'huile dure. Puis la pose chez vous."
        }
      }
    ]
  }
}

---
/**
 * The body of the home page.
 *
 * The heading and the standfirst are not here: the route places them, in the
 * layout's header.
 */
import type { Page } from 'inline-core/schema';
import Editable from 'inline-core/components/Editable.astro';
import Media from 'inline-core/components/Media.astro';
import Collection from 'inline-core/components/Collection.astro';
import Etape from '../components/Etape.astro';

interface Props {
  data: Page;
  missing: Set<string>;
}

const { data, missing } = Astro.props;
---

<section>
  <Editable data={data} path="blocks.metier.titre" as="h2" untranslated={missing} />
  <Editable data={data} path="blocks.metier.corps" as="p" untranslated={missing} />
  <Media
    data={data}
    path="blocks.metier.photo"
    widths={[480, 800, 1200, 1600]}
    sizes="(max-width: 48rem) 100vw, 46rem"
  />
</section>

<section>
  <Collection
    data={data}
    name="etapes"
    item={Etape}
    class="etapes"
    untranslated={missing}
    blank={{
      titre: {
        type: 'text',
        value: 'Une étape de plus',
        style: { size: 'lg', weight: 'semibold', italic: false, align: 'left', color: 'primary' },
      },
      texte: { type: 'richtext', value: 'Décrivez-la en une phrase.' },
    }}
  />
</section>

<section>
  <Media data={data} path="blocks.film.video" />
</section>

---
/**
 * The layout of a page.
 *
 * It never reads the content: it receives already-resolved strings and two
 * slots to fill. The route is what knows what goes in them.
 */
import Base from './Base.astro';

interface Props {
  title: string;
  description: string;
  contentFile: string;
  locale: string;
  pageName: string;
  alternates?: Array<{ locale: string; href: string }>;
  untranslated?: number;
}

const props = Astro.props;
---

<Base {...props}>
  <main class="page">
    <header class="page-head">
      <slot name="entete" />
    </header>

    <slot />
  </main>
</Base>

---
/**
 * The single route: one URL per page and per language, all built at build time.
 *
 * It does three things: resolve the content, pick the view, place the shared
 * header.
 */
import { getCollection } from 'astro:content';
import type { Page as Contenu } from 'inline-core/schema';
import Editable from 'inline-core/components/Editable.astro';
import Page from '../../layouts/Page.astro';
import Accueil from '../../vues/Accueil.astro';
import { DEFAULT_LOCALE, LOCALES, localePath, mergeWithDefault } from '../../lib/locales';

export async function getStaticPaths() {
  const entries = await getCollection('pages');
  const byId = new Map(entries.map((entry) => [entry.id, entry]));

  // The list of pages comes from the reference language: that one is authoritative.
  const pages = entries
    .filter((entry) => entry.id.startsWith(`${DEFAULT_LOCALE}/`))
    .map((entry) => entry.id.slice(DEFAULT_LOCALE.length + 1));

  return LOCALES.flatMap((locale) =>
    pages.map((page) => {
      const reference = byId.get(`${DEFAULT_LOCALE}/${page}`)!;
      const translation = byId.get(`${locale}/${page}`);

      // A field missing from the translation is taken from the reference, and flagged.
      const { data, untranslated } = mergeWithDefault<Contenu>(
        reference.data as Contenu,
        translation?.data as Contenu | undefined,
      );

      return {
        // « home » is the root of its language: no extra segment.
        params: { lang: locale, slug: page === 'home' ? undefined : page },
        props: { locale, page, data, untranslated },
      };
    }),
  );
}

const { locale, page, data, untranslated } = Astro.props;

const missing = new Set(untranslated);
const alternates = LOCALES.map((code) => ({ locale: code, href: localePath(code, page) }));

/** One view per page. The choice is code, not content. */
const VUES: Record<string, any> = { home: Accueil };
const Vue = VUES[page];
---

<Page
  title={data.meta.title}
  description={data.meta.description}
  contentFile={`src/content/pages/${locale}/${page}.json`}
  locale={locale}
  pageName={page}
  alternates={alternates}
  untranslated={untranslated.length}
>
  <Fragment slot="entete">
    <Editable data={data} path="blocks.page.titre" as="h1" untranslated={missing} />
    <Editable data={data} path="blocks.page.chapo" as="p" class="chapo" untranslated={missing} />
  </Fragment>

  <Vue data={data} missing={missing} />
</Page>

{
  "meta": {
    "title": "Réalisations — Atelier Loriot",
    "description": "Bibliothèques, tables, escaliers : quelques pièces sorties de l'atelier ces dernières années."
  },
  "blocks": {
    "page": {
      "titre": {
        "type": "text",
        "value": "Réalisations",
        "style": { "size": "3xl", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
      },
      "chapo": {
        "type": "text",
        "value": "Quelques pièces sorties de l'atelier ces dernières années.",
        "style": { "size": "lg", "weight": "regular", "italic": false, "align": "left", "color": "muted" }
      }
    }
  },
  "collections": {
    "pieces": [
      {
        "id": "p-001",
        "nom": {
          "type": "text",
          "value": "Bibliothèque murale, Nantes",
          "style": { "size": "xl", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
        },
        "bois": {
          "type": "text",
          "value": "Noyer massif — 2024",
          "style": { "size": "sm", "weight": "medium", "italic": false, "align": "left", "color": "accent" }
        },
        "texte": {
          "type": "richtext",
          "value": "Quatre mètres de long, montée sur place en deux jours."
        },
        "photo": {
          "type": "media",
          "kind": "image",
          "src": "bibliotheque-noyer.webp",
          "alt": "Bibliothèque murale en noyer occupant tout un mur de séjour",
          "width": 1600,
          "height": 1067
        }
      },
      {
        "id": "p-002",
        "nom": {
          "type": "text",
          "value": "Table de ferme, Vertou",
          "style": { "size": "xl", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
        },
        "bois": {
          "type": "text",
          "value": "Chêne massif — 2023",
          "style": { "size": "sm", "weight": "medium", "italic": false, "align": "left", "color": "accent" }
        },
        "texte": {
          "type": "richtext",
          "value": "Plateau d'un seul tenant, piètement chevillé, finition à l'huile."
        },
        "photo": {
          "type": "media",
          "kind": "image",
          "src": "table-chene.webp",
          "alt": "Table de ferme en chêne massif, plateau d'un seul tenant",
          "width": 1600,
          "height": 1067
        }
      }
    ]
  }
}

---
/**
 * One item of the « pieces » list: three texts and a photo.
 */
import type { CollectionItem } from 'inline-core/schema';
import Editable from 'inline-core/components/Editable.astro';
import Media from 'inline-core/components/Media.astro';

interface Props {
  item: CollectionItem;
  /** Item path, e.g. « collections.pieces.p-001 ». */
  path: string;
  untranslated?: Set<string>;
}

const { item, path, untranslated } = Astro.props;

/**
 * « Media » expects the whole page, an item is only a piece of it: so we hand
 * it that piece in the shape it knows how to read. Two lines, and an item's
 * photo can be changed from the overlay like any other.
 */
const [, liste, id] = path.split('.');
const morceau = { collections: { [liste]: { [id]: item } } } as any;
---

<figure>
  <Media
    data={morceau}
    path={`${path}.photo`}
    widths={[400, 800, 1200]}
    sizes="(max-width: 40rem) 100vw, 21rem"
  />
  <figcaption>
    <Editable path={`${path}.nom`} field={item.nom as any} as="h2" untranslated={untranslated} />
    <Editable
      path={`${path}.bois`}
      field={item.bois as any}
      as="p"
      class="piece-bois"
      untranslated={untranslated}
    />
    <Editable path={`${path}.texte`} field={item.texte as any} as="p" untranslated={untranslated} />
  </figcaption>
</figure>

---
/**
 * The body of the « Réalisations » page: a single list, which the client
 * extends on their own.
 */
import type { Page } from 'inline-core/schema';
import Collection from 'inline-core/components/Collection.astro';
import Piece from '../components/Piece.astro';

interface Props {
  data: Page;
  missing: Set<string>;
}

const { data, missing } = Astro.props;
---

<section>
  <Collection
    data={data}
    name="pieces"
    item={Piece}
    class="pieces"
    untranslated={missing}
    blank={{
      nom: {
        type: 'text',
        value: 'Nouvelle pièce',
        style: { size: 'xl', weight: 'semibold', italic: false, align: 'left', color: 'primary' },
      },
      bois: {
        type: 'text',
        value: 'Essence — année',
        style: { size: 'sm', weight: 'medium', italic: false, align: 'left', color: 'accent' },
      },
      texte: { type: 'richtext', value: 'Décrivez la pièce en une phrase.' },
      photo: {
        type: 'media',
        kind: 'image',
        src: 'table-chene.webp',
        alt: 'Photo à remplacer',
        width: 1600,
        height: 1067,
      },
    }}
  />
</section>

{
  "meta": {
    "title": "Nous trouver — Atelier Loriot",
    "description": "Atelier ouvert du mardi au samedi, 12 rue des Ébénistes à Nantes."
  },
  "blocks": {
    "page": {
      "titre": {
        "type": "text",
        "value": "Nous trouver",
        "style": { "size": "3xl", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
      },
      "chapo": {
        "type": "text",
        "value": "L'atelier se visite sur rendez-vous.",
        "style": { "size": "lg", "weight": "regular", "italic": false, "align": "left", "color": "muted" }
      }
    },
    "infos": {
      "horaires": {
        "type": "richtext",
        "value": "<strong>Du mardi au samedi</strong>, de 9 h à 18 h.<br>Fermé les jours fériés."
      },
      "adresse": {
        "type": "richtext",
        "value": "12 rue des Ébénistes, 44000 Nantes.<br>Tramway ligne 1, arrêt Bouffay."
      }
    }
  }
}

{
  "meta": {
    "title": "Find us — Atelier Loriot",
    "description": "Workshop open Tuesday to Saturday, 12 rue des Ébénistes in Nantes."
  },
  "blocks": {
    "page": {
      "titre": {
        "type": "text",
        "value": "Find us",
        "style": { "size": "3xl", "weight": "semibold", "italic": false, "align": "left", "color": "primary" }
      },
      "chapo": {
        "type": "text",
        "value": "The workshop can be visited by appointment.",
        "style": { "size": "lg", "weight": "regular", "italic": false, "align": "left", "color": "muted" }
      }
    },
    "infos": {
      "horaires": {
        "type": "richtext",
        "value": "<strong>Tuesday to Saturday</strong>, 9 am to 6 pm.<br>Closed on public holidays."
      },
      "adresse": {
        "type": "richtext",
        "value": "12 rue des Ébénistes, 44000 Nantes.<br>Tram line 1, Bouffay stop."
      }
    }
  }
}