Add org subpage layout

apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx

@@ -14,6 +14,7 @@ import {
   GridRow,
   Inline,
   Link,
+  LinkV2,
   Navigation,
   NavigationItem,
   ProfileCard,
@@ -123,6 +124,7 @@ interface WrapperProps {
   showExternalLinks?: boolean
   showReadSpeaker?: boolean
   isSubpage?: boolean
+  backLink?: { text: string; url: string }
 }
 
 interface HeaderProps {
@@ -872,6 +874,7 @@ export const OrganizationWrapper: React.FC<
   showExternalLinks = false,
   showReadSpeaker = true,
   isSubpage = true,
+  backLink,
 }) => {
   const router = useRouter()
   const { width } = useWindowSize()
@@ -922,21 +925,39 @@ export const OrganizationWrapper: React.FC<
           fullWidthContent={fullWidthContent}
           sidebarContent={
             <SidebarContainer>
-              <Navigation
-                baseId="pageNav"
-                items={navigationData.items}
-                title={navigationData.title}
-                activeItemTitle={activeNavigationItemTitle}
-                renderLink={(link, item) => {
-                  return item?.href ? (
-                    <NextLink href={item?.href} legacyBehavior>
-                      {link}
-                    </NextLink>
-                  ) : (
-                    link
-                  )
-                }}
-              />
+              <Stack space={3}>
+                {backLink && (
+                  <Box display={['none', 'none', 'block']} printHidden>
+                    <LinkV2 href={backLink.url}>
+                      <Button
+                        preTextIcon="arrowBack"
+                        preTextIconType="filled"
+                        size="small"
+                        type="button"
+                        variant="text"
+                        truncate
+                      >
+                        {backLink.text}
+                      </Button>
+                    </LinkV2>
+                  </Box>
+                )}
+                <Navigation
+                  baseId="pageNav"
+                  items={navigationData.items}
+                  title={navigationData.title}
+                  activeItemTitle={activeNavigationItemTitle}
+                  renderLink={(link, item) => {
+                    return item?.href ? (
+                      <NextLink href={item?.href} legacyBehavior>
+                        {link}
+                      </NextLink>
+                    ) : (
+                      link
+                    )
+                  }}
+                />
+              </Stack>
               {showSecondaryMenu && (
                 <>
                   {organizationPage.secondaryMenu &&

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

@@ -0,0 +1,12 @@
+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 { 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))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

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

@@ -0,0 +1,12 @@
+import withApollo from '@island.is/web/graphql/withApollo'
+import { withLocale } from '@island.is/web/i18n'
+import { Component } from '@island.is/web/pages/s/[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')(Component))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

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

@@ -0,0 +1,12 @@
+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 { 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))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

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

@@ -0,0 +1,98 @@
+import { useMemo } from 'react'
+import { useRouter } from 'next/router'
+
+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 GenericListItemPage, {
+  type GenericListItemPageProps,
+} from '@island.is/web/screens/GenericList/GenericListItem'
+import SubPageLayout, {
+  type SubPageProps,
+} from '@island.is/web/screens/Organization/SubPage'
+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: SubPageProps
+  }
+  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])
+
+  return (
+    <SubPageLayout
+      layoutProps={parentProps.layoutProps}
+      componentProps={{
+        ...parentProps.componentProps,
+        customContent: <GenericListItemPage item={genericListItemProps.item} />,
+        customBreadcrumbItems: [
+          {
+            title: 'Ísland.is',
+            href: linkResolver('homepage').href,
+          },
+          {
+            title: parentProps.componentProps.organizationPage?.title ?? '',
+            href: linkResolver('organizationpage', [
+              parentProps.componentProps.organizationPage?.slug ?? '',
+            ]).href,
+          },
+          {
+            title: parentProps.componentProps.subpage?.title ?? '',
+            href: backLinkUrl,
+            isTag: true,
+          },
+        ],
+        backLink: {
+          text: activeLocale === 'is' ? 'Til baka' : 'Go back', // TODO: perhaps read this value from contentful
+          url: backLinkUrl,
+        },
+      }}
+    />
+  )
+}
+
+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/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.ts

@@ -0,0 +1,12 @@
+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 { 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('is')(GenericListItem))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

apps/web/screens/GenericList/GenericListItem.tsx

@@ -1,37 +1,50 @@
-import { GridContainer, Stack, Text } from '@island.is/island-ui/core'
+import { Box, GridContainer, Stack, Text } from '@island.is/island-ui/core'
+import { HeadWithSocialSharing, Webreader } from '@island.is/web/components'
 import {
   GenericListItem,
   Query,
   QueryGetGenericListItemBySlugArgs,
 } from '@island.is/web/graphql/schema'
 import { useDateUtils } from '@island.is/web/i18n/useDateUtils'
-import { withMainLayout } from '@island.is/web/layouts/main'
 import { CustomNextError } from '@island.is/web/units/errors'
 import { webRichText } from '@island.is/web/utils/richText'
 
 import type { Screen } from '../../types'
 import { GET_GENERIC_LIST_ITEM_BY_SLUG_QUERY } from '../queries/GenericList'
 
-interface GenericListItemPageProps {
+export interface GenericListItemPageProps {
   item: GenericListItem
+  showReadspeaker?: boolean
 }
 
-const GenericListItemPage: Screen<GenericListItemPageProps> = ({ item }) => {
+const GenericListItemPage: Screen<GenericListItemPageProps> = ({
+  item,
+  showReadspeaker = true,
+}) => {
   const { format } = useDateUtils()
 
   return (
-    <GridContainer>
-      <Stack space={0}>
-        {item.date && (
-          <Text variant="eyebrow">
-            {format(new Date(item.date), 'dd.MM.yyyy')}
-          </Text>
-        )}
-        <Text variant="h1" as="h1">
-          {item.title}
-        </Text>
-        <Text as="div">{webRichText(item.content ?? [])}</Text>
-      </Stack>
+    <GridContainer className="rs_read">
+      <Box paddingBottom={2}>
+        <HeadWithSocialSharing
+          title={item.title}
+          // TODO: implement and perhaps use subpage looking title
+        />
+        <Stack space={0}>
+          {item.date && (
+            <Text variant="eyebrow">
+              {format(new Date(item.date), 'dd.MM.yyyy')}
+            </Text>
+          )}
+          <Stack space={1}>
+            <Text variant="h1" as="h1">
+              {item.title}
+            </Text>
+            {showReadspeaker && <Webreader readClass="rs_read" marginTop={0} />}
+          </Stack>
+          <Text as="div">{webRichText(item.content ?? [])}</Text>
+        </Stack>
+      </Box>
     </GridContainer>
   )
 }
@@ -71,4 +84,4 @@ GenericListItemPage.getProps = async ({ apolloClient, query, locale }) => {
   }
 }
 
-export default withMainLayout(GenericListItemPage)
+export default GenericListItemPage