Yerel JSON

Depoda JSON olarak yaşayan ve sitelo/data tarafından statik sayfalara dönüştürülen içerik. API yok, veritabanı yok, istemci tarafı JavaScript yok. Tam kaynak examples/json içinde.

Elinize geçenler

Proje düzeni

my-site/
  sitelo.config.js
  data/
    site.json              # site geneli ayarlar
    categories.json        # tek nesne, slug ile anahtarlanmış
    products/              # ürün başına bir dosya
      aeron-chair.json
      jarvis-desk.json
      tolomeo-lamp.json
  src/
    lib/
      catalogue.js         # sitelo/data’ya dokunan tek modül
    index.ht.js            # / — kategoriler ve her ürün
    products/
      [slug].ht.js         # /products/:slug — JSON dosyası başına bir sayfa
    categories/
      [slug].ht.js         # /categories/:slug — anahtar başına bir sayfa

Veri src/ dışında yaşar, bu yüzden sitelo onu hiçbir zaman sayfa ya da varlık saymaz.

1. İçeriği data/ içine koyun

Ürün başına bir dosya. Dosya adı slug’dır, bu yüzden aeron-chair.json dosyası /products/aeron-chair olur — dosyanın içinde bunu söyleyen hiçbir şeye gerek yok:

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

Kategoriler ise tek bir dosyadır: slug ile anahtarlanmış bir nesne; readJsonCollection onu da aynı şekilde bir koleksiyon olarak okur.

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

2. Tek bir yerde okuyun

Yalnızca sunucuya ait küçük bir modül okumaları sarar. HTML içinde hiçbir şey ona başvurmaz, bu yüzden tarayıcıya hiç gönderilmez — ve sitelo/data dosya başına belleğe aldığından, bu yardımcıları çağıran her sayfaya rağmen her JSON dosyası bütün derleme boyunca bir kez ayrıştırılır.

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

/** Site geneli ayarlar: tek bir JSON dosyası, olduğu gibi ayrıştırılır. */
export function getSite() {
  return readJson('data/site.json')
}

/** Dosya başına bir kayıt, slug dosya adından alınır. */
export function getProducts() {
  return readJsonCollection('data/products', { sort: 'name' })
}

/** Slug ile anahtarlanmış bir nesne tutan tek dosya — anahtar slug olur. */
export function getCategories() {
  return readJsonCollection('data/categories.json')
}

/** Bir kategorideki ürünler, en ucuzdan başlayarak. */
export async function getProductsInCategory(slug) {
  const products = await readJsonCollection('data/products', { sort: 'price' })
  return products.filter((product) => product.category === slug)
}

3. Ana sayfada her şeyi listeleyin

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: 'tr' },
    head(
      title(data.site.title),
      link({ rel: 'stylesheet', href: '/css/styles.css' }),
    ),
    body(
      h1(data.site.title),
      h2('Kategoriler'),
      ul(
        ...data.categories.map((category) =>
          li(a({ href: `/categories/${category.slug}` }, category.name)),
        ),
      ),
      h2('Tüm ürünler'),
      ul(
        ...data.products.map((product) =>
          li(a({ href: `/products/${product.slug}` }, product.name)),
        ),
      ),
    ),
  )

4. JSON dosyası başına bir sayfa

generateStaticParams derleme sırasında dosya başına bir slug döndürür; data() her sayfa için eşleşen girdiyi yükler.

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: 'tr' },
    head(
      title(data.product.name),
      link({ rel: 'stylesheet', href: '/css/styles.css' }),
    ),
    body(
      h1(data.product.name),
      p(data.product.summary),
      dl(
        dt('Kategori'),
        dd(data.product.category),
        dt('Çıkış'),
        dd(data.product.released),
        dt('Durum'),
        dd(data.product.inStock ? 'Stokta' : 'Tükendi'),
      ),
    ),
  )

5. Düzenleyin ve izleyin

npm install
npm run build

sitelo altında bir fiyatı değiştirmek açık sayfayı yeniden yükler — geliştirme sunucusu sayfaların gerçekten okuduğu JSON dosyalarını izler. Yinelenen sluglar, eksik dosyalar ve bozuk JSON, kusurlu yol adlandırılarak derlemeyi düşürür.

Veri yükleme belgeleri · Yönlendirme belgeleri · Yapılandırma belgeleri