Merge pull request #189 from deploystackio/feat/imp2

Feat/imp2

Author: Lasim

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

@@ -1,14 +1,14 @@
 import type { Metadata } from 'next';
 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, mainSource, developmentSource, selfHostedSource } from '@/lib/source';
+import { source } from '@/lib/source';
 import { generatePageMetadata, getCanonicalUrl } from '@/lib/seo-utils';
 import { getFinalPageTitle } from '@/lib/h1-extractor';
 import { readFile } from 'fs/promises';
 import { getMDXComponents } from '@/mdx-components';
-import { homeOptions, docsOptions } from '../layout.config';
+import { docsOptions } from '../layout.config';
+import { generateTechArticleSchema, generateBreadcrumbSchema, combineSchemas } from '@/lib/structured-data';
 
 export default async function Page({
   params,
@@ -24,53 +24,65 @@ export default async function Page({
 
   const MDX = page.data.body;
 
-  // Determine if this is the root page (no sidebar needed)
-  const isRootPage = !slug || slug.length === 0;
+  // Generate structured data for all pages with content
+  let structuredData = '';
+  if (slug && slug.length > 0) {
+    const slugString = slug.join('/');
+    const url = `https://deploystack.io/docs/${slugString}`;
+    
+    // Get the final title (same logic as in generateMetadata)
+    let finalTitle = page.data.title;
+    try {
+      const filePath = page.file.path;
+      const absolutePath = `./docs/${filePath}`;
+      const rawContent = await readFile(absolutePath, 'utf-8');
+      finalTitle = getFinalPageTitle(rawContent, page.data.title);
+    } catch (error) {
+      finalTitle = page.data.title;
+    }
 
-  // Use HomeLayout for root page (no sidebar), DocsLayout for all other pages
-  if (isRootPage) {
-    return (
-      <HomeLayout {...homeOptions}>
-        <div className="container max-w-6xl mx-auto px-4 py-8">
-          <article className="prose prose-neutral dark:prose-invert max-w-none">
-            <MDX components={getMDXComponents()} />
-          </article>
-        </div>
-      </HomeLayout>
-    );
+    const articleSchema = generateTechArticleSchema({
+      title: finalTitle,
+      description: page.data.description,
+      slug,
+      url,
+    });
+    
+    const breadcrumbSchema = generateBreadcrumbSchema(slug);
+    structuredData = combineSchemas(articleSchema, breadcrumbSchema);
   }
 
-  // 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';
-  }
+  // Always use the unified source pageTree that includes all sections
+  // Instead of switching between different trees, show all sections together
+  const pageTree = source.pageTree;
 
+  // Always use DocsLayout with sidebar for all pages including root
   return (
-    <DocsLayout
-      {...docsOptions}
-      tree={pageTree}
-      nav={{
-        title: navTitle,
-        url: '/',
-      }}
-      sidebar={{
-        defaultOpenLevel: 1
-      }}
-    >
-      <DocsPage toc={page.data.toc} full={page.data.full}>
-        <DocsBody>
-          <MDX components={getMDXComponents()} />
-        </DocsBody>
-      </DocsPage>
-    </DocsLayout>
+    <>
+      {structuredData && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: structuredData }}
+        />
+      )}
+      <DocsLayout
+        {...docsOptions}
+        tree={pageTree}
+        nav={{
+          title: 'DeployStack Docs',
+          url: '/',
+        }}
+        sidebar={{
+          defaultOpenLevel: 1
+        }}
+      >
+        <DocsPage toc={page.data.toc} full={page.data.full}>
+          <DocsBody>
+            <MDX components={getMDXComponents()} />
+          </DocsBody>
+        </DocsPage>
+      </DocsLayout>
+    </>
   );
 }
 

app/layout.tsx

@@ -1,6 +1,7 @@
 import { RootProvider } from 'fumadocs-ui/provider';
 import type { ReactNode } from 'react';
 import type { Metadata } from 'next';
+import { generateWebSiteSchema, generateOrganizationSchema, combineSchemas } from '@/lib/structured-data';
 import './global.css'; // Import global styles
 
 export const metadata: Metadata = {
@@ -25,8 +26,19 @@ export const metadata: Metadata = {
 };
 
 export default function Layout({ children }: { children: ReactNode }) {
+  // Generate site-wide structured data
+  const websiteSchema = generateWebSiteSchema();
+  const organizationSchema = generateOrganizationSchema();
+  const structuredData = combineSchemas(websiteSchema, organizationSchema);
+
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: structuredData }}
+        />
+      </head>
       <body
         // Using Tailwind CSS classes for basic layout styling
         // Ensure these are compatible with Fumadocs/your design