feat: update .gitignore and improve MDX component integration for enhanced documentation structure

Author: Lasim

.gitignore

@@ -23,18 +23,17 @@ node_modules/
 .idea/
 .DS_Store
 
-# Next.js build outputs
-.next/
-out/
-dist/
-build/
+# outputs
+.turbo
+.next
+dist
+.contentlayer
+.eslintcache
+.source
 
 # Next.js cache
 .next/cache/
 
-# Vercel deployment outputs
-.vercel/
-
 # Fumadocs generated files
 .fumadocs/
 

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

@@ -6,6 +6,7 @@ import { generatePageMetadata, getCanonicalUrl } from '@/lib/seo-utils';
 import { CustomNavbar } from '@/lib/components/CustomNavbar';
 import { getFinalPageTitle } from '@/lib/h1-extractor';
 import { readFile } from 'fs/promises';
+import { getMDXComponents } from '@/mdx-components';
 
 export default async function Page({
   params,
@@ -25,7 +26,7 @@ export default async function Page({
     <DocsPage toc={page.data.toc} full={page.data.full}>
       <CustomNavbar />
       <DocsBody>
-        <MDX />
+        <MDX components={getMDXComponents()} />
       </DocsBody>
     </DocsPage>
   );

app/global.css

@@ -1,14 +1,5 @@
-/* Import Tailwind CSS */
-@import 'tailwindcss';
-
-/* Import Fumadocs UI base styles */
-/* From the docs:
-   @import 'tailwindcss'; // Already handled by individual imports above for clarity
-   @import 'fumadocs-ui/css/neutral.css';
-   @import 'fumadocs-ui/css/preset.css';
-*/
-@import 'fumadocs-ui/css/neutral.css'; /* Recommended for a neutral color palette */
-@import 'fumadocs-ui/css/preset.css'; /* Core Fumadocs UI styles */
+/* Import Fumadocs UI complete styles */
+@import 'fumadocs-ui/css/style.css';
 
 /* Custom navbar styling to match main site */
 /* Navbar height override removed since navbar is now inside content area */

docs/deploystack/index.mdx

@@ -20,3 +20,4 @@ DeployStack helps you deploy Docker Compose and Docker Run applications across d
 - [Docker-to-IaC Module Documentation](/docs/docker-to-iac/index.md)
 - [Join our Discord](https://discord.gg/UjFWwByB)
 - [Visit DeployStack](https://deploystack.io)
+

mdx-components.tsx

@@ -1,9 +1,5 @@
-import defaultMdxComponents from 'fumadocs-ui/mdx';
-import type { ComponentType } from 'react';
-
-type MDXComponents = {
-  [key: string]: ComponentType<any>;
-};
+import defaultComponents from 'fumadocs-ui/mdx';
+import type { MDXComponents } from 'mdx/types';
 
 // You can add your own global components here
 const customComponents: MDXComponents = {
@@ -13,7 +9,7 @@ const customComponents: MDXComponents = {
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
-    ...defaultMdxComponents,
+    ...defaultComponents,
     ...customComponents,
     ...components,
   };

next.config.mjs

@@ -1,9 +1,6 @@
 import { createMDX } from 'fumadocs-mdx/next';
 
-const withMDX = createMDX({
-  // Options for fumadocs-mdx
-  // source: './source.config.ts' // Default, if you have custom options for content
-});
+const withMDX = createMDX();
 
 /** @type {import('next').NextConfig} */
 const config = {

source.config.ts

@@ -1,4 +1,4 @@
-import { defineDocs, frontmatterSchema } from 'fumadocs-mdx/config';
+import { defineDocs, defineConfig, frontmatterSchema } from 'fumadocs-mdx/config';
 import { z } from 'zod';
 
 export const docs = defineDocs({
@@ -11,3 +11,14 @@ export const docs = defineDocs({
     }),
   },
 });
+
+export default defineConfig({
+  mdxOptions: {
+    rehypeCodeOptions: {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+    },
+  },
+});