Sync starter from monorepo

Author: mowens3

LICENSE

@@ -4,7 +4,8 @@ import { EntityRenderer } from "@/components/entity"
 import { ViewRenderer } from "@/components/view"
 
 interface PageProps {
-  params: Promise<{ slug: string[] }>
+  params: { slug: string[] }
+  searchParams?: Record<string, string | string[] | undefined>
 }
 
 /**
@@ -39,11 +40,12 @@ const DEFAULT_INCLUDES = [
  * 4. Fetches the resource via JSON:API with media includes
  * 5. Renders with the appropriate component
  */
-export default async function Page({ params }: PageProps) {
-  const { slug } = await params
-  const path = "/" + slug.join("/")
+export default async function Page({ params, searchParams }: PageProps) {
+  const path = "/" + params.slug.join("/")
 
   try {
+    const query = searchParamsToString(searchParams)
+
     // Resolve the path to a Drupal resource
     const resolved = await resolvePath(path)
 
@@ -64,8 +66,9 @@ export default async function Page({ params }: PageProps) {
 
     // Handle views (headless)
     if (resolved.kind === "view" && resolved.data_url) {
-      const doc = await fetchView(resolved.data_url)
-      return <ViewRenderer doc={doc} />
+      const dataUrl = query ? `${resolved.data_url}?${query}` : resolved.data_url
+      const doc = await fetchView(dataUrl)
+      return <ViewRenderer doc={doc} currentPath={path} />
     }
 
     // Handle entities
@@ -107,8 +110,7 @@ export default async function Page({ params }: PageProps) {
  * Generate metadata for SEO.
  */
 export async function generateMetadata({ params }: PageProps) {
-  const { slug } = await params
-  const path = "/" + slug.join("/")
+  const path = "/" + params.slug.join("/")
 
   try {
     const resolved = await resolvePath(path)
@@ -135,3 +137,27 @@ export async function generateMetadata({ params }: PageProps) {
     return {}
   }
 }
+
+function searchParamsToString(
+  searchParams: Record<string, string | string[] | undefined> | undefined
+): string {
+  if (!searchParams) {
+    return ""
+  }
+
+  const params = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(searchParams)) {
+    if (typeof value === "string") {
+      params.set(key, value)
+      continue
+    }
+    if (Array.isArray(value)) {
+      for (const v of value) {
+        params.append(key, v)
+      }
+    }
+  }
+
+  return params.toString()
+}

app/[...slug]/page.tsx

@@ -101,10 +101,12 @@ export async function POST(request: NextRequest) {
     }
   }
 
-  console.log(
-    `[Revalidate] ${operation} - Revalidated ${revalidated.tags.length} tags, ${revalidated.paths.length} paths`,
-    entity ? `(${entity.type}/${entity.bundle}/${entity.uuid})` : ""
-  )
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      `[Revalidate] ${operation} - Revalidated ${revalidated.tags.length} tags, ${revalidated.paths.length} paths`,
+      entity ? `(${entity.type}/${entity.bundle}/${entity.uuid})` : ""
+    )
+  }
 
   return NextResponse.json({
     revalidated: true,

app/api/revalidate/route.ts

@@ -6,7 +6,7 @@ export default function NotFound() {
       <h1 className="text-6xl font-bold text-gray-300 mb-4">404</h1>
       <h2 className="text-2xl font-semibold mb-4">Page Not Found</h2>
       <p className="text-gray-600 mb-8">
-        The page you're looking for doesn't exist or has been moved.
+        The page you&apos;re looking for doesn&apos;t exist or has been moved.
       </p>
       <Link
         href="/"

app/not-found.tsx

@@ -1,6 +1,5 @@
 import { resolvePath, fetchJsonApi } from "@/lib/drupal"
 import { EntityRenderer } from "@/components/entity"
-import { notFound } from "next/navigation"
 
 /**
  * Homepage - resolves the root path "/" from Drupal.

app/page.tsx

@@ -6,7 +6,6 @@ import { JsonApiResource } from "@/lib/drupal/types"
 import {
   extractMedia,
   extractEmbeddedMediaUuids,
-  findIncluded,
   DrupalMediaData,
 } from "@/lib/drupal/media"
 import { resolveFileUrl } from "@/lib/drupal/url"
@@ -181,7 +180,7 @@ function renderWithEmbeddedMedia(
   imagePreset: "full" | "thumbnail" | "medium" | "large" | "hero"
 ): React.ReactNode[] {
   // Split by drupal-media tags
-  const parts = html.split(/(<drupal-media[^>]*>.*?<\/drupal-media>)/gs)
+  const parts = html.split(/(<drupal-media[^>]*>[\s\S]*?<\/drupal-media>)/g)
 
   return parts.map((part, index) => {
     // Check if this part is a drupal-media tag

components/media/BodyContent.tsx

@@ -73,20 +73,14 @@ function ViewItem({ item }: { item: JsonApiResource }) {
 }
 
 /**
- * Extract page number from JSON:API pagination URL.
- * JSON:API uses `page[offset]` parameter for pagination.
+ * Extract query string from JSON:API pagination URL.
  */
-function extractPageFromUrl(url: string): number | null {
+function extractSearchFromUrl(url: string): string {
   try {
     const urlObj = new URL(url, "http://dummy")
-    const offset = urlObj.searchParams.get("page[offset]")
-    if (offset) {
-      // JSON:API offset / items per page (assuming 10 per page)
-      return Math.floor(parseInt(offset, 10) / 10) + 1
-    }
-    return null
+    return urlObj.search
   } catch {
-    return null
+    return ""
   }
 }
 
@@ -104,13 +98,13 @@ function ViewPagination({
 
   if (!nextUrl && !prevUrl) return null
 
-  const nextPage = nextUrl ? extractPageFromUrl(nextUrl) : null
-  const prevPage = prevUrl ? extractPageFromUrl(prevUrl) : null
-
-  // Build frontend pagination URLs using query parameters
   const basePath = currentPath || ""
-  const prevHref = prevPage ? `${basePath}?page=${prevPage}` : null
-  const nextHref = nextPage ? `${basePath}?page=${nextPage}` : null
+
+  const prevSearch = prevUrl ? extractSearchFromUrl(prevUrl) : ""
+  const nextSearch = nextUrl ? extractSearchFromUrl(nextUrl) : ""
+
+  const prevHref = prevSearch ? `${basePath}${prevSearch}` : null
+  const nextHref = nextSearch ? `${basePath}${nextSearch}` : null
 
   return (
     <nav

components/view/ViewRenderer.tsx

@@ -127,7 +127,13 @@ export async function fetchJsonApi<T = JsonApiDocument>(
 export async function fetchView<T = JsonApiDocument>(
   dataUrl: string,
   options?: {
-    page?: number
+    /**
+     * JSON:API pagination parameters.
+     *
+     * - number: sets page[offset]
+     * - object: sets page[offset] and/or page[limit]
+     */
+    page?: number | { offset?: number; limit?: number }
     revalidate?: number
     /** Additional cache tags to include */
     tags?: string[]
@@ -140,9 +146,18 @@ export async function fetchView<T = JsonApiDocument>(
 
   const url = new URL(dataUrl, base)
 
-  // Add pagination if specified
+  // Add pagination if specified.
   if (options?.page !== undefined) {
-    url.searchParams.set("page", String(options.page))
+    if (typeof options.page === "number") {
+      url.searchParams.set("page[offset]", String(options.page))
+    } else {
+      if (options.page.offset !== undefined) {
+        url.searchParams.set("page[offset]", String(options.page.offset))
+      }
+      if (options.page.limit !== undefined) {
+        url.searchParams.set("page[limit]", String(options.page.limit))
+      }
+    }
   }
 
   // Build cache tags

lib/drupal/fetch.ts

@@ -3,7 +3,7 @@
  */
 
 import { JsonApiResource, JsonApiRelationship } from "./types"
-import { getFileUrl, resolveFileUrl } from "./url"
+import { getFileUrl } from "./url"
 
 /**
  * Extracted image data ready for rendering.
@@ -104,6 +104,21 @@ export function extractImageFromFile(
   }
 }
 
+function getRelationshipMetaString(
+  relationship: JsonApiRelationship | undefined,
+  key: string
+): string | undefined {
+  const data = relationship?.data
+  if (!data || Array.isArray(data)) {
+    return undefined
+  }
+
+  const meta = (data as { meta?: Record<string, unknown> }).meta
+  const value = meta?.[key]
+
+  return typeof value === "string" && value.trim() !== "" ? value : undefined
+}
+
 /**
  * Extract media data from a media entity.
  *
@@ -154,9 +169,13 @@ export function extractMedia(
         const imageData = extractImageFromFile(file)
         if (imageData) {
           result.url = imageData.src
+          const alt = getRelationshipMetaString(fileRelationship, "alt")
+          const title = getRelationshipMetaString(fileRelationship, "title")
+
           result.image = {
             ...imageData,
-            alt: (attrs?.field_media_image?.alt as string) || imageData.alt || name,
+            alt: alt || imageData.alt || name,
+            title: title || imageData.title,
           }
         }
       }

lib/drupal/media.ts

@@ -11,7 +11,7 @@ export type ResolveResponse =
         id: string
         langcode: string
       }
-      redirect: null
+      redirect: { to: string; status?: number } | null
       jsonapi_url: string
       data_url: null
       /** Whether this entity type is enabled for headless rendering. */
@@ -24,7 +24,7 @@ export type ResolveResponse =
       kind: "view"
       canonical: string
       entity: null
-      redirect: null
+      redirect: { to: string; status?: number } | null
       jsonapi_url: null
       data_url: string
       /** Whether this View is enabled for headless rendering. */
@@ -37,7 +37,7 @@ export type ResolveResponse =
       kind: null
       canonical: null
       entity: null
-      redirect: null
+      redirect: { to: string; status?: number } | null
       jsonapi_url: null
       data_url: null
       headless: false