Add project subpage layout to generic list item page

apps/web/hooks/useLinkResolver/useLinkResolver.ts

@@ -43,6 +43,10 @@ export const routesTemplate = {
     is: '/s/[organization]/[slug]/[listItemSlug]',
     en: '/en/o/[organization]/[slug]/[listItemSlug]',
   },
+  projectsubpagelistitem: {
+    is: '/v/[project]/[slug]/[listItemSlug]',
+    en: '/en/p/[project]/[slug]/[listItemSlug]',
+  },
   aboutsubpage: {
     is: '/s/stafraent-island/[slug]',
     en: '',

apps/web/pages/en/p/[slug]/[subSlug]/[genericListItemSlug]/index.ts

@@ -1,11 +1,11 @@
 import withApollo from '@island.is/web/graphql/withApollo'
 import { withLocale } from '@island.is/web/i18n'
-import GenericListItem from '@island.is/web/screens/GenericList/GenericListItem'
+import { Component } from '@island.is/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]'
 import { getServerSidePropsWrapper } from '@island.is/web/utils/getServerSidePropsWrapper'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore make web strict
-const Screen = withApollo(withLocale('en')(GenericListItem))
+const Screen = withApollo(withLocale('en')(Component))
 
 export default Screen
 

apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx

@@ -0,0 +1,124 @@
+import { useMemo } from 'react'
+import { useRouter } from 'next/router'
+
+import { ProjectPage } from '@island.is/web/graphql/schema'
+import withApollo from '@island.is/web/graphql/withApollo'
+import { useLinkResolver } from '@island.is/web/hooks'
+import { useI18n, withLocale } from '@island.is/web/i18n'
+import { LayoutProps } from '@island.is/web/layouts/main'
+import type { GenericListItemPageProps } from '@island.is/web/screens/GenericList/GenericListItem'
+import GenericListItemPage from '@island.is/web/screens/GenericList/GenericListItem'
+import SubPageLayout, {
+  type PageProps,
+} from '@island.is/web/screens/Project/Project'
+import type { Screen as ScreenType } from '@island.is/web/types'
+import { CustomNextError } from '@island.is/web/units/errors'
+import { getServerSidePropsWrapper } from '@island.is/web/utils/getServerSidePropsWrapper'
+
+interface ComponentProps {
+  parentProps: {
+    layoutProps: LayoutProps
+    componentProps: PageProps
+  }
+  genericListItemProps: GenericListItemPageProps
+}
+
+export const Component: ScreenType<ComponentProps> = ({
+  parentProps,
+  genericListItemProps,
+}) => {
+  const { activeLocale } = useI18n()
+  const router = useRouter()
+  const { linkResolver } = useLinkResolver()
+  const backLinkUrl = useMemo(() => {
+    const pathname = new URL(router.asPath, 'https://island.is').pathname
+    return pathname.slice(0, pathname.lastIndexOf('/'))
+  }, [router.asPath])
+
+  const projectPage = parentProps.componentProps.projectPage as ProjectPage
+  const subpage = projectPage.projectSubpages.find(
+    (subpage) => subpage.slug === router.query.subSlug,
+  )
+
+  return (
+    <SubPageLayout
+      layoutProps={parentProps.layoutProps}
+      componentProps={{
+        ...parentProps.componentProps,
+        customContentfulIds: [
+          projectPage?.id,
+          subpage?.id,
+          genericListItemProps.item.id,
+        ],
+        customBreadcrumbItems: [
+          {
+            title: 'Ísland.is',
+            href: linkResolver('homepage').href,
+          },
+          {
+            title: projectPage?.title ?? '',
+            href: linkResolver('projectpage', [projectPage?.slug ?? '']).href,
+          },
+          {
+            title: subpage?.title ?? '',
+            href: backLinkUrl,
+            isTag: true,
+          },
+        ],
+        projectPage: {
+          ...projectPage,
+          backLink: {
+            date: '',
+            id: '',
+            text: activeLocale === 'is' ? 'Til baka' : 'Go back',
+            url: backLinkUrl,
+          },
+          projectSubpages:
+            projectPage.projectSubpages.map((subpage) => {
+              if (subpage.slug === router.query.subSlug) {
+                return {
+                  ...subpage,
+                  bottomSlices: [],
+                  slices: [],
+                  content: genericListItemProps.item.content,
+                  title: genericListItemProps.item.title,
+                  showTableOfContents: false,
+                }
+              }
+              return subpage
+            }) ?? [],
+        },
+      }}
+    />
+  )
+}
+
+Component.getProps = async (ctx) => {
+  const [parentProps, genericListItemProps] = await Promise.all([
+    SubPageLayout.getProps?.(ctx),
+    GenericListItemPage.getProps?.(ctx),
+  ])
+
+  if (!parentProps) {
+    throw new CustomNextError(
+      404,
+      'Could not fetch subpage layout for generic list item',
+    )
+  }
+  if (!genericListItemProps) {
+    throw new CustomNextError(404, 'Could not fetch generic list item props')
+  }
+
+  return {
+    parentProps,
+    genericListItemProps,
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore make web strict
+const Screen = withApollo(withLocale('is')(Component))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

apps/web/screens/Project/Project.tsx

@@ -46,14 +46,17 @@ import { ProjectFooter } from './components/ProjectFooter'
 import { ProjectWrapper } from './components/ProjectWrapper'
 import { getThemeConfig } from './utils'
 
-interface PageProps {
+export interface PageProps {
   projectPage: Query['getProjectPage']
   namespace: Record<string, string>
   projectNamespace: Record<string, string>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   stepOptionsFromNamespace: { data: Record<string, any>[]; slug: string }[]
   stepperNamespace: Record<string, string>
   locale: Locale
+  backLink?: { url: string; text: string }
+  customContentfulIds?: (string | undefined)[]
+  customBreadcrumbItems?: BreadCrumbItem[]
 }
 const ProjectPage: Screen<PageProps> = ({
   projectPage,
@@ -62,6 +65,9 @@ const ProjectPage: Screen<PageProps> = ({
   stepperNamespace,
   stepOptionsFromNamespace,
   locale,
+  backLink,
+  customContentfulIds,
+  customBreadcrumbItems,
 }) => {
   const n = useNamespace(namespace)
   const p = useNamespace(projectNamespace)
@@ -77,7 +83,11 @@ const ProjectPage: Screen<PageProps> = ({
     [router.query.subSlug, projectPage?.projectSubpages],
   )
 
-  useContentfulId(projectPage?.id, subpage?.id)
+  const contentfulIds = customContentfulIds
+    ? customContentfulIds
+    : [projectPage?.id, subpage?.id]
+
+  useContentfulId(...contentfulIds)
 
   const baseRouterPath = router.asPath.split('?')[0].split('#')[0]
 
@@ -116,7 +126,9 @@ const ProjectPage: Screen<PageProps> = ({
     }
   }, [renderSlicesAsTabs, subpage, router.asPath])
 
-  const breadCrumbs: BreadCrumbItem[] = !subpage
+  const breadCrumbs: BreadCrumbItem[] = customBreadcrumbItems
+    ? customBreadcrumbItems
+    : !subpage
     ? []
     : [
         {
@@ -157,6 +169,7 @@ const ProjectPage: Screen<PageProps> = ({
         breadcrumbItems={breadCrumbs}
         sidebarNavigationTitle={navigationTitle}
         withSidebar={projectPage?.sidebar}
+        backLink={backLink}
       >
         {!subpage && shouldDisplayWebReader && (
           <Webreader

apps/web/screens/Project/components/ProjectWrapper/ProjectWrapper.tsx

@@ -27,6 +27,7 @@ interface ProjectWrapperProps {
   projectPage: ProjectPage
   breadcrumbItems: BreadCrumbItem[]
   sidebarNavigationTitle: string
+  backLink?: { url: string; text: string }
 }
 
 export const ProjectWrapper: React.FC<