fix: use persistent id for item details

src/modules/item/ItemCard.tsx

@@ -26,8 +26,11 @@ export default function ItemCard({ item }: { item: Item }): JSX.Element {
           className="flex-shrink-0"
           height="2.5em"
         />
-        <Link href={{ pathname: `/${item.category}/${item.id}` }} passHref>
-          <a className="hover:text-primary-800 transition-colors duration-150">
+        <Link
+          href={{ pathname: `/${item.category}/${item.persistentId}` }}
+          passHref
+        >
+          <a className="transition-colors duration-150 hover:text-primary-800">
             <span>{item.label}</span>
           </a>
         </Link>
@@ -36,7 +39,10 @@ export default function ItemCard({ item }: { item: Item }): JSX.Element {
       <div className="text-sm leading-7 text-gray-600">
         <Plaintext text={item.description} maxLength={MAX_DESCRIPTION_LENGTH} />
       </div>
-      <Link href={{ pathname: `/${item.category}/${item.id}` }} passHref>
+      <Link
+        href={{ pathname: `/${item.category}/${item.persistentId}` }}
+        passHref
+      >
         <Anchor className="self-end text-sm">Read more</Anchor>
       </Link>
     </VStack>

src/modules/item/RelatedItems.tsx

@@ -41,14 +41,14 @@ export default function RelatedItems({
 
   return (
     <VStack as="section" className="space-y-4">
-      <HStack className="space-x-2 items-baseline">
+      <HStack className="items-baseline space-x-2">
         <SectionTitle>Related</SectionTitle>
         <span className="text-xl text-gray-500">({relatedItems.length})</span>
       </HStack>
       <ul className="grid grid-cols-2 border-t border-b border-gray-200">
         {relatedItems.slice(0, cursor).map((item) => {
           return (
-            <li key={item.id} className="border-t border-gray-200 -mt-px">
+            <li key={item.id} className="-mt-px border-t border-gray-200">
               <RelatedItem item={item} />
             </li>
           )
@@ -73,7 +73,7 @@ export default function RelatedItems({
 }
 
 function RelatedItem({ item }: { item: RelatedItem }): JSX.Element {
-  const pathname = `/${item.category}/${item.id}`
+  const pathname = `/${item.category}/${item.persistentId}`
   return (
     <VStack as="article" className="px-4 py-5 space-y-4">
       <h3 className="flex items-center space-x-4 text-lg font-medium leading-5">

src/pages/dataset/[id]/index.tsx

@@ -23,7 +23,7 @@ export async function getServerSideProps(
   if (id === undefined) return { notFound: true }
 
   try {
-    const dataset = await getDataset({ id })
+    const dataset = await getDataset({ id }, {})
     return { props: { dataset } }
   } catch {
     /** context.res.statusCode = 404 */

src/pages/publication/[id]/index.tsx

@@ -25,7 +25,7 @@ export async function getServerSideProps(
   if (id === undefined) return { notFound: true }
 
   try {
-    const publication = await getPublication({ id })
+    const publication = await getPublication({ id }, {})
     return { props: { publication } }
   } catch {
     /** context.res.statusCode = 404 */

src/pages/tool-or-service/[id]/index.tsx

@@ -23,7 +23,7 @@ export async function getServerSideProps(
   if (id === undefined) return { notFound: true }
 
   try {
-    const tool = await getTool({ id })
+    const tool = await getTool({ id }, {})
     return { props: { tool } }
   } catch {
     /** context.res.statusCode = 404 */

src/pages/training-material/[id]/index.tsx

@@ -25,7 +25,7 @@ export async function getServerSideProps(
   if (id === undefined) return { notFound: true }
 
   try {
-    const trainingMaterial = await getTrainingMaterial({ id })
+    const trainingMaterial = await getTrainingMaterial({ id }, {})
     return { props: { trainingMaterial } }
   } catch {
     /** context.res.statusCode = 404 */

src/pages/workflow/[id]/index.tsx

@@ -23,7 +23,7 @@ export async function getServerSideProps(
   if (id === undefined) return { notFound: true }
 
   try {
-    const workflow = await getWorkflow({ workflowId: id })
+    const workflow = await getWorkflow({ workflowId: id }, {})
     return { props: { workflow } }
   } catch {
     /** context.res.statusCode = 404 */

src/screens/home/HomeScreen.tsx

@@ -68,9 +68,9 @@ function Hero() {
         quality={100}
         // applies to the <img>, not the <div> container, so we still need
         // to add position: relative to content that should be layered above
-        className="-z-10 object-cover"
+        className="object-cover -z-10"
       />
-      <div className="mx-auto max-w-screen-md xl:max-w-screen-lg mt-24 space-y-6 p-6 relative text-sm">
+      <div className="relative max-w-screen-md p-6 mx-auto mt-24 space-y-6 text-sm xl:max-w-screen-lg">
         <Title>{meta.title}</Title>
         <Mdx>
           <Content />
@@ -81,7 +81,7 @@ function Hero() {
           <SubmitButton className="h-12" />
         </ItemSearchForm>
       </div>
-      <PeopleImage className="mx-auto max-w-screen-xl -mt-12 mb-6" />
+      <PeopleImage className="max-w-screen-xl mx-auto mb-6 -mt-12" />
     </FullWidth>
   )
 }
@@ -172,7 +172,7 @@ function LastAdded({ items }: { items?: Items }) {
         <VStack as="ul" className="divide-y divide-gray-200">
           {items.slice(0, MAX_LAST_ADDED_ITEMS).map((item) => {
             return (
-              <li key={item.id}>
+              <li key={item.persistentId}>
                 <ItemCard item={item} />
               </li>
             )
@@ -227,7 +227,7 @@ function SubSection({
 }: PropsWithChildren<{ title: string; href: LinkProps['href'] }>) {
   return (
     <Fragment>
-      <HStack className="justify-between items-baseline border-b border-gray-200 py-4">
+      <HStack className="items-baseline justify-between py-4 border-b border-gray-200">
         <SubSectionTitle>{title}</SubSectionTitle>
         <Link href={href} passHref>
           <Anchor>See all</Anchor>

src/screens/item/ItemLayout.tsx

@@ -35,7 +35,6 @@ type ItemCategory = Exclude<ItemCategoryWithStep, 'step'>
 type ItemProperties = Exclude<Item['properties'], undefined>
 type ItemProperty = ItemProperties[number]
 type ItemContributors = Exclude<Item['contributors'], undefined>
-type ItemContributor = ItemContributors[number]
 type RelatedItems = Exclude<Item['relatedItems'], undefined>
 
 /**
@@ -353,26 +352,28 @@ function ItemPropertiesList({
       <SubSectionTitle as="h2">Details</SubSectionTitle>
       <VStack as="dl" className="space-y-2 text-sm leading-7">
         {/* contributors are a top-level field, not a property */}
-        <dt className="inline mr-2 text-gray-500">Contributors:</dt>
-        <dd className="inline">
-          {contributors.map((contributor, index) => {
-            if (contributor == null || contributor.actor == null) return null
-            return (
-              <Fragment
-                key={`${contributor.actor.id}${contributor.role?.code}`}
-              >
-                {index !== 0 ? <span>, </span> : null}
-                {contributor.actor?.website != null ? (
-                  <a href={contributor.actor.website}>
-                    {contributor.actor.name}
-                  </a>
-                ) : (
-                  contributor.actor.name
-                )}
-              </Fragment>
-            )
-          })}
-        </dd>
+        <div>
+          <dt className="inline mr-2 text-gray-500">Contributors:</dt>
+          <dd className="inline">
+            {contributors.map((contributor, index) => {
+              if (contributor == null || contributor.actor == null) return null
+              return (
+                <Fragment
+                  key={`${contributor.actor.id}${contributor.role?.code}`}
+                >
+                  {index !== 0 ? <span>, </span> : null}
+                  {contributor.actor?.website != null ? (
+                    <a href={contributor.actor.website}>
+                      {contributor.actor.name}
+                    </a>
+                  ) : (
+                    contributor.actor.name
+                  )}
+                </Fragment>
+              )
+            })}
+          </dd>
+        </div>
 
         {sortedLabels.map((label) => {
           const properties = groupedProperties[label]

src/utils/sanitizeItemQueryParams.ts

@@ -3,9 +3,8 @@ import { ensureScalar } from '@/utils/ensureScalar'
 
 export function sanitizeItemQueryParams(
   params: GetServerSidePropsContext['params'],
-): { id?: number } {
+): { id?: string } {
   if (params === undefined || params.id === undefined) return {}
-  const id = parseInt(ensureScalar(params.id), 10)
-  if (Number.isNaN(id) || id <= 0) return {}
+  const id = ensureScalar(params.id)
   return { id }
 }