diff --git a/.github/workflows/build-documentation.yml b/.github/workflows/build-documentation.yml index 19d6ab5..2872860 100644 --- a/.github/workflows/build-documentation.yml +++ b/.github/workflows/build-documentation.yml @@ -31,3 +31,25 @@ jobs: - name: Generate docs working-directory: docs run: pnpm run generate:docs + + + deploy: + name: πŸš€ Deploy Release + needs: [build-docs] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: forge-42/fly-deploy@v1.0.0-rc.2 + id: deploy + env: + FLY_ORG: ${{ vars.FLY_ORG }} + FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} + FLY_REGION: ${{ vars.FLY_REGION }} + with: + app_name: ${{github.event.repository.name}}-${{ github.ref_name }} + env_vars: | + APP_ENV=production + GITHUB_OWNER=${{ github.repository_owner }} + GITHUB_REPO=${{ github.event.repository.name }} + GITHUB_REPO_URL=https://github.com/${{ github.repository }} diff --git a/README.md b/README.md index c51859b..a2e38fa 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,9 @@ This template is designed to support a flexible content structure using `.md` an The project is built using the [@forge-42/base-stack](https://github.com/forge-42/base-stack) and leverages the [content-collections](https://github.com/sdorra/content-collections). +> **Note**: +> We added a few `FIXME` comments in the codebase as notes to you. These simply mark small places where we expect you to make changes. Nothing major β€” it should only take you 2 minutes to go through them. + ## Documentation Template Structure Overview diff --git a/app/components/code-block/code-block-elements.tsx b/app/components/code-block/code-block-elements.tsx index 3546db0..7006da8 100644 --- a/app/components/code-block/code-block-elements.tsx +++ b/app/components/code-block/code-block-elements.tsx @@ -57,7 +57,7 @@ export const PreElement = ({ lines, className = "", ...props }: PreElementProps) 
diff --git a/app/components/code-block/code-block-syntax-highlighter.ts b/app/components/code-block/code-block-syntax-highlighter.ts
index d452b8d..9c12f56 100644
--- a/app/components/code-block/code-block-syntax-highlighter.ts
+++ b/app/components/code-block/code-block-syntax-highlighter.ts
@@ -13,6 +13,8 @@ const MASTER_REGEX = new RegExp(
 		"//.*?(?=\\n|$)",
 		// multi-line comment
 		"/\\*[\\s\\S]*?\\*/",
+		// hash comment at start of line
+		"^\\s*#.*$",
 		// strings
 		"(['\"])(?:(?!\\1)[^\\\\]|\\\\.)*\\1",
 		// numbers
@@ -101,7 +103,7 @@ const isKeyword = (value: string) => KEYWORDS.includes(value)
 const isOperator = (value: string) => OPERATORS.includes(value)
 const isFunction = (value: string) => /^[A-Z]/.test(value)
 const isWhitespace = (value: string) => /^\s/.test(value)
-const isComment = (value: string) => value.startsWith("//") || value.startsWith("/*")
+const isComment = (v: string) => v.startsWith("//") || v.startsWith("/*") || /^\s*#/.test(v)
 const isString = (value: string) => /^['"`]/.test(value)
 const isNumber = (value: string) => /^\d/.test(value)
 const isIdentifier = (value: string) => /^[a-zA-Z_$]/.test(value)
diff --git a/app/components/code-block/code-block.tsx b/app/components/code-block/code-block.tsx
index 85870ef..1ecc8c8 100644
--- a/app/components/code-block/code-block.tsx
+++ b/app/components/code-block/code-block.tsx
@@ -12,7 +12,7 @@ export const CodeBlock = ({ children, className = "", ...props }: CodeBlockProps
 	const lines = processLines(code)
 
 	return (
-		

+		

 			
 			
 		

diff --git a/app/components/logo.tsx b/app/components/logo.tsx
index 78cf6c2..86d1eed 100644
--- a/app/components/logo.tsx
+++ b/app/components/logo.tsx
@@ -1,8 +1,14 @@
 import type { ReactNode } from "react"
+import { href, useNavigate } from "react-router"
 
 export const Logo = ({ children }: { children: ReactNode }) => {
+	const navigate = useNavigate()
 	return (
-		

+		// biome-ignore lint/a11y/useKeyWithClickEvents: we don't need keyboard access for this
+		
 navigate(href("/:version?/home"))}
+			className="relative block font-semibold font-space text-[var(--color-text-active)] text-lg md:text-2xl xl:text-3xl"
+		>
 			{children}
 		

 	)
diff --git a/app/components/page-mdx-article.tsx b/app/components/page-mdx-article.tsx
index 7419032..0639b00 100644
--- a/app/components/page-mdx-article.tsx
+++ b/app/components/page-mdx-article.tsx
@@ -4,7 +4,7 @@ import { MDXWrapper } from "./mdx-wrapper"
 
 export default function PageMdxArticle({ page }: { page: Page }) {
 	return (
-		

+		

 			

 				
 					{page.title}
diff --git a/app/components/table-of-content.tsx b/app/components/table-of-content.tsx
index b95efc8..22b0ea2 100644
--- a/app/components/table-of-content.tsx
+++ b/app/components/table-of-content.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react"
+import { useCallback, useEffect, useRef } from "react"
 import { Link, useLocation, useNavigate } from "react-router"
 import { useActiveHeadingId } from "~/hooks/use-active-heading-id"
 import type { HeadingItem } from "~/utils/extract-heading-tree-from-mdx"
@@ -48,10 +48,11 @@ const TocItem = ({ item, depth = 0, activeId, onItemClick }: TocItemProps) => {
 		<div>
 			<Link
 				to={`#${item.slug}`}
-				style={{ paddingLeft }}
 				className={className}
 				onClick={handleClick}
 				aria-current={isActive && "location"}
+				data-toc-slug={item.slug}
+				style={{ paddingLeft, scrollMarginTop: 8 }}
 			>
 				{item.title}
 			</Link>
@@ -66,12 +67,6 @@ const TocItem = ({ item, depth = 0, activeId, onItemClick }: TocItemProps) => {
 	)
 }
 
-const TableOfContentsHeader = () => (
-	<h2 className="mb-4 border-[var(--color-border)] border-b pb-2 font-semibold text-[var(--color-text-active)] text-base">
-		On this page
-	</h2>
-)
-
 const Navigation = ({
 	items,
 	activeId,
@@ -80,14 +75,49 @@ const Navigation = ({
 	items: HeadingItem[]
 	activeId: string | null
 	onItemClick: (slug: string) => Promise<void>
-}) => (
-	<nav aria-label="Table of contents" className="-mr-4 max-h-[calc(100vh-var(--header-height))] overflow-y-auto pr-4">
-		<div className="space-y-1 pb-2">
-			{items.map((item) => (
-				<TocItem key={item.slug} item={item} activeId={activeId} onItemClick={onItemClick} />
-			))}
-		</div>
-	</nav>
+}) => {
+	const navRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		if (!activeId) return
+		const nav = navRef.current
+		if (!nav) return
+
+		const el = nav.querySelector<HTMLElement>(`[data-toc-slug="${CSS.escape(activeId)}"]`)
+		if (!el) return
+
+		const padding = 24
+		const elTop = el.offsetTop
+		const elBottom = elTop + el.offsetHeight
+		const viewTop = nav.scrollTop
+		const viewBottom = viewTop + nav.clientHeight
+
+		if (elTop < viewTop + padding) {
+			nav.scrollTo({ top: Math.max(elTop - padding, 0), behavior: "smooth" })
+		} else if (elBottom > viewBottom - padding) {
+			nav.scrollTo({ top: elBottom - nav.clientHeight + padding, behavior: "smooth" })
+		}
+	}, [activeId])
+
+	return (
+		<nav
+			ref={navRef}
+			aria-label="Table of contents"
+			className="-mr-4 max-h[calc(100vh-var(--header-height))] overflow-y-auto pr-4"
+		>
+			<div className="space-y-1 pb-2">
+				{items.map((item) => (
+					<TocItem key={item.slug} item={item} activeId={activeId} onItemClick={onItemClick} />
+				))}
+			</div>
+		</nav>
+	)
+}
+
+const TableOfContentsHeader = () => (
+	<h2 className="mb-4 border-[var(--color-border)] border-b pb-2 font-semibold text-[var(--color-text-active)] text-base">
+		On this page
+	</h2>
 )
 
 export const TableOfContents = ({ items }: TableOfContentsProps) => {
diff --git a/app/routes/documentation-homepage.tsx b/app/routes/documentation-homepage.tsx
index 9ab2888..c4d6872 100644
--- a/app/routes/documentation-homepage.tsx
+++ b/app/routes/documentation-homepage.tsx
@@ -13,7 +13,8 @@ export const meta = ({ data }: Route.MetaArgs) => {
 	return generateMetaFields({
 		domain,
 		path: `/${version}/home`,
-		title: `${title} Β· Package Name`,
+		// FIXME Change "Docs Template" to your package name
+		title: `${title} Β· Docs Template`,
 		description,
 	})
 }
diff --git a/app/routes/documentation-layout.tsx b/app/routes/documentation-layout.tsx
index 2a391fd..390aa1e 100644
--- a/app/routes/documentation-layout.tsx
+++ b/app/routes/documentation-layout.tsx
@@ -24,8 +24,8 @@ export default function DocumentationLayout({ loaderData }: Route.ComponentProps
 			<Header>
 				<div className="flex items-start gap-3">
 					<Logo>
-						{/* Replace with your Logo */}
-						<span className="p-0">REACT ROUTER DEVTOOLS</span>
+						{/* FIXME Replace with your Logo */}
+						<span className="p-0">DOCS-TEMPLATE</span>
 					</Logo>
 				</div>
 				<div className="inline-flex items-center gap-2 xl:gap-3">
@@ -42,7 +42,7 @@ export default function DocumentationLayout({ loaderData }: Route.ComponentProps
 					<Outlet />
 				</main>
 			</div>
-			{/* You can add custom footer component here */}
+			{/* FIXME You can add custom footer component here */}
 		</div>
 	)
 }
diff --git a/app/routes/documentation-page.tsx b/app/routes/documentation-page.tsx
index 4339773..d94915c 100644
--- a/app/routes/documentation-page.tsx
+++ b/app/routes/documentation-page.tsx
@@ -20,8 +20,8 @@ export const meta = ({ data }: Route.MetaArgs) => {
 	return generateMetaFields({
 		domain,
 		path: fullPath,
-		// change "Package Name" to your package name
-		title: `${page.title} Β· Package Name`,
+		// FIXME change "Docs Template" to your package name
+		title: `${page.title} Β· Docs Template`,
 		description: page.description,
 	})
 }
@@ -48,7 +48,7 @@ export default function DocumentationPage({ loaderData }: Route.ComponentProps)
 	const toc = extractHeadingTreeFromMarkdown(page.rawMdx)
 
 	return (
-		<div className="flex min-h-screen flex-row">
+		<div className="flex min-h-screen flex-row ">
 			<div className="mx-auto flex w-full max-w-screen-4xl flex-col gap-4 pt-4 lg:gap-8 xl:pt-0">
 				<PageMdxArticle page={page} />
 				<PageNavigation previous={previous} next={next} />
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 0b89f42..9485ffa 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -9,14 +9,12 @@ import type { Route } from "./+types"
 
 export const meta = ({ data }: Route.MetaArgs) => {
 	const { domain } = data
-
 	return generateMetaFields({
 		domain,
 		path: "/",
-		// change "Package Name" to your package name
-		title: "Package Name",
-		// update description
-		description: "Professional Development Made Simple",
+		title: "Docs Template",
+		description:
+			"Modern, versioned documentation with instant search, first-class SEO, and LLM-friendly endpoints out of the box.",
 	})
 }
 
@@ -24,64 +22,138 @@ export async function loader({ request }: Route.LoaderArgs) {
 	const { domain } = getDomain(request)
 	return { domain }
 }
+
+type CardDef = {
+	icon: React.ComponentProps<typeof Icon>["name"]
+	title: string
+	body: string
+	href?: string
+}
+
+const CARDS: CardDef[] = [
+	{
+		icon: "FileText",
+		title: "Content Collections",
+		body: "Write docs in Markdown or MDX. Navigation, versioning, and structure are generated automatically.",
+	},
+	{
+		icon: "Search",
+		title: "Instant Search",
+		body: "Fast full-text search with keyboard shortcuts and fuzzy matching for quick discovery.",
+	},
+	{
+		icon: "Palette",
+		title: "Themeable",
+		body: "Light and dark themes included. Customize colors and styles with a few CSS variables.",
+	},
+	{
+		icon: "Code",
+		title: "Code Blocks",
+		body: "Readable code examples with syntax highlighting, copy button, and diff support.",
+	},
+	{
+		icon: "Bot",
+		title: "LLM-Ready (llms.txt)",
+		body: "Serve a clear llms.txt so AI tools know where to find the right docs and what to ignore.",
+		href: "/llms.txt",
+	},
+	{
+		icon: "ShieldCheck",
+		title: "SEO Essentials",
+		body: "Automatic per-page meta tags, OpenGraph/Twitter cards, robots.txt, and XML sitemaps.",
+		href: "/sitemap-index.xml",
+	},
+]
+
+function Card({ icon, title, body, href }: CardDef) {
+	return (
+		<a
+			href={href}
+			className="group block rounded-2xl border border-[var(--color-border)] bg-[var(--color-background)] p-6 transition-all hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#2c8794]"
+		>
+			<div className="mb-4 inline-flex size-12 items-center justify-center rounded-xl bg-gradient-to-r from-[#2c8794] to-[#329baa]">
+				<Icon name={icon} className="size-6 text-white" />
+			</div>
+			<h3 className="mb-2 font-semibold text-[var(--color-text-active)] text-lg">{title}</h3>
+			<p className="text-[var(--color-text-muted)] text-sm leading-relaxed">{body}</p>
+			{href ? (
+				<span className="mt-3 inline-flex items-center gap-1 font-medium text-[var(--color-text-active)] text-sm">
+					Learn more <Icon name="ChevronRight" className="size-4" />
+				</span>
+			) : null}
+		</a>
+	)
+}
+
+//  FIXME Customize this page
 export default function Index() {
 	const navigate = useNavigate()
-	// Customize index page
+
 	return (
 		<div className="flex min-h-screen flex-col bg-[var(--color-background)] 2xl:container 2xl:mx-auto">
 			<Header>
 				<Logo>
-					<span className="p-0">REACT ROUTER DEVTOOLS</span>
+					<span className="p-0">DOCS TEMPLATE</span>
 				</Logo>
 			</Header>
+
 			<main className="flex flex-1 items-center justify-center">
-				<div className="mx-auto flex max-w-6xl flex-col items-center gap-8 px-6 text-center">
+				<div className="mx-auto flex w-full max-w-6xl flex-col items-center gap-8 px-6 text-center">
 					<div className="inline-flex items-center gap-2 rounded-full border border-[var(--color-info-border)] bg-[var(--color-info-bg)] px-3 py-1 text-[var(--color-info-text)] text-sm">
 						<Icon name="Zap" className="size-4" />
-						Version {getLatestVersion()} Now Available
+						Version {getLatestVersion()} now available
 					</div>
 
-					<h1 className="font-bold text-[var(--color-text-active)] text-xl leading-snug md:text-2xl xl:text-3xl">
-						Professional Development
-						<br />
+					<h1 className="font-bold text-2xl text-[var(--color-text-active)] leading-snug md:text-3xl xl:text-4xl">
+						Modern Documentation{" "}
 						<span className="bg-gradient-to-r from-[#48ddf3] to-[#fb4bb5] bg-clip-text text-transparent">
 							Made Simple
 						</span>
 					</h1>
 
-					<div className="mb-6 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-						<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-background)] p-6 transition-colors hover:shadow-lg">
-							<h3 className="mb-2 font-semibold text-[var(--color-text-active)] text-lg">Smart Debugging</h3>
-						</div>
+					<p className="max-w-2xl text-[var(--color-text-muted)] text-lg leading-relaxed">
+						Build fast, accessible docs with React Router v7, Content Collections, and Tailwindβ€”plus first-class SEO and
+						LLM signals.
+					</p>
 
-						<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-background)] p-6 transition-colors hover:shadow-lg">
-							<h3 className="mb-2 font-semibold text-[var(--color-text-active)] text-lg">Lightning Fast</h3>
-						</div>
-
-						<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-background)] p-6 transition-colors hover:shadow-lg">
-							<h3 className="mb-2 font-semibold text-[var(--color-text-active)] text-lg">Comprehensive Docs</h3>
-						</div>
+					<div className="mb-2 grid w-full gap-6 sm:grid-cols-2 lg:grid-cols-3">
+						{CARDS.map((c) => (
+							<Card key={c.title} {...c} />
+						))}
 					</div>
 
-					<div className="flex items-center justify-center gap-4">
+					<div className="mt-6 flex items-center justify-center gap-4">
 						<button
 							type="button"
 							onClick={() => navigate(href("/:version?/home"))}
 							className="flex items-center gap-2 rounded-lg bg-[#2c8794] px-6 py-3 font-medium text-white transition-colors hover:bg-[#329baa]"
 						>
 							<Icon name="Rocket" className="size-5" />
-							Get Started
+							Get started
 						</button>
 
-						<button
-							type="button"
-							className="flex items-center gap-2 rounded-lg bg-[var(--color-background-active)] px-6 py-3 font-medium text-[var(--color-text-active)] transition-colors"
+						<a
+							href="https://github.com/forge42/docs-template"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="flex items-center gap-2 rounded-lg bg-[var(--color-background-active)] px-6 py-3 font-medium text-[var(--color-text-active)] transition-colors hover:bg-[var(--color-border)]"
 						>
 							<Icon name="Github" className="size-5" />
-							{/* TODO add github repo url */}
 							View on GitHub
-						</button>
+						</a>
 					</div>
+
+					<p className="mt-8 text-[var(--color-text-muted)] text-sm">
+						Built with ❀️ by the{" "}
+						<a
+							href="https://forge42.dev"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="underline hover:text-[var(--color-text)]"
+						>
+							Forge 42 team
+						</a>
+					</p>
 				</div>
 			</main>
 		</div>
diff --git a/app/tailwind.css b/app/tailwind.css
index 72c5bea..161e4b7 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -19,7 +19,7 @@
 		--color-background: #fafafa;
 		--color-border: #e5e7eb;
 		--color-text-normal: #2d3748;
-		--color-text-muted: #718096;
+		--color-text-muted: #647388;
 		--color-text-hover: #1a202c;
 		--color-text-active: #000000;
 		--color-background-active: #f3f4f6;
@@ -35,8 +35,8 @@
 		--color-code-copy-text: #1d1d1d;
 
 		--color-code-keyword: #0369a1;
-		--color-code-string: #059669;
-		--color-code-number: #ea580c;
+		--color-code-string: #04825b;
+		--color-code-number: #c84b0a;
 		--color-code-comment: #64748b;
 		--color-code-operator: #be185d;
 		--color-code-punctuation: #64748b;
@@ -80,7 +80,7 @@
 		--color-result-arrow: #d1d5db;
 
 		--color-breadcrumb-bg: #f3f4f6;
-		--color-breadcrumb-text: #6b7280;
+		--color-breadcrumb-text: #686f7d;
 
 		--color-footer-bg: #f9fafb;
 		--color-footer-border: #e5e7eb;
@@ -120,6 +120,9 @@
 
 		--color-highlight-bg: #fef3c7;
 		--color-highlight-text: #92400e;
+
+		--color-scrollbar-track: #f0f0f0;
+		--color-scrollbar-thumb: #718096;
 	}
 
 	[data-theme="dark"] {
@@ -144,7 +147,7 @@
 		--color-code-keyword: #60a5fa;
 		--color-code-string: #34d399;
 		--color-code-number: #fb923c;
-		--color-code-comment: #64748b;
+		--color-code-comment: #73839a;
 		--color-code-operator: #f472b6;
 		--color-code-punctuation: #cbd5e1;
 		--color-code-function: #a78bfa;
@@ -227,5 +230,26 @@
 
 		--color-highlight-bg: rgba(245, 158, 11, 0.5);
 		--color-highlight-text: #fbbf24;
+
+		--color-scrollbar-track: #0f0f0f;
+		--color-scrollbar-thumb: #e6edf3;
+	}
+
+	::-webkit-scrollbar {
+		height: 8px;
+		width: 8px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background-color: var(--color-scrollbar-thumb);
+		border-radius: 9999px;
+	}
+
+	::-webkit-scrollbar-track {
+		background-color: var(--color-scrollbar-track);
+	}
+
+	*::-webkit-scrollbar-thumb {
+		cursor: default;
 	}
 }
diff --git a/app/ui/icon/icons/icon.svg b/app/ui/icon/icons/icon.svg
index 15776ba..564b19d 100644
--- a/app/ui/icon/icons/icon.svg
+++ b/app/ui/icon/icons/icon.svg
@@ -7,20 +7,25 @@
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2" id="Trash2"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-icon lucide-sun" id="Sun"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-moon-icon lucide-sun-moon" id="SunMoon"><path d="M12 2v2"></path><path d="M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715"></path><path d="M16 12a4 4 0 0 0-4-4"></path><path d="m19 5-1.256 1.256"></path><path d="M20 12h2"></path></symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check-icon lucide-shield-check" id="ShieldCheck"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search" id="Search"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket-icon lucide-rocket" id="Rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pilcrow-icon lucide-pilcrow" id="Pilcrow"><path d="M13 4v16"></path><path d="M17 4v16"></path><path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13"></path></symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette-icon lucide-palette" id="Palette"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon lucide-moon" id="Moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu-icon lucide-menu" id="Menu"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info" id="Info"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hash-icon lucide-hash" id="Hash"><line x1="4" x2="20" y1="9" y2="9"></line><line x1="4" x2="20" y1="15" y2="15"></line><line x1="10" x2="8" y1="3" y2="21"></line><line x1="16" x2="14" y1="3" y2="21"></line></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github-icon lucide-github" id="Github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ghost" id="Ghost"><path d="M9 10h.01"></path><path d="M15 10h.01"></path><path d="M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z"></path></symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text-icon lucide-file-text" id="FileText"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-icon lucide-code" id="Code"><path d="m16 18 6-6-6-6"></path><path d="m8 6-6 6 6 6"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock-icon lucide-clock" id="Clock"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-copy-icon lucide-clipboard-copy" id="ClipboardCopy"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path><path d="M16 4h2a2 2 0 0 1 2 2v4"></path><path d="M21 14H11"></path><path d="m15 10-4 4 4 4"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-check-icon lucide-clipboard-check" id="ClipboardCheck"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="m9 14 2 2 4-4"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right" id="ChevronRight"><path d="m9 18 6-6-6-6"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down" id="ChevronDown"><path d="m6 9 6 6 6-6"></path></symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot-icon lucide-bot" id="Bot"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-icon lucide-arrow-right" id="ArrowRight"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-icon lucide-arrow-left" id="ArrowLeft"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></symbol>
 </defs>
diff --git a/app/ui/icon/icons/types.ts b/app/ui/icon/icons/types.ts
index 6b66d8d..d210123 100644
--- a/app/ui/icon/icons/types.ts
+++ b/app/ui/icon/icons/types.ts
@@ -7,20 +7,25 @@ export const iconNames = [
 	"Trash2",
 	"Sun",
 	"SunMoon",
+	"ShieldCheck",
 	"Search",
 	"Rocket",
 	"Pilcrow",
+	"Palette",
 	"Moon",
 	"Menu",
 	"Info",
 	"Hash",
 	"Github",
 	"Ghost",
+	"FileText",
+	"Code",
 	"Clock",
 	"ClipboardCopy",
 	"ClipboardCheck",
 	"ChevronRight",
 	"ChevronDown",
+	"Bot",
 	"ArrowRight",
 	"ArrowLeft",
 ] as const
diff --git a/app/ui/list-item.tsx b/app/ui/list-item.tsx
index bd4128a..4639cdc 100644
--- a/app/ui/list-item.tsx
+++ b/app/ui/list-item.tsx
@@ -6,7 +6,7 @@ export const ListItem = (props: ComponentPropsWithoutRef<"li">) => {
 		<li
 			{...props}
 			className={cn(
-				"space-y-1 pl-1 text-[var(--color-text-normal)] text-xs sm:text-sm md:text-base [&>li]:ml-2 [&>li]:marker:font-medium",
+				"space-y-1 pl-1 text-[var(--color-text-normal)] text-sm leading-6 sm:text-base md:text-lg xl:leading-8 [&>li]:ml-2 [&>li]:marker:font-medium",
 				props.className
 			)}
 		/>
diff --git a/app/ui/ordered-list.tsx b/app/ui/ordered-list.tsx
index d3ff4cb..5ab7b2d 100644
--- a/app/ui/ordered-list.tsx
+++ b/app/ui/ordered-list.tsx
@@ -17,7 +17,7 @@ export const OrderedList = (props: ComponentPropsWithoutRef<"ol">) => {
 		<ol
 			{...props}
 			className={cn(
-				"list-decimal space-y-1 pl-4 text-[var(--color-text-normal)] [&>li]:ml-2 [&>li]:marker:font-medium",
+				"list-decimal space-y-1 pl-4 text-[var(--color-text-normal)] [&>li]:ml-2 [&>li]:marker:font-medium ",
 				props.className
 			)}
 		/>
diff --git a/app/utils/extract-heading-tree-from-mdx.ts b/app/utils/extract-heading-tree-from-mdx.ts
index 6478311..4ca2735 100644
--- a/app/utils/extract-heading-tree-from-mdx.ts
+++ b/app/utils/extract-heading-tree-from-mdx.ts
@@ -7,55 +7,120 @@ export type HeadingItem = {
 	children: HeadingItem[]
 }
 
-const headingRegex = /^\s*(#{1,6})\s+(.+?)\s*$/
+const ATX_RE = /^\s*(#{1,6})\s+(.+?)\s*$/
+const FENCE_RE = /^\s*(`{3,}|~{3,})(.*)$/
+const SETEXT_UNDERLINE_RE = /^\s*(=+|-+)\s*$/
+const FRONTMATTER_DELIM_RE = /^\s*---\s*$/
 
 const cleanMarkdown = (text: string) =>
 	text
-		//remove inline code backticks
-		.replace(/`([^`]+)`/g, "$1")
-		//remove bold markers
-		.replace(/\*\*([^*]+)\*\*/g, "$1")
-		//remove italic markers
-		.replace(/\*([^*]+)\*/g, "$1")
-		//remove markdown links, keep the link text
-		.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
-		//remove curly-brace content
-		.replace(/\{[^}]*\}/g, "")
-		//remove HTML tags
-		.replace(/<\/?[^>]+(>|$)/g, "")
-		//tTrim trailing whitespace
+		.replace(/`([^`]+)`/g, "$1") // inline code
+		.replace(/\*\*([^*]+)\*\*/g, "$1") // bold
+		.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, "$1$2") // italics
+		.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // links -> text
+		.replace(/\{[^}]*\}/g, "") // MDX/remark directives
+		.replace(/<\/?[^>]+(>|$)/g, "") // HTML tags
 		.trim()
 
-export function extractHeadingTreeFromMarkdown(content: string) {
+function skipFrontmatter(lines: string[], start = 0) {
+	if (!lines[start]?.match(FRONTMATTER_DELIM_RE)) return start
+	let i = start + 1
+	while (i < lines.length && !lines[i].match(FRONTMATTER_DELIM_RE)) i++
+	return i < lines.length ? i + 1 : start
+}
+
+type FenceState = { inFence: boolean; marker: "`" | "~" | "" }
+
+function fenceStep(state: FenceState, line: string): FenceState {
+	const m = line.match(FENCE_RE)
+	if (!m) return state
+	const marker = (m[1][0] === "`" ? "`" : "~") as "`" | "~"
+	if (!state.inFence) return { inFence: true, marker }
+	return marker === state.marker ? { inFence: false, marker: "" } : state
+}
+
+function parseAtx(line: string): { level: number; text: string } | null {
+	const m = line.match(ATX_RE)
+	if (!m) return null
+	return { level: m[1].length, text: m[2] }
+}
+
+function parseSetext(curr: string, next: string): { level: number; text: string } | null {
+	if (!/\S/.test(curr)) return null
+	if (!SETEXT_UNDERLINE_RE.test(next)) return null
+	const level = next.trim().startsWith("=") ? 1 : 2
+	return { level, text: curr }
+}
+
+function makeNode(level: number, rawTitle: string): HeadingItem | null {
+	const title = cleanMarkdown(rawTitle)
+	if (!title) return null
+	return {
+		title,
+		slug: slugify(title, { lower: true }),
+		level,
+		children: [],
+	}
+}
+
+function pushNode(root: HeadingItem[], stack: HeadingItem[], node: HeadingItem) {
+	while (stack.length && stack[stack.length - 1].level >= node.level) {
+		stack.pop()
+	}
+	if (stack.length === 0) root.push(node)
+	else stack[stack.length - 1].children.push(node)
+	stack.push(node)
+}
+
+export function extractHeadingTreeFromMarkdown(content: string, maxDepth = 3) {
+	const lines = content.split("\n")
 	const root: HeadingItem[] = []
 	const stack: HeadingItem[] = []
+	let i = skipFrontmatter(lines)
+	let fence: FenceState = { inFence: false, marker: "" }
 
-	for (const line of content.split("\n")) {
-		const match = headingRegex.exec(line)
-		if (!match) continue
+	while (i < lines.length) {
+		const line = lines[i]
 
-		const level = match[1].length
-		if (level > 3) continue
-
-		const title = cleanMarkdown(match[2])
-		const node: HeadingItem = {
-			title,
-			slug: slugify(title),
-			level,
-			children: [],
+		// fence handling
+		const nextFence = fenceStep(fence, line)
+		const justEnteredFence = !fence.inFence && nextFence.inFence
+		const justExitedFence = fence.inFence && !nextFence.inFence
+		fence = nextFence
+		if (justEnteredFence || fence.inFence) {
+			i++
+			continue
+		}
+		if (justExitedFence) {
+			i++
+			continue
 		}
 
-		while (stack.length && stack[stack.length - 1].level >= level) {
-			stack.pop()
+		// ATX: "# ...", "## ...", ...
+		const atx = parseAtx(line)
+		if (atx) {
+			if (atx.level <= maxDepth) {
+				const node = makeNode(atx.level, atx.text)
+				if (node) pushNode(root, stack, node)
+			}
+			i++
+			continue
 		}
 
-		if (stack.length === 0) {
-			root.push(node)
-		} else {
-			stack[stack.length - 1].children.push(node)
+		// Setext: "Title" + ("===" | "---")
+		if (i + 1 < lines.length) {
+			const setext = parseSetext(line, lines[i + 1])
+			if (setext) {
+				if (setext.level <= maxDepth) {
+					const node = makeNode(setext.level, setext.text)
+					if (node) pushNode(root, stack, node)
+				}
+				i += 2
+				continue
+			}
 		}
 
-		stack.push(node)
+		i++
 	}
 
 	return root
diff --git a/app/utils/seo.ts b/app/utils/seo.ts
index f8ad034..63ed7fd 100644
--- a/app/utils/seo.ts
+++ b/app/utils/seo.ts
@@ -18,8 +18,9 @@ export function generateMetaFields({ domain, title, description, path, additiona
 			title,
 			description,
 			url: fullUrl,
-			// Change to your package name
-			siteName: "Package Name",
+			// FIXME Change to your package name
+			siteName: "Docs Template",
+			// FIXME Change to your image
 			image: PackageLogo,
 		},
 		[
diff --git a/content/01-changelog.mdx b/content/01-changelog.mdx
deleted file mode 100644
index a042961..0000000
--- a/content/01-changelog.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Changelog
-summary: "Latest updates and changes"
-description: "Stay updated with the latest changes, features, and improvements in the Forge42 Base Stack."
----
-
-## Changelog
-Welcome to the changelog for the Forge42 Base Stack! Here, you'll find a detailed record of all the updates, features, bug fixes, and improvements made to the project over time. This document is essential for developers and users who want to stay informed about the evolution of the stack.
-## Version 1.0.0 - Initial Release
-- **Release Date:** January 15, 2024
-- **Features:**
-	- Initial release of the Forge42 Base Stack.
-	- Includes core technologies: Remix, Tailwind CSS, TypeScript, Vitest, and React Aria Components.
-	- Basic project structure and configuration set up.
-	- Sample components and pages to demonstrate functionality.
diff --git a/content/01-getting-started/01-installation-setup.mdx b/content/01-getting-started/01-installation-setup.mdx
new file mode 100644
index 0000000..6a71e62
--- /dev/null
+++ b/content/01-getting-started/01-installation-setup.mdx
@@ -0,0 +1,96 @@
+---
+title: Installation & Setup
+description: Step-by-step guide to install and configure the Forge42 Documentation Template
+summary: Installation Guide
+---
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
+
+## Prerequisites
+
+Make sure you have the following installed:
+
+- **Node.js** (>= 22.17.0)
+- **pnpm** (>= 10.13.0)
+- **Git** (for version control)
+
+---
+
+## Installation Steps
+
+### 1. Clone the Repository
+
+```bash
+git clone https://github.com/forge42/docs-template my-documentation
+cd my-documentation
+```
+
+### 2. Install Dependencies
+
+```bash
+pnpm install
+```
+
+### 3. Set Up Environment Variables
+
+Copy the example environment file:
+
+```bash
+cp .env.example .env
+```
+
+Then update the `.env` file with your project-specific configuration.
+
+### 4. Generate Documentation
+
+Build the initial docs from the `content/` folder:
+
+```bash
+pnpm run generate:docs
+```
+
+This processes your content and outputs optimized documentation files.
+
+### 5. Start the Development Server
+
+```bash
+pnpm run dev
+```
+
+Your site will now be running at **http://localhost:4280**
+
+---
+
+## Project Structure
+
+After installation, your project will look like this:
+
+```
+my-documentation/
+β”œβ”€β”€ app/              # React Router application
+β”œβ”€β”€ content/          # Your documentation content
+β”œβ”€β”€ public/           # Static assets
+β”œβ”€β”€ resources/        # Fonts, icons, etc.
+β”œβ”€β”€ generated-docs/   # Generated documentation files
+β”œβ”€β”€ scripts/          # Build and utility scripts
+β”œβ”€β”€ package.json
+└── README.md
+```
+
+---
+
+## Next Steps
+
+1. **Customize Branding**
+   Update logo, colors, and header components in `app/components/`
+
+2. **Add Your Content**
+   Replace the example files in `content/` with your own documentation
+
+3. **Prepare for Deployment**
+   Configure your hosting provider (e.g. Vercel, Netlify, or GitHub Pages)
+
+---
+
+> πŸ’‘ The template ships with sample content so you can quickly understand the structure. You can safely delete or replace these examples once your docs are ready.
diff --git a/content/01-getting-started/02-project-structure.mdx b/content/01-getting-started/02-project-structure.mdx
new file mode 100644
index 0000000..af6b95b
--- /dev/null
+++ b/content/01-getting-started/02-project-structure.mdx
@@ -0,0 +1,102 @@
+---
+title: Project Structure
+summary: Architecture Guide
+description: Minimal map of what matters and where to change it.
+---
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
+
+## 1. High‑Level Layout
+```
+app/              React Router app (UI + logic)
+content/          Source MDX (edit these)
+generated-docs/   Built output (do NOT edit)
+scripts/          Generation / validation scripts
+```
+
+## 2. Application Essentials (app/)
+Directories:
+- components/ (UI pieces: sidebar, command-k, code-block, etc.)
+- hooks/ (shared React hooks)
+- routes/ (page modules + meta)
+- utils/ (seo, versions, paths, sidebar, contribution links)
+- ui/ (primitive UI elements)
+- tailwind.css (global styles + theme vars)
+- root.tsx (app root)
+
+## 3. Content Rules (content/)
+- Number prefixes (01-, 02-) only control ordering; stripped from URLs.
+- Use index.md files to introduce a section.
+- Nest as needed; keep names short.
+
+Minimal example:
+```
+content/
+β”œβ”€β”€ 01-getting-started/
+β”‚   β”œβ”€β”€ index.md
+β”‚   β”œβ”€β”€ 01-overview.mdx
+β”‚   └── 02-project-structure.mdx
+└── 02-routing/
+		β”œβ”€β”€ index.md
+		β”œβ”€β”€ 01-basic-routing.mdx
+		└── 02-nested-routes.mdx
+```
+
+## 4. Frontmatter Pattern
+```
+---
+title: Clear Title
+summary: Clear Summary
+description: Clear Short Description
+---
+```
+
+## 5. Generation Pipeline
+Script: scripts/generate-docs.ts
+Steps:
+1. Scan content/
+2. Emit processed artifacts β†’ generated-docs/version/.content-collections/generated
+3. Update versions list
+4. Optionally build search index
+Never edit generated-docs/ manually.
+
+## 6. Config Touchpoints
+- content-collections.ts (parsing + schema)
+- app/routes.ts (logical route map)
+- react-router.config.ts (router build)
+- vite.config.ts (build + plugins)
+- fly.toml (deployment example)
+- .github/workflows/ (CI: build + deploy)
+
+## 7. Styling & Theme
+- Tailwind utility-first
+- CSS vars for light/dark in tailwind.css
+- Theme logic: utils/theme.ts
+- Persistence keys: utils/local-storage.ts
+
+## 8. Typical Edit Flow
+1. Resolve FIXMEs (branding, siteName, social image)
+2. Add / edit MDX pages
+3. Run: `pnpm run generate:docs -- --branch main`
+4. Dev server: `pnpm dev`
+5. Review sidebar, search, meta
+6. Commit
+
+## 9. Quick Commands
+```
+pnpm run generate:docs -- --branch main
+pnpm dev
+grep -R "FIXME" -n app/
+```
+
+## 10. Safe vs Caution
+Safe to change:
+- content/**
+- components, routes, utils (non-generated)
+- layout branding + theming
+
+Don't change:
+- generated-docs/** (automatically created files on generate:docs command)
+- version.ts (automatically created file on generate:docs command)
+- path/slug helpers (affects links & search)
diff --git a/content/01-getting-started/index.md b/content/01-getting-started/index.md
new file mode 100644
index 0000000..f921c6e
--- /dev/null
+++ b/content/01-getting-started/index.md
@@ -0,0 +1,5 @@
+---
+title: Getting Started
+---
+
+This section covers the basics of setting up and using the documentation template.
\ No newline at end of file
diff --git a/content/02-content-management/01-writing-documentation.mdx b/content/02-content-management/01-writing-documentation.mdx
new file mode 100644
index 0000000..ccd2642
--- /dev/null
+++ b/content/02-content-management/01-writing-documentation.mdx
@@ -0,0 +1,156 @@
+---
+title: Writing Documentation
+description: Learn how to create and organize documentation content using Markdown and MDX
+summary: Content Creation Guide
+---
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
+
+## Content File Types
+
+The template supports two types of content files:
+
+### Markdown Files (`.md`)
+
+Used for simple content and section indexes:
+
+```markdown
+---
+title: Getting Started
+---
+
+This section covers the basics of using our product.
+```
+
+### MDX Files (`.mdx`)
+
+Used for rich content with React components:
+
+```mdx
+---
+title: Advanced Features
+description: Learn about advanced functionality
+summary: Advanced Guide
+---
+
+## Interactive Examples
+
+You can embed React components directly in your content.
+```
+
+## Content Structure
+
+### File Organization
+
+Content is organized in a hierarchical structure:
+
+```
+content/
+β”œβ”€β”€ _index.mdx           # Homepage (required)
+β”œβ”€β”€ 01-getting-started/  # Main section
+β”‚   β”œβ”€β”€ index.md         # Section metadata (required)
+β”‚   β”œβ”€β”€ 01-installation.mdx
+β”‚   └── 02-setup.mdx
+β”œβ”€β”€ 02-features/         # Another section
+β”‚   β”œβ”€β”€ index.md
+β”‚   β”œβ”€β”€ 01-basic-features.mdx
+β”‚   └── 02-advanced/     # Subsection
+β”‚       β”œβ”€β”€ index.md     # Subsection metadata
+β”‚       └── 01-configuration.mdx
+└── 03-api-reference.mdx # Standalone page
+```
+
+### Frontmatter
+
+All content files require frontmatter with metadata:
+
+```yaml
+---
+title: "Page Title"                    # Required: Page title
+description: "SEO description"         # Optional: Meta description
+summary: "Short description"           # Optional: Used in navigation
+---
+```
+
+## Code Blocks
+
+Standard markdown code blocks with syntax highlighting:
+
+```typescript
+// This will be syntax highlighted
+function example() {
+  return "Hello World"
+}
+```
+
+Diff highlighting for showing changes:
+
+```diff
+- const old = "removed code"
++ const new = "added code"
+  const unchanged = "stays the same"
+```
+
+### Inline Code
+
+Use backticks for `inline code` references.
+
+### Links and Navigation
+
+Standard markdown links work automatically:
+
+```markdown
+[Link to another page](../other-section/page-name)
+[External link](https://example.com)
+```
+
+The template automatically generates:
+- Table of contents from headings
+- Previous/next page navigation
+- Breadcrumb navigation
+
+## Content Processing
+
+### URL Generation
+
+File paths are automatically converted to clean URLs:
+
+- `content/01-getting-started/02-installation.mdx` β†’ `/getting-started/installation`
+- Number prefixes (`01-`, `02-`) are removed from URLs
+- File extensions are stripped
+
+### Search Integration
+
+All content is automatically indexed for search:
+
+- Page titles and descriptions
+- Heading text
+- Paragraph content
+- Code block content (optional)
+
+Content is processed by `app/components/command-k/create-search-index.ts`.
+
+## Best Practices
+
+### Writing Guidelines
+
+1. **Use Descriptive Titles**: Make headings clear and specific
+2. **Add Descriptions**: Include frontmatter descriptions for SEO
+3. **Structure with Headings**: Use proper heading hierarchy (H2 β†’ H3 β†’ H4)
+4. **Link Between Pages**: Create connections between related content
+
+### File Naming
+
+1. **Use Number Prefixes**: `01-`, `02-` for ordering
+2. **Descriptive Names**: `installation.mdx` not `setup.mdx`
+3. **Consistent Casing**: Use kebab-case for file names
+
+### Content Organization
+
+1. **Logical Grouping**: Group related content in sections
+2. **Appropriate Nesting**: Don't go too deep (max 2 levels recommended)
+3. **Index Files**: Always include `index.md` for sections
+
+
+The development server shows content errors in the console to help you fix issues quickly.
\ No newline at end of file
diff --git a/content/02-content-management/02-built-in-components.mdx b/content/02-content-management/02-built-in-components.mdx
new file mode 100644
index 0000000..2a2e8a5
--- /dev/null
+++ b/content/02-content-management/02-built-in-components.mdx
@@ -0,0 +1,193 @@
+---
+title: Built-in Components
+description: Reference guide for all available components in the template
+summary: Component Reference
+---
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
+
+## Text Components
+
+### Headings
+
+All heading levels are automatically styled and generate anchor links:
+
+```markdown
+# H1 Heading
+## H2 Heading
+### H3 Heading
+#### H4 Heading
+```
+
+**Features:**
+- Automatic anchor link generation
+- Table of contents integration
+- Consistent spacing and typography
+
+### Inline Code
+
+For referencing code, commands, or technical terms:
+
+```mdx
+Install the package using `npm install`.
+```
+
+Install the package using `npm install`.
+
+### Strong Text
+
+For emphasis and important terms:
+
+```mdx
+This is **very important** information.
+```
+
+This is **very important** information.
+
+## Code Components
+
+### Code Blocks
+
+Syntax-highlighted code blocks with copy functionality:
+
+```typescript
+interface User {
+  id: string
+  name: string
+  email: string
+}
+
+function createUser(data: Partial<User>): User {
+  return {
+    id: generateId(),
+    ...data
+  } as User
+}
+```
+
+**Features:**
+- Automatic syntax highlighting
+- Copy to clipboard button
+- Line number support
+- Diff highlighting
+
+### Diff Code Blocks
+
+Show code changes with diff highlighting:
+
+```diff
+function oldFunction() {
+- return "old implementation"
++ return "new implementation"
+}
+
++ function newFunction() {
++   return "brand new feature"
++ }
+```
+
+## List Components
+
+### Ordered Lists
+
+Numbered lists with custom styling:
+
+```markdown
+1. First step
+2. Second step
+3. Third step
+```
+
+1. First step
+2. Second step
+3. Third step
+
+### Unordered Lists
+
+Bullet lists with custom styling:
+
+```markdown
+- Feature one
+- Feature two
+- Feature three
+```
+
+- Feature one
+- Feature two
+- Feature three
+
+## Link Components
+
+### Anchor Links
+
+Enhanced links with proper styling:
+
+```mdx
+Visit our [homepage](/) for more information.
+Check out the [React Router docs](https://reactrouter.com).
+```
+
+Visit our [homepage](/) for more information.
+Check out the [React Router docs](https://reactrouter.com).
+
+**Features:**
+- External link detection
+- Proper styling for internal/external links
+- Accessibility improvements
+
+## Component Implementation
+
+All components are defined in `app/components/mdx-wrapper.tsx`:
+
+```typescript
+export const MDXWrapper = ({ content }: { content: string }) => (
+  <MDXContent
+    code={content}
+    components={{
+      code: InlineCode,
+      pre: CodeBlock,
+      ol: OrderedList,
+      li: ListItem,
+      strong: Strong,
+      a: Anchor,
+    }}
+  />
+)
+```
+
+## Creating Custom Components
+
+You can add your own components by:
+
+1. **Creating the component** in `app/ui/` or `app/components/`
+2. **Adding it to MDXWrapper** in `app/components/mdx-wrapper.tsx`
+3. **Using it in your content** files
+
+Example custom component:
+
+```typescript
+// app/ui/custom-callout.tsx
+export const CustomCallout = ({ children, type = "info" }) => (
+  <div className={`callout callout-${type}`}>
+    {children}
+  </div>
+)
+```
+
+```typescript
+// Add to mdx-wrapper.tsx
+components={{
+  // ... existing components
+  CustomCallout,
+}}
+```
+
+```mdx
+<!-- Use in content -->
+<CustomCallout type="success">
+This is a custom callout component!
+</CustomCallout>
+```
+
+Custom components should follow the existing design system for consistency.
\ No newline at end of file
diff --git a/content/02-content-management/index.md b/content/02-content-management/index.md
new file mode 100644
index 0000000..2127f19
--- /dev/null
+++ b/content/02-content-management/index.md
@@ -0,0 +1,5 @@
+---
+title: Content Management
+---
+
+This section covers creating and organizing documentation content using Markdown and MDX.
\ No newline at end of file
diff --git a/content/02-introduction.mdx b/content/02-introduction.mdx
deleted file mode 100644
index 5580ee6..0000000
--- a/content/02-introduction.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: "Introduction to Forge42 Base Stack"
-summary: "Overview of the Stack"
-description: "Get started with the Forge42 Base Stack β€” a modern web app starter template designed for speed, scalability, and developer experience."
----
-
-## What is Forge42 Base Stack?
-The Forge42 Base Stack is a full-featured web application starter template. It combines modern tools and technologies like **Remix**, **Tailwind CSS**, **TypeScript**, **Vitest**, and **React Aria Components** to help you build accessible and scalable web apps quickly.
-This documentation will guide you through setting up the project, understanding its structure, and customizing it for your needs.
-## Installation
-To get started with the base stack, simply clone the repository and install dependencies:
-```bash
-npx degit forge42/base-stack my-app
-cd my-app
-npm install
-```
diff --git a/content/03-customization/01-branding-and-design.mdx b/content/03-customization/01-branding-and-design.mdx
new file mode 100644
index 0000000..dbc3e13
--- /dev/null
+++ b/content/03-customization/01-branding-and-design.mdx
@@ -0,0 +1,224 @@
+---
+title: Branding & Design
+description: Customize the look and feel of your documentation site
+summary: Design Customization
+---
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
+
+## Logo Customization
+
+### Updating the Logo
+
+The main logo is defined in `app/components/logo.tsx`:
+
+```typescript
+export const Logo = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Link to="/" className="flex items-center gap-2">
+      <div className="flex size-8 items-center justify-center rounded-lg bg-gradient-to-r from-[#2c8794] to-[#329baa] font-bold text-white text-sm">
+        F42
+      </div>
+      {children && (
+        <span className="font-bold text-[var(--color-text-active)] text-lg">
+          {children}
+        </span>
+      )}
+    </Link>
+  )
+}
+```
+
+### Logo Usage
+
+The logo appears in two places:
+
+1. **Homepage** (`app/routes/index.tsx`):
+```typescript
+<Logo>
+  <span className="p-0">YOUR PROJECT NAME</span>
+</Logo>
+```
+
+2. **Documentation Layout** (`app/routes/documentation-layout.tsx`):
+```typescript
+<Logo>
+  <span className="p-0">YOUR PROJECT NAME</span>
+</Logo>
+```
+
+### Adding a Custom Logo Image
+
+To use an image instead of the text logo:
+
+```typescript
+// app/components/logo.tsx
+export const Logo = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <Link to="/" className="flex items-center gap-2">
+      <img
+        src="/logo.svg"
+        alt="Your Logo"
+        className="h-8 w-auto"
+      />
+      {children}
+    </Link>
+  )
+}
+```
+
+Place your logo file in the `public/` directory.
+
+## Color Theming
+
+### CSS Variables
+
+The template uses CSS variables for theming, defined in `app/tailwind.css`:
+
+```css
+:root {
+  --color-background: #fafafa;
+  --color-border: #e5e7eb;
+  --color-text-normal: #2d3748;
+  --color-text-muted: #718096;
+  --color-text-active: #000000;
+  /* ... more variables */
+}
+
+[data-theme="dark"] {
+  --color-background: #0f172a;
+  --color-border: #334155;
+  --color-text-normal: #cbd5e1;
+  --color-text-muted: #64748b;
+  --color-text-active: #f1f5f9;
+  /* ... dark theme variables */
+}
+```
+
+### Customizing Colors
+
+1. **Update CSS Variables**: Modify colors in `app/tailwind.css`
+2. **Brand Colors**: Update accent colors used throughout the site
+3. **Component Colors**: Some components use specific color classes
+
+Example brand color customization:
+
+```css
+:root {
+  /* Update these for your brand */
+  --color-primary: #your-brand-color;
+  --color-accent: #your-accent-color;
+}
+```
+
+### Gradient Customization
+
+Update gradients used in the logo and buttons:
+
+```typescript
+// From this:
+bg-gradient-to-r from-[#2c8794] to-[#329baa]
+
+// To your colors:
+bg-gradient-to-r from-[#your-color-1] to-[#your-color-2]
+```
+
+## Typography
+
+### Font Configuration
+
+Fonts are configured in `app/tailwind.css`:
+
+```css
+@theme {
+  --font-dyna-puff: "Dyna Puff", sans-serif;
+  --font-inter: "Inter", sans-serif;
+  --font-space: "Space", sans-serif;
+}
+```
+
+### Custom Fonts
+
+To add custom fonts:
+
+1. **Add font files** to `resources/fonts/`
+2. **Update font loading** in `app/root.tsx`
+3. **Configure in Tailwind** in `app/tailwind.css`
+
+## Page Metadata
+
+### Site Title
+
+Update the site title in route meta functions:
+
+```typescript
+// app/routes/index.tsx
+export const meta = ({ data }: Route.MetaArgs) => {
+  return generateMetaFields({
+    domain,
+    path: "/",
+    title: "Your Project Name", // Update this
+    description: "Your project description",
+  })
+}
+```
+
+### Favicon
+
+Replace the favicon files in `public/`:
+- `favicon.ico`
+- `apple-touch-icon.png`
+- `icon-192.png`
+- `icon-512.png`
+
+## Navigation Customization
+
+### Header Links
+
+Add custom header links in `app/routes/documentation-layout.tsx`:
+
+```typescript
+<div className="inline-flex items-center gap-2 xl:gap-3">
+  <VersionDropdown />
+  <CommandK version={version} />
+  <ThemeToggle />
+
+  {/* Add custom links here */}
+  <IconLink name="ExternalLink" href="https://your-site.com" />
+
+  {GITHUB_REPO_URL && <IconLink name="Github" href={GITHUB_REPO_URL} />}
+</div>
+```
+
+## Homepage Customization
+
+### Hero Section
+
+Update the homepage hero in `app/routes/index.tsx`:
+
+```typescript
+<h1 className="font-bold text-[var(--color-text-active)] text-xl leading-snug md:text-2xl xl:text-3xl">
+  Your Project Name
+  <br />
+  <span className="bg-gradient-to-r from-[#48ddf3] to-[#fb4bb5] bg-clip-text text-transparent">
+    Your Tagline
+  </span>
+</h1>
+```
+
+### Feature Cards
+
+Update feature cards to match your project:
+
+```typescript
+<div className="mb-6 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+  <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-background)] p-6 transition-colors hover:shadow-lg">
+    <h3 className="mb-2 font-semibold text-[var(--color-text-active)] text-lg">Your Feature</h3>
+    <p className="text-[var(--color-text-muted)]">Description of your feature</p>
+  </div>
+  {/* Add more feature cards */}
+</div>
+```
+
+Remember to update all text content and links to match your project throughout the codebase.
\ No newline at end of file
diff --git a/content/03-customization/02-configuration-options.mdx b/content/03-customization/02-configuration-options.mdx
new file mode 100644
index 0000000..f39a2a6
--- /dev/null
+++ b/content/03-customization/02-configuration-options.mdx
@@ -0,0 +1,236 @@
+---
+title: Configuration Options
+description: Configure build settings, environment variables, and deployment options
+summary: Configuration Guide
+---
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
+
+## Environment Configuration
+
+### Environment Variables
+
+The template uses environment variables for configuration. Copy `.env.example` to `.env`:
+
+```bash
+cp .env.example .env
+```
+
+Key environment variables:
+
+```bash
+# GitHub Integration
+GITHUB_REPO_URL=https://github.com/yourusername/your-repo
+
+# Domain Configuration
+DOMAIN=https://yourdocs.com
+
+# Development/Production
+NODE_ENV=development
+APP_ENV=development
+```
+
+### Environment File Structure
+
+- `.env` - Local development (not committed)
+- `.env.example` - Example configuration (committed)
+- `.env.test` - Test environment configuration
+
+## Build Configuration
+
+### Vite Configuration
+
+Main build configuration is in `vite.config.ts`:
+
+```typescript
+export default defineConfig
+  plugins: [
+    tailwindcss(),
+    reactRouterDevTools(), // Development tools
+    reactRouter(),         // React Router v7
+    reactRouterHonoServer({
+      dev: {
+        // Development server configuration
+      }
+    }),
+    contentCollections(),  // Content processing
+    tsconfigPaths(),      // TypeScript path mapping
+    iconsSpritesheet({    // Icon generation
+      inputDir: "resources/icons",
+      outputDir: "app/ui/icon",
+      pathToSprite: "~/ui/icon/sprite.svg",
+    }),
+  ],
+})
+```
+
+### Content Collections Configuration
+
+Content processing is configured in `content-collections.ts`:
+
+```typescript
+const section = defineCollection({
+  name: "section",
+  directory: "content",
+  include: "**/index.md",
+  schema: sectionSchema,
+  // ... configuration
+})
+
+const page = defineCollection({
+  name: "page",
+  directory: "content",
+  include: "**/**/*.mdx",
+  schema: pageSchema,
+  // ... configuration with MDX compilation
+})
+```
+
+## Version Management
+
+### Version Configuration
+
+Versions are managed in `app/utils/versions.ts`:
+
+```typescript
+// Auto-generated file. Do not edit manually.
+export const versions = ["current"] as const
+```
+
+This file is auto-generated by the `scripts/generate-docs.ts` script.
+
+### Multi-Version Setup
+
+To support multiple versions:
+
+1. **Tag your releases**:
+   ```bash
+   git tag v1.0.0
+   git tag v1.1.0
+   ```
+
+2. **Generate docs for multiple versions**:
+   ```bash
+   pnpm run generate:docs --versions "v1.0.0,v1.1.0" --branch main
+   ```
+
+3. **Version resolution** happens in `app/utils/version-resolvers.ts`
+
+## SEO Configuration
+
+### Meta Tags
+
+SEO configuration is handled by `app/utils/seo.ts`:
+
+```typescript
+export function generateMetaFields({
+  domain,
+  path,
+  title,
+  description,
+  image,
+}: MetaOptions): MetaFunction {
+  return [
+    { title },
+    { name: "description", content: description },
+    { property: "og:title", content: title },
+    { property: "og:description", content: description },
+    // ... more meta tags
+  ]
+}
+```
+
+### Sitemap Generation
+
+Sitemaps are automatically generated:
+
+- `app/routes/sitemap-index[.]xml.ts` - Sitemap index
+- `app/routes/sitemap.$lang[.]xml.ts` - Language-specific sitemaps
+
+### Robots.txt
+
+Robots.txt is generated in `app/routes/robots[.]txt.ts`:
+
+```typescript
+const robotsTxt = generateRobotsTxt([
+  {
+    userAgent: "*",
+    [isProductionDeployment ? "allow" : "disallow"]: ["/"],
+    sitemap: [`${domain}/sitemap-index.xml`],
+  },
+])
+```
+
+## Search Configuration
+
+### Search Index
+
+Search is configured in `app/components/command-k/create-search-index.ts`:
+
+```typescript
+export async function createSearchIndex(version: Version) {
+  const { allPages } = await getContent(version)
+
+  // Configure what content to index
+  const searchableContent = allPages.map(page => ({
+    title: page.title,
+    content: stripCodeFences(page.rawMdx),
+    // ... indexing configuration
+  }))
+}
+```
+
+### Search Features
+
+- **Full-text search** across all content
+- **Keyboard shortcuts** (Cmd/Ctrl + K)
+- **Search history** with local storage
+- **Fuzzy matching** with Fuse.js
+
+## Development Tools
+
+### React Router DevTools
+
+Development tools are configured in `vite.config.ts`:
+
+```typescript
+reactRouterDevTools(), // Add development panel
+```
+
+DevTools are automatically excluded from production builds.
+
+### Code Quality Tools
+
+Configuration files for code quality:
+
+- `biome.json` - Linting and formatting
+- `tsconfig.json` - TypeScript configuration
+- `vitest.config.ts` - Testing configuration
+
+### Docker Configuration
+
+The template includes `Dockerfile` for containerized deployment:
+
+```dockerfile
+# Multi-stage build for optimized production image
+FROM node:18-alpine AS base
+# ... Docker configuration
+```
+
+### Fly.io Configuration
+
+Deployment configuration for Fly.io in `fly.toml`:
+
+```toml
+app = "your-app-name"
+primary_region = "your-region"
+
+[build]
+
+[http_service]
+  internal_port = 3000
+  # ... Fly.io configuration
+```
+
+Update deployment configurations to match your hosting platform and requirements.
\ No newline at end of file
diff --git a/content/03-customization/index.md b/content/03-customization/index.md
new file mode 100644
index 0000000..1cfeb2d
--- /dev/null
+++ b/content/03-customization/index.md
@@ -0,0 +1,5 @@
+---
+title: Customization
+---
+
+This section covers customizing the appearance and functionality of your documentation site.
\ No newline at end of file
diff --git a/content/03-overview.mdx b/content/03-overview.mdx
deleted file mode 100644
index f47e625..0000000
--- a/content/03-overview.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: "Overview of the Forge42 Base Stack"
-summary: "A comprehensive look at the features and architecture"
-description: "Explore the key features, architecture, and benefits of using the Forge42 Base Stack for your web applications."
----
-
-## Key Features
-The Forge42 Base Stack offers a robust set of features designed to streamline your development process:
-- **Modern Tech Stack**: Built with the latest versions of Remix, Tailwind CSS, TypeScript, Vitest, and React Aria Components.
-- **Scalability**: Designed to grow with your application, making it easy to add new features and components.
-- **Accessibility**: Utilizes React Aria Components to ensure your application is accessible to all users.
-- **Performance Optimization**: Includes best practices for performance, ensuring fast load times and smooth user experiences.
-- **Developer Experience**: Comes with a well-structured project setup, comprehensive documentation, and testing tools to enhance productivity.
-- **Customizable**: Easily adaptable to fit the specific needs of your project.
-- **Community Support**: Backed by a community of developers and contributors who provide support and share best practices.
-- **Regular Updates**: Continuously maintained with updates to dependencies and new features.
-- **Comprehensive Documentation**: Detailed guides and references to help you get the most out of the stack.
-- **Testing Framework**: Integrated Vitest for unit and integration testing, ensuring code quality and reliability.
-- **Responsive Design**: Built with Tailwind CSS to ensure your application looks great on all devices.
-- **Type Safety**: Leveraging TypeScript to catch errors early and improve code maintainability.
-- **SEO Friendly**: Optimized for search engines to help your application rank better.
-- **API Integration**: Simplified data fetching and state management with built-in patterns and practices.
-- **Environment Configuration**: Easy management of different environments (development, staging, production) with environment variables.
-- **Error Handling**: Robust error handling mechanisms to improve application stability.
-- **Authentication & Authorization**: Ready-to-use patterns for implementing secure user authentication and role-based access control.
-- **CI/CD Ready**: Easily integrates with continuous integration and deployment pipelines for automated workflows.
-- **Open Source**: Fully open-source, allowing you to contribute and customize as needed.
-- **Example Projects**: Comes with example projects to help you get started quickly and understand best practices.
-- **Modular Architecture**: Encourages a modular approach to building applications, making it easier to manage and scale codebases.
-- **Community Plugins**: Supports a variety of community plugins and extensions to enhance functionality.
-- **Internationalization (i18n)**: Built-in support for multiple languages to reach a global audience.
-- **State Management**: Provides patterns for effective state management using modern libraries and techniques.
-- **Logging & Monitoring**: Integrates with popular logging and monitoring tools to help you track application performance and issues.
-- **Comprehensive CLI**: Command-line tools to automate common tasks and streamline development workflows.
-- **Code Quality Tools**: Integrated linters and formatters to maintain high code quality and consistency across the project.
-- **Documentation Generation**: Tools to help you generate and maintain project documentation easily.
-- **Community Contributions**: Encourages contributions from the community to enhance and expand the stack's capabilities.
-- **Learning Resources**: Access to tutorials, guides, and other learning materials to help you master the stack.
diff --git a/content/04-deployment/01-automation.mdx b/content/04-deployment/01-automation.mdx
new file mode 100644
index 0000000..75bfd5a
--- /dev/null
+++ b/content/04-deployment/01-automation.mdx
@@ -0,0 +1,67 @@
+---
+title: CI/CD & Automation
+summary: Automation Guide
+description: Fast reference for validation, build and deploy pipeline.
+---
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
+
+## Why
+Automate validation + build + deploy so every PR and release ships safely.
+
+## Triggers
+- Pull request β†’ validate + preview deploy
+- Push to main β†’ production deploy
+- Release tag β†’ versioned docs + production deploy
+## Pipeline Stages
+1. Quality: biome lint, typecheck, unused code scan
+2. Tests: unit (Vitest)
+3. Build: generate docs, build app
+4. Deploy: preview (PR) or production (main/release)
+
+## Secrets / Vars
+Secrets:
+- FLY_API_TOKEN
+
+Variables:
+- FLY_ORG
+- FLY_REGION
+
+## Release Flow
+```bash
+# create and push the tag if you haven’t already
+git tag v1.0.0
+git push origin v1.0.0
+
+# create the release from the tag
+gh release create v1.0.0 --title "v1.0.0" --notes "Initial release of docs-template"
+
+```
+Action:
+- Generates docs for tag
+- Updates versions
+- Deploys
+
+
+## Local Pre‑Push Checklist
+```bash
+pnpm run lint
+pnpm run typecheck
+pnpm run check:unused
+pnpm run test
+pnpm run generate:docs -- --branch main
+pnpm run build
+```
+
+## Monitor
+- GitHub Actions tab (logs)
+- PR checks (gates)
+- Fly dashboard (deployment status)
+
+## Customizing
+Add steps in `.github/workflows/ci.yml` (extra lint, security scan, alt deployment). Replace Fly deploy step if using another platform.
+
+## Keep In Mind
+- Failing tests block deploy
+- Never edit generated-docs/ manually
\ No newline at end of file
diff --git a/content/04-deployment/index.md b/content/04-deployment/index.md
new file mode 100644
index 0000000..d93db5d
--- /dev/null
+++ b/content/04-deployment/index.md
@@ -0,0 +1,3 @@
+---
+title: Deployment
+---
diff --git a/content/04-started/01-installation.mdx b/content/04-started/01-installation.mdx
deleted file mode 100644
index 6a28be6..0000000
--- a/content/04-started/01-installation.mdx
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: "Setting up React Router Devtools"
-summary: "Beginner's Guide"
-description: "Follow this page to learn how to set up React Router Devtools in your React Router project."
----
-
-
-## Installation
-Adding React Router Devtools to your project is easy. First install it into your project by running:
-
-```bash
-npm install react-router-devtools -D
-```
-
-This will install it as a dev dependency in your project.
-
-## Enabling the tools
-
-After you have installed the tools, you need to go to your `vite.config.ts` file which will probably look something like this:
-
-```ts
-import { reactRouter } from '@react-router/dev/vite'
-import { defineConfig } from 'vite'
-import tsconfigPaths from 'vite-tsconfig-paths'
-
-export default defineConfig({
-  plugins: [reactRouter(), tsconfigPaths()],
-})
-
-```
-
-All you have to do is add the plugin into the `plugins` array in your `vite.config.ts` file.
-
-```diff
-import { reactRouter } from '@react-router/dev/vite'
-import { defineConfig } from 'vite'
-import tsconfigPaths from 'vite-tsconfig-paths'
-+ import { reactRouterDevTools } from "react-router-devtools";
-
-export default defineConfig({
--  plugins: [reactRouter(), tsconfigPaths()],
-+  plugins: [reactRouterDevTools(), reactRouter(), tsconfigPaths()],
-})
-
-```
-<WarningAlert title="Warning">
-Make sure your plugin is BEFORE the react router one!
-</WarningAlert>
-
-### CloudFlare
-
-If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in your `vite.config.js` file:
-```ts
-optimizeDeps: {
-  include: [
-    // other optimized deps
-    "beautify",
-    "react-diff-viewer-continued",
-    "classnames",
-    "@bkrem/react-transition-group",
-  ],
-},
-```
-
-**That's it!**
-
-You should now see the React Router Devtools in your browser when you run your app.
diff --git a/content/04-started/02-fac/01-common-questions.mdx b/content/04-started/02-fac/01-common-questions.mdx
deleted file mode 100644
index aa47d71..0000000
--- a/content/04-started/02-fac/01-common-questions.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: "Frequently Asked Questions"
-summary: "Common issues and answers when using React Router Devtools"
-description: "Find answers to common questions about installing, enabling, and troubleshooting React Router Devtools."
----
-
-## Do I need to install React Router Devtools in production?
-
-No. You should only install it as a development dependency by running:
-
-```bash
-npm install react-router-devtools -D
diff --git a/content/04-started/02-fac/index.md b/content/04-started/02-fac/index.md
deleted file mode 100644
index 5dac46d..0000000
--- a/content/04-started/02-fac/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: FYI
----
diff --git a/content/04-started/index.md b/content/04-started/index.md
deleted file mode 100644
index f15cbd3..0000000
--- a/content/04-started/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Getting Started
----
diff --git a/content/05-configuration/01-general.mdx b/content/05-configuration/01-general.mdx
deleted file mode 100644
index e4d93c6..0000000
--- a/content/05-configuration/01-general.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: React Router Devtools General Configuration
-description: General Configuration options for the React Router Devtools to interface with
-  your editor
-summary: Beginner's Guide
----
-
-
-This covers the general configuration options for the React Router Devtools.
-
-## General Config
-
-```ts
-type GeneralConfig = {
- 	pluginDir?: string
-	includeInProd?: {
-		client?: boolean
-		server?: boolean
-	}
-}
-```
-
-## `pluginDir`
-
-The relative path to your plugin directory. If you have a directory for react-router-devtools plugins you can point to it and they
-will be automatically imported and added to the dev tools.
-
-## `includeInProd`
-
-This option is used to set whether the plugin should be included in production builds or not.
-
-By default it is set to `undefined` and if you set this option to an object with the `client`, `context` and `server` properties set to `true` the plugin will be included in production builds.
-
-The client part includes the dev tools with the plugin and the server part includes the info logs. You can granularly configure the
-exact behavior of both sides with client and server configs respectively.
-
-
-Each of these flags will include a part of the plugin in production, in order for any of these to work `react-router-devtools` need to be switched over to
-a regular dependency and included in your project. If you only want to include the `devTools` helper in production, for example, you can
-set `includeInProd` to `{ devTools: true }` and the `devTools` part will be included in production and available always.
-
-<WarningAlert title="Be careful!">
- If you decide to deploy parts to production you should be very careful that you don't expose the dev tools to your clients or anybody
- who is not supposed to see them. Also the server part uses chalk which might not work in non-node environments!
-
- Also, if you wish to edit the plugin server config in production you can set `process.rdt_config` to an object with the same shape as the
- config object and it will be used instead of the default production config (`{ silent: true }`).
-</WarningAlert>
-
-  ```ts
-  import { reactRouterDevTools } from "react-router-devtools";
-
-  export default defineConfig({
-    plugins: [
-      reactRouterDevTools({
-        includeInProd: {
-          client: true,
-          server: true,
-          devTools: true
-        },
-      }),
-    ],
-  });
-  ```
diff --git a/content/05-configuration/02-client.mdx b/content/05-configuration/02-client.mdx
deleted file mode 100644
index 71631e6..0000000
--- a/content/05-configuration/02-client.mdx
+++ /dev/null
@@ -1,200 +0,0 @@
----
-title: React Router Devtools Client Configuration
-description: Configuration options for the React Router Devtools client
-summary: Beginner's Guide
----
-
-<InfoAlert>
-All of the following options can be set in the dev tools panel **"Settings page"** and they override the default ones. Your preferences are
-stored in localStorage and if they do not exist there the default ones are used.
-</InfoAlert>
-
-Before explaining all the possible options here is the client configuration Typescript type:
-
-```ts
-type RdtClientConfig = {
-    position: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle-left" | "middle-right";
-    liveUrls: { name: string, url: string }[];
-    liveUrlsPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    defaultOpen: boolean;
-    expansionLevel: number;
-    height: number;
-    minHeight: number;
-    maxHeight: number;
-    hideUntilHover: boolean;
-    panelLocation: "top" | "bottom";
-    requireUrlFlag: boolean;
-    urlFlag: string;
-    breakpoints: {name: string, min: number, max: number }[],
-    routeBoundaryGradient: "sea" | "hyper" | "gotham" | "gray" | "watermelon" | "ice" | "silver";
-    showBreakpointIndicator: boolean;
-    showRouteBoundariesOn: "hover" | "click";
-}
-```
-
-Let's go through each option and see what it does.
-
-## Live URLs
-
-This option is used to set the live urls that will be displayed in the bottom left corner of the screen. The default value is an empty array.
-It allows you to specify multiple live urls that you can use to open the current page in a new tab.
-
-## Live URLs position
-
-This option is used to set the position of the live urls that will be displayed in the bottom left corner of the screen. The possible values are:
-- `top-left` - the live urls will be positioned at the top left corner of the screen
-- `top-right` - the live urls will be positioned at the top right corner of the screen
-- `bottom-left` - the live urls will be positioned at the bottom left corner of the screen
-- `bottom-right` - the live urls will be positioned at the bottom right corner of the screen
-
-## Position
-
-This option is used to set the position of the React Router Devtools trigger (the button that opens the panel). The possible values are:
-- `top-left` - the trigger will be positioned at the top left corner of the screen
-- `top-right` - the trigger will be positioned at the top right corner of the screen
-- `bottom-left` - the trigger will be positioned at the bottom left corner of the screen
-- `bottom-right` - the trigger will be positioned at the bottom right corner of the screen
-- `middle-left` - the trigger will be positioned at the middle left of the screen
-- `middle-right` - the trigger will be positioned at the middle right of the screen
-
-## Default Open
-
-This option is used to set the initial state of the panel. If set to `true` the panel will be open by default, if set to `false`
-the panel will be closed by default.
-
-## Expansion Level
-
-This option is used to set the initial expansion level of the returned JSON data in the **Active Page** tab. By default it is set to
-1 and if you open up the **Active Page** and look at the returned loader data it will look like this:
-
-```ts
-"data": { ... } +
-```
-
-If you set the expansion level to 1 the returned loader data will look like this:
-
-```ts
-"data": {
-    "property": "value"
-}
-```
-
-## Height
-
-This option is used to set the initial height of the panel. The default value is 400px.
-
-## Min Height
-
-This option is used to set the minimum height of the panel. The default value is 200px.
-
-## Max Height
-
-This option is used to set the maximum height of the panel. The default value is 800px.
-
-## Hide Until Hover
-
-This option is used to set whether the trigger should be hidden until you hover over it. The default value is `false`.
-
-## Panel Location
-
-This option is used to set the location of the panel. The possible values are:
-- `top` - the panel will be positioned at the top of the screen
-- `bottom` - the panel will be positioned at the bottom of the screen
-
-## Require URL Flag
-
-This option is used to set whether the panel should be opened only if the URL contains a specific flag. The default value is `false`.
-
-<WarningAlert title="Be careful!">
-If you set this option to `true` and you forget to set the URL flag, the panel will hide and you will not be able to see it
-until you enter the url flag.
-
-The default one is `rdt=true` and if you set this option to `true` you will have to add `?rdt=true` to the URL in order to see the panel.
-</WarningAlert>
-
-## URL Flag
-
-This option is used to set the URL flag that is required to open the panel. The default value is `rdt`.
-
-You can set it to whatever you wish and if you set the **Require URL Flag** option to `true` you will have to add `?yourFlag=true` to the URL in order to see the panel.
-
-## Route Boundary Gradient
-
-This option is used to set the color of the route boundary gradient. The possible values are:
-- `sea`
-- `hyper`
-- `gotham`
-- `gray`
-- `watermelon`
-- `ice`
-- `silver`
-
-<InfoAlert>
-This changes the color of the route boundary gradient in the **Active Page** tab. When you hover over any route in the panel it will show you it's boundaries.
-</InfoAlert>
-
-The default value is `ice`.
-
-## Breakpoints
-
-This option allows you to define custom breakpoints that show in the bottom left corner of the panel to help you determine the current screen breakpoint you have defined.
-By default the breakpoints are set to tailwind breakpoints but you can change them to whatever you want.
-
-Eg:
-```ts
-breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
-```
-
-## Show breakpoint indicator
-
-This option allows you to show/hide the current breakpoint in the bottom left corner of the panel.
-
-## Show route boundaries on
-
-This option allows you to either show route boundaries when you hover a route segment on the pages tab or
-it shows a dedicated button called "Show Route Boundary" that shows the route boundary for that route on click.
-
-Default value is `click`;
-
-## Creating a custom configuration
-
-To create a custom configuration you can use the following code snippet:
-
-  ```ts
-  import { defineRdtConfig } from "react-router-devtools";
-
-  const customConfig = defineRdtConfig({
-    client: {
-      position: "top-right",
-      defaultOpen: true,
-      expansionLevel: 1,
-      height: 500,
-      minHeight: 300,
-      maxHeight: 1000,
-      hideUntilHover: true,
-      panelLocation: "bottom",
-      requireUrlFlag: true,
-      urlFlag: "customFlag",
-      routeBoundaryGradient: "gotham",
-      breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
-      showBreakpointIndicator: false
-    }
-  });
-
-  export default customConfig;
-  ```
-
-Then you can use this configuration in your `vite.config.js` file like this:
-
-```ts
-import customConfig from "./rdt.config";
-import { reactRouterDevTools } from "react-router-devtools";
-
-export default defineConfig({
-  plugins: [reactRouterDevTools(customConfig)],
-});
-```
-
-<InfoAlert title="Try it out!">
-  Try opening up the dev tools panel deployed on this site and playing around with the settings in the settings tab!
-</InfoAlert>
diff --git a/content/05-configuration/03-editor.mdx b/content/05-configuration/03-editor.mdx
deleted file mode 100644
index fa6f8b7..0000000
--- a/content/05-configuration/03-editor.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: React Router Devtools Editor Configuration
-description: Configuration options for the React Router Devtools to interface with your
-  editor
-summary: Beginner's Guide
----
-
-Everyone uses their own editors, so it's important to be able to configure the editor that React Router Devtools will open your files in.
-
-```ts
-type EditorConfig = {
-  name: string;
-  open(path: string, lineNumber: string | undefined): void;
-}
-```
-
-## `name`
-
-The name of the editor that will be displayed on the Open in Editor button.
-
-## `open`
-
-This function will be called when the user clicks the Open in Editor button. It will receive the path to the file and the line number to open the file at.
-This function will both handle the case where you shift + right click an element on the page AND the open in X button in the UI, they return different values
-so be sure to cover both of them.
-
-```ts
-import { exec } from "node:child_process";
-import { normalizePath } from "vite";
-
-function open(path: string, lineNumber: string | undefined) {
-  exec(`code -g "${normalizePath(path)}${lineNumber ? `:${lineNumber}` : ""}"`);
-}
-```
-
-## Editors
-
-Below are some examples of configurations for popular editors.
-
-### VS Code
-
-To use VS Code as your editor, you don't need to do anything, it's the default editor.
-
-### WebStorm
-
-To use WebStorm as your editor, you can use the following configuration:
-
-```ts
-import { exec } from "node:child_process";
-import { cwd } from "node:process";
-
-const editor = {
-  name: "WebStorm",
-  open(path, lineNumber) {
-    exec(
-      `webstorm "${process.cwd()}/${path}" --line ${lineNumber ? `--line ${lineNumber}` : ""}`.replace(
-        /\$/g,
-        "\\$",
-      ),
-    );
-  },
-};
-```
-
-### GoLand
-
-To use WebStorm as your editor, you can use the following configuration:
-
-```ts
-import { exec } from "node:child_process";
-import { cwd } from "node:process";
-
-const editor = {
-  name: "WebStorm",
-  open(path, lineNumber) {
-    if (!path) return;
-    exec(
-      `goland "${process.cwd()}/${path}" ${lineNumber ? `--line ${lineNumber}` : ""}`
-    );
-  },
-};
-```
diff --git a/content/05-configuration/04-server.mdx b/content/05-configuration/04-server.mdx
deleted file mode 100644
index 8ed8c70..0000000
--- a/content/05-configuration/04-server.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: React Router Devtools Server Configuration
-description: Configuration options for the React Router Devtools server
-summary: Beginner's Guide
----
-
-As with the client configuration, we will first see the full configuration type:
-
-```ts
-interface ReactRouterServerConfig {
-  silent?: boolean;
-  logs?: {
-    cookies?: boolean;
-    defer?: boolean;
-    actions?: boolean;
-    loaders?: boolean;
-    cache?: boolean;
-    siteClear?: boolean;
-    serverTimings?: boolean;
-  };
-}
-```
-
-## `silent`
-
-When `true`, the server will not log anything to the console. This is useful for production environments.
-
-## `logs`
-
-This object allows you to configure the server logs. Each key is a log type and the value is a boolean indicating whether to log that type.
-All are `true` by default so you don't have to provide anything, if you want to be granular you can, otherwise you can use the `silent` option to turn off
-all logs.
-
-### `cookies`
-
-When `true`, the server will log all cookies sent by the server in the "Set-Cookie" header.
-
-### `defer`
-
-When `true`, the server will log all deferred actions.
-The following gets logged:
-- The defer location
-- The keys that were deferred
-- The time it took for each key to resolve
-
-### `actions`
-
-When `true`, the server will log all actions that are hit with a request.
-
-### `loaders`
-
-When `true`, the server will log all loaders that are hit with a request.
-
-### `cache`
-
-When `true`, the server will log all loaders/actions that return a `Cache Control` header.
-
-### `siteClear`
-
-When `true`, the server will log when the site cache is cleared, or anything else with the `Clear-Site-Data` header.
-
-### `serverTimings`
-
-When `true`, the server will log all server timings that are returned with a request
-
-## `serverTimingThreshold`
-
-This option is used to set the threshold for server timings to be logged in the console.
-If the server timing is greater than this threshold, it will be logged in red, otherwise it will be logged in green.
-
-By default it is set to `Number.POSITIVE_INFINITY` which means that all server timings will be logged in green.
diff --git a/content/05-configuration/index.md b/content/05-configuration/index.md
deleted file mode 100644
index 460f763..0000000
--- a/content/05-configuration/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Configuration
----
diff --git a/content/05-contribution/01-contribution-guidelines.mdx b/content/05-contribution/01-contribution-guidelines.mdx
new file mode 100644
index 0000000..244248b
--- /dev/null
+++ b/content/05-contribution/01-contribution-guidelines.mdx
@@ -0,0 +1,99 @@
+---
+title: Contributing Guidelines
+summary: Contribution Guide
+description: Compact guide for improving docs or code.
+---
+
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
+
+## 1. Quick Actions
+- Edit this page β†’ forks (if needed), opens file, PR.
+- Report an issue β†’ prefilled page context.
+
+## 2. Fast Workflow
+```bash
+# one‑time
+git fork + clone
+pnpm install
+
+# generate + dev
+pnpm run generate:docs -- --branch main
+pnpm dev
+```
+Create a branch:
+```bash
+git checkout -b docs/update-installation
+```
+After changes:
+```bash
+pnpm run lint && pnpm run typecheck
+pnpm test
+git commit -m "docs: clarify installation"
+git push -u origin docs/update-installation
+```
+Open PR.
+
+## 3. What To Change
+Content (preferred first contribution):
+- Edit /content/**/*.mdx
+- Keep frontmatter: title, summary, description
+- Use number prefixes only for ordering.
+
+Code:
+- UI: app/components/*
+- Utilities: app/utils/*
+- Keep TypeScript strict and small focused changes.
+
+## 4. Frontmatter Pattern
+```md
+---
+title: Clear Title
+summary: One concise line
+description: Short descriptive sentence
+---
+```
+
+## 5. Testing (When Code Changes)
+```bash
+pnpm run lint
+pnpm run typecheck
+pnpm test
+```
+Add tests for new utils / non-trivial logic.
+
+## 7. Commit & PR
+Commits (Conventional):
+- docs: update quickstart
+- fix: sidebar active state
+- feat: add dark theme toggle
+
+PR description:
+- What / Why
+- Screenshots (if UI)
+- Follow-up considerations (if any)
+
+## 8. Content Quality Checklist
+- Clear title & summary
+- Description
+- Logical heading order
+- No TODO / FIXME left
+
+## 9. Issues
+Bug report include:
+- Steps
+- Expected vs actual
+- Environment (browser / OS)
+Feature request include:
+- Problem
+- Proposed solution (short)
+- Prior art (optional)
+
+
+## 10. Need Help?
+- Check existing pages
+- Skim recent merged PRs for patterns
+- Open an issue if unsure
+
+Thanks for improving the docsβ€”small focused PRs are easiest to review.
\ No newline at end of file
diff --git a/content/05-contribution/index.md b/content/05-contribution/index.md
new file mode 100644
index 0000000..f081874
--- /dev/null
+++ b/content/05-contribution/index.md
@@ -0,0 +1,3 @@
+---
+title: Contribution
+---
diff --git a/content/06-features/01-shortcuts.mdx b/content/06-features/01-shortcuts.mdx
deleted file mode 100644
index e579c2d..0000000
--- a/content/06-features/01-shortcuts.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Keyboard Shortcuts
-description: Detailed overview of all keyboard shortcuts in React Router Devtools
-summary: Beginner's Guide
----
-
-## Go To Source
-
-**Shift + Right Click**
-
-When you are in the browser and you want to go to the source code of a component, you can right click on the component
-while holding down shift. This will open the source code of the component in your code editor.
-
-## Opening/closing the DevTools
-
-**Shift + A**
-
-When you are in the browser and you want to open the React Router Devtools, you can press `Shift + A`.
-This will open the DevTools, if you're already in the DevTools, it will close it.
-
-While in the DevTools, you can also use `Esc` to close them.
-
-From version 4.2.0 is fully configurable and you can change the shortcut in the settings.
-
-We use [react-hotkeys-hook](https://www.npmjs.com/package/react-hotkeys-hook) to handle the keyboard shortcuts under the hood.
-You can adapt to their API to add your own shortcuts.
-
-Check out the settings tab for details
diff --git a/content/06-features/02-devtools.mdx b/content/06-features/02-devtools.mdx
deleted file mode 100644
index a0c209c..0000000
--- a/content/06-features/02-devtools.mdx
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: Devtools context
-description: Using the devtools context to trace events and send them to the network tab
-summary: Beginner's Guide
----
-
-## Devtools extended context
-
-The devtools context is a set of utilities that you can use in your data fetching functions to trace events
-in the network tab of react-router-devtools. You can also include them in your production builds if you do not want
-the hassle of having to optionally check if they are defined.
-
-The general usage of the devtools context is as follows:
-
-```ts
-// The devTools object is available in all data fetching functions
-export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // tracing is a set of utilities to be used in your data fetching functions to trace events
-  // in network tab of react-router-devtools
-  const startTime = tracing.start("my-event")
-  // do something here, eg DB call
-  tracing.end("my-event", startTime!)
-  return "data"
-}
-```
-
-You can also use the devtools context in your action functions:
-
-```ts
-export const action = async ({ request, devTools }: ActionFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // tracing is a set of utilities to be used in your data fetching functions to trace events
-  // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
-  // do something
-  tracing?.end("my-event", startTime!)
-  return "data"
-}
-```
-
-The devtools context is also available in your client loader and client action functions:
-
-```ts
-export const clientLoader = async ({ request, devTools }: ClientLoaderFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // tracing is a set of utilities to be used in your data fetching functions to trace events
-  // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
-  // do something
-  tracing?.end("my-event", startTime!)
-  return "data"
-}
-```
-
-```ts
-export const clientAction = async ({ request, devTools }: ClientActionFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // tracing is a set of utilities to be used in your data fetching functions to trace events
-  // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
-  // do something
-  tracing?.end("my-event", startTime!)
-  return "data"
-}
-```
-
-
-<InfoAlert>
- If you want to make the devTools available always in your project, you can set `includeInProd` to `{ devTools: true }` in your vite config.
-
- In production the trace calls won't do anything, but the tracing will be more convinient to use.
-
- If you do so you can also override the types by adding the following to your project:
- ```ts
- import type { ExtendedContext } from "react-router-devtools/context";
-
-	declare module "react-router" {
-		interface LoaderFunctionArgs {
-			devTools: ExtendedContext
-		}
-		interface ActionFunctionArgs {
-			devTools: ExtendedContext
-		}
-	}
- ```
-</InfoAlert>
-
-## RouteId
-
-The routeId is a string that is used to identify the route that is being processed. You can access it like so:
-```ts
-const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
-  const routeId = devTools?.routeId;
-  // do something with the routeId
-  return "data"
-}
-```
-
-## Tracing
-
-The tracing object contains all the utilities related to network tab tracing feature of react-router-devtools.
-
-
-There are three functions you can use:
-- trace
-- start
-- end
-
-
-
-### trace
-
-The `trace` function is a function that will trace the event given to it, pipe it to the network tab of react-router-devtools and show you analytics.
-
-This works by calling the provided function and analyzing the time it takes to execute it.
-
-```ts
-const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // this will be traced in the network tab of react-router-devtools
-  const user = tracing?.trace("my-event",() => getUser())
-
-	return { user }
-}
-```
-
-#### Parameters
-
-- `name` - The name of the event
-- `event` - The event to be traced
-
-#### Returns
-
-The result of the event
-
-### start
-
-The `start` function is a function that will start a trace for the name provided to it and return the start time.
-This is used together with `end` to trace the time of the event.
-
-```ts
-export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // this will be traced in the network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
-  // do something here, eg DB call
-
-	// End the trace
-  tracing?.end("my-event", startTime!)
-  return "data"
-}
-```
-
-<WarningAlert title="Warning">
- This function relies on you using the `end` with the same name as the start event, otherwise
-you will end up having a never ending loading bar in the network tab!
-</WarningAlert>
-
-
-#### Parameters
-
-- `name` - The name of the event
-
-#### Returns
-
-The start time of the event
-
-### end
-
-The `end` function is a function that will end a trace for the name provided to it and return the end time.
-
-```ts
-export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // this will be traced in the network tab of react-router-devtools
-  const startTime = tracing?.start("get user")
-  // do something here, eg DB call
-	const user = await getUser();
-	// End the trace
-  tracing?.end("get user", startTime!, { user })
-  return "data"
-
-}
-```
-
-#### Parameters
-
-- `name` - The name of the event
-- `startTime` - The start time of the sendEvent
-- `data` - The data to be sent with the event
-
-#### Returns
-
-The data provided in the last parameter
diff --git a/content/06-features/03-active-page-tab.mdx b/content/06-features/03-active-page-tab.mdx
deleted file mode 100644
index 5b8fdf5..0000000
--- a/content/06-features/03-active-page-tab.mdx
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: "Active Page Tab"
-description: "Detailed overview of all features on the active page tab."
-summary: "Beginner's Guide"
----
-
-The Active Page tab is the first tab that appears when you open up the dev tools panel. It contains an overview of all active loaders
-on the current page and detailed information about each loader.
-
-## Route boundaries
-
-The first feature we will go over is the route boundaries. This feature shows you the current route boundaries on the actual page.
-This is useful for debugging and testing purposes. It finds the `<Outlet />` component in the route and highlights it with a
-gradient background that can be set in the settings.
-
-<InfoAlert>
-  This feature is only available in the development mode because it used react dev tools to find the `<Outlet />` component.
-
-  If you want to try it open up the dev tools right now nad hover over `/docs/main` in the panel.
-
-  You can also change the gradient background color in the settings.
-</InfoAlert>
-
-## Loader list
-
-The loader list is a list of all active loaders on the current page. It shows the url segment of the loader,
-the loader type and the loader file.
-
-<InfoAlert>
-  The loader type is determined by the routing convention.
-  - `purple` - represents the root.tsx file
-  - `blue` - represents a pathless layout file
-  - `green` - represents a normal route file, whether index or not
-</InfoAlert>
-
-### Open in VS code
-
-Each segment has an **open in VS code** button that opens the loader file in VS code.
-This is useful for quick navigation to the loader file.
-
-<InfoAlert title="Caveat!">
-This only works if you have the `code` command installed in your terminal. If you don't have it installed you can
- install it by following the instructions [here](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line).
-</InfoAlert>
-
-### Loader data
-
-Each segment has a loader data **JSON** object that contains all the information returned by the loader of that segment.
-
-If you open the dev tools on this page  and look at the `/docs/main` segment you will see the **loader data object** which contains
-`metadata`, `tag`, `serverData`, `deferredServerData` and `key` properties.
-
-This part will contain everything returned from the server and it will be **hot swapped** if the data changes.
-
-<InfoAlert>
-  When keys are deferred on the server, the data will hot swap when the key is resolved on the client.
-
-</InfoAlert>
-
-### Route params
-
-The route params section contains all the route params for the current segment.
-
-This will contain all the **wildcard** params currently available on this route.
-
-If you open up the dev tools, you will be able to see that `tag` and `slug` are both in
-the route params.
-
-### Server info
-
-The server info section contains all the server information for the current segment, including:
-- `loaderTriggerCount` - the number of times the loader has been triggered (updates in real-time)
-- `actionTriggerCount` - the number of times the action has been triggered (updates in real-time)
-- `lowestExecutionTime` - the lowest execution time of the loader (updates in real-time)
-- `highestExecutionTime` - the highest execution time of the loader (updates in real-time)
-- `averageExecutionTime` - the average execution time of the loader (updates in real-time)
-- `lastLoaderInfo` - the last loader info object (updates in real-time), includes execution time, request headers and response headers.
-- `lastActionInfo` - the last action info object (updates in real-time), includes execution time, request headers and response headers.
-- `loaderCalls` - an array of loaderInfo objects ordered from most recent to least recent (updates in real-time)
-- `actionCalls` - an array of actionInfo objects ordered from most recent to least recent (updates in real-time)
-
-### handles
-
-The handles section contains all the handles for the current segment.
-
-This will contain all the **handles** currently available on this route.
-
-React Router allows you to export a custom **handle** export which can be anything, it will be shown here if it is exported.
-
-## Revalidation
-
-There is a **Revalidate** button that allows you to revalidate all the loaders on the page.
-
-
-## Timeline
-
-The timeline section on the right contains useful information on navigation and submission events in your application.
-
-Every time there is a navigation or submission event, a new entry will be added to the timeline on the top.
-
-It is limited to 50 entries and will remove the oldest entry when the limit is reached.
-
-The timeline will contain the following information for each event:
-- `type` - the type of event (navigation or submission, fetcher or normal)
-- `method` - the method of the event (GET, POST, PUT, DELETE)
-- `url` - the url of the event
-- `data sent` - the data sent in the event
-- `response` - the response of the event
-
-<InfoAlert>
-This only happens for events that change the state of the app, if there is a client-side navigation to a
-new location that has no loaders nothing will happen because the state has remained idle.
-</InfoAlert>
-
-### Clearing the timeline
-
-You can clear the timeline by clicking the **clear** button at the top right of the timeline.
diff --git a/content/06-features/04-routes-tab.mdx b/content/06-features/04-routes-tab.mdx
deleted file mode 100644
index de906b6..0000000
--- a/content/06-features/04-routes-tab.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Routes Tab
-description: Detailed overview of all features on the Routes Tab.
-summary: Beginner's Guide
----
-
-The Routes tab shows you all the routes in your React Router application either in the tree view or a list view.
-The default is the tree view which shows the routes in a nested tree structure. You can switch to the list view by
- clicking the list icon in the top left corner of the tab.
-
-The featureset is identical across both but only shown differently based on your preference.
-
-The only difference is the fact that the **tree view** shows you which routes are currently active on the page. This is
- indicated by a golden line going through the tree from the root to the active route. The **list view** does not have this
-  feature.
-
-## Route types
-
-There are three types of routes in react-router-devtools:
-- *root* - The root route is the first route that is loaded when you open the application.
-It is the first route in the tree. (purple)
-- *route* - A route is a route that is not a root route. It is a route that is nested under another route and has
-a url segment. (green)
-- *layout* - A layout is a route that is not a root route and is a special kind of route that does not have a url
-segment but provides only an outlet with some layout for the child routes (blue)
-
-## Route info
-
-Clicking on any route name will show you detailed information about that route. This includes the route's name, the
-route's path, the route's url, the route's file and does it contain the following things:
-- *loader* - The loader is the function that is called when the route is loaded. It is responsible for fetching the data
- needed for the route.
-- *action* - The action is the function that is called when the route is submitted. It is responsible for handling the
-  form submission.
-- *ErrorBoundary* - The ErrorBoundary is the component that is called when the route has an error. It is responsible for
-  showing the error message to the user.
-
-All of these segments are colored in either red or green indicating if it exists or not.
-
-<InfoAlert>
-  The error boundary will tell you if the error boundary for the current route comes from the route itself or is inherited
-  from a parent route. If it is inherited, it will show you the name of the parent route.
-</InfoAlert>
-
-## Wildcard parameters
-
-If a route has a wildcard parameter, it will be shown in the **Wildcard parameters** section which allows you to enter
-any value for the wildcard parameter. This is useful when combined with the **Open in Browser** button that redirects
-you to the route with the wildcard parameter.
-
-The wildcard values are saved in the browser so you can persist them across development sessions.
diff --git a/content/06-features/05-network-tab.mdx b/content/06-features/05-network-tab.mdx
deleted file mode 100644
index 89ab703..0000000
--- a/content/06-features/05-network-tab.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Network Tab
-description: Detailed overview of all features on the Network Tab.
-summary: Beginner's Guide
----
-
-The Network tab traces all the network requests that are happening in your application.
-
-It shows you all the requests in real-time, with the ability to see if they are aborted, if they are cached, and if they are successful or not.
-
-Clicking on a request will show you detailed information about that request. Additionally, you can shuffle through the requests with your keyboard.
-To shuffle through the requests, press the `←` and `β†’` keys.
-
-## Request types
-
-There are four types of requests in react-router-devtools:
-- **client-loader** - A client-loader is a request that is initiated by the client and is used to load data for a route.
-- **client-action** - A client-action is a request that is initiated by the client and is used to submit data to a route.
-- **loader** - A loader is a request that is initiated by the server and is used to load data for a route.
-- **action** - An action is a request that is initiated by the server and is used to submit data to a route.
-
-<InfoAlert>
-  Each of these is colored differently for you to be able to quickly identify them.
-- loader - green
-- client-loader - blue
-- action - purple
-- client-action - yellow
--	aborted requests - red
-</InfoAlert>
-
-## Request info
-
-Clicking on any request name will show you detailed information about that request. This includes the request's name, the
-request's method, the request's status, the request's start time, the request's end time, the request's type,
-the request's data, the request's headers, and if the request's cached.
-
-## Aborted requests
-
-If a request is aborted, it will be shown in red. This means that the request was aborted by the user.
diff --git a/content/06-features/06-errors-tab.mdx b/content/06-features/06-errors-tab.mdx
deleted file mode 100644
index b4819e8..0000000
--- a/content/06-features/06-errors-tab.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Errors Tab
-description: Detailed overview of all features on the Errors Tab.
-summary: Beginner's Guide
----
-
-The errors tab is a powerful tool for debugging issues with your react code, namely invalid HTML.
-It helps you detect potential HTML issues in your code, such as invalid HTML nesting or hydration issues.
-
-## Invalid HTML
-
-If you have invalidely nested HTML (eg. a `div` inside a `p`), you will see an error in the errors tab.
-These kind of nesting issues can cause unexpected behavior in your application, namely hydration issues.
-The browser does a lot of work to make sure that the HTML you send to the client is valid so it can
-sometimes move the order of elements around to make sure it's valid. This can cause unexpected hydration
-issues in your application.
-
-Whenever there is a case of this found in your html the errors tab will show you the error and the file
-where the error is found. If the error is found in a file that is a part of your project you can click on the
-file name to open the file in your editor and change the issue right away.
-
-## Hydration Mismatch
-
-Hydration mismatch is a common issue in React applications. It occurs when the server-rendered HTML does not match the
-HTML generated by the client. This can cause unexpected behavior in your application,
-such as the loss of user input or the loss of scroll position. In React Router it can also cause FOUC (Flash of Unstyled Content).
-
-To avoid hydration mismatch, you should make sure that the HTML generated by the server matches the HTML generated by
-the client.
-
-These kind of issues are very hard to track down because they can be caused by a lot of different things.
-
-If a hydration mismatch happens the errors tab will show you the **diff** between the server and client HTML, allowing
-you to analyze the differences and fix the issue.
-
-<InfoAlert>
-Hydration mismatches happen on document requests (hard refresh or initial load in React Router). So if you don't see it at first
-try refreshing your page.
-</InfoAlert>
diff --git a/content/06-features/07-settings-tab.mdx b/content/06-features/07-settings-tab.mdx
deleted file mode 100644
index 60e8838..0000000
--- a/content/06-features/07-settings-tab.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Settings Tab
-description: Detailed overview of all features on the Settings Tab.
-summary: Beginner's Guide
----
-
-The settings tab is where you can override the default settings for your project.
-
-
-## Position
-
-This option is used to set the position of the React Router Devtools trigger (the button that opens the panel). The possible values are:
-- `top-left` - the trigger will be positioned at the top left corner of the screen
-- `top-right` - the trigger will be positioned at the top right corner of the screen
-- `bottom-left` - the trigger will be positioned at the bottom left corner of the screen
-- `bottom-right` - the trigger will be positioned at the bottom right corner of the screen
-- `middle-left` - the trigger will be positioned at the middle left of the screen
-- `middle-right` - the trigger will be positioned at the middle right of the screen
-
-## Default Open
-
-This option is used to set the initial state of the panel. If set to `true` the panel will be open by default, if set to `false`
-the panel will be closed by default.
-
-## Expansion Level
-
-This option is used to set the initial expansion level of the returned JSON data in the **Active Page** tab. By default it is set to
-0 and if you open up the **Active Page** and look at the returned loader data it will look like this:
-
-```ts
-"data": { ... } +
-```
-
-If you set the expansion level to 1 the returned loader data will look like this:
-
-```ts
-"data": {
-    "property": "value"
-}
-```
-
-## Height
-
-This option is used to set the initial height of the panel. The default value is 400px.
-
-## Min Height
-
-This option is used to set the minimum height of the panel. The default value is 200px.
-
-## Max Height
-
-This option is used to set the maximum height of the panel. The default value is 800px.
-
-## Hide Until Hover
-
-This option is used to set whether the trigger should be hidden until you hover over it. The default value is `false`.
-
-## Panel Location
-
-This option is used to set the location of the panel. The possible values are:
-- `top` - the panel will be positioned at the top of the screen
-- `bottom` - the panel will be positioned at the bottom of the screen
-
-## Require URL Flag
-
-This option is used to set whether the panel should be opened only if the URL contains a specific flag. The default value is `false`.
-
-<WarningAlert title="Be careful!">
-If you set this option to `true` and you forget to set the URL flag, the panel will hide and you will not be able to see it
-until you enter the url flag.
-
-The default one is `rdt=true` and if you set this option to `true` you will have to add `?rdt=true` to the URL in order to see the panel.
-</WarningAlert>
-
-## URL Flag
-
-This option is used to set the URL flag that is required to open the panel. The default value is `rdt`.
-
-You can set it to whatever you wish and if you set the **Require URL Flag** option to `true` you will have to add `?yourFlag=true` to the URL in order to see the panel.
-
-## Route Boundary Gradient
-
-This option is used to set the color of the route boundary gradient. The possible values are:
-- `sea`
-- `hyper`
-- `gotham`
-- `gray`
-- `watermelon`
-- `ice`
-- `silver`
-
-<InfoAlert>
-This changes the color of the route boundary gradient in the **Active Page** tab. When you hover over any route in the panel it will show you it's boundaries.
-</InfoAlert>
-
-The default value is `ice`.
diff --git a/content/06-features/08-detach.mdx b/content/06-features/08-detach.mdx
deleted file mode 100644
index 5526693..0000000
--- a/content/06-features/08-detach.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Detached mode
-description: How you can detach your panel into a new window
-summary: Beginner's Guide
----
-
-There is a special button on the bottom left side of the panel above the X button.
-When you click on it, the panel will detach and open in a new window.
-
-The detached window will keep in sync with the main panel and will show the same content.
-The logs on the server will happen twice, once for the main panel and once for the detached window.
-
-When you close the detached window, or the main panel, the other one will be terminated and closed.
-In case the detached mode hangs for some reason, you can always return it to the main site by
-clicking the trigger while in detached mode.
diff --git a/content/06-features/index.md b/content/06-features/index.md
deleted file mode 100644
index ea7f610..0000000
--- a/content/06-features/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Features
----
diff --git a/content/07-guides/01-migration.mdx b/content/07-guides/01-migration.mdx
deleted file mode 100644
index 37d03db..0000000
--- a/content/07-guides/01-migration.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Migration guide
-description: Migration guide from remix-development-tools
-summary: Beginner's Guide
----
-
-### vite.config.ts
-
-If you're migrating your `remix-development-tools` from v4.x to react-router v7 and you were already running it as
-a Vite plugin here is all you need to do:
-
-```diff
-import { defineConfig } from 'vite';
-- import { vitePlugin as remix } from '@remix-run/dev';
-+ import { reactRouter } from '@react-router/dev/vite';
-- import { remixDevTools } from 'remix-development-tools'
-+ import { reactRouterDevTools } from 'react-router-devtools'
-
-export default defineConfig({
--  plugins: [remixDevTools(), remix()],
-+  plugins: [reactRouterDevTools(), reactRouter()],
-})
-```
-
-
-And that's it! You should be good to go. If you have any issues, please reach out to us.
diff --git a/content/07-guides/02-plugins.mdx b/content/07-guides/02-plugins.mdx
deleted file mode 100644
index 68f9e37..0000000
--- a/content/07-guides/02-plugins.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Plugins
-description: React Router Devtools plugins
-summary: Beginner's Guide
----
-
-## Plugins in Vite
-Plugins work in a different way in Vite. You create a directory for plugins and just provide the path to the directory to the plugin. The plugin will automatically import all the plugins from the directory and add them to the dev tools. You only need to make sure your exports are named exports and not default exports and that they are uniquely named.
-
-You can create a directory called plugins in your project and add your plugins there. Then you can add the following to your vite.config.js file:
-```ts
-import { reactRouterDevTools } from "react-router-devtools";
-export default defineConfig({
-  plugins: [
-    reactRouterDevTools({
-      pluginDir: "./plugins"
-  })],
-});
-```
-
-After you're done share your plugin with the community by opening a discussion and a PR with the plugin to the repo!
diff --git a/content/07-guides/04-hydrogen-oxygen.mdx b/content/07-guides/04-hydrogen-oxygen.mdx
deleted file mode 100644
index efbd9eb..0000000
--- a/content/07-guides/04-hydrogen-oxygen.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: "Integration with Shopify Hydrogen and Oxygen"
-description: "Guide on getting react-router-devtools working with Shopify Hydrogen and Oxygen"
-summary: "Beginner's Guide"
----
-
-## Adding react-router-devtools to your project
-
-Even though react-router-devtools is an ESM package, some of the dependencies it relies on are unfortunately not. This means that
-these dependencies will break the shopify CLI when running your React Router app built on top of Shopify Hydrogen and Oxygen.
-
-In case your package.json script `dev` command looks like this:
-
-```json
-"dev": "shopify hydrogen dev --codegen",
-```
-
-This means you'll have to do the following to get it working.
-
-Go to your `vite.config.ts` and add `react-router-devtools`, depending on your project the file will look something like this:
-```diff
-import { defineConfig } from 'vite';
-import { hydrogen } from '@shopify/hydrogen/vite';
-import { oxygen } from '@shopify/mini-oxygen/vite';
-import { reactRouter } from '@react-router/dev/vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
-+ import { reactRouterDevTools } from 'react-router-devtools';
-export default defineConfig({
-  plugins: [
-+   reactRouterDevTools(),
-    hydrogen(),
-    oxygen(),
-    reactRouter({
-      presets: [hydrogen.preset()]
-    }),
-    tsconfigPaths(),
-  ],
-  build: {
-    assetsInlineLimit: 0,
-  },
-  ssr: {
-    optimizeDeps: {
-      include: [],
-    },
-  },
-});
-
-```
-## Adding problematic dependencies
-
-Add the following dependencies to `ssr.optimizeDeps.include` array:
-```diff
-export default defineConfig({
-  plugins: [
-    reactRouterDevTools(),
-    hydrogen(),
-    oxygen(),
-    reactRouter({
-      presets: [hydrogen.preset()]
-    }),
-    tsconfigPaths(),
-  ],
-  build: {
-    assetsInlineLimit: 0,
-  },
-+  ssr: {
-+    optimizeDeps: {
-+      include: [
-+        'beautify',
-+        'react-diff-viewer-continued',
-+        'react-d3-tree',
-+      ],
-+    },
-+  },
-});
-```
-
-### Debugging issues
-If you're still having issues, look at the error log output by the Shopify CLI and see if there are any errors related to the dependencies, the usual errors you might see are:
-- `require is not defined`
-- `module.exports is not defined`
-- `Cannot find module 'X'`
-
-This all indicated that there is a problem with a dependency that is used by react-router-devtools. Sometimes it's even a dependency not
-directly used by react-router-devtools, but it's a dependency of a dependency that is used by react-router-devtools.
-
-So if adding the first depedency in the error stack strace does not work, see if there are any additional dependencies in the stack trace before
-react-router-devtools. This package will be the last one in the stack trace.
-
-
-Enjoy your new react-router-devtools πŸš€
diff --git a/content/07-guides/05-contributing.mdx b/content/07-guides/05-contributing.mdx
deleted file mode 100644
index 0ebc9a2..0000000
--- a/content/07-guides/05-contributing.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: "Contributing to React Router Devtools"
-description: "Contributions to React Router Devtools are welcome! To contribute, please follow these guidelines."
-summary: "Beginner's Guide"
-
----
-
-## Contributing
-
-Contributions to React Router Devtools are welcome! To contribute, please follow these guidelines:
-
-1. Fork the repository and clone it locally.
-2. Create a new branch for your feature or bug fix.
-3. Run `npm install`
-4. Run `npm run dev` to start the development server with a vanilla React Router app setup.
-5. Implement your changes, adhering to the existing code style and best practices.
-5. Please add tests for any new features or bug fixes.
-6. Commit and push your changes to your forked repository.
-7. Open a pull request, providing a clear description of your changes and their purpose.
diff --git a/content/07-guides/index.md b/content/07-guides/index.md
deleted file mode 100644
index 5bf01e8..0000000
--- a/content/07-guides/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Guides
----
diff --git a/content/_index.mdx b/content/_index.mdx
index 0f0f79b..acda966 100644
--- a/content/_index.mdx
+++ b/content/_index.mdx
@@ -1,33 +1,113 @@
 ---
-title: Quick Start
-summary: React Router Devtools is a set of tools that help you to develop your React Router application.
-description: React Router Devtools is a set of tools that help you to develop your React Router application.
+title: "Forge42 Docs Template"
+summary: "High-level map and complete guide to configuring, customizing, and deploying the Forge42 Documentation Template."
+description: "Orientation guide for configuring docs, routing, SEO, versioning, deployment, customization, and contributions."
 ---
+<WarningAlert>
+ Documentation for `docs-template` is still under construction. Some sections may be incomplete or change frequently.
+</WarningAlert>
 
-This documentation covers everything you need to know to get started with `react-router-devtools`.
+Welcome to the official documentation for the **Forge42 Documentation Template**!
+This template provides a modern, scalable solution for building beautiful documentation websites with **React Router v7**, **Content Collections**, and **Tailwind CSS**.
 
-## Prerequisites
+It is **production‑ready** out of the box, with versioning, search, SEO, collaboration links, and deployment automation.
 
-- React Router version **7.0** or higher.
-- Your project needs to run on **ESM**. If you are using CommonJS, you will need to convert your project to ESM.
+---
+
+## At a Glance
+
+- Per‑page meta tags & SEO defaults
+- Versioned documentation system
+- Dynamic sidebar with previous/next navigation
+- Table of contents with active heading tracking
+- Command‑K search palette
+- Theme support with light/dark mode
+- Easy UI customization (layout & components)
+- Automatic docs build & deployment on GitHub release
+- Collaboration links (β€œEdit page”, β€œReport an issue”)
+- Fly.io deployment configuration & CI/CD automation
+
+---
+
+## Quick Start
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/forge42/docs-template my-docs
+   cd my-docs
+   ```
+
+2. **Install dependencies**
+   ```bash
+   pnpm install
+   ```
+
+3. **Generate documentation**
+   ```bash
+   pnpm run generate:docs --versions ">=v1.1.0 <=v2.1.0, v3.2.0"
+   ```
+
+	 or if you don't have releases yet:
+
+	 ```bash
+	 pnpm run generate:docs --branch main"
+	 ```
 
-## Why ESM?
+4. **Start development server**
+   ```bash
+   pnpm run dev
+   ```
 
-In order to use the full feature-set of **Vite** the project has to run on ESM. This is because Vite exposes a websocket
-that **react-router-devtools** uses to communicate with the server. This websocket is **only** available in ESM projects
-because it's exposed by `import.meta` which is only available in ESM.
+Visit **[http://localhost:4280](http://localhost:4280)** to preview your site.
 
-To avoid creating user confusion and giving you a subpar experience, we have decided to only support ESM projects running on Vite.
+---
+
+## Project Structure
+
+```
+my-docs/
+β”œβ”€β”€ app/              # React Router application
+β”œβ”€β”€ content/          # Documentation content (Markdown/MDX)
+β”œβ”€β”€ public/           # Static assets
+β”œβ”€β”€ scripts/          # Build & utility scripts
+β”œβ”€β”€ generated-docs/   # Auto-generated docs
+└── resources/        # Icons, photos, fonts...
+```
+
+---
+
+## Core Features
 
+### Content Management
+- Write in Markdown/MDX with frontmatter
+- Automatic sidebar and navigation generation
+- Built-in rich content components
 
-## Why use `react-router-devtools`?
+### Search & Navigation
+- Full‑text search with **Cmd+K / Ctrl+K**
+- Automatic table of contents
+- Previous/next page navigation
 
-`react-router-devtools` is a set of tools that help you to develop your React Router application.
+### SEO & Discovery
+- **llms.txt** route for AI crawlers
+- **robots.txt** with sitemap hints
+- **sitemap-index.xml** + per‑language `sitemap.xml`
+- Social meta tags (Open Graph / Twitter)
+
+### Collaboration & Contribution
+- One‑click links: **Edit page** / **Report issue**
+- Contribution guide included
+
+### Deployment & Automation
+- Example **Fly.io** config
+- Scripted docs generation
+- CI workflow ready for build + deploy
+
+### Customization
+- Update branding, theme, layout shell
+- Extend sidebar, meta builder, and contribution links
+- Tailwind tokens for typography & colors
+
+---
 
-They help you, but are not limited to, to do the following things:
-- **Loader data display** - You can see the data that is being loaded by your loaders.
-- **Route display** - You can see the routes that are being used by your application in list/tree format.
-- **Error tracking** - You can see invalid HTML rendered on your page and where it's coming from.
-- **Hydration mismatch tracking** - You can see if there are any hydration mismatches in your application, what was rendered on the client and what was rendered on the server.
-- **Server logs** - You can see the logs of your server in the browser.
-- **Route boundaries** - You can see the route boundaries by hovering over elements.
+Built with ❀️ by the Forge42 team β€” [forge42.dev](https://forge42.dev)
\ No newline at end of file
diff --git a/fly.toml b/fly.toml
index 7dc08e2..7c74507 100644
--- a/fly.toml
+++ b/fly.toml
@@ -1,9 +1,9 @@
-# fly.toml app configuration file generated for docs-template-test on 2025-09-19T15:08:49+02:00
+# fly.toml app configuration file generated for docs-template-main on 2025-10-03T11:40:42+02:00
 #
 # See https://fly.io/docs/reference/configuration/ for information about how to use this file.
 #
 
-app = 'docs-template-test'
+app = 'docs-template-main'
 primary_region = 'fra'
 
 [build]
@@ -17,6 +17,4 @@ primary_region = 'fra'
   processes = ['app']
 
 [[vm]]
-  memory = '256mb'
-  cpu_kind = 'shared'
-  cpus = 1
+  size = 'shared-cpu-1x'
diff --git a/resources/icons/bot.svg b/resources/icons/bot.svg
new file mode 100644
index 0000000..812ca34
--- /dev/null
+++ b/resources/icons/bot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot-icon lucide-bot"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
\ No newline at end of file
diff --git a/resources/icons/code.svg b/resources/icons/code.svg
new file mode 100644
index 0000000..c8c1105
--- /dev/null
+++ b/resources/icons/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-icon lucide-code"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>
\ No newline at end of file
diff --git a/resources/icons/file-text.svg b/resources/icons/file-text.svg
new file mode 100644
index 0000000..4be6f34
--- /dev/null
+++ b/resources/icons/file-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text-icon lucide-file-text"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
\ No newline at end of file
diff --git a/resources/icons/palette.svg b/resources/icons/palette.svg
new file mode 100644
index 0000000..47a44c2
--- /dev/null
+++ b/resources/icons/palette.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette-icon lucide-palette"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/resources/icons/shield-check.svg b/resources/icons/shield-check.svg
new file mode 100644
index 0000000..e9dc0d9
--- /dev/null
+++ b/resources/icons/shield-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check-icon lucide-shield-check"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
\ No newline at end of file