feat: Improve not found layout and add initial Readme

README.md

@@ -1,3 +1,30 @@
-# OrcaCD Documentation
+# <div align="center"><img src="https://raw.githubusercontent.com/OrcaCD/orca-cd/f6fb48965df90a57a2b181e9e2b359653ae5c6b9/frontend/public/assets/logo-dark-256.png" width="100"/> <br>OrcaCD Documentation</div>
 
-Work in progress...
+</div>
+
+OrcaCD is a simple GitOps tool for Docker.
+
+This website is built with [Fumadocs](https://www.fumadocs.dev/) and [Tanstack Start](https://tanstack.com/start/latest).
+
+> [!WARNING]
+> OrcaCD is in early development and not yet production-ready. There are no stable releases. Expect breaking changes at any time.
+
+## Contributing
+
+### Setup
+
+1. Install the dependencies:
+
+```bash
+npm install
+```
+
+2. Start the development server:
+
+```bash
+npm run dev
+```
+
+### Structure
+
+The markdown files for the documentation are located in the `content/docs` folder.

src/components/github-release.tsx

@@ -0,0 +1,20 @@
+import useSWR from "swr";
+
+export function GitHubRelease() {
+	const { data, isLoading } = useSWR(
+		"https://api.github.com/repos/OrcaCD/orca-cd/releases/latest",
+		// oxlint-disable-next-line promise/prefer-await-to-then
+		(...args) => fetch(...args).then((res) => res.json()),
+	);
+
+	return (
+		<a
+			href="https://github.com/OrcaCD/orca-cd/releases"
+			target="_blank"
+			rel="noopener noreferrer"
+			className="inline-flex items-center rounded-md border border-fd-border bg-fd-card px-1 py-0.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent"
+		>
+			{isLoading ? "..." : (data.tag_name ?? "No release yet")}
+		</a>
+	);
+}

src/components/not-found.tsx

@@ -1,28 +1,11 @@
-import { Link } from "@tanstack/react-router";
+import { baseOptions, navbarLinks } from "@/lib/layout.shared";
+import { DefaultNotFound } from "fumadocs-ui/layouts/home/not-found";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 
 export function NotFound() {
 	return (
-		<HomeLayout
-			nav={{
-				title: "Tanstack Start",
-			}}
-			className="text-center py-32 justify-center"
-		>
-			<div className="flex flex-col items-center gap-4">
-				<h1 className="text-6xl font-bold text-fd-muted-foreground">404</h1>
-				<h2 className="text-2xl font-semibold">Page Not Found</h2>
-				<p className="text-fd-muted-foreground max-w-md">
-					The page you are looking for might have been removed, had its name changed, or is
-					temporarily unavailable.
-				</p>
-				<Link
-					to="/"
-					className="mt-4 px-4 py-2 rounded-lg bg-fd-primary text-fd-primary-foreground font-medium text-sm hover:opacity-90 transition-opacity"
-				>
-					Back to Home
-				</Link>
-			</div>
+		<HomeLayout {...baseOptions()} links={navbarLinks}>
+			<DefaultNotFound />
 		</HomeLayout>
 	);
 }

src/lib/layout.shared.tsx

@@ -1,4 +1,14 @@
-import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import { Rocket, Book, Settings } from "lucide-react";
+import {
+	NavbarMenu,
+	NavbarMenuContent,
+	NavbarMenuLink,
+	NavbarMenuTrigger,
+} from "fumadocs-ui/layouts/home/navbar";
+import { GithubInfo } from "fumadocs-ui/components/github-info";
+
+import type { BaseLayoutProps, LinkItemType } from "fumadocs-ui/layouts/shared";
+import { GitHubRelease } from "@/components/github-release";
 
 export function baseOptions(): BaseLayoutProps {
 	return {
@@ -13,3 +23,69 @@ export function baseOptions(): BaseLayoutProps {
 		},
 	};
 }
+
+export const navbarLinks: LinkItemType[] = [
+	{
+		type: "menu",
+		on: "menu",
+		text: "Documentation",
+		items: [
+			{
+				text: "Introduction",
+				url: "/docs",
+				icon: <Book />,
+			},
+			{
+				text: "Installation",
+				url: "/docs/setup/installation",
+				icon: <Rocket />,
+			},
+			{
+				text: "Environment Variables",
+				url: "/docs/configuration/env-variables",
+				icon: <Settings />,
+			},
+		],
+	},
+	{
+		type: "custom",
+		on: "nav",
+		children: (
+			<NavbarMenu>
+				<NavbarMenuTrigger>Docs</NavbarMenuTrigger>
+				<NavbarMenuContent>
+					<NavbarMenuLink href="/docs">
+						<Book className="bg-fd-primary text-fd-primary-foreground p-1 mb-2 rounded-md" />
+						<p className="font-medium">Introduction</p>
+						<p className="text-fd-muted-foreground text-sm">Welcome to OrcaCD</p>
+					</NavbarMenuLink>
+					<NavbarMenuLink href="/docs/setup/installation">
+						<Rocket className="bg-fd-primary text-fd-primary-foreground p-1 mb-2 rounded-md" />
+						<p className="font-medium">Installation</p>
+						<p className="text-fd-muted-foreground text-sm">
+							Get OrcaCD running quickly with Docker installation.
+						</p>
+					</NavbarMenuLink>
+					<NavbarMenuLink href="/docs/configuration/env-variables">
+						<Settings className="bg-fd-primary text-fd-primary-foreground p-1 mb-2 rounded-md" />
+						<p className="font-medium">Environment Variables</p>
+						<p className="text-fd-muted-foreground text-sm">
+							Complete reference for all OrcaCD configuration options.
+						</p>
+					</NavbarMenuLink>
+				</NavbarMenuContent>
+			</NavbarMenu>
+		),
+	},
+	{
+		type: "custom",
+		on: "nav",
+		secondary: true,
+		children: <GitHubRelease />,
+	},
+	{
+		type: "custom",
+		secondary: true,
+		children: <GithubInfo owner="OrcaCD" repo="orca-cd" className="flex-row" />,
+	},
+];

src/routes/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
-import { baseOptions } from "@/lib/layout.shared";
+import { baseOptions, navbarLinks } from "@/lib/layout.shared";
 import {
 	GitBranch,
 	Container,
@@ -11,17 +11,7 @@ import {
 	BookOpen,
 	Users,
 	Heart,
-	Book,
-	Settings,
 } from "lucide-react";
-import {
-	NavbarMenu,
-	NavbarMenuContent,
-	NavbarMenuLink,
-	NavbarMenuTrigger,
-} from "fumadocs-ui/layouts/home/navbar";
-import { GithubInfo } from "fumadocs-ui/components/github-info";
-import useSWR from "swr";
 
 export const Route = createFileRoute("/")({
 	component: Home,
@@ -70,89 +60,8 @@ function SmallFeature({
 }
 
 function Home() {
-	const { data, isLoading } = useSWR(
-		"https://api.github.com/repos/OrcaCD/orca-cd/releases/latest",
-		// oxlint-disable-next-line promise/prefer-await-to-then
-		(...args) => fetch(...args).then((res) => res.json()),
-	);
-
 	return (
-		<HomeLayout
-			{...baseOptions()}
-			links={[
-				{
-					type: "menu",
-					on: "menu",
-					text: "Documentation",
-					items: [
-						{
-							text: "Introduction",
-							url: "/docs",
-							icon: <Book />,
-						},
-						{
-							text: "Installation",
-							url: "/docs/setup/installation",
-							icon: <Rocket />,
-						},
-						{
-							text: "Environment Variables",
-							url: "/docs/configuration/env-variables",
-							icon: <Settings />,
-						},
-					],
-				},
-				{
-					type: "custom",
-					on: "nav",
-					children: (
-						<NavbarMenu>
-							<NavbarMenuTrigger>Docs</NavbarMenuTrigger>
-							<NavbarMenuContent>
-								<NavbarMenuLink href="/docs">
-									<Book className="bg-fd-primary text-fd-primary-foreground p-1 mb-2 rounded-md" />
-									<p className="font-medium">Introduction</p>
-									<p className="text-fd-muted-foreground text-sm">Welcome to OrcaCD</p>
-								</NavbarMenuLink>
-								<NavbarMenuLink href="/docs/setup/installation">
-									<Rocket className="bg-fd-primary text-fd-primary-foreground p-1 mb-2 rounded-md" />
-									<p className="font-medium">Installation</p>
-									<p className="text-fd-muted-foreground text-sm">
-										Get OrcaCD running quickly with Docker installation.
-									</p>
-								</NavbarMenuLink>
-								<NavbarMenuLink href="/docs/configuration/env-variables">
-									<Settings className="bg-fd-primary text-fd-primary-foreground p-1 mb-2 rounded-md" />
-									<p className="font-medium">Environment Variables</p>
-									<p className="text-fd-muted-foreground text-sm">
-										Complete reference for all OrcaCD configuration options.
-									</p>
-								</NavbarMenuLink>
-							</NavbarMenuContent>
-						</NavbarMenu>
-					),
-				},
-				{
-					type: "custom",
-					secondary: true,
-					children: (
-						<a
-							href="https://github.com/OrcaCD/orca-cd/releases"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="inline-flex items-center rounded-md border border-fd-border bg-fd-card px-1 py-0.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent"
-						>
-							{isLoading ? "..." : (data.tag_name ?? "No release yet")}
-						</a>
-					),
-				},
-				{
-					type: "custom",
-					secondary: true,
-					children: <GithubInfo owner="OrcaCD" repo="orca-cd" className="flex-row" />,
-				},
-			]}
-		>
+		<HomeLayout {...baseOptions()} links={navbarLinks}>
 			<section className="relative overflow-hidden border-b border-fd-border">
 				<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,var(--color-fd-primary)/0.08,transparent_60%)]" />
 				<div className="relative mx-auto max-w-5xl px-6 py-24 text-center md:py-36">