fix: build glossary

Author: thedaviddias

app/_actions/patterns.ts

@@ -59,6 +59,7 @@ export async function getPatternCategories(locale: string): Promise<PatternCateg
       return {
         name: category.name,
         path: category.path,
+        description: category.description || '',
         patterns: pages.map(page => {
           const iconName = page.frontMatter?.icon
           const status = (page.frontMatter?.status as PatternStatus) || 'coming-soon'

app/_components/glossary/term-card.tsx

@@ -12,7 +12,7 @@ interface TermCardProps {
 export function TermCard({ title, description, category, slug }: TermCardProps) {
   return (
     <Link
-      href={`./glossary/${slug}`}
+      href={`/glossary/${slug}`}
       className="block p-6 rounded-lg border border-gray-200 hover:border-primary transition-colors duration-200 dark:border-gray-700"
     >
       <div className="flex flex-col gap-2">

app/_components/glossary/terms-list-container.tsx

@@ -0,0 +1,25 @@
+import { getGlossaryTerms } from "@app/_utils/get-glossary-terms";
+import { Suspense } from 'react';
+import { TermsList } from "./terms-list";
+
+function LoadingTerms() {
+  return <div>Loading glossary terms...</div>;
+}
+
+export function TermsListContainer() {
+  return (
+    <Suspense fallback={<LoadingTerms />}>
+      <TermsListContent />
+    </Suspense>
+  );
+}
+
+async function TermsListContent() {
+  const terms = await getGlossaryTerms();
+
+  if (!terms || terms.length === 0) {
+    return <p>No glossary terms found.</p>;
+  }
+
+  return <TermsList terms={terms} />;
+}

app/_utils/get-glossary-terms.ts

@@ -1,34 +1,51 @@
+import { existsSync } from 'fs'
 import { readdir, readFile } from 'fs/promises'
 import matter from 'gray-matter'
 import { join } from 'path'
 
-interface GlossaryTerm {
+export interface GlossaryTerm {
   title: string
   description: string
   category: string[]
   slug: string
 }
 
 export async function getGlossaryTerms(): Promise<GlossaryTerm[]> {
-  const glossaryPath = join(process.cwd(), 'content/en/glossary')
-  const files = await readdir(glossaryPath)
+  try {
+    const glossaryPath = join(process.cwd(), 'content/en/glossary')
 
-  const terms = await Promise.all(
-    files
-      .filter((file) => file.endsWith('.mdx') && file !== 'index.mdx')
-      .map(async (file) => {
-        const filePath = join(glossaryPath, file)
-        const content = await readFile(filePath, 'utf-8')
-        const { data } = matter(content)
+    if (!existsSync(glossaryPath)) {
+      console.warn('Glossary directory not found:', glossaryPath)
+      return []
+    }
 
-        return {
-          title: data.title,
-          description: data.description,
-          category: data.category,
-          slug: file.replace('.mdx', '')
-        }
-      })
-  )
+    const files = await readdir(glossaryPath)
 
-  return terms
+    const terms = await Promise.all(
+      files
+        .filter((file) => file.endsWith('.mdx') && file !== 'index.mdx')
+        .map(async (file) => {
+          try {
+            const filePath = join(glossaryPath, file)
+            const content = await readFile(filePath, 'utf-8')
+            const { data } = matter(content)
+
+            return {
+              title: data.title || '',
+              description: data.description || '',
+              category: Array.isArray(data.category) ? data.category : [],
+              slug: file.replace('.mdx', '')
+            }
+          } catch (error) {
+            console.error(`Error processing file ${file}:`, error)
+            return null
+          }
+        })
+    )
+
+    return terms.filter((term): term is GlossaryTerm => term !== null)
+  } catch (error) {
+    console.error('Error fetching glossary terms:', error)
+    return []
+  }
 }

content/en/glossary/_meta.ts

@@ -1,4 +1,6 @@
 export default {
-  'index': '',
   'pagination': '',
+  'aria-attributes': '',
+  'semantic-html': '',
+  'progressive-loading': '',
 }

content/en/glossary/index.mdx

@@ -1,13 +1,10 @@
 ---
 title: UX Patterns Glossary
-description: A comprehensive glossary of UX patterns, design principles, and web development terminology to help you better understand and implement user experience best practices.
+description: A comprehensive glossary of UX patterns, design principles, and web development terminology.
 ---
 
 import { AlphabetNav } from "@app/_components/glossary/alphabet-nav";
-import { TermsList } from "@app/_components/glossary/terms-list";
-import { getGlossaryTerms } from "@app/_utils/get-glossary-terms";
-
-export const terms = await getGlossaryTerms();
+import { TermsListContainer } from "@app/_components/glossary/terms-list-container";
 
 # UX Patterns Glossary
 
@@ -16,5 +13,4 @@ Welcome to our comprehensive glossary of UX patterns and web development termino
 ## Navigation
 
 <AlphabetNav />
-
-<TermsList terms={terms} />
+<TermsListContainer />