differentiate client and server data displays

src/app/components/DataDisplay.tsx

@@ -1,8 +1,10 @@
 import { Fragment } from 'react'
 import Link from 'next/link'
-import { reviewer } from '@/app/db/data'
-import { loadAllTopics, loadAllAuthors } from '@/app/db/loaders'
-import { useSuspenseQuery } from '@tanstack/react-query'
+import {
+  reviewer,
+  authors as authorList,
+  topics as topicList,
+} from '@/app/db/data'
 
 export const Code = ({
   code,
@@ -52,18 +54,6 @@ export const Topics = ({
   topics,
   showTitle = true,
 }: Readonly<{ topics: string[]; showTitle?: boolean }>) => {
-  'use client'
-
-  const { data, error } = useSuspenseQuery({
-    queryKey: ['topics_all'],
-    queryFn: () => {
-      const data = loadAllTopics()
-      return data
-    },
-  })
-  if (error) throw error
-  const topicList = data
-
   return (
     <>
       {showTitle ? <span className='font-bold'>Topics: </span> : null}
@@ -82,19 +72,6 @@ export const Topics = ({
 export const Authors = ({
   authors,
 }: Readonly<{ authors: string[]; noLink?: boolean }>) => {
-  'use client'
-
-  const { data, error } = useSuspenseQuery({
-    queryKey: ['authors_all'],
-    queryFn: () => {
-      const data = loadAllAuthors()
-      return data
-    },
-  })
-  if (error) throw error
-
-  const authorList = data
-
   return (
     <>
       {authors.map((a: string, i) => (
@@ -141,7 +118,7 @@ export const Reviewers = ({
     <>
       {showTitle ? <span className='font-bold'>Reviewed by: </span> : null}
       {reviewers.map((r: reviewer, i) => (
-        <Fragment key={i}>
+        <Fragment key={r.first}>
           <ReviewerDisplay r={r} />
           {i !== reviewers.length - 1 && reviewers.length > 2 ? ', ' : null}
           {i === reviewers.length - 2 ? ' and ' : null}

src/app/components/DataDisplayClient.tsx

@@ -0,0 +1,68 @@
+// these variants of the data display compnents are designed for client side components
+// and fetch data asynchronously
+import { loadAllTopics, loadAllAuthors } from '@/app/db/loaders'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { Fragment } from 'react'
+import Link from 'next/link'
+
+export const Authors = ({
+  authors,
+}: Readonly<{ authors: string[]; noLink?: boolean }>) => {
+  'use client'
+
+  const { data, error } = useSuspenseQuery({
+    queryKey: ['authors_all'],
+    queryFn: () => {
+      const data = loadAllAuthors()
+      return data
+    },
+  })
+  if (error) throw error
+
+  const authorList = data
+
+  return (
+    <>
+      {authors.map((a: string, i) => (
+        <Fragment key={a}>
+          <Link href={`/author/${a}`} target='_blank'>
+            {authorList[a].name.first} {authorList[a].name.last}
+          </Link>
+          {i !== authors.length - 1 && authors.length > 2 ? ', ' : null}
+          {i === authors.length - 2 ? ' and ' : null}
+        </Fragment>
+      ))}
+    </>
+  )
+}
+
+export const Topics = ({
+  topics,
+  showTitle = true,
+}: Readonly<{ topics: string[]; showTitle?: boolean }>) => {
+  'use client'
+
+  const { data, error } = useSuspenseQuery({
+    queryKey: ['topics_all'],
+    queryFn: () => {
+      const data = loadAllTopics()
+      return data
+    },
+  })
+  if (error) throw error
+  const topicList = data
+
+  return (
+    <>
+      {showTitle ? <span className='font-bold'>Topics: </span> : null}
+      {topics.map((t: string, i) => (
+        <Fragment key={t}>
+          <Link href={topicList[t].wiki} target='_blank'>
+            {topicList[t].name}
+          </Link>
+          {i !== topics.length - 1 ? ', ' : null}
+        </Fragment>
+      ))}
+    </>
+  )
+}

src/app/document/view/[slug]/page.tsx

@@ -1,6 +1,11 @@
-'use client'
 import DocumentViewer from './DocumentViewer'
 import ErrorBoundary from '@/app/utils/ErrorBoundary'
+import { documents } from '@/app/db/data'
+
+export function generateStaticParams() {
+  const docsList = Object.keys(documents)
+  return docsList.map((doc) => ({ doc }))
+}
 
 export default function Page({
   params,