Initial commit: RustyAstro + OpenAPI-Typen aus RustyCMS

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-13 15:58:36 +01:00
commit 054b5719e5
21 changed files with 12756 additions and 0 deletions
@@ -0,0 +1,3 @@
+# URL des RustyCMS-Backends (ohne trailing slash)
+# Dev: RustyCMS mit cargo run starten, dann hier eintragen
+PUBLIC_CMS_URL=http://localhost:3000
@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
@@ -0,0 +1,62 @@
+# RustyAstro
+
+Astro-Frontend für [RustyCMS](https://github.com/…): nutzt die REST-API und die OpenAPI-Spezifikation. **Page**-Content (Listen- und Einzelseiten) ist angebunden.
+
+## Voraussetzungen
+
+- **RustyCMS** läuft (z.B. `cargo run` im Nachbarordner `rustycms`) unter `http://localhost:3000`.
+- Node.js 18+
+
+## Setup
+
+```bash
+cd rustyastro
+cp .env.example .env
+# Optional: .env anpassen (PUBLIC_CMS_URL)
+npm install
+```
+
+## Entwicklung
+
+```bash
+# Terminal 1: CMS starten
+cd rustycms && cargo run
+
+# Terminal 2: Astro starten
+cd rustyastro && npm run dev
+```
+
+Astro läuft standardmäßig auf `http://localhost:4321`. Die Startseite listet alle **Pages** aus dem CMS; Klick auf einen Eintrag öffnet die Einzelseite unter `/:slug` (z.B. `/home`, `/about`).
+
+## Konfiguration
+
+| Variable           | Beschreibung                                      |
+|--------------------|---------------------------------------------------|
+| `PUBLIC_CMS_URL`   | Basis-URL des RustyCMS (ohne Slash), z.B. `http://localhost:3000` |
+
+Die OpenAPI-Spec wird von `{PUBLIC_CMS_URL}/api-docs/openapi.json` geladen (u.a. für die Anzeige auf der Startseite). Page-Daten kommen von `GET /api/content/page` und `GET /api/content/page/:slug`.
+
+**TypeScript-Typen** für die API (z.B. `PageEntry`) werden aus dieser Spec generiert. Nach Schema-Änderungen im CMS:
+
+```bash
+# RustyCMS muss laufen
+yarn generate:api-types
+```
+
+Die generierte Datei ist `src/lib/cms-api.generated.ts` (wird von `cms.ts` importiert).
+
+## Build
+
+```bash
+npm run build
+```
+
+Beim Build müssen die CMS-Endpunkte erreichbar sein (für `getStaticPaths` und die Daten der Seiten). Für Produktion `PUBLIC_CMS_URL` auf die echte CMS-URL setzen.
+
+## Struktur
+
+- `src/lib/cms.ts` – CMS-Client (OpenAPI, Pages, Slug-Liste)
+- `src/lib/cms-api.generated.ts` – aus OpenAPI generierte Typen (mit `yarn generate:api-types` erzeugen)
+- `src/pages/index.astro` – Startseite mit Page-Liste
+- `src/pages/[slug].astro` – Einzelseite pro Page-Slug
+- `src/layouts/Layout.astro` – Layout inkl. Tailwind
@@ -0,0 +1,11 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});
@@ -0,0 +1,21 @@
+{
+  "name": "rustyastro",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "generate:api-types": "node scripts/generate-api-types.mjs"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "astro": "^5.17.1",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "openapi-typescript": "^7.4.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+/**
+ * Generiert TypeScript-Typen aus der RustyCMS OpenAPI-Spec.
+ * Verwendet PUBLIC_CMS_URL aus .env (Default: http://localhost:3000).
+ * RustyCMS muss laufen: cd ../rustycms && cargo run
+ */
+import { execSync } from "node:child_process";
+import { readFileSync, existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, "..");
+const envPath = join(root, ".env");
+
+if (existsSync(envPath)) {
+  const lines = readFileSync(envPath, "utf8").split("\n");
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed && !trimmed.startsWith("#") && trimmed.includes("=")) {
+      const idx = trimmed.indexOf("=");
+      const key = trimmed.slice(0, idx).trim();
+      const value = trimmed.slice(idx + 1).trim().replace(/^["']|["']$/g, "");
+      if (key && !process.env[key]) process.env[key] = value;
+    }
+  }
+}
+
+const base = (process.env.PUBLIC_CMS_URL || "http://localhost:3000").replace(/\/$/, "");
+const specUrl = `${base}/api-docs/openapi.json`;
+const outFile = join(root, "src/lib/cms-api.generated.ts");
+
+console.log("Fetching OpenAPI spec from", specUrl);
+console.log("Writing types to", outFile);
+
+try {
+  execSync(`npx openapi-typescript "${specUrl}" -o "${outFile}"`, {
+    stdio: "inherit",
+    cwd: root,
+  });
+  console.log("Done. Types are in src/lib/cms-api.generated.ts");
+} catch (err) {
+  console.error("\nFehler: OpenAPI-Spec konnte nicht geladen werden.");
+  console.error("Ist RustyCMS gestartet? z.B.: cd ../rustycms && cargo run");
+  process.exit(1);
+}
@@ -0,0 +1,9 @@
+/// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly PUBLIC_CMS_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
@@ -0,0 +1,25 @@
+---
+import '../styles/global.css';
+
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const { title = 'RustyAstro', description } = Astro.props;
+---
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+  </head>
+  <body class="min-h-screen bg-zinc-50 text-zinc-900">
+    <slot />
+  </body>
+</html>
@@ -0,0 +1,84 @@
+/**
+ * RustyCMS-Client: OpenAPI-Spec laden, Page-Content abrufen.
+ * Basis-URL über Umgebungsvariable PUBLIC_CMS_URL (z.B. http://localhost:3000).
+ *
+ * Typen für Page und API-Antworten kommen aus der generierten OpenAPI-Spec.
+ * Nach Schema-Änderungen im CMS: `yarn generate:api-types` (RustyCMS muss laufen).
+ */
+
+import type { components, operations } from "./cms-api.generated";
+
+const getBaseUrl = (): string => {
+  const url = import.meta.env.PUBLIC_CMS_URL;
+  const base = (typeof url === "string" && url.trim() ? url : "http://localhost:3000").replace(/\/$/, "");
+  return base;
+};
+
+/** Page-Eintrag aus der API (aus OpenAPI-Spec generiert). */
+export type PageEntry = components["schemas"]["page"];
+
+/** Antwort von GET /api/content/page (aus OpenAPI-Spec generiert). */
+export type PageListResponse = operations["listPage"]["responses"][200]["content"]["application/json"];
+
+export type OpenApiSpec = {
+  openapi: string;
+  info: { title: string; version: string };
+  paths: Record<string, unknown>;
+  components?: { schemas?: Record<string, unknown> };
+};
+
+let openApiCache: OpenApiSpec | null = null;
+
+/**
+ * Lädt die OpenAPI-Spezifikation von GET /api-docs/openapi.json.
+ * Wird gecacht (einmal pro Request/Build).
+ */
+export async function fetchOpenApi(): Promise<OpenApiSpec> {
+  if (openApiCache) return openApiCache;
+  const base = getBaseUrl();
+  const res = await fetch(`${base}/api-docs/openapi.json`);
+  if (!res.ok) {
+    throw new Error(
+      `RustyCMS OpenAPI fetch failed: ${res.status} ${res.statusText}. Is the CMS running at ${base}?`
+    );
+  }
+  const spec = (await res.json()) as OpenApiSpec;
+  openApiCache = spec;
+  return spec;
+}
+
+/**
+ * Alle Page-Einträge (GET /api/content/page).
+ */
+export async function getPages(): Promise<PageEntry[]> {
+  const base = getBaseUrl();
+  const res = await fetch(`${base}/api/content/page`);
+  if (!res.ok) {
+    throw new Error(
+      `RustyCMS list page failed: ${res.status}. Is the CMS running at ${base}?`
+    );
+  }
+  const data = (await res.json()) as PageListResponse;
+  return data.items ?? [];
+}
+
+/**
+ * Ein Page-Eintrag nach Slug (GET /api/content/page/:slug).
+ */
+export async function getPageBySlug(slug: string): Promise<PageEntry | null> {
+  const base = getBaseUrl();
+  const res = await fetch(`${base}/api/content/page/${encodeURIComponent(slug)}`);
+  if (res.status === 404) return null;
+  if (!res.ok) {
+    throw new Error(`RustyCMS get page failed: ${res.status} for slug "${slug}".`);
+  }
+  return (await res.json()) as PageEntry;
+}
+
+/**
+ * Alle Slugs für Page (für getStaticPaths / generate).
+ */
+export async function getPageSlugs(): Promise<string[]> {
+  const items = await getPages();
+  return items.map((p) => p._slug ?? p.slug ?? "").filter(Boolean);
+}
@@ -0,0 +1,13 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Seite nicht gefunden">
+  <main class="mx-auto max-w-3xl px-4 py-12 text-center">
+    <h1 class="text-3xl font-bold text-zinc-900">404</h1>
+    <p class="mt-2 text-zinc-600">Seite nicht gefunden.</p>
+    <a href="/" class="mt-6 inline-block rounded bg-zinc-900 px-4 py-2 text-white hover:bg-zinc-800">
+      Zur Startseite
+    </a>
+  </main>
+</Layout>
@@ -0,0 +1,46 @@
+---
+import Layout from '../layouts/Layout.astro';
+import { getPageSlugs, getPageBySlug } from '../lib/cms';
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+  try {
+    const slugs = await getPageSlugs();
+    return slugs.map((slug) => ({ params: { slug } }));
+  } catch (e) {
+    console.error('getStaticPaths (pages):', e);
+    return [];
+  }
+}
+
+const { slug } = Astro.params as { slug: string };
+const page = await getPageBySlug(slug);
+
+if (!page) {
+  return Astro.redirect('/404');
+}
+---
+
+<Layout
+  title={page.seoTitle ?? page.headline ?? page.linkName ?? slug}
+  description={page.seoDescription ?? page.subheadline}
+>
+  <main class="mx-auto max-w-3xl px-4 py-12">
+    <article>
+      <header class="mb-8">
+        <h1 class="text-3xl font-bold tracking-tight text-zinc-900">
+          {page.headline ?? page.linkName ?? page._slug}
+        </h1>
+        {page.subheadline && (
+          <p class="mt-2 text-lg text-zinc-600">
+            {page.subheadline}
+          </p>
+        )}
+      </header>
+      <div class="prose prose-zinc max-w-none">
+        <!-- Weitere Felder (z.B. row1Content, topFullwidthBanner) können hier gerendert werden -->
+      </div>
+    </article>
+  </main>
+</Layout>
@@ -0,0 +1,57 @@
+---
+import Layout from '../layouts/Layout.astro';
+import { getPages, fetchOpenApi } from '../lib/cms';
+import type { PageEntry } from '../lib/cms';
+
+let openApiTitle = 'RustyCMS API';
+let pages: PageEntry[] = [];
+let cmsError: string | null = null;
+
+try {
+  const spec = await fetchOpenApi();
+  openApiTitle = (spec.info?.title as string) ?? openApiTitle;
+  pages = await getPages();
+} catch (e) {
+  cmsError = e instanceof Error ? e.message : String(e);
+}
+---
+
+<Layout title="RustyAstro – Pages" description="Pages aus RustyCMS">
+  <main class="mx-auto max-w-3xl px-4 py-12">
+    <h1 class="text-3xl font-bold tracking-tight text-zinc-900">
+      Pages
+    </h1>
+    <p class="mt-2 text-sm text-zinc-500">
+      Schema von <strong>{openApiTitle}</strong> (OpenAPI).
+    </p>
+    <ul class="mt-8 space-y-3">
+      {pages.map((page) => (
+        <li>
+          <a
+            href={`/${encodeURIComponent(page._slug ?? page.slug)}`}
+            class="block rounded-lg border border-zinc-200 bg-white px-4 py-3 shadow-sm transition hover:border-zinc-300 hover:shadow"
+          >
+            <span class="font-medium text-zinc-900">
+              {page.linkName ?? page.name ?? page._slug}
+            </span>
+            {page.headline && (
+              <span class="mt-1 block text-sm text-zinc-500">
+                {page.headline}
+              </span>
+            )}
+          </a>
+        </li>
+      ))}
+    </ul>
+    {cmsError && (
+      <div class="mt-6 rounded-lg border border-amber-200 bg-amber-50 p-4 text-amber-800">
+        <strong>CMS nicht erreichbar:</strong> {cmsError}
+      </div>
+    )}
+    {!cmsError && pages.length === 0 && (
+      <p class="mt-6 text-zinc-500">
+        Keine Pages gefunden. RustyCMS unter <code class="rounded bg-zinc-200 px-1">PUBLIC_CMS_URL</code> starten und <code class="rounded bg-zinc-200 px-1">content/page/*.json5</code> anlegen.
+      </p>
+    )}
+  </main>
+</Layout>
@@ -0,0 +1 @@
+@import "tailwindcss";
@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}