Die Startseite konfigurieren

Lokalisierte Hero-Texte, Handlungsaufforderungen, Funktionsübersichten, optionale Medien und den Agentenbereich definieren.

Konfiguriere die integrierte Startseite unter ginkoDocs.landing. Beginne mit dem Nutzenversprechen, einer primären Aktion und dem kürzesten Beleg, den neue Leser benötigen.

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      title: {
        en: "Build with Acme.",
        de: "Mit Acme entwickeln.",
      },
      description: {
        en: "Install the SDK, authenticate, and make your first request.",
        de: "SDK installieren, authentifizieren und die erste Anfrage senden.",
      },
      primary: {
        label: { en: "Get started", de: "Erste Schritte" },
        to: {
          en: "/docs/getting-started",
          de: "/de/dokumentation/erste-schritte",
        },
      },
      secondary: {
        label: { en: "View on GitHub", de: "Auf GitHub ansehen" },
        to: {
          en: "https://github.com/acme/sdk",
          de: "https://github.com/acme/sdk",
        },
      },
      install: {
        command: "pnpm add @acme/sdk",
      },
    },
  },
});

Der Installationsbefehl erscheint als kopierbare Zeile unter den Hero-Aktionen. Lasse secondary oder install weg, wenn das Feld keine nützliche Information ergänzt.

Hero-Medien hinzufügen

Verwende ein Bild für einen Produkt-Screenshot:

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      hero: {
        media: {
          type: "image",
          src: "/screenshots/dashboard.png",
          alt: "Acme-Dashboard mit einem erfolgreichen Deployment",
        },
      },
    },
  },
});

Verwende Code, wenn der erste erfolgreiche Befehl hilfreicher als ein Screenshot ist:

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      hero: {
        media: {
          type: "code",
          filename: "server/api/projects.get.ts",
          language: "ts",
          code: `export default defineEventHandler(() => {
  return { projects: [] }
})`,
        },
      },
    },
  },
});

Setze für mehrere Beispiele type: 'code-tabs' und übergib tabs. Jeder Tab akzeptiert ein lokalisiertes label sowie optional icon, filename, language und code.

Kurze Funktionsbeschreibungen ergänzen

Funktionskarten sind kurze Aussagen auf der Startseite, kein zweiter Dokumentationsindex:

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      features: [
        {
          title: { en: "Typed client", de: "Typisierter Client" },
          description: {
            en: "Generate request and response types from one schema.",
            de: "Anfrage- und Antworttypen aus einem Schema generieren.",
          },
          icon: "lucide:braces",
        },
        {
          title: { en: "Local development", de: "Lokale Entwicklung" },
          description: {
            en: "Run the complete API without a hosted dependency.",
            de: "Die vollständige API ohne gehostete Abhängigkeit ausführen.",
          },
          icon: "lucide:laptop",
        },
      ],
    },
  },
});

Agentenbereich und Abschlussaktion hinzufügen

landing.agent rendert einen dunklen Bereich in voller Breite mit lokalisiertem Text und einem Terminalprotokoll. Zeilen mit $ am Anfang erscheinen als Befehle, Zeilen mit # als Kommentare. landing.cta ergänzt die Abschlussaktion; ohne eigenen primären Link verwendet sie landing.primary.

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      agent: {
        title: { en: "Readable by agents", de: "Für Agenten lesbar" },
        description: {
          en: "Use the same published Markdown without a separate export.",
          de: "Dasselbe veröffentlichte Markdown ohne separaten Export verwenden.",
        },
        code: "$ curl https://docs.example.com/llms.txt\n# Acme Docs",
      },
      cta: {
        title: { en: "Make the first request.", de: "Die erste Anfrage senden." },
      },
    },
  },
});

Wenn die integrierte Komposition nicht mehr zum Produkt passt, ersetze app/pages/index.vue. Behalte app.config.ts für die gemeinsame Website-Identität, statt seitenspezifischen Zustand in die globale Konfiguration zu zwingen.