feat: create all pages and add status

Author: thedaviddias

app/[lang]/[[...mdxPath]]/page.tsx

@@ -35,11 +35,12 @@ export default async function Page(props: PageProps) {
   )
 
   const isHomepage = !params.mdxPath || params.mdxPath.length === 0
+  const pageKey = `${params.lang}-${params.mdxPath?.join('-') || 'home'}`
 
   return (
     <>
       <JsonLd data={schemaData} />
-      <Wrapper toc={toc} metadata={metadata}>
+      <Wrapper key={pageKey} toc={toc} metadata={metadata}>
         <MDXContent {...props} params={params} />
         {!isHomepage && <SuggestPattern />}
       </Wrapper>

app/_actions/patterns.ts

@@ -0,0 +1,79 @@
+import { PATTERNS_MAP } from '@/app/_constants/patterns'
+import * as Icons from 'lucide-react'
+import { type LucideIcon } from 'lucide-react'
+import type { MdxFile } from 'nextra'
+import { getPageMap } from 'nextra/page-map'
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
+import 'server-only'
+import { PatternCategory } from '../_utils/get-pattern-categories'
+
+export type PatternStatus = 'complete' | 'draft' | 'coming-soon'
+
+export type Pattern = {
+  title: string
+  description: string
+  href: string
+  icon?: LucideIcon
+  status: PatternStatus
+  frontMatter?: Record<string, unknown>
+}
+
+export async function getRandomPatternServer(locale: string = 'en'): Promise<Pattern | null> {
+  const categories = await getPatternCategories(locale)
+
+  const allPatterns = categories.flatMap(category => category.patterns)
+
+  const availablePatterns = allPatterns.filter(pattern =>
+    pattern.href && pattern.status !== 'coming-soon'
+  )
+
+  if (availablePatterns.length === 0) return null
+
+  const randomIndex = Math.floor(Math.random() * availablePatterns.length)
+  const pattern = availablePatterns[randomIndex]
+
+  return pattern || null
+}
+
+export async function getPatternCategories(locale: string): Promise<PatternCategory[]> {
+
+  // Get all pattern categories and check if they exist first
+  const categories = Object.values(PATTERNS_MAP)
+    .filter(category => {
+      const categoryPath = join(process.cwd(), 'content', locale, 'patterns', category.path)
+      return existsSync(categoryPath)
+    })
+
+  const categoryData = await Promise.all(
+    categories.map(async (category) => {
+      const pageMap = await getPageMap(`/${locale}/patterns/${category.path}`)
+      if (!pageMap) return null
+
+      const pages = pageMap.filter(page =>
+        'name' in page &&
+        page.name !== 'index'
+      ) as MdxFile[]
+
+      return {
+        name: category.name,
+        path: category.path,
+        patterns: pages.map(page => {
+          const iconName = page.frontMatter?.icon
+          const status = (page.frontMatter?.status as PatternStatus) || 'coming-soon'
+
+          return {
+            title: page.frontMatter?.title || page.name,
+            description: page.frontMatter?.description || '',
+            href: `/${locale}/patterns/${category.path}/${page.name}`,
+            icon: iconName ? Icons[iconName] : undefined,
+            status,
+            frontMatter: page.frontMatter || {}
+          }
+        })
+      }
+    })
+  )
+
+  return categoryData.filter((category) => category !== null)
+}

app/_components/featured.tsx

@@ -1,15 +1,29 @@
 'use client'
 
-import { Star } from "lucide-react";
-import { usePlausible } from 'next-plausible';
-import { getRandomPattern, Pattern } from "../_constants/patterns";
-import { LinkCustom } from "./link-custom";
+import { Star } from "lucide-react"
+import { usePlausible } from 'next-plausible'
+import { useEffect, useState } from 'react'
+import { Pattern } from "../_actions/patterns"
+import { LinkCustom } from "./link-custom"
 
-type FeaturedPatternProps = {
-  pattern: Pattern;
-};
+async function getRandomPattern(locale: string = 'en') {
+  // Try to get from sessionStorage first
+  const cached = sessionStorage.getItem(`featured-pattern-${locale}`)
+  if (cached) {
+    return JSON.parse(cached)
+  }
+
+  const response = await fetch(`/api/patterns/random?locale=${locale}`)
+  if (!response.ok) return null
+
+  const pattern = await response.json()
+
+  // Cache in sessionStorage
+  sessionStorage.setItem(`featured-pattern-${locale}`, JSON.stringify(pattern))
+  return pattern
+}
 
-const FeaturedPatternSection = ({ pattern }: FeaturedPatternProps) => {
+const FeaturedPatternSection = ({ pattern }: { pattern: Pattern }) => {
   const plausible = usePlausible()
 
   return (
@@ -40,8 +54,12 @@ const FeaturedPatternSection = ({ pattern }: FeaturedPatternProps) => {
   );
 };
 
-const pattern = getRandomPattern();
-
 export const FeaturedPattern = () => {
+  const [pattern, setPattern] = useState<Pattern | null>(null)
+
+  useEffect(() => {
+    getRandomPattern().then(setPattern)
+  }, [])
+
   return pattern ? <FeaturedPatternSection pattern={pattern} /> : null;
 };

app/_components/link-custom.tsx

@@ -5,12 +5,12 @@ import Link, { LinkProps } from 'next/link'
 import * as React from 'react'
 
 const linkVariants = cva(
-  "inline-flex items-center gap-2 cursor-pointer transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 !no-underline relative",
+  "inline-flex items-center gap-2 cursor-pointer transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative",
   {
     variants: {
       variant: {
-        default: 'text-foreground hover:text-foreground/50',
-        primary: 'text-primary hover:text-primary/80 hover:translate-x-0.5',
+        default: 'text-foreground !underline',
+        primary: 'text-primary hover:text-primary/80 hover:translate-x-0.5 underline',
         destructive: 'text-destructive hover:text-destructive/80 hover:scale-105',
         muted: 'text-muted-foreground hover:text-muted-foreground/80',
         neutral: 'flex items-center gap-2 dark:text-neutral-800 border border-neutral-400 bg-neutral-100 rounded-md px-4 py-2 !no-underline',
@@ -23,6 +23,7 @@ const linkVariants = cva(
         sm: 'text-sm',
         xs: 'text-xs',
         lg: 'text-lg',
+        article: 'text-[17px]'
       },
     },
     defaultVariants: {

app/_components/sections/overview-grid.tsx

@@ -1,15 +1,13 @@
 import { cn } from '@/app/_utils/cn'
+import { Pattern } from '@/app/_utils/get-pattern-categories'
 import { getPatterns } from '@app/_utils/get-patterns'
-import { type LucideIcon } from 'lucide-react'
+
 import { LinkCustom } from '../link-custom'
 import { Badge } from '../ui/badge'
 
-type Pattern = {
-  title: string
-  description: string
-  icon?: LucideIcon;
-  href?: string
-  comingSoon?: boolean
+
+type PatternWrapperProps = {
+  pattern: Pattern
 }
 
 export const OverviewGrid = async ({ lang }: { lang: string }) => {
@@ -33,20 +31,20 @@ export const OverviewGrid = async ({ lang }: { lang: string }) => {
   )
 }
 
-const PatternWrapper = ({ pattern }: { pattern: Pattern }) => {
+const PatternWrapper = ({ pattern }: PatternWrapperProps) => {
   const wrapperClasses = cn(
     "relative rounded-xl border border-neutral-200 dark:border-neutral-800",
-    !pattern.comingSoon && "border-neutral-400 dark:border-neutral-600 hover:bg-neutral-100 hover:border-neutral-200 dark:hover:bg-neutral-900 dark:hover:border-neutral-400 hover:scale-105 transition-all duration-100 ease-in-out"
+    pattern.status !== 'coming-soon' && "border-neutral-400 dark:border-neutral-600 hover:bg-neutral-100 hover:border-neutral-200 dark:hover:bg-neutral-900 dark:hover:border-neutral-400 hover:scale-105 transition-all duration-100 ease-in-out"
   )
 
   const content = <PatternContent pattern={pattern} />
 
   return (
     <div className={wrapperClasses}>
-      {pattern.href ? (
+      {pattern.status !== 'coming-soon' ? (
         <LinkCustom
           href={pattern.href}
-          className="!no-underline"
+          className="!no-underline w-full"
           icon={false}
         >
           {content}
@@ -56,19 +54,24 @@ const PatternWrapper = ({ pattern }: { pattern: Pattern }) => {
   )
 }
 
-const PatternContent = ({ pattern }: { pattern: Pattern }) => (
+const PatternContent = ({ pattern }: PatternWrapperProps) => (
   <div className={cn(
     "relative flex flex-col gap-4 overflow-hidden rounded-xl p-5 transition-all duration-300",
-    !pattern.comingSoon ? "hover:animate-card-hover cursor-pointer" : "opacity-60 cursor-not-allowed"
+    pattern.status !== 'coming-soon' ? "hover:animate-card-hover cursor-pointer" : "opacity-60 cursor-not-allowed"
   )}>
 
     <div className="flex items-center justify-between">
       {pattern.icon && <pattern.icon className="h-8 w-8 text-primary" />}
-      {pattern.comingSoon && (
+      {pattern.status === 'coming-soon' && (
         <Badge variant="outline">
           <span className="text-[10px]">Coming soon</span>
         </Badge>
       )}
+      {pattern.status === 'draft' && (
+        <Badge variant="outline">
+          <span className="text-[10px]">Draft</span>
+        </Badge>
+      )}
     </div>
     <div className="flex flex-col gap-2">
       <div className="flex items-center justify-between">

app/_constants/patterns.ts

@@ -1,7 +1,4 @@
-import { contentManagementPatterns } from './patterns/content-management'
-import { formPatterns } from './patterns/forms'
-import { navigationPatterns } from './patterns/navigation'
-import { userFeedbackPatterns } from './patterns/user-feedback'
+import { Pattern } from "../_utils/get-pattern-categories"
 
 export const PATTERNS_MAP = {
   navigation: {
@@ -22,42 +19,24 @@ export const PATTERNS_MAP = {
   }
 } as const
 
-
-
-export const PATTERNS = {
-  'Layout & Navigation': navigationPatterns,
-  'Content Management': contentManagementPatterns,
-  'User Feedback': userFeedbackPatterns,
-  'Input & Forms': formPatterns
-} as const
-
-
-export type Pattern = {
-  title: string
-  description: string
-  href?: string
-  comingSoon?: boolean
-}
-
 export type Category = {
   name: string
   patterns: Pattern[]
 }
 
+export const getRandomPattern = async (locale: string = 'en'): Promise<Pattern | null> => {
+  const { getPatternCategories } = await import('../_utils/get-pattern-categories')
+  const categories = await getPatternCategories(locale)
 
-export const getRandomPattern = (): Pattern | null => {
-  const allPatterns = Object.values(PATTERNS).flatMap(category => [...category] as Pattern[]);
-  const availablePatterns = allPatterns.filter(pattern => pattern.href);
+  const allPatterns = categories.flatMap(category => category.patterns)
+  const availablePatterns = allPatterns.filter(pattern =>
+    pattern.href && pattern.status !== 'coming-soon'
+  )
 
-  if (availablePatterns.length === 0) return null;
+  if (availablePatterns.length === 0) return null
 
-  const randomIndex = Math.floor(Math.random() * availablePatterns.length);
-  const pattern = availablePatterns[randomIndex];
-  if (!pattern) return null;
+  const randomIndex = Math.floor(Math.random() * availablePatterns.length)
+  const pattern = availablePatterns[randomIndex]
 
-  return {
-    title: pattern.title,
-    description: pattern.description,
-    href: pattern.href!
-  };
-};
+  return pattern || null
+}