feat: better home page

docs/app/(home)/page.tsx

@@ -1,42 +1,437 @@
+/** biome-ignore-all lint/suspicious/noArrayIndexKey: Would need to look into this trivial issue */
+"use client";
+
+import { cva } from "class-variance-authority";
+import { CodeBlock } from "fumadocs-ui/components/codeblock";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { cn } from "fumadocs-ui/utils/cn";
+import {
+  BlocksIcon,
+  GiftIcon,
+  GitMergeIcon,
+  HomeIcon,
+  SailboatIcon,
+  TerminalIcon,
+  Trash2Icon,
+  ZapIcon,
+} from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
+import { type HTMLProps, type ReactNode, useState } from "react";
+import { Pre } from "@/components/codeblock";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { RainbowButton } from "@/components/ui/rainbow-button";
+import CkanactionDemo1 from "./ckanaction-demo-1.gif";
+import CkanactionRustDemo from "./ckanaction-rust-demo.gif";
 
 export default function HomePage() {
+  const gridColor =
+    "color-mix(in oklab, var(--color-fd-primary) 10%, transparent)";
+  const { Card, Cards } = defaultMdxComponents;
   return (
-    <main className="flex flex-1 flex-col justify-center text-center">
-      <h1 className="mb-4 text-2xl font-bold">ckanaction</h1>
-      <p className="text-fd-muted-foreground">
-        You can open{" "}
-        <Link
-          href="/docs"
-          className="text-fd-foreground font-semibold underline"
+    <>
+      <div
+        className="absolute inset-x-0 top-[360px] h-[250px] max-md:hidden"
+        style={{
+          background: `repeating-linear-gradient(to right, ${gridColor}, ${gridColor} 1px,transparent 1px,transparent 50px), repeating-linear-gradient(to bottom, ${gridColor}, ${gridColor} 1px,transparent 1px,transparent 50px)`,
+        }}
+      />
+      <main className="container relative max-w-[1100px] mx-auto px-2 py-4 z-2 lg:py-8">
+        <div
+          style={{
+            background:
+              "repeating-linear-gradient(to bottom, transparent, color-mix(in oklab, var(--color-fd-primary) 1%, transparent) 500px, transparent 1000px)",
+          }}
         >
-          /docs
-        </Link>{" "}
-        and see the interactive documentation.
-      </p>
-      <footer className="absolute bottom-2 ml-4 flex flex-col bg-brand-secondary text-brand-secondary-foreground rounded-2xl">
-        <p className="text-xs">
-          Provided by{" "}
-          <a
-            href="https://dathere.com"
-            target="_blank"
-            className="font-medium text-blue-400"
-            rel="noopener"
-          >
-            datHere
-          </a>
-          .{" "}
-          <a
-            href="https://dathere.com/privacy-policy/"
-            target="_blank"
-            className="font-medium text-blue-400"
-            rel="noopener"
-          >
-            Privacy Policy
-          </a>
-          .
-        </p>
-      </footer>
-    </main>
+          <div className="relative mb-4">
+            <Hero />
+            {/* <Why /> */}
+          </div>
+        </div>
+        <hr className="mt-12 mb-4" />
+        <footer className="flex flex-col bg-brand-secondary pb-12 text-brand-secondary-foreground rounded-2xl">
+          <p className="mb-1 text-xl font-semibold">ckanaction</p>
+          <p className="text-xs">
+            Provided by{" "}
+            <a
+              href="https://dathere.com"
+              target="_blank"
+              className="font-medium text-blue-400"
+              rel="noopener"
+            >
+              datHere
+            </a>
+            .{" "}
+            <a
+              href="https://dathere.com/privacy-policy/"
+              target="_blank"
+              className="font-medium text-blue-400"
+              rel="noopener"
+            >
+              Privacy Policy
+            </a>
+            .
+          </p>
+        </footer>
+      </main>
+    </>
+  );
+}
+
+function Hero() {
+  const { Card, Cards } = defaultMdxComponents;
+  return (
+    <div className="relative z-2 flex flex-col border-x border-t bg-fd-background/80 px-4 pt-12 max-md:text-center md:px-12 md:pt-16 [.uwu_&]:hidden overflow-hidden">
+      <div
+        className="absolute inset-0 z-[-1] blur-2xl hidden dark:block"
+        style={{
+          maskImage:
+            "linear-gradient(to bottom, transparent, white, transparent)",
+          background:
+            "repeating-linear-gradient(65deg, var(--color-blue-500), var(--color-blue-500) 12px, color-mix(in oklab, var(--color-blue-600) 30%, transparent) 20px, transparent 200px)",
+        }}
+      />
+      <div
+        className="absolute inset-0 z-[-1] blur-2xl dark:hidden"
+        style={{
+          maskImage:
+            "linear-gradient(to bottom, transparent, white, transparent)",
+          background:
+            "repeating-linear-gradient(65deg, var(--color-purple-300), var(--color-purple-300) 12px, color-mix(in oklab, var(--color-blue-600) 30%, transparent) 20px, transparent 200px)",
+        }}
+      />
+      <h1 className="mb-8 text-4xl font-medium md:hidden">ckan-devstaller</h1>
+      <h1 className="mb-8 max-w-[800px] text-4xl font-medium max-md:hidden">
+        <span className="text-5xl">
+          ckanaction <GiftIcon className="inline-block w-10 h-10 pb-1" />
+        </span>
+        <br />
+        Rust crate & web GUI based on the CKAN API.
+      </h1>
+      <p className="mb-2 text-fd-muted-foreground md:max-w-[80%] md:text-xl">
+        ckanaction is a Rust library crate for interacting with the CKAN Actions
+        API, and this web app provides an interactive web GUI based on the
+        OpenAPI specification.
+      </p>
+      <p className="mb-8 text-fd-muted-foreground md:max-w-[80%] md:text-sm">
+        Provided by{" "}
+        <Link className="text-fd-info" href="https://dathere.com">
+          datHere
+        </Link>
+        .
+      </p>
+      <div className="inline-flex items-center gap-3 max-md:mx-auto mb-8">
+        <Link href="/docs">
+          <RainbowButton className="rounded-full">Get Started</RainbowButton>
+        </Link>
+        <Link
+          href="https://github.com/dathere/ckanaction"
+          className={cn(
+            buttonVariants({
+              variant: "outline",
+              size: "lg",
+              className: "rounded-full",
+            }),
+          )}
+        >
+          Source Code
+        </Link>
+      </div>
+      {/* <Cards>
+        <Card icon={<ZapIcon />} href="/docs/builder" title="Quick start">
+          Get started with ckan-devstaller and install CKAN within minutes
+        </Card>
+        <Card icon={<BlocksIcon />} href="/docs/builder" title="Builder">
+          Customize your installation with an interactive web GUI
+        </Card>
+        <Card
+          icon={<HomeIcon />}
+          href="/docs/reference/installation-architecture"
+          title="Installation architecture"
+        >
+          Learn about where files are installed after running ckan-devstaller
+        </Card>
+        <Card
+          icon={<GitMergeIcon />}
+          href="https://github.com/dathere/ckan-devstaller"
+          title="Source code"
+        >
+          View the source code of ckan-devstaller on GitHub
+        </Card>
+      </Cards> */}
+      <PreviewImages />
+    </div>
+  );
+}
+
+const previewButtonVariants = cva(
+  "w-48 h-8 text-sm font-medium transition-colors rounded-full",
+  {
+    variants: {
+      active: {
+        true: "text-fd-primary-foreground",
+        false: "text-fd-muted-foreground",
+      },
+    },
+  },
+);
+
+function PreviewImages() {
+  const [active, setActive] = useState(0);
+  const previews = [
+    {
+      image: CkanactionRustDemo,
+      name: "Rust library crate",
+    },
+    {
+      image: CkanactionDemo1,
+      name: "Interactive web GUI",
+    },
+  ];
+
+  return (
+    <div className="hidden md:block 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"
+          className="absolute bg-fd-primary rounded-full w-48 h-9 transition-transform z-[-1]"
+          style={{
+            transform: `translateX(calc(var(--spacing) * 48 * ${active}))`,
+          }}
+        />
+        <div className="space-x-2">
+          {previews.map((item, i) => (
+            <Button
+              key={i}
+              className={`${cn(previewButtonVariants({ active: active === i }))} h-full`}
+              onClick={() => setActive(i)}
+            >
+              {item.name}
+            </Button>
+          ))}
+        </div>
+      </div>
+      {previews.map((item, i) => (
+        <Image
+          key={i}
+          src={item.image}
+          alt="preview"
+          priority
+          className={cn(
+            "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",
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+function Why() {
+  return (
+    <div className="relative overflow-hidden border-x border-t p-2">
+      <WhyInteractive
+        codeblockInstall={
+          <CodeBlock lang="bash">
+            <Pre className="text-wrap pl-4">./ckan-devstaller</Pre>
+          </CodeBlock>
+        }
+        codeblockUninstall={
+          <CodeBlock lang="bash">
+            <Pre className="text-wrap pl-4">./ckan-devstaller uninstall</Pre>
+          </CodeBlock>
+        }
+      />
+    </div>
+  );
+}
+
+function WhyInteractive(props: {
+  codeblockInstall: ReactNode;
+  codeblockUninstall: ReactNode;
+}) {
+  const [active, setActive] = useState(0);
+  const items = [
+    [
+      <ZapIcon className="w-4 h-4 inline-block" key={0} />,
+      "Install CKAN within minutes",
+    ],
+    [
+      <BlocksIcon className="w-4 h-4 inline-block" key={1} />,
+      "Customize your installation",
+    ],
+    [
+      <TerminalIcon className="w-4 h-4 inline-block" key={2} />,
+      "Designed for developers",
+    ],
+    [
+      <Trash2Icon className="w-4 h-4 inline-block" key={3} />,
+      "Uninstall with ease",
+    ],
+  ];
+
+  return (
+    <div
+      id="why-interactive"
+      className="flex flex-col-reverse gap-3 md:flex-row md:min-h-[200px]"
+    >
+      <div className="flex flex-col">
+        {items.map((item, i) => (
+          <button
+            key={item[1] as string}
+            ref={(element) => {
+              if (!element || i !== active) return;
+            }}
+            type="button"
+            className={cn(
+              "transition-colors text-nowrap border border-transparent rounded-lg px-3 py-2.5 text-start text-sm text-fd-muted-foreground font-medium",
+              i === active
+                ? "text-fd-primary bg-fd-primary/10 border-fd-primary/10"
+                : "hover:text-fd-accent-foreground/80 cursor-pointer",
+            )}
+            onClick={() => {
+              setActive(i);
+            }}
+          >
+            {item[0]} {item[1]}
+          </button>
+        ))}
+      </div>
+      <style>
+        {`
+        @keyframes why-interactive-x {
+          from {
+            width: 0px;
+          }
+          
+          to {
+            width: 100%;
+          }
+        }`}
+      </style>
+
+      <div className="flex-1 p-4 border border-fd-primary/10 bg-fd-card/40 rounded-lg shadow-lg">
+        {active === 0 ? (
+          <WhyPanel>
+            <h3>
+              <ZapIcon className="w-4 h-4 inline-block mr-1 mb-1" />
+              Install CKAN within minutes.
+            </h3>
+            <p>
+              One of the primary goals of ckan-devstaller is to ease
+              installation of CKAN for development. Built with Rust for speed
+              and streamlining installation with{" "}
+              <a href="https://github.com/tino097/ckan-compose/tree/ckan-devstaller">
+                ckan-compose
+              </a>
+              , ckan-devstaller improves installation speeds{" "}
+              <strong>from hours/days to just minutes</strong> depending on your
+              download speed.
+            </p>
+            <div className="flex gap-2">
+              <Link
+                href="/docs/builder"
+                className={cn(
+                  buttonVariants({ size: "lg", className: "rounded-full" }),
+                )}
+              >
+                <Button>Get Started</Button>
+              </Link>
+            </div>
+          </WhyPanel>
+        ) : null}
+        {active === 1 ? (
+          <WhyPanel>
+            <h3>
+              <BlocksIcon className="w-4 h-4 inline-block mr-1 mb-1" />
+              Customize your installation with the Builder.
+            </h3>
+            <p>
+              Try out the interactive web GUI for customizing your CKAN
+              installation. You can select:
+            </p>
+            <ul>
+              <li>Presets</li>
+              <li>CKAN version</li>
+              <li>Extensions</li>
+              <li>Features</li>
+            </ul>
+            <p>
+              Then you can copy the provided ckan-devstaller command to run your
+              selected configuration.
+            </p>
+            <div className="mt-4 flex flex-row items-center gap-1.5 not-prose">
+              <Link href="/docs/builder" className={cn(buttonVariants())}>
+                Try out the Builder
+              </Link>
+            </div>
+          </WhyPanel>
+        ) : null}
+        {active === 2 ? (
+          <WhyPanel>
+            <h3>
+              <TerminalIcon className="w-4 h-4 inline-block mr-1 mb-1" />
+              Designed for developers.
+            </h3>
+            <p>
+              We've kept development use cases in mind while developing
+              ckan-devstaller, such as:
+            </p>
+            <ul>
+              <li>Trying out a new version of CKAN</li>
+              <li>Developing CKAN extensions and themes</li>
+            </ul>
+            <div className="flex gap-2">
+              <Link
+                href="/docs/reference/installation-architecture"
+                className={cn(buttonVariants(), "not-prose")}
+              >
+                View the installation architecture
+              </Link>
+              <Link
+                href="https://github.com/dathere/ckan-devstaller"
+                className={cn(buttonVariants({ variant: "ghost" }))}
+              >
+                Source code
+              </Link>
+            </div>
+          </WhyPanel>
+        ) : null}
+        {active === 3 ? (
+          <WhyPanel>
+            <h3>
+              <Trash2Icon className="w-4 h-4 inline-block mr-1 mb-1" />
+              Uninstall CKAN with ease.
+            </h3>
+            <p>
+              After you've installed CKAN with ckan-devstaller, you can
+              uninstall CKAN with ease. This allows for quickly re-installing
+              CKAN for a different use case.
+            </p>
+            {props.codeblockUninstall}
+            <Link
+              href="/docs/tutorials/uninstall-ckan"
+              className={cn(buttonVariants(), "not-prose")}
+            >
+              Learn more about uninstalling
+            </Link>
+          </WhyPanel>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function WhyPanel(props: HTMLProps<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "duration-700 animate-in fade-in text-sm prose",
+        props.className,
+      )}
+    >
+      {props.children}
+    </div>
   );
 }

docs/app/global.css

@@ -1,5 +1,154 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @import 'fumadocs-ui/css/neutral.css';
-@import 'fumadocs-ui/css/preset.css';
-@import 'fumadocs-openapi/css/preset.css';
+@import "fumadocs-ui/css/ocean.css";
+@import "fumadocs-ui/css/preset.css";
+@import "tw-animate-css";
 
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
+  --color-color-5: var(--color-5);
+  --color-color-4: var(--color-4);
+  --color-color-3: var(--color-3);
+  --color-color-2: var(--color-2);
+  --color-color-1: var(--color-1);
+  @keyframes rainbow {
+  0% {
+    background-position: 0%;
+    }
+  100% {
+    background-position: 200%;
+    }
+  }
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --color-1: oklch(66.2% 0.225 25.9);
+  --color-2: oklch(60.4% 0.26 302);
+  --color-3: oklch(69.6% 0.165 251);
+  --color-4: oklch(80.2% 0.134 225);
+  --color-5: oklch(90.7% 0.231 133);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+  --color-1: oklch(66.2% 0.225 25.9);
+  --color-2: oklch(60.4% 0.26 302);
+  --color-3: oklch(69.6% 0.165 251);
+  --color-4: oklch(80.2% 0.134 225);
+  --color-5: oklch(90.7% 0.231 133);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background dark:bg-[#101022] text-foreground;
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}