feat: index page

content/1.docs/2.content-translator/1.index.md

@@ -27,7 +27,7 @@ site/plugins/
 │  └─ … All plugin files
 ```
 
-### Step 2: Configure DeepL Integration
+### 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).
 
@@ -80,7 +80,7 @@ Click the **Translate** button to translate the content of the freshly imported
 
 For mor configuration options, see the [Configuration](/docs/live-preview/configuration) guide.
 
-### Step 4: License Activation
+### Step 4: Buy a License
 
 You can test the plugin locally. However, you need to purchase a license to use the plugin in a production environment.
 

content/content-translator.yml

@@ -1,6 +1,5 @@
 title: Content Translator
 description: Translate any page in the Panel or programmatically with DeepL.
-navigation: false
 hero:
   orientation: horizontal
   headline:

content/index.yml

@@ -0,0 +1,33 @@
+title: Kirby Tools
+description: A collection of Kirby plugins that empoweres editors and developers alike.
+products:
+  - orientation: vertical
+    headline:
+      label: 20% early bird discount
+      to: /content-translator#pricing
+      icon: i-ri-discount-percent-fill
+    title: 'The <span class="text-primary">Holistic</span><br> Content Translation Workflow'
+    description: Translate content with nested data structures in the Panel or programmatically with DeepL. One page at the time or all at once.
+    links:
+      - label: Read More
+        to: /content-translator
+        size: xl
+        color: primary
+        icon: i-ri-arrow-right-line
+        trailing: true
+    video:
+      path: /vid/kirby-content-translator-demo.mp4
+      poster: /vid/kirby-content-translator-demo-poster.jpg
+  - orientation: vertical
+    title: '<span class="text-primary">Real-Time</span><br> Page Preview in Your Panel'
+    description: The Live Preview Panel section shows how your page will look with unsaved changes. It's the plugin content editors and clients have been waiting for.
+    links:
+      - label: Read More
+        to: /live-preview
+        size: xl
+        color: primary
+        icon: i-ri-arrow-right-line
+        trailing: true
+    video:
+      path: /vid/kirby-live-preview-demo.mp4
+      poster: /vid/kirby-live-preview-demo-poster.jpg

content/live-preview.yml

@@ -1,6 +1,5 @@
 title: Live Preview
 description: Real-time preview of unsaved changes right in the Panel.
-navigation: false
 hero:
   orientation: horizontal
   headline:

nuxt.config.ts

@@ -44,14 +44,13 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    "/": { redirect: "/live-preview", prerender: false },
     "/docs": { redirect: "/docs/live-preview", prerender: false },
   },
 
   nitro: {
     prerender: {
       crawlLinks: true,
-      routes: ["/live-preview", "/api/search.json"],
+      routes: ["/", "/live-preview", "/content-translator", "/api/search.json"],
     },
   },
 });

pages/index.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData("index", () =>
+  queryContent("/").findOne(),
+);
+
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: "Page not found",
+    fatal: true,
+  });
+}
+
+useSeoMeta({
+  title: page.value.title,
+  ogTitle: page.value.title,
+  description: page.value.description,
+  ogDescription: page.value.description,
+});
+
+defineOgImageComponent("Default", {
+  title: page.value.title,
+  description: page.value.description,
+});
+</script>
+
+<template>
+  <div v-if="page">
+    <ULandingHero
+      v-for="(product, index) of page.products"
+      :key="index"
+      :orientation="product.orientation"
+      :links="product.links"
+      :class="[index > 0 && '!pt-0']"
+    >
+      <template #headline>
+        <UBadge
+          v-if="product.headline"
+          variant="subtle"
+          size="md"
+          class="hover:bg-primary-100 dark:bg-primary-950/100 dark:hover:bg-primary-900 relative rounded-full font-medium shadow-none"
+        >
+          <NuxtLink
+            :to="product.headline.to"
+            class="focus:outline-none"
+            tabindex="-1"
+          >
+            <span class="absolute inset-0" aria-hidden="true" />
+          </NuxtLink>
+
+          <span class="flex items-center gap-1">
+            <UIcon
+              v-if="product.headline.icon"
+              :name="product.headline.icon"
+              class="pointer-events-none h-4 w-4"
+            />
+            {{ product.headline.label }}
+          </span>
+        </UBadge>
+      </template>
+
+      <template #title>
+        <span v-html="product.title" />
+      </template>
+
+      <template #description>
+        <span v-html="product.description" />
+      </template>
+
+      <template #default>
+        <ElementVideo v-bind="product.video" />
+      </template>
+    </ULandingHero>
+  </div>
+</template>