Astro Kitchen Sink

A self-contained Astro (SSR) app that exercises the full @timbl/client surface against a timbl CMS instance. Located at examples/astro-kitchen-sink/ in the repo.

Code Explorer 21 Interactive Sandbox —

Astro Kitchen Sink

Files 21

• • astro.config.mjs 10
  • content.config.ts 86
  • package.json 23
  • README.md 36
  • tsconfig.json 10
• src 1
  • env.d.ts 9
• src/components 1
  • Pagination.astro 21
• src/layouts 1
  • Base.astro 73
• src/lib 1
  • cms.ts 81
• src/pages 5
  • 404.astro 10
  • admin.astro 115
  • health.astro 34
  • index.astro 58
  • login.astro 17
• src/pages/api/auth 2
  • login.ts 25
  • logout.ts 17
• src/pages/assets 1
  • index.astro 33
• src/pages/case-studies 1
  • [slug].astro 37
• src/pages/posts 2
  • [slug].astro 41
  • index.astro 50
• src/pages/projects 1
  • [slug].astro 57

astro.config.mjs

javascript Copy

import { defineConfig } from "astro/config";
import node from "@astrojs/node";

// `output: "server"` + the Node adapter means every page is rendered on
// demand. Nothing is prerendered, so `astro build` never calls the CMS and
// succeeds without a running instance. Start the CMS, then `bun run dev`.
export default defineConfig({
  output: "server",
  adapter: node({ mode: "standalone" }),
});

Sandbox not configured

Run this example locally:

cd examples/astro-kitchen-sink
bun install
bun run dev

What it demonstrates

• Typed reads: collection().findMany() with status / sort / limit / offset / q search / select projection.
• Detail by slug: findBySlug() with include + depth relation expansion.
• Relations: caseStudies -> project (single) and posts/projects -> tags (many), rendered from included records.
• Globals: siteSettings (site name, description, socialLinks array) in the layout.
• Markdown: renders the CMS-provided bodyHtml companion (already sanitized). No client-side markdown pipeline.
• Assets: assets.findMany() gallery; featured images resolved via assets.findById().

Running it

cd examples/astro-kitchen-sink
bun install
bun run dev

The example expects a running timbl CMS at http://localhost:3000 (or whatever PUBLIC_TIMBL_BASE_URL is set to in .env). See the Quick Start for standing up the server.

File structure

src/
  layouts/Base.astro          # Global site shell, siteSettings globals
  lib/cms.ts                  # Typed @timbl/client wrapper
  pages/
    index.astro               # Public homepage (posts, case studies)
    admin.astro               # Admin dashboard (assets, drafts)
    login.astro               # Auth login
    health.astro              # /health check
    api/auth/login.ts         # Login endpoint
    api/auth/logout.ts        # Logout endpoint
    assets/index.astro        # Asset gallery