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]">
-              ./ckan-devstaller
-            </Pre>
+            <Pre className="text-wrap pl-4 max-w-[21rem]">{command}</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
-            icon={<BarChartBigIcon />}
-            title="CKAN, DataStore, ckanext-scheming, and DataPusher+ extensions"
-          >
+          <Card icon={<BarChartBigIcon />} title="datHere Default">
             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>
-        </Cards>
-        <h3>SSH capability</h3>
-        <Cards>
-          <Card icon={<TerminalSquareIcon />} title="Enable SSH">
-            Installs openssh-server and net-tools.
-          </Card>
+          <Card
+            icon={<SailboatIcon />}
+            title="Install a different version"
+          ></Card>
+          <Card
+            icon={<SailboatIcon />}
+            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>