Merge pull request #183 from deploystackio/feat/categories

Feat/categories

Author: Lasim

.gitignore

@@ -75,4 +75,6 @@ coverage/
 ._*.json
 ._*.ts
 ._*.tsx
+._*.css
+._*.cjs
 out/

README.md

@@ -1,6 +1,6 @@
 # DeployStack Documentation
 
-This repository contains the official documentation site for the [DeployStack](https://deploystack.io/docs/) ecosystem, built with [fumadocs](https://fumadocs.vercel.app/). Visit [deploystack.io](https://deploystack.io) to learn more about our platform.
+This repository contains the official documentation site for [DeployStack](https://deploystack.io/docs/), The Complete MCP Management Platform, built with [fumadocs](https://fumadocs.vercel.app/). Visit [deploystack.io](https://deploystack.io) to learn more about our platform.
 
 ## Technology Stack
 
@@ -15,9 +15,14 @@ This repository contains the official documentation site for the [DeployStack](h
 ```text
 .
 ├── docs/                  # Documentation content (MDX files)
-│   ├── deploystack/       # DeployStack documentation
-│   ├── docker-to-iac/     # Docker-to-IaC documentation
-│   └── assets/            # Images and static assets
+│   ├── development/       # Development documentation
+│   │   ├── backend/       # Backend development guides
+│   │   ├── frontend/      # Frontend development guides
+│   │   └── gateway/       # Gateway architecture & implementation
+│   ├── self-hosted/       # Self-hosting guides
+│   ├── deploystack/       # Core DeployStack documentation
+│   ├── assets/            # Images and static assets
+│   └── ...                # MCP guides and configuration docs
 ├── app/                   # Next.js app directory (fumadocs framework)
 ├── lib/                   # Documentation utilities & components
 └── source.config.ts       # Fumadocs configuration
@@ -54,8 +59,9 @@ npm run lint:links   # Link validation
 3. **Navigation**: Use `meta.json` files in each directory to control navigation structure
 4. **Assets**: Place images in `docs/assets/images/` with appropriate subdirectories
 5. **Links**: Use absolute paths for all references:
-   - Documentation: `/docs/docker-to-iac/`
+   - Documentation: `/docs/development/gateway/`
    - Images: `/docs/assets/images/example.png`
+6. **Brand Colors**: Use the primary color (`text-primary`, `bg-primary`) for consistency - avoid introducing other accent colors
 
 ### Navigation Structure
 

app/[[...slug]]/page.tsx

@@ -3,7 +3,7 @@ import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import { HomeLayout } from 'fumadocs-ui/layouts/home';
 import { DocsPage, DocsBody } from 'fumadocs-ui/page';
 import { notFound } from 'next/navigation';
-import { source } from '@/lib/source';
+import { source, mainSource, developmentSource, selfHostedSource } from '@/lib/source';
 import { generatePageMetadata, getCanonicalUrl } from '@/lib/seo-utils';
 import { getFinalPageTitle } from '@/lib/h1-extractor';
 import { readFile } from 'fs/promises';
@@ -41,12 +41,25 @@ export default async function Page({
     );
   }
 
+  // Determine which section we're in and get the appropriate page tree
+  const firstSegment = slug[0];
+  let pageTree = mainSource.pageTree;
+  let navTitle = 'DeployStack Docs';
+  
+  if (firstSegment === 'development') {
+    pageTree = developmentSource.pageTree;
+    navTitle = 'Development Docs';
+  } else if (firstSegment === 'self-hosted') {
+    pageTree = selfHostedSource.pageTree;
+    navTitle = 'Self-Hosted Docs';
+  }
+
   return (
     <DocsLayout
       {...docsOptions}
-      tree={source.pageTree}
+      tree={pageTree}
       nav={{
-        title: 'DeployStack Docs',
+        title: navTitle,
         url: '/',
       }}
       sidebar={{
@@ -63,18 +76,8 @@ export default async function Page({
 }
 
 export async function generateStaticParams() {
-  const params = source.generateParams();
-
-  const result = [
-    ...params,
-    ...docs.docs
-      .filter((page: any) => page._file.flattenedPath)
-      .map((page: any) => ({
-        slug: page._file.flattenedPath.split('/'),
-      })),
-  ];
-
-  return result;
+  // Simply use the unified source generateParams
+  return source.generateParams();
 }
 
 export async function generateMetadata({

app/global.css

@@ -1,5 +1,37 @@
-/* Import Fumadocs UI complete styles */
-@import 'fumadocs-ui/css/style.css';
+/* Import Tailwind CSS v4 and Fumadocs UI presets */
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+
+/* Include Fumadocs UI source for Tailwind v4 */
+@source '../node_modules/fumadocs-ui/dist/**/*.js';
+
+/* Define primary color in Tailwind v4 @theme directive */
+@theme {
+  /* Primary color - Teal theme matching DeployStack brand */
+  --color-primary: hsl(177, 79%, 28%); /* Teal-700 */
+  --color-primary-foreground: hsl(0, 0%, 100%); /* White text on primary */
+  
+  /* Additional variants */
+  --color-primary-hover: hsl(176, 79%, 23%); /* Darker teal for hover states */
+  --color-primary-light: hsl(174, 72%, 56%); /* Lighter teal variant */
+  --color-primary-dark: hsl(176, 100%, 16%); /* Darker teal variant */
+}
+
+/* Dark mode color overrides */
+:root {
+  /* Light mode is default, defined in @theme above */
+}
+
+.dark {
+  /* Dark mode primary colors */
+  --color-primary: hsl(174, 72%, 56%); /* Lighter teal for dark mode */
+  --color-primary-foreground: hsl(176, 100%, 6%); /* Dark text on primary in dark mode */
+  
+  --color-primary-hover: hsl(173, 68%, 64%); /* Lighter on hover in dark mode */
+  --color-primary-light: hsl(172, 66%, 70%); /* Even lighter variant */
+  --color-primary-dark: hsl(177, 79%, 28%); /* Original teal for contrast */
+}
 
 /* Custom navbar styling to match main site */
 /* Navbar height override removed since navbar is now inside content area */
@@ -12,21 +44,21 @@
 
 /* Style the login button to match main site */
 [data-fumadocs-nav] a[href*="login"] {
-  background: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
   border-radius: 9999px;
   padding: 0.5rem 1rem;
   font-weight: 500;
   transition: background-color 0.2s ease;
 }
 
 [data-fumadocs-nav] a[href*="login"]:hover {
-  background: hsl(var(--primary) / 0.9);
+  background: var(--color-primary-hover);
 }
 
 /* Ensure Documentation link is highlighted when active */
 [data-fumadocs-nav] a[href="/docs"][data-active="true"] {
-  color: hsl(var(--primary));
+  color: var(--color-primary);
   font-weight: 600;
 }
 

app/layout.config.tsx

@@ -13,11 +13,6 @@ const baseConfig = {
 export const homeOptions: BaseLayoutProps = {
   ...baseConfig,
   links: [
-    {
-      text: 'MCP Server',
-      url: 'https://deploystack.io/mcp',
-      external: true,
-    },
     {
       text: 'Changelog',
       url: 'https://deploystack.io/changelog',

docs/deploystack/auth.mdx renamed to docs/auth.mdx

@@ -229,4 +229,4 @@ For developers and integrations, DeployStack provides REST API endpoints for aut
 
 ---
 
-For technical implementation details, see the [Backend Authentication Documentation](/deploystack/development/backend/api) and [Global Settings Management](/deploystack/global-settings).
+For technical implementation details, see the [Backend Authentication Documentation](/development/backend/api) and [Global Settings Management](/global-settings).