feat(docs): add sidebar link icons, start info page, continue Builder

docs/components/builder.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import {
@@ -6,19 +8,47 @@ import {
   SailboatIcon,
   TerminalSquareIcon,
 } from "lucide-react";
+import { useState } from "react";
+
+type Config = {
+  preset: string | undefined;
+  ckanVersion: string;
+  extensions: string[];
+};
 
 export default function Builder() {
   const { Card, Cards } = defaultMdxComponents;
+  const [command, setCommand] = useState("./ckan-devstaller");
+  const [config, setConfig] = useState<Config>({
+    preset: undefined,
+    ckanVersion: "2.11.3",
+    extensions: [],
+  });
+
   return (
     <div className="grid grid-cols-3 gap-4">
       <div className="col-span-1 border-r-2 pr-4">
-        <div className="fixed">
+        <div className="sticky top-8">
           <h2>ckan-devstaller command</h2>
           <CodeBlock title="Installation command">
-            <Pre className="text-wrap pl-4 max-w-[21rem]">
+            <Pre className="text-wrap pl-4 max-w-[21rem]">{command}</Pre>
-              ./ckan-devstaller
-            </Pre>
           </CodeBlock>
+          <h2>Selected configuration</h2>
+          <div>
+            <strong>CKAN version</strong>: 2.11.3
+            <br />
+            <br />
+            <strong>Extensions:</strong>
+            <ul>
+              <li>DataStore</li>
+              <li>ckanext-scheming</li>
+              <li>DataPusher+</li>
+            </ul>
+            <strong>Extra features:</strong>
+            <ul>
+              <li>Enable SSH</li>
+            </ul>
+          </div>
         </div>
       </div>
       <div className="col-span-2">
@@ -35,10 +65,7 @@ export default function Builder() {
           <Card icon={<BlocksIcon />} title="CKAN and the DataStore extension">
             Installs CKAN and the DataStore extension.
           </Card>
-          <Card
+          <Card icon={<BarChartBigIcon />} title="datHere Default">
-            icon={<BarChartBigIcon />}
-            title="CKAN, DataStore, ckanext-scheming, and DataPusher+ extensions"
-          >
             Installs CKAN, the DataStore extension, the ckanext-scheming
             extension, and the DataPusher+ extension.
           </Card>
@@ -47,13 +74,14 @@ export default function Builder() {
         <Cards>
           <Card icon={<SailboatIcon />} title="2.11.3"></Card>
           <Card icon={<SailboatIcon />} title="2.10.8"></Card>
-          <Card icon={<SailboatIcon />} title="Other"></Card>
+          <Card
-        </Cards>
+            icon={<SailboatIcon />}
-        <h3>SSH capability</h3>
+            title="Install a different version"
-        <Cards>
+          ></Card>
-          <Card icon={<TerminalSquareIcon />} title="Enable SSH">
+          <Card
-            Installs openssh-server and net-tools.
+            icon={<SailboatIcon />}
-          </Card>
+            title="Clone from remote Git repository"
+          ></Card>
         </Cards>
         <h3>CKAN extensions</h3>
         <Cards>
@@ -62,6 +90,16 @@ export default function Builder() {
           <Card icon={<TerminalSquareIcon />} title="DataStore"></Card>
           <Card icon={<TerminalSquareIcon />} title="DataPusher+"></Card>
           <Card icon={<TerminalSquareIcon />} title="ckanext-spatial"></Card>
+          <Card icon={<TerminalSquareIcon />} title="Custom extension"></Card>
+        </Cards>
+        <h3>Extra features</h3>
+        <Cards>
+          <Card icon={<TerminalSquareIcon />} title="Enable SSH">
+            Installs openssh-server and net-tools.
+          </Card>
+          <Card icon={<TerminalSquareIcon />} title="Run a Bash script">
+            Run a Bash script before or after any step during the installation.
+          </Card>
         </Cards>
       </div>
     </div>

docs/content/docs/builder.mdx

@@ -1,6 +1,7 @@
 ---
 title: Builder
 description: Customize your CKAN installation before running ckan-devstaller.
+icon: Blocks
 ---
 
 import Builder from "@/components/builder";

docs/content/docs/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: Quick Start
 description: Get started with ckan-devstaller and install CKAN within minutes.
+icon: Zap
 ---
 
 ckan-devstaller attempts to install a CKAN instance from source along with [ckan-compose](https://github.com/tino097/ckan-compose) and other optional features, intended for development use in a new Ubuntu 22.04 instance.

docs/content/docs/meta.json

@@ -0,0 +1,3 @@
+{
+    "pages": ["---Introduction---", "index", "what-is-ckan-devstaller", "builder", "---Further reading---", "tutorials", "reference"]
+}

docs/content/docs/what-is-ckan-devstaller.mdx

@@ -0,0 +1,19 @@
+---
+title: What is ckan-devstaller?
+description: Learn about why ckan-devstaller was built and how it may help you.
+icon: CircleQuestionMark
+---
+
+TODO: Improve this page.
+
+## Introduction
+
+Description
+
+Cards
+
+## Who is ckan-devstaller for
+
+## How can I use ckan-devstaller
+
+## Learn more

docs/lib/source.ts

@@ -1,10 +1,16 @@
 import { type InferPageType, loader } from "fumadocs-core/source";
+import { icons } from "lucide-react";
+import { createElement } from "react";
 import { docs } from "@/.source";
 
 // See https://fumadocs.vercel.app/docs/headless/source-api for more info
 export const source = loader({
   baseUrl: "/docs",
   source: docs.toFumadocsSource(),
+  icon(icon) {
+    if (!icon) return;
+    if (icon in icons) return createElement(icons[icon as keyof typeof icons]);
+  },
 });
 
 export function getPageImage(page: InferPageType<typeof source>) {