Merge pull request #382 from nocodb/tags-new-pages

Author: DarkPhoenix2704

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

@@ -6,6 +6,8 @@ import ClerkTOCItems from "fumadocs-ui/components/layout/toc-clerk";
 import { PageTOC } from "fumadocs-ui/layouts/docs/page";
 import { DocsBody, DocsDescription, DocsTitle } from "fumadocs-ui/page";
 import { notFound } from "next/navigation";
+import Link from "next/link";
+import { Tag } from "lucide-react";
 import TOCMobile from "@/components/layout/TOCMobile";
 import MdxLink from "@/components/mdx/MdxLink";
 import { source } from "@/lib/source";
@@ -21,6 +23,7 @@ export default async function Page(props: {
   }
 
   const MDXContent = page.data.body;
+  const tags = (page.data as any).tags as string[] | undefined;
 
   return (
     <TOCProvider toc={page.data.toc}>
@@ -43,6 +46,23 @@ export default async function Page(props: {
               })}
             />
           </DocsBody>
+          
+          {tags && tags.length > 0 && (
+            <div className="flex flex-wrap items-center gap-2 pt-2">
+              <Tag className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm text-muted-foreground">Tags:</span>
+              {tags.map((tag) => (
+                <Link
+                  key={tag}
+                  href={`/docs/tags/${tag.toLowerCase().replace(/\s+/g, "-")}`}
+                  className="inline-flex items-center rounded-md border border-nc-border-grey-light bg-nc-background-default px-2.5 py-0.5 text-sm font-medium transition-colors hover:border-nc-border-grey hover:bg-nc-background-grey-light hover:text-nc-content-brand"
+                >
+                  {tag}
+                </Link>
+              ))}
+            </div>
+          )}
+          
           <Cards>
             {getPageTreePeers(source.pageTree, page.url)
               .slice(0, 2)

app/docs/tags/[tag]/page.tsx

@@ -0,0 +1,87 @@
+import { Card, Cards } from "fumadocs-ui/components/card";
+import { notFound } from "next/navigation";
+import { source } from "@/lib/source";
+
+export default async function TagPage(props: {
+  params: Promise<{ tag: string }>;
+}) {
+  const params = await props.params;
+  const tagSlug = decodeURIComponent(params.tag);
+
+  const pages = source.getPages().filter((page) => {
+    const tags = (page.data as any).tags as string[] | undefined;
+    return tags?.some((t) => t.toLowerCase().replace(/\s+/g, "-") === tagSlug.toLowerCase());
+  });
+
+  // Find the actual tag name (with proper casing) from the first matching page
+  const actualTag = pages.length > 0 
+    ? ((pages[0].data as any).tags as string[] | undefined)?.find(
+        (t) => t.toLowerCase().replace(/\s+/g, "-") === tagSlug.toLowerCase()
+      ) || tagSlug
+    : tagSlug;
+
+  if (pages.length === 0) {
+    notFound();
+  }
+
+  return (
+    <div className="container relative mx-auto flex max-w-179 flex-1 shrink-1 flex-col gap-8 overflow-y-auto p-4 pt-32">
+      <div>
+        <h1 className="text-4xl font-bold mb-2">{actualTag}</h1>
+        <p className="text-muted-foreground">
+          {pages.length} {pages.length === 1 ? "document" : "documents"} tagged with "{actualTag}"
+        </p>
+      </div>
+      
+      <Cards>
+        {pages.map((page) => (
+          <Card 
+            key={page.url} 
+            href={page.url} 
+            title={page.data.title}
+          >
+            {page.data.description}
+          </Card>
+        ))}
+      </Cards>
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  const allTags = new Set<string>();
+  
+  source.getPages().forEach((page) => {
+    const tags = (page.data as any).tags as string[] | undefined;
+    tags?.forEach((tag) => allTags.add(tag));
+  });
+
+  return Array.from(allTags).map((tag) => ({
+    tag: tag.toLowerCase().replace(/\s+/g, "-"),
+  }));
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ tag: string }>;
+}) {
+  const params = await props.params;
+  const tagSlug = decodeURIComponent(params.tag);
+
+  // Find the actual tag name with proper casing
+  const pages = source.getPages();
+  let actualTag = tagSlug;
+  
+  for (const page of pages) {
+    const tags = (page.data as any).tags as string[] | undefined;
+    const found = tags?.find((t) => t.toLowerCase().replace(/\s+/g, "-") === tagSlug.toLowerCase());
+    if (found) {
+      actualTag = found;
+      break;
+    }
+  }
+
+  return {
+    title: `Tag: ${actualTag}`,
+    description: `All documentation pages tagged with "${actualTag}"`,
+  };
+}

app/docs/tags/page.tsx

@@ -0,0 +1,90 @@
+import Link from "next/link";
+import { source } from "@/lib/source";
+
+interface TagInfo {
+  name: string;
+  count: number;
+  slug: string;
+}
+
+export default function TagsIndexPage() {
+  // Collect all tags with their counts, normalizing case-insensitive duplicates
+  const tagMap = new Map<string, { name: string; count: number }>();
+  
+  source.getPages().forEach((page) => {
+    const tags = (page.data as any).tags as string[] | undefined;
+    tags?.forEach((tag) => {
+      const slug = tag.toLowerCase().replace(/\s+/g, "-");
+      const existing = tagMap.get(slug);
+      
+      if (existing) {
+        // Increment count, keep the first encountered name
+        existing.count += 1;
+      } else {
+        tagMap.set(slug, { name: tag, count: 1 });
+      }
+    });
+  });
+
+  const tags: TagInfo[] = Array.from(tagMap.entries())
+    .map(([slug, { name, count }]) => ({
+      name,
+      count,
+      slug,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  // Group tags alphabetically by first letter
+  const groupedTags = tags.reduce((acc, tag) => {
+    const firstLetter = tag.name[0].toUpperCase();
+    if (!acc[firstLetter]) {
+      acc[firstLetter] = [];
+    }
+    acc[firstLetter].push(tag);
+    return acc;
+  }, {} as Record<string, TagInfo[]>);
+
+  const letters = Object.keys(groupedTags).sort();
+
+  return (
+    <div className="container relative mx-auto flex max-w-179 flex-1 shrink-1 flex-col gap-8 overflow-y-auto p-4 py-32">
+      <div>
+        <h1 className="text-4xl font-bold mb-2">All Tags</h1>
+        <p className="text-muted-foreground">
+          Browse documentation by tags
+        </p>
+      </div>
+
+      <div className="space-y-8">
+        {letters.map((letter) => (
+          <div key={letter} className="space-y-4">
+            <h2 className="text-2xl font-semibold border-b pb-2">{letter}</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {groupedTags[letter].map((tag) => (
+                <Link
+                  key={tag.slug}
+                  href={`/docs/tags/${tag.slug}`}
+                  className="group flex items-center justify-between rounded-lg border border-nc-border-grey-light bg-nc-background-default p-4 transition-colors hover:border-nc-border-grey hover:bg-nc-background-grey-light"
+                >
+                  <span className="font-medium group-hover:text-nc-content-brand">
+                    {tag.name}
+                  </span>
+                  <span className="text-sm text-muted-foreground">
+                    {tag.count}
+                  </span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export async function generateMetadata() {
+  return {
+    title: "All Tags",
+    description: "Browse all documentation tags",
+  };
+}

components/layout/TopBarNaigation.tsx

@@ -30,6 +30,11 @@ const tabs = [
 
 export default function TopBarNaigation() {
   const pathname = usePathname();
+
+  if(pathname.startsWith("/docs/tags")) {
+    return null;
+  }
+
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const [activeIndex, setActiveIndex] = useState(-1);
   const [hoverStyle, setHoverStyle] = useState({});

netlify.toml

@@ -165,6 +165,11 @@ class LLMContentGenerator {
         return null;
       }
 
+      // Skip tags URLs
+      if (url.includes("/docs/tags")) {
+        return null;
+      }
+
       console.log(`📖 Processing: ${url}`);
 
       // Categorize URL

scripts/generate-llm-content.ts

@@ -10,6 +10,10 @@ import { z } from "zod";
 export const docs = defineDocs({
   dir: "content/docs",
   docs: {
+    schema: frontmatterSchema.extend({
+      tags: z.array(z.string()).optional(),
+      keywords: z.array(z.string()).optional(),
+    }),
     postprocess: {
       includeProcessedMarkdown: true,
     },