Content management that lives in your codebase

import { createApiRouteHandlers } from '@krantho/server-next'
import config from '../../../krantho.config'
import { collections } from '../../../krantho.collections'

// The content API at /api/*: content, media, SEO, auth and the sitemap
export const { GET, POST, PUT, DELETE, PATCH } = createApiRouteHandlers({
  config,
  collections,
})

// The admin at /admin, in app/admin/[[...slug]]/route.ts:
//
//   import { createAdminRouteHandler } from '@krantho/server-next'
//   export const { GET } = createAdminRouteHandler()

import { createApiHandlers } from '@krantho/server-sveltekit'
import config from '../../../../krantho.config'
import { collections } from '../../../../krantho.collections'

// The content API at /api/*: content, media, SEO, auth and the sitemap
export const { GET, POST, PUT, DELETE, PATCH } = createApiHandlers({
  config,
  collections,
  // Editors preview drafts through a short-lived signed link
  sitePreview: 'signed-url',
})

// The admin at /admin, in src/routes/admin/[...path]/+server.ts:
//
//   import { createAdminHandler } from '@krantho/server-sveltekit'
//   export const { GET } = createAdminHandler()

import express from 'express'
import { createAdminServer, createHandler, toWebRequest, writeResponseHeaders } from '@krantho/server-node'
import config from './krantho.config'
import { collections } from './krantho.collections'

const api = createHandler({ config, collections, sitePreview: 'signed-url' })
const admin = createAdminServer(config)
const app = express()

async function send(res: express.Response, response: Response): Promise<void> {
  res.status(response.status)
  writeResponseHeaders(res, response)
  res.end(Buffer.from(await response.arrayBuffer()))
}

const owns = (prefix: string, path: string) => path === prefix || path.startsWith(`${prefix}/`)

// Mounted without a path: the handler routes on the full URL
app.use(async (req, res, next) => {
  if (owns('/api', req.path)) return send(res, await api.handle(await toWebRequest(req)))
  if (!owns('/admin', req.path)) return next()
  const url = new URL(`http://localhost${req.originalUrl}`)
  return send(res, admin({ url, cookie: req.headers.cookie }))
})

import { notFound } from 'next/navigation'
import { SeoJsonLd } from '@krantho/ui-react/server'
import { requirePublished } from '../../../../lib/krantho'
import { FeatureList } from './list'

// /features and /features/<slug>. Rendered on its first request, then cached
// until a change in /admin invalidates it (cache.pages: 'next-isr').
// The build reads no content.
export const revalidate = false

export function generateStaticParams(): { slug?: string[] }[] {
  return []
}

interface Props {
  params: Promise<{ slug?: string[] }>
}

export default async function FeaturesPage({ params }: Props) {
  const { slug } = await params
  if (!slug) return <FeatureList />
  const [name] = slug
  if (slug.length !== 1 || !name) notFound()
  const feature = await requirePublished('features', name)
  return (
    <article>
      <SeoJsonLd collection="features" slug={name} />
      <h1>{String(feature.fields['title'] ?? '')}</h1>
      <p>{String(feature.fields['benefit'] ?? '')}</p>
      <div dangerouslySetInnerHTML={{ __html: feature.html }} />
    </article>
  )
}

import { error } from '@sveltejs/kit'
import { loadContent, loadJsonLd } from '$lib/cms'

// /features/<slug>. Reads happen inside the page render, so each one records
// its cache tags: behind a CDN, a change in /admin purges the pages that showed it.
export async function load({ params }: { params: { slug: string } }) {
  const feature = await loadContent('features', params.slug)
  if (!feature) error(404, 'Page not found')
  const jsonLd = await loadJsonLd('features', params.slug)
  return { fields: feature.fields, html: feature.html, jsonLd }
}

// +page.svelte renders it:
//
//   <h1>{data.fields.title}</h1>
//   <p>{data.fields.benefit}</p>
//   {@html data.html}

// server.ts, continued: `app` and `config` come from the API wiring
import { renderCachedPage } from '@krantho/server-node'
import { loadContent } from './src/lib/cms'

// A feature page. Reads happen inside the render, so each one records its cache tags
async function renderFeature(slug: string): Promise<{ status: number; html: string }> {
  const feature = await loadContent('features', slug)
  if (!feature) return { status: 404, html: '<h1>Page not found</h1>' }
  return { status: 200, html: `<article>${feature.html}</article>` }
}

// After the API and admin middleware. Pass req.originalUrl, which keeps the
// mount path and the query string a signed draft preview carries.
app.get('/features/:slug', async (req, res) => {
  const request = { url: req.originalUrl, method: req.method }
  const page = await renderCachedPage(request, config, () => renderFeature(req.params.slug))
  for (const [name, value] of Object.entries(page.headers)) res.setHeader(name, value)
  res.status(page.status).type('html').send(page.html)
})