feat: add glossary pages (#45)

Author: thedaviddias

app/_components/glossary/alphabet-nav.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { Letter } from './letter'
+
+export function AlphabetNav() {
+  return (
+    <div className="flex flex-wrap gap-2 mb-12">
+      {Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ").map((letter) => (
+        <Letter key={letter} letter={letter} />
+      ))}
+    </div>
+  )
+}

app/_components/glossary/glossary-content.tsx

@@ -0,0 +1,19 @@
+import { getGlossaryTerms } from '@app/_utils/get-glossary-terms'
+import { AlphabetNav } from './alphabet-nav'
+import { TermsList } from './terms-list'
+
+export async function GlossaryContent() {
+  const terms = await getGlossaryTerms()
+
+  return (
+    <>
+      <h1 className="text-4xl font-bold mb-8">UX Patterns Glossary</h1>
+      <p className="text-lg mb-12">
+        A comprehensive glossary of UX patterns and web development terminology. This resource is designed to help developers and designers understand the key concepts, patterns, and principles discussed throughout our documentation.
+      </p>
+
+      <AlphabetNav />
+      <TermsList terms={terms} />
+    </>
+  )
+}

app/_components/glossary/letter.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+interface LetterProps {
+  letter: string
+}
+
+export function Letter({ letter }: LetterProps) {
+  const pathname = usePathname()
+  const isActive = pathname.includes(`#${letter.toLowerCase()}`)
+
+  return (
+    <Link
+      href={`#${letter.toLowerCase()}`}
+      className={`
+        px-3 py-2 rounded-md text-sm font-medium
+        ${isActive
+          ? 'bg-primary text-white'
+          : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+        }
+      `}
+      scroll={false}
+    >
+      {letter}
+    </Link>
+  )
+}

app/_components/glossary/structured-data.tsx

@@ -0,0 +1,28 @@
+import { JsonLd } from '@app/_components/json-ld'
+
+interface GlossaryStructuredDataProps {
+  term: string
+  definition: string
+  category: string[]
+}
+
+export function GlossaryStructuredData({
+  term,
+  definition,
+  category
+}: GlossaryStructuredDataProps) {
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'DefinedTerm',
+    name: term,
+    description: definition,
+    inDefinedTermSet: {
+      '@type': 'DefinedTermSet',
+      name: 'UX Patterns Glossary',
+      url: 'https://uxpatterns.dev/glossary'
+    },
+    termCode: category.join(',')
+  }
+
+  return <JsonLd data={structuredData} />
+}

app/_components/glossary/term-card.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import Link from 'next/link'
+
+interface TermCardProps {
+  title: string
+  description: string
+  category: string[]
+  slug: string
+}
+
+export function TermCard({ title, description, category, slug }: TermCardProps) {
+  return (
+    <Link
+      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">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+          {title}
+        </h3>
+        <p className="text-sm text-gray-600 dark:text-gray-300">
+          {description}
+        </p>
+        <div className="flex flex-wrap gap-2 mt-2">
+          {category.map((cat) => (
+            <span
+              key={cat}
+              className="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300"
+            >
+              {cat}
+            </span>
+          ))}
+        </div>
+      </div>
+    </Link>
+  )
+}
+

app/_components/glossary/term-page.tsx

@@ -0,0 +1,27 @@
+
+import { GlossaryStructuredData } from './structured-data'
+
+interface TermPageProps {
+  frontMatter: {
+    title: string
+    description: string
+    category: string[]
+    related_patterns?: string[]
+    synonyms?: string[]
+  }
+  children: React.ReactNode
+}
+
+export function TermPage({ frontMatter, children }: TermPageProps) {
+  return (
+    <div className="max-w-4xl mx-auto">
+      <GlossaryStructuredData
+        term={frontMatter.title}
+        definition={frontMatter.description}
+        category={frontMatter.category}
+      />
+      {children}
+    </div>
+  )
+}
+

app/_components/glossary/terms-list.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { TermCard } from './term-card'
+
+interface Term {
+  title: string
+  description: string
+  category: string[]
+  slug: string
+}
+
+interface TermsListProps {
+  terms: Term[]
+}
+
+export function TermsList({ terms }: TermsListProps) {
+  // Group terms by first letter
+  const groupedTerms = terms.reduce<Record<string, Term[]>>((acc, term) => {
+    // Ensure title exists and has at least one character
+    const title = term.title || ''
+    if (title.length === 0) return acc
+
+    // Get the first character and ensure it's a letter
+    const firstChar = title[0]
+    if (!firstChar) return acc
+
+    const firstLetter = firstChar.toUpperCase()
+    if (!acc[firstLetter]) {
+      acc[firstLetter] = []
+    }
+    acc[firstLetter].push(term)
+    return acc
+  }, {})
+
+  // Sort letters alphabetically
+  const sortedLetters = Object.keys(groupedTerms).sort()
+
+  if (sortedLetters.length === 0) {
+    return <p>No glossary terms found.</p>
+  }
+
+  return (
+    <div className="space-y-12">
+      {sortedLetters.map((letter) => {
+        const letterTerms = groupedTerms[letter]
+        if (!letterTerms?.length) return null
+
+        return (
+          <section key={letter} id={letter.toLowerCase()}>
+            <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white scroll-mt-20">
+              {letter}
+            </h2>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {letterTerms
+                .sort((a, b) => a.title.localeCompare(b.title))
+                .map((term) => (
+                  <TermCard
+                    key={term.slug}
+                    title={term.title}
+                    description={term.description}
+                    category={term.category}
+                    slug={term.slug}
+                  />
+                ))}
+            </div>
+          </section>
+        )
+      })}
+    </div>
+  )
+}
+

app/_utils/get-glossary-terms.ts

@@ -0,0 +1,34 @@
+import { readdir, readFile } from 'fs/promises'
+import matter from 'gray-matter'
+import { join } from 'path'
+
+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)
+
+  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)
+
+        return {
+          title: data.title,
+          description: data.description,
+          category: data.category,
+          slug: file.replace('.mdx', '')
+        }
+      })
+  )
+
+  return terms
+}

content/en/_meta.ts

@@ -20,6 +20,15 @@ export default {
       layout: 'full'
     }
   },
+  glossary: {
+    type: 'page',
+    title: 'Glossary',
+    theme: {
+      sidebar: true,
+      typesetting: 'article',
+      layout: 'full'
+    }
+  },
   blog: {
     type: 'page',
     title: 'Blog',

content/en/glossary/_meta.ts

@@ -0,0 +1,4 @@
+export default {
+  'index': '',
+  'pagination': '',
+}