feat: add featured pictures for patterns

Author: thedaviddias

app/_components/pattern-preview.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import Image from "next/image"
+import { usePathname } from "next/navigation"
+
+export const PatternPreview = ({ alt }: { alt: string }) => {
+  const pathname = usePathname()
+  const segments = pathname.split('/')
+  const patternName = segments[segments.length - 1]
+
+  return (
+    <div className="pattern-preview">
+      <Image
+        src={`/covers/patterns/${patternName}.png`}
+        alt={alt || `Example of ${patternName} pattern`}
+        width={800}
+        height={400}
+        priority
+        unoptimized
+      />
+    </div>
+  )
+}

content/en/patterns/forms/button.mdx

@@ -2,15 +2,22 @@
 summary: "Trigger actions and submit forms"
 description: "Learn how to implement accessible and user-friendly buttons in your web applications. Discover best practices for button design, states, accessibility, and implementation with code examples and guidelines."
 icon: MousePointerClick
+ogImage: /covers/patterns/button.png
 status: complete
 ---
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
 import { FaqStructuredData } from "@app/_components/faq-structured-data";
+import { PatternPreview } from "@app/_components/pattern-preview";
 
 # Button
 
+<PatternPreview
+  alt="Example of a primary button UI pattern showing a Continue button in
+  action"
+/>
+
 ## Overview
 
 **Buttons** are interactive elements that trigger actions or events when clicked or interacted with.

content/en/patterns/navigation/pagination.mdx

@@ -2,18 +2,22 @@
 summary: "Navigate through multiple pages of content"
 description: "Master pagination implementation in web applications. Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design, accessibility, and performance."
 icon: Route
+ogImage: /covers/patterns/pagination.png
 status: complete
 ---
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
 import { FaqStructuredData } from "@app/_components/faq-structured-data";
+import { PatternPreview } from "@app/_components/pattern-preview";
 import { StepsPagination } from "@app/_components/seo/steps-pagination.tsx";
 
 <StepsPagination />
 
 # Pagination
 
+<PatternPreview />
+
 ## Overview
 
 **[Pagination](/glossary/pagination)** is a navigation pattern used to divide large collections of content into manageable chunks or pages.

middleware.ts

@@ -3,6 +3,6 @@ export { middleware } from 'nextra/locales'
 export const config = {
   // Matcher ignoring `/_next/` and `/api/`
   matcher: [
-    '/((?!api/mdx|api/email|api/patterns/random|api/og|_next/static|_next/image|favicon.ico|robots.txt|og/opengraph-image.png|twitter-image|sitemap.xml|6ba7b811-9dad-11d1-80b4.txt|43mg4ybv6sxxanu24g7dngawd9up5w93.txt|apple-icon.png|manifest|_pagefind|examples).*)'
+    '/((?!api/mdx|api/email|api/patterns/random|api/og|_next/static|_next/image|favicon.ico|robots.txt|og/opengraph-image.png|covers|twitter-image|sitemap.xml|6ba7b811-9dad-11d1-80b4.txt|43mg4ybv6sxxanu24g7dngawd9up5w93.txt|apple-icon.png|manifest|_pagefind|examples).*)'
   ]
 }

next.config.ts

@@ -41,6 +41,11 @@ const nextConfig = withBundleAnalyzer(
         source: '/patterns',
         destination: '/patterns/getting-started',
         statusCode: 302
+      },
+      {
+        source: '/patterns/docs/navigation/breadcrumb',
+        destination: '/patterns/navigation/breadcrumb',
+        statusCode: 302
       }
     ],
     async rewrites() {

public/covers/patterns/button.png

@@ -58,3 +58,17 @@ body {
 .nextra-content .contains-task-list li {
   @apply my-2;
 }
+
+.pattern-preview {
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0;
+  padding: 1rem 0;
+  border-radius: 8px;
+}
+
+.pattern-preview img {
+  max-width: 600px;
+  height: auto;
+  width: 100%;
+}