docs: add Kirby Headless docs

kirby-tools · Aug 8, 2024 · f1e4f0a · f1e4f0a
1 parent 6b83805
commit f1e4f0a
Show file tree

Hide file tree

Showing 13 changed files with 652 additions and 31 deletions.
diff --git a/components/Header.vue b/components/Header.vue
@@ -17,23 +17,27 @@ const links = computed<HeaderLink[]>(() => [
       {
         label: "Live Preview",
         to: "/live-preview",
+        icon: "i-ri-presentation-fill",
         description: "Real-time page preview",
       },
       {
         label: "Content Translator",
         to: "/content-translator",
-        description: "DeepL-powered translations",
+        icon: "i-ri-translate",
+        description: "Content translation in the Panel or server-side",
       },
       {
         label: "Kirby Copilot",
         to: "https://kirbycopilot.com",
+        icon: "i-ri-sparkling-fill",
         description: "AI-powered content generation",
         target: "_blank",
       },
       {
         label: "Kirby SEO Audit",
-        description: "State-of-the-art SEO analysis",
         to: "https://kirbyseo.com",
+        icon: "i-ri-seo-fill",
+        description: "State-of-the-art SEO analysis",
         target: "_blank",
       },
     ],
@@ -44,17 +48,17 @@ const links = computed<HeaderLink[]>(() => [
       {
         label: "Live Preview",
         to: "/docs/live-preview",
-        description: "Content changes live in the Panel",
+        icon: "i-ri-presentation-fill",
       },
       {
         label: "Content Translator",
         to: "/docs/content-translator",
-        description: "Translate your content in the Panel or with the PHP API",
+        icon: "i-ri-translate",
       },
       {
-        label: "Kirby Headless",
+        label: "Headless",
         to: "/docs/headless",
-        description: "Kirby, but headless only",
+        icon: "i-ri-braces-fill",
       },
     ],
   },
@@ -70,8 +74,6 @@ const links = computed<HeaderLink[]>(() => [
 ]);
 
 const navigation = inject<Ref<NavItem[]>>("navigation", ref([]));
-// TODO: Remove when fixed upstream
-const _mapContentNavigation = mapContentNavigation;
 </script>
 
 <template>
@@ -115,7 +117,7 @@ const _mapContentNavigation = mapContentNavigation;
 
     <template #panel>
       <UNavigationTree
-        :links="_mapContentNavigation(navigation)"
+        :links="mapContentNavigation(navigation)"
         :multiple="false"
         default-open
       />

diff --git a/content/1.docs/1.live-preview/1.index.md b/content/1.docs/1.live-preview/1.index.md
@@ -1,15 +1,13 @@
 ---
-title: Installation
+title: Getting Started
 description: Learn how to install and configure Kirby Live Preview in your Kirby project.
 ---
 
-## Quick Start
-
-### Step 1: Install the Plugin
+## Step 1: Install the Plugin
 
 Although it is a commercial plugin, you can download and test the plugin in your local environment before purchasing it.
 
-#### Composer
+### Composer
 
 The recommended way to install the plugin is via Composer. To install the plugin, run the following command in your terminal:
 
@@ -29,7 +27,7 @@ You can now delete the `auth.json` file from the root directory.
 
 ::
 
-#### Download
+### Download
 
 Head over to the [releases page](https://github.com/kirby-tools/kirby-live-preview/releases) and download the latest version of the plugin as a ZIP file. Extract the contents of this ZIP file to your `site/plugins` folder. It should look like this:
 
@@ -39,7 +37,7 @@ site/plugins/
 │  └─ … All plugin files
 ```
 
-### Step 2: Blueprint Setup
+## Step 2: Blueprint Setup
 
 Select a site or page blueprint to which you want to add the Live Preview section. Add the following section configuration to the blueprint file:
 
@@ -49,7 +47,7 @@ sections:
     type: preview
 ```
 
-### Step 3: Customize the Live Preview
+## Step 3: Customize the Live Preview
 
 Fit the Live Preview section to your blueprint layout and customize it to your needs: It can be part of any column and can even be sticky. The latter is useful for previewing content changes side-by-side with blocks or other fields:
 
@@ -76,7 +74,7 @@ Try navigating through the preview – if you click on a site link, such as in t
 
 For mor configuration options, see the [Configuration](/docs/live-preview/configuration) guide.
 
-### Step 4: Buy a License
+## Step 4: Buy a License
 
 You can test the plugin locally. However, you need to purchase a license to use the plugin in production environments.
 

diff --git a/content/1.docs/1.live-preview/_dir.yml b/content/1.docs/1.live-preview/_dir.yml
@@ -1 +1,2 @@
 title: Live Preview
+icon: i-ri-presentation-fill
diff --git a/content/1.docs/2.content-translator/1.index.md b/content/1.docs/2.content-translator/1.index.md
@@ -1,23 +1,21 @@
 ---
-title: Installation
+title: Getting Started
 description: Learn how to install and configure the plugin in your Kirby project.
 ---
 
-## Quick Start
-
-### Step 1: Install the Plugin
+## Step 1: Install the Plugin
 
 Although it is a commercial plugin, you can download and test the plugin in your local environment before purchasing it.
 
-#### Composer
+### Composer
 
 The recommended way to install the plugin is via Composer. To install the plugin, run the following command in your terminal:
 
 ```bash
 composer require johannschopplich/kirby-content-translator
 ```
 
-#### Download
+### Download
 
 Head over to the [releases page](https://github.com/kirby-tools/kirby-content-translator/releases) and download the latest version of the plugin as a ZIP file. Extract the contents of this ZIP file to your `site/plugins` folder. It should look like this:
 
@@ -27,7 +25,7 @@ site/plugins/
 │  └─ … All plugin files
 ```
 
-### Step 2: Configure DeepL
+## Step 2: Configure DeepL
 
 By default, this plugin uses the [DeepL API](https://www.deepl.com) to translate your content. However, you can also use any other translation service by defining a [custom translator function](/docs/content-translator/configuration#custom-translator-function).
 
@@ -46,7 +44,7 @@ return [
 ];
 ```
 
-### Step 3: Blueprint Setup
+## Step 3: Blueprint Setup
 
 Open a site, site, or page blueprint file where you want to add the Content Translator. Add the following section configuration to the blueprint file:
 
@@ -61,7 +59,7 @@ This will add a new section to the Panel where you can import and translate cont
 ::preview{src="/img/kirby-content-translator-section-activate.png"}
 ::
 
-### Step 4: Translate Your Content
+## Step 4: Translate Your Content
 
 Open the Panel and navigate to the page where you added the Content Translator section. Select one of the secondary languages from the Kirby's language drop-down list. You will see two new buttons in the section: **Import** and **Translate**.
 
@@ -75,7 +73,7 @@ By default, all text-like fields are translated. You can fully customize the con
 
 For more configuration options, see the [Configuration](/docs/live-preview/configuration) guide.
 
-### Step 5: Buy a License
+## Step 5: Buy a License
 
 You can test the plugin locally. However, you need to purchase a license to use the plugin in production environments.
 

diff --git a/content/1.docs/2.content-translator/_dir.yml b/content/1.docs/2.content-translator/_dir.yml
@@ -1 +1,2 @@
 title: Content Translator
+icon: i-ri-translate
diff --git a/content/1.docs/3.headless/1.index.md b/content/1.docs/3.headless/1.index.md
@@ -0,0 +1,50 @@
+---
+title: Getting Started
+description: The Kirby Headless plugin enhances your Kirby site with headless capabilities.
+---
+
+## Introduction
+
+This plugin is designed for developers who want to use Kirby's backend to serve content to a frontend application, static site generator, or mobile application. You can either add headless functionality to your existing Kirby site, or use this plugin to build a headless-first CMS from scratch.
+
+::callout{icon="i-ri-information-line"}
+Check out to the [Kirby Headless Starter](https://github.com/johannschopplich/kirby-headless-starter) repository for a ready-to-use headless-only setup!
+::
+
+## Key Features
+
+- 🧩 Optional bearer token authentication for [KQL](/docs/headless/usage#kirby-query-language-kql) and custom API endpoints
+- 🧱 Resolve fields in blocks: [UUIDs to file and page objects](/docs/headless/field-methods) or [any other field](/docs/headless/field-methods)
+- ⚡️ Cached KQL queries
+- 🌐 Multi-language support for KQL queries
+- 😵 Built-in CORS handling
+- 🍢 Express-esque [API builder](/docs/headless/api-builder) with middleware support
+- 🗂 Return [JSON from templates](/docs/headless/usage#json-templates) instead of HTML
+
+## Installation
+
+### Composer
+
+The recommended way to install the plugin is via Composer. To install the plugin, run the following command in your terminal:
+
+```bash
+composer require johannschopplich/kirby-content-translator
+```
+
+### Download
+
+Head over to the [releases page](https://github.com/johannschopplich/kirby-headless/releases) and download the latest version of the plugin as a ZIP file. Extract the contents of this ZIP file to your `site/plugins` folder. It should look like this:
+
+```
+site/plugins/
+├─ kirby-headless/
+│  └─ … Plugin files
+```
+
+## Setup
+
+Nothing to do here! The plugin is ready to use out of the box. If you want to customize the plugin, you can do so by [configuring it](/docs/headless/usage).
+
+::callout{icon="i-ri-information-line"}
+By default, Kirby Headless doesn't interfere with Kirby's default routing. Thus, it won't affect your existing routes or templates.
+::