feat: add citation suggestion

src/components/item/ItemCitation.module.css

+.container {
+  margin-top: var(--space-3);
+}

src/components/item/ItemCitation.tsx

+import styles from '@/components/item/ItemCitation.module.css'
+import type { Item } from '@/data/sshoc/api/item'
+import { itemRoutes as routes } from '@/lib/core/navigation/item-routes'
+import { createSiteUrl, isNonEmptyString } from '@/lib/utils'
+
+export interface ItemCitationProps {
+  item: Item
+}
+
+export function ItemCitation(props: ItemCitationProps): JSX.Element {
+  const { item } = props
+
+  const citation = useCitation(item)
+
+  return (
+    <small className={styles['container']}>
+      <span>Cite as: </span>
+      <span>{citation}</span>
+    </small>
+  )
+}
+
+function useCitation(item: Item): string {
+  const title = item.label
+  const version = item.version
+  const url = createSiteUrl(routes.ItemPage(item.category)({ persistentId: item.persistentId }))
+  const year = new Date(item.lastInfoUpdate).getUTCFullYear()
+  const authors = item.contributors
+    .filter((contributor) => {
+      return contributor.role.code === 'author'
+    })
+    .map((contributor) => {
+      return contributor.actor.name
+    })
+
+  let citation = ''
+
+  if (authors.length > 0) {
+    citation += `${authors.join(', ')} (${year}): `
+  }
+
+  citation += title
+
+  if (!/[!?]$/.test(title)) {
+    citation += '. '
+  } else {
+    citation += ' '
+  }
+
+  if (isNonEmptyString(version)) {
+    citation += `Version ${item.version} `
+  }
+
+  citation += `Retrieved ${Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(
+    new Date(),
+  )} from ${url}`
+
+  return citation
+}

src/pages/dataset/[persistentId]/index.page.tsx

@@ -18,6 +18,7 @@ import { DatasetControls } from '@/components/item/DatasetControls'
 import { DatasetSchemaOrgMetadata } from '@/components/item/DatasetSchemaOrgMetadata'
 import { ItemAccessibleAtLinks } from '@/components/item/ItemAccessibleAtLinks'
 import { ItemActors } from '@/components/item/ItemActors'
+import { ItemCitation } from '@/components/item/ItemCitation'
 import { ItemComments } from '@/components/item/ItemComments'
 import { ItemDateCreated } from '@/components/item/ItemDateCreated'
 import { ItemDateLastUpdated } from '@/components/item/ItemDateLastUpdated'
@@ -49,7 +50,6 @@ import { PageMainContent } from '@/lib/core/page/PageMainContent'
 import { Breadcrumbs } from '@/lib/core/ui/Breadcrumbs/Breadcrumbs'
 import { Centered } from '@/lib/core/ui/Centered/Centered'
 import { FullPage } from '@/lib/core/ui/FullPage/FullPage'
