Lokales JSON

Inhalte, die als JSON im Repository liegen, von sitelo/data in statische Seiten verwandelt. Keine API, keine Datenbank, kein Client-JavaScript. Vollständiger Quellcode in examples/json.

Was du bekommst

Eine Startseite mit allen Kategorien und Produkten
/products/[slug] — eine statische Seite pro Datei in data/products/
/categories/[slug] — eine Seite pro Schlüssel in data/categories.json
Eine JSON-Datei hinzufügen heißt eine Seite hinzufügen; keine Route anzumelden
Null ausgeliefertes JS — die Dateien werden beim Build in Node gelesen

Projektstruktur

my-site/
  sitelo.config.js
  data/
    site.json              # seitenweite Einstellungen
    categories.json        # ein Objekt, nach Slug indiziert
    products/              # eine Datei pro Produkt
      aeron-chair.json
      jarvis-desk.json
      tolomeo-lamp.json
  src/
    lib/
      catalogue.js         # das einzige Modul, das sitelo/data anfasst
    index.ht.js            # / — Kategorien und alle Produkte
    products/
      [slug].ht.js         # /products/:slug — eine Seite pro JSON-Datei
    categories/
      [slug].ht.js         # /categories/:slug — eine Seite pro Schlüssel

Die Daten liegen außerhalb von src/, sitelo behandelt sie also nie als Seiten oder Assets.

1. Inhalte nach data/ legen

Eine Datei pro Produkt. Der Dateiname ist der Slug, aus aeron-chair.json wird also /products/aeron-chair — ohne dass die Datei das sagen müsste:

{
  "name": "Aeron Chair",
  "category": "seating",
  "price": 1395,
  "released": "2022-04-01",
  "summary": "Mesh task chair with adjustable lumbar support.",
  "inStock": true
}

Kategorien stecken stattdessen in einer einzigen Datei: einem nach Slug indizierten Objekt, das readJsonCollection genauso als Sammlung liest.

{
  "seating": {
    "name": "Seating",
    "description": "Chairs and stools for long working days."
  },
  "desks": {
    "name": "Desks",
    "description": "Fixed-height and sit-stand work surfaces."
  }
}

2. An einer Stelle lesen

Ein kleines, reines Servermodul kapselt die Lesevorgänge. Nichts im HTML verweist darauf, es landet also nie im Browser — und weil sitelo/data pro Datei merkt, parst der ganze Build jede JSON-Datei nur einmal, egal wie viele Seiten diese Helfer aufrufen.

import { readJson, readJsonCollection } from 'sitelo/data'

/** Seitenweite Einstellungen: eine JSON-Datei, unverändert geparst. */
export function getSite() {
  return readJson('data/site.json')
}

/** Ein Eintrag pro Datei, Slug aus dem Dateinamen. */
export function getProducts() {
  return readJsonCollection('data/products', { sort: 'name' })
}

/** Eine Datei mit einem nach Slug indizierten Objekt — der Schlüssel wird zum Slug. */
export function getCategories() {
  return readJsonCollection('data/categories.json')
}

/** Produkte einer Kategorie, günstigste zuerst. */
export async function getProductsInCategory(slug) {
  const products = await readJsonCollection('data/products', { sort: 'price' })
  return products.filter((product) => product.category === slug)
}

3. Alles auf der Startseite auflisten

import { getCategories, getProducts, getSite } from './lib/catalogue.js'

export async function data() {
  return {
    site: await getSite(),
    categories: await getCategories(),
    products: await getProducts(),
  }
}

export default ({ data }) => `
  <html lang="de">
    <head>
      <title>${data.site.title}</title>
      <link rel="stylesheet" href="/css/styles.css">
    </head>
    <body>
      <h1>${data.site.title}</h1>
      <h2>Kategorien</h2>
      <ul>
        ${data.categories
          .map(
            (category) =>
              `<li><a href="/categories/${category.slug}">${category.name}</a></li>`,
          )
          .join('')}
      </ul>
      <h2>Alle Produkte</h2>
      <ul>
        ${data.products
          .map(
            (product) =>
              `<li><a href="/products/${product.slug}">${product.name}</a></li>`,
          )
          .join('')}
      </ul>
    </body>
  </html>
`

import { html, head, title, link, body, h1, h2, ul, li, a } from 'javascript-to-html'
import { getCategories, getProducts, getSite } from './lib/catalogue.js'

export async function data() {
  return {
    site: await getSite(),
    categories: await getCategories(),
    products: await getProducts(),
  }
}

