ui(docs): add steps component and WIP WSL reference page

docs/app/(home)/page.tsx

@@ -150,7 +150,7 @@ function PreviewImages() {
   ];
 
   return (
-    <div className="p-8 min-w-[800px] overflow-hidden xl:-mx-12 dark:[mask-image:linear-gradient(to_top,transparent,white_40px)]">
+    <div className="p-8 min-w-[600px] md:min-w-[800px] overflow-hidden xl:-mx-12 dark:[mask-image:linear-gradient(to_top,transparent,white_40px)]">
       <div className="absolute flex flex-row left-1/2 -translate-1/2 bottom-4 z-2 p-1 rounded-full bg-fd-card border shadow-xl dark:shadow-fd-background">
         {/* <div
           role="none"
@@ -176,7 +176,7 @@ function PreviewImages() {
           alt="preview"
           priority
           className={cn(
-            "rounded-xl w-full select-none duration-1000 animate-in fade-in -mb-60 slide-in-from-bottom-12 lg:-mb-0",
+            "rounded-xl w-full select-none duration-1000 animate-in fade-in md:-mb-60 slide-in-from-bottom-12 lg:-mb-0",
             active !== i && "hidden",
           )}
         />

docs/components/builder.tsx

@@ -52,8 +52,8 @@ ${ckanVersionString}${extensionsString ? extensionsString : ""}${featuresString
   }, [config]);
 
   return (
-    <div className="grid grid-cols-3 gap-4">
+    <div className="md:grid md:grid-cols-3 md:gap-4">
-      <div className="col-span-1 border-r-2 pr-4">
+      <div className="md:col-span-1 md:border-r-2 md:pr-4">
         <div className="sticky top-8">
           <h2>ckan-devstaller command</h2>
           <CodeBlock title="Installation command">
@@ -87,7 +87,7 @@ ${ckanVersionString}${extensionsString ? extensionsString : ""}${featuresString
           </div>
         </div>
       </div>
-      <div className="col-span-2">
+      <div className="md:col-span-2">
         <h2>Configuration options</h2>
         <PresetsBuilderSection config={config} setConfig={setConfig} />
         <CKANVersionBuilderSection config={config} setConfig={setConfig} />

docs/components/steps.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+export function Steps({ children }: { children: ReactNode }) {
+  return <div className="fd-steps">{children}</div>;
+}
+
+export function Step({ children }: { children: ReactNode }) {
+  return <div className="fd-step">{children}</div>;
+}

docs/content/docs/index.mdx

@@ -17,9 +17,16 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 
 ---
 
-You have several options to choose from for installation. Here are a few:
+## Install CKAN using ckan-devstaller
 
-## [1/3] Customize your CKAN installation with the Builder (Recommended)
+You have several options to choose from for installation. Here are a few you may choose one from:
+
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+<Steps>
+<Step>
+
+### Customize your CKAN installation with the Builder (Recommended)
 
 <Card
     icon={<BlocksIcon />}
@@ -29,7 +36,11 @@ You have several options to choose from for installation. Here are a few:
   Click here to customize your CKAN installation with an interactive web GUI
 </Card>
 
-## [2/3] Install the "CKAN-only" preset
+</Step>
+
+<Step>
+
+### Install the "CKAN-only" preset
 
 By running the following script, ckan-devstaller will be downloaded and the default configuration for installing CKAN 2.11.3 with ckan-compose will be selected. You can then customize your configuration interactively in your terminal after running this script.
 
@@ -43,7 +54,11 @@ If you'd rather skip the interactivity and go straight to installation, then run
 wget -O - https://github.com/dathere/ckan-devstaller/releases/download/0.3.0/install.bash | bash -s skip-interactive
 ```
 
-## [3/3] Install the "datHere Default" preset
+</Step>
+
+<Step>
+
+### Install the "datHere Default" preset
 
 The following script will download ckan-devstaller and select the following configuration:
 
@@ -67,6 +82,9 @@ If you'd rather skip the interactivity and go straight to installation, then run
 wget -O - https://github.com/dathere/ckan-devstaller/releases/download/0.3.0/install.bash | bash -s dathere-default skip-interactive
 ```
 
+</Step>
+</Steps>
+
 ## Learn more
 
 import { BlocksIcon, HomeIcon, GitMergeIcon, Trash2Icon } from 'lucide-react';

docs/content/docs/reference/developing-with-wsl.mdx

@@ -0,0 +1,95 @@
+---
+title: Developing with WSL
+description: Tips on how to develop ckan-devstaller on a Windows machine by leveraging Windows Subsystem for Linux.
+---
+
+<Callout title="Work in Progress" type="error">
+  This page is a work in progress and is not intended to be used yet.
+</Callout>
+
+When developing ckan-devstaller on Windows, using Windows Subsystem for Linux (WSL) can be advantageous to demo an Ubuntu 22.04 environment without having to set up a virtual machine.
+
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
+
+<Steps>
+<Step>
+
+### Install the Ubuntu-22.04 distribution
+
+You'll need to have the Ubuntu-22.04 distribution installed by running the following command:
+
+```bash
+wsl --install Ubuntu-22.04 --version 2
+```
+
+</Step>
+
+<Step>
+
+### Export a base image
+
+</Step>
+</Steps>
+
+Here's the expected set up where we create a WSL folder:
+
+```files
+/c/Users/rzmk/WSL
+├── images
+|   ├── ubuntu-22-04-snapshot.tar
+├── instances
+|   ├── cdr.vdhx
+```
+
+Now try to access your new Ubuntu 22.04 instance `cdr` as the `root` user by running:
+
+```bash
+wsl -d cdr
+```
+
+Once logged in as `root`, you'll want to edit the `/etc/wsl.conf` file and modify it so you can login as an admin user instead of `root`. We can use the `nano` editor to modify the file:
+
+```bash
+nano /etc/wsl.conf
+```
+
+Modify the file by adding a `[user]` section with the value `default=rzmk` (where `rzmk` is your username). The file should look similar to this:
+
+```ini
+[boot]
+systemd=true
+
+[user]
+default=rzmk
+```
+
+Now leave your instance:
+
+```bash
+exit
+```
+
+Then terminate the instance:
+
+```bash
+wsl --terminate cdr
+```
+
+Run the instance again and you should be logged in as your admin user by default now:
+
+```bash
+wsl -d cdr
+```
+
+Great, now you can go to the home directory and run one of the [quick start](/docs) scripts:
+
+```bash
+cd ~/
+```
+
+When you want to remove your instance (e.g. so that you can start a brand new instance) then run the following to unregister it:
+
+```bash
+wsl --unregister cdr
+```

docs/content/docs/reference/meta.json

@@ -0,0 +1,6 @@
+{
+    "pages": [
+        "...",
+        "!developing-with-wsl"
+    ]
+}