-import { LoadingIndicator } from '@/lib/core/ui/LoadingIndicator/LoadingIndicator'
 import { ProgressSpinner } from '@/lib/core/ui/ProgressSpinner/ProgressSpinner'
 
 export namespace DatasetPage {
@@ -189,6 +189,7 @@ export default function DatasetPage(props: DatasetPage.Props): JSX.Element {
                 versionId={dataset.id}
               />
               {/* </Suspense> */}
+              <ItemCitation item={dataset} />
             </ItemMetadata>
           </ItemInfo>
           <ItemDetails>

src/pages/publication/[persistentId]/index.page.tsx

@@ -15,6 +15,7 @@ import { ScreenHeader } from '@/components/common/ScreenHeader'
 import { BackgroundImage } from '@/components/item/BackgroundImage'
 import { ItemAccessibleAtLinks } from '@/components/item/ItemAccessibleAtLinks'
 import { ItemActors } from '@/components/item/ItemActors'
+import { ItemCitation } from '@/components/item/ItemCitation'
 import { ItemComments } from '@/components/item/ItemComments'
 import { ItemDateCreated } from '@/components/item/ItemDateCreated'
 import { ItemDateLastUpdated } from '@/components/item/ItemDateLastUpdated'
@@ -49,7 +50,6 @@ import { PageMainContent } from '@/lib/core/page/PageMainContent'
 import { Breadcrumbs } from '@/lib/core/ui/Breadcrumbs/Breadcrumbs'
 import { Centered } from '@/lib/core/ui/Centered/Centered'
 import { FullPage } from '@/lib/core/ui/FullPage/FullPage'
-import { LoadingIndicator } from '@/lib/core/ui/LoadingIndicator/LoadingIndicator'
 import { ProgressSpinner } from '@/lib/core/ui/ProgressSpinner/ProgressSpinner'
 
 export namespace PublicationPage {
@@ -192,6 +192,7 @@ export default function PublicationPage(props: PublicationPage.Props): JSX.Eleme
                 versionId={publication.id}
               />
               {/* </Suspense> */}
+              <ItemCitation item={publication} />
             </ItemMetadata>
           </ItemInfo>
           <ItemDetails>

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

@@ -15,6 +15,7 @@ import { ScreenHeader } from '@/components/common/ScreenHeader'
 import { BackgroundImage } from '@/components/item/BackgroundImage'
 import { ItemAccessibleAtLinks } from '@/components/item/ItemAccessibleAtLinks'
 import { ItemActors } from '@/components/item/ItemActors'
+import { ItemCitation } from '@/components/item/ItemCitation'
 import { ItemComments } from '@/components/item/ItemComments'
 import { ItemDescription } from '@/components/item/ItemDescription'
 import { ItemDetails } from '@/components/item/ItemDetails'
@@ -47,7 +48,6 @@ import { PageMainContent } from '@/lib/core/page/PageMainContent'
 import { Breadcrumbs } from '@/lib/core/ui/Breadcrumbs/Breadcrumbs'
 import { Centered } from '@/lib/core/ui/Centered/Centered'
 import { FullPage } from '@/lib/core/ui/FullPage/FullPage'
-import { LoadingIndicator } from '@/lib/core/ui/LoadingIndicator/LoadingIndicator'
 import { ProgressSpinner } from '@/lib/core/ui/ProgressSpinner/ProgressSpinner'
 
 export namespace ToolOrServicePage {
@@ -188,6 +188,7 @@ export default function ToolOrServicePage(props: ToolOrServicePage.Props): JSX.E
                 versionId={toolOrService.id}
               />
               {/* </Suspense> */}
+              <ItemCitation item={toolOrService} />
             </ItemMetadata>
           </ItemInfo>
           <ItemDetails>

src/pages/training-material/[persistentId]/index.page.tsx

@@ -15,6 +15,7 @@ import { ScreenHeader } from '@/components/common/ScreenHeader'
 import { BackgroundImage } from '@/components/item/BackgroundImage'
 import { ItemAccessibleAtLinks } from '@/components/item/ItemAccessibleAtLinks'
 import { ItemActors } from '@/components/item/ItemActors'
+import { ItemCitation } from '@/components/item/ItemCitation'
 import { ItemComments } from '@/components/item/ItemComments'
 import { ItemDateCreated } from '@/components/item/ItemDateCreated'
 import { ItemDateLastUpdated } from '@/components/item/ItemDateLastUpdated'
@@ -49,7 +50,6 @@ import { PageMainContent } from '@/lib/core/page/PageMainContent'
 import { Breadcrumbs } from '@/lib/core/ui/Breadcrumbs/Breadcrumbs'
 import { Centered } from '@/lib/core/ui/Centered/Centered'
 import { FullPage } from '@/lib/core/ui/FullPage/FullPage'
-import { LoadingIndicator } from '@/lib/core/ui/LoadingIndicator/LoadingIndicator'
 import { ProgressSpinner } from '@/lib/core/ui/ProgressSpinner/ProgressSpinner'
 
 export namespace TrainingMaterialPage {
@@ -192,6 +192,7 @@ export default function TrainingMaterialPage(props: TrainingMaterialPage.Props):
                 versionId={trainingMaterial.id}
               />
               {/* </Suspense> */}
+              <ItemCitation item={trainingMaterial} />
             </ItemMetadata>
           </ItemInfo>
           <ItemDetails>

src/pages/workflow/[persistentId]/index.page.tsx

@@ -15,6 +15,7 @@ import { ScreenHeader } from '@/components/common/ScreenHeader'
 import { BackgroundImage } from '@/components/item/BackgroundImage'
 import { ItemAccessibleAtLinks } from '@/components/item/ItemAccessibleAtLinks'
 import { ItemActors } from '@/components/item/ItemActors'
+import { ItemCitation } from '@/components/item/ItemCitation'
 import { ItemComments } from '@/components/item/ItemComments'
 import { ItemDescription } from '@/components/item/ItemDescription'
 import { ItemDetails } from '@/components/item/ItemDetails'
@@ -49,7 +50,6 @@ import { PageMainContent } from '@/lib/core/page/PageMainContent'
 import { Breadcrumbs } from '@/lib/core/ui/Breadcrumbs/Breadcrumbs'
 import { Centered } from '@/lib/core/ui/Centered/Centered'
 import { FullPage } from '@/lib/core/ui/FullPage/FullPage'
-import { LoadingIndicator } from '@/lib/core/ui/LoadingIndicator/LoadingIndicator'
 import { ProgressSpinner } from '@/lib/core/ui/ProgressSpinner/ProgressSpinner'
 
 export namespace WorkflowPage {
@@ -189,6 +189,7 @@ export default function WorkflowPage(props: WorkflowPage.Props): JSX.Element {
                 versionId={workflow.id}
               />
               {/* </Suspense> */}
+              <ItemCitation item={workflow} />
             </ItemMetadata>
           </ItemInfo>
           <ItemDetails>