export default ({ data }) =>
  html({ lang: 'de' },
    head(
      title(data.site.title),
      link({ rel: 'stylesheet', href: '/css/styles.css' }),
    ),
    body(
      h1(data.site.title),
      h2('Kategorien'),
      ul(
        ...data.categories.map((category) =>
          li(a({ href: `/categories/${category.slug}` }, category.name)),
        ),
      ),
      h2('Alle Produkte'),
      ul(
        ...data.products.map((product) =>
          li(a({ href: `/products/${product.slug}` }, product.name)),
        ),
      ),
    ),
  )

import { getCategories, getProducts, getSite } from './lib/catalogue.js'

export async function data() {
  return {
    site: await getSite(),
    categories: await getCategories(),
    products: await getProducts(),
  }
}

export default function Home({ data }) {
  return (
    <html lang="de">
      <head>
        <title>{data.site.title}</title>
        <link rel="stylesheet" href="/css/styles.css" />
      </head>
      <body>
        <h1>{data.site.title}</h1>
        <h2>Kategorien</h2>
        <ul>
          {data.categories.map((category) => (
            <li key={category.slug}>
              <a href={`/categories/${category.slug}`}>{category.name}</a>
            </li>
          ))}
        </ul>
        <h2>Alle Produkte</h2>
        <ul>
          {data.products.map((product) => (
            <li key={product.slug}>
              <a href={`/products/${product.slug}`}>{product.name}</a>
            </li>
          ))}
        </ul>
      </body>
    </html>
  )
}

4. Eine Seite pro JSON-Datei

generateStaticParams liefert beim Build einen Slug pro Datei; data() lädt für jede Seite den passenden Eintrag.

import { getProduct, getProducts } from '../lib/catalogue.js'

export async function generateStaticParams() {
  const products = await getProducts()
  return products.map((product) => ({ slug: product.slug }))
}

export async function data({ params }) {
  const product = await getProduct(params.slug)
  if (!product) throw new Error(`Unknown product: ${params.slug}`)
  return { product }
}

export default ({ data }) => `
  <html lang="de">
    <head>
      <title>${data.product.name}</title>
      <link rel="stylesheet" href="/css/styles.css">
    </head>
    <body>
      <h1>${data.product.name}</h1>
      <p>${data.product.summary}</p>
      <dl>
        <dt>Kategorie</dt>
        <dd>${data.product.category}</dd>
        <dt>Erschienen</dt>
        <dd>${data.product.released}</dd>
        <dt>Verfügbarkeit</dt>
        <dd>${data.product.inStock ? 'Auf Lager' : 'Ausverkauft'}</dd>
      </dl>
    </body>
  </html>
`

import { html, head, title, link, body, h1, p, dl, dt, dd } from 'javascript-to-html'
import { getProduct, getProducts } from '../lib/catalogue.js'

export async function generateStaticParams() {
  const products = await getProducts()
  return products.map((product) => ({ slug: product.slug }))
}

export async function data({ params }) {
  const product = await getProduct(params.slug)
  if (!product) throw new Error(`Unknown product: ${params.slug}`)
  return { product }
}

export default ({ data }) =>
  html({ lang: 'de' },
    head(
      title(data.product.name),
      link({ rel: 'stylesheet', href: '/css/styles.css' }),
    ),
    body(
      h1(data.product.name),
      p(data.product.summary),
      dl(
        dt('Kategorie'),
        dd(data.product.category),
        dt('Erschienen'),
        dd(data.product.released),
        dt('Verfügbarkeit'),
        dd(data.product.inStock ? 'Auf Lager' : 'Ausverkauft'),
      ),
    ),
  )

import { getProduct, getProducts } from '../lib/catalogue.js'

export async function generateStaticParams() {
  const products = await getProducts()
  return products.map((product) => ({ slug: product.slug }))
}

export async function data({ params }) {
  const product = await getProduct(params.slug)
  if (!product) throw new Error(`Unknown product: ${params.slug}`)
  return { product }
}

export default function Product({ data }) {
  return (
    <html lang="de">
      <head>
        <title>{data.product.name}</title>
        <link rel="stylesheet" href="/css/styles.css" />
      </head>
      <body>
        <h1>{data.product.name}</h1>
        <p>{data.product.summary}</p>
        <dl>
          <dt>Kategorie</dt>
          <dd>{data.product.category}</dd>
          <dt>Erschienen</dt>
          <dd>{data.product.released}</dd>
          <dt>Verfügbarkeit</dt>
          <dd>{data.product.inStock ? 'Auf Lager' : 'Ausverkauft'}</dd>
        </dl>
      </body>
    </html>
  )
}

5. Bearbeiten und zusehen

npm install
npm run build

Unter sitelo lädt eine Preisänderung die offene Seite neu — der Dev-Server beobachtet die JSON-Dateien, die Seiten tatsächlich lesen. Doppelte Slugs, fehlende Dateien und fehlerhaftes JSON lassen den Build fehlschlagen und nennen den Pfad.

Doku zum Laden von Daten · Routing-Doku · Konfigurations-Doku