Skip to content

Commit

Permalink
Render custom content for project subpages
Browse files Browse the repository at this point in the history
  • Loading branch information
@RunarVestmann
RunarVestmann committed Jun 4, 2024
1 parent a962f4f commit d64e3ef
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 140 deletions.
30 changes: 11 additions & 19 deletions apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,17 @@ export const Component: ScreenType<ComponentProps> = ({
isTag: true,
},
],
ogTitle:
genericListItemProps.item.title &&
`${genericListItemProps.item.title}${
subpage?.title ? ' | ' + subpage.title : ''
}`,
customContent: (
<GenericListItemPage
item={genericListItemProps.item}
ogTitle={
genericListItemProps.item.title &&
`${genericListItemProps.item.title}${
subpage?.title ? ' | ' + subpage.title : ''
}`
}
/>
),
projectPage: {
...projectPage,
backLink: {
Expand All @@ -78,20 +84,6 @@ export const Component: ScreenType<ComponentProps> = ({
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
}) ?? [],
},
}}
/>
Expand Down
248 changes: 127 additions & 121 deletions apps/web/screens/Project/Project.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export interface PageProps {
backLink?: { url: string; text: string }
customContentfulIds?: (string | undefined)[]
customBreadcrumbItems?: BreadCrumbItem[]
ogTitle?: string
customContent?: React.ReactNode
}
const ProjectPage: Screen<PageProps> = ({
projectPage,
Expand All @@ -69,7 +69,7 @@ const ProjectPage: Screen<PageProps> = ({
backLink,
customContentfulIds,
customBreadcrumbItems,
ogTitle,
customContent,
}) => {
const n = useNamespace(namespace)
const p = useNamespace(projectNamespace)
Expand Down Expand Up @@ -154,10 +154,133 @@ const ProjectPage: Screen<PageProps> = ({

const pageSlices = (subpage ?? projectPage)?.slices ?? []

const mainContent = (
<>
{!subpage && shouldDisplayWebReader && (
<Webreader
marginTop={0}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
readId={null}
readClass="rs_read"
/>
)}
{!!subpage && (
<Box marginBottom={1} className="rs_read">
<Text as="h1" variant="h1">
{subpage.title}
</Text>
{shouldDisplayWebReader && (
<Webreader
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
readId={null}
readClass="rs_read"
/>
)}
{subpage.showTableOfContents && (
<Box marginY={6} className="rs_read">
<TOC slices={subpage.slices} title={navigationTitle} />
</Box>
)}
{subpage.content && (
<Box className="rs_read">
{webRichText(
subpage.content as SliceType[],
undefined,
activeLocale,
)}
</Box>
)}
</Box>
)}
{renderSlicesAsTabs && !!subpage && subpage.slices.length > 1 && (
<Box marginBottom={2} className="rs_read">
<TableOfContents
tableOfContentsTitle={n('tableOfContentsTitle', 'Undirkaflar')}
headings={subpage.slices.map((slice) => ({
headingId: slice.id,
headingTitle: (slice as OneColumnText).title,
}))}
selectedHeadingId={selectedSliceTab?.id}
onClick={(id) => {
const slice = subpage.slices.find(
(s) => s.id === id,
) as OneColumnText
router.push(
`${baseRouterPath}#${slugify(slice.title)}`,
undefined,
{ shallow: true },
)
setSelectedSliceTab(slice)
}}
/>
</Box>
)}
{renderSlicesAsTabs && selectedSliceTab && (
<Box className="rs_read">
<Text paddingTop={4} as="h2" variant="h2">
{selectedSliceTab.title}
</Text>
</Box>
)}
{content?.length > 0 && (
<Box className="rs_read" paddingBottom={SLICE_SPACING}>
{webRichText(content, {
renderComponent: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
TabSection: (slice) => (
<TabSectionSlice
slice={slice}
contentColumnProps={{ span: '1/1' }}
contentPaddingTop={0}
/>
),
},
})}
</Box>
)}
{!subpage && projectPage?.stepper && (
<Box marginTop={6} className="rs_read">
<Stepper
scrollUpWhenNextStepAppears={false}
stepper={projectPage.stepper}
optionsFromNamespace={stepOptionsFromNamespace}
namespace={stepperNamespace}
/>
</Box>
)}
{!renderSlicesAsTabs && pageSlices.length > 0 && (
<Stack space={SLICE_SPACING}>
{pageSlices.map((slice: Slice, index) => {
const sliceCount = pageSlices.length
return (
<Box className="rs_read">
<SliceMachine
key={slice.id}
slice={slice}
namespace={namespace}
fullWidth={true}
slug={projectPage?.slug}
marginBottom={
typeof sliceCount === 'number' && index === sliceCount - 1
? 8
: 0
}
/>
</Box>
)
})}
</Stack>
)}
</>
)

return (
<>
<HeadWithSocialSharing
title={ogTitle || `${projectPage?.title} | Ísland.is`}
title={`${projectPage?.title} | Ísland.is`}
description={projectPage?.featuredDescription || projectPage?.intro}
imageUrl={projectPage?.featuredImage?.url}
imageContentType={projectPage?.featuredImage?.contentType}
Expand All @@ -173,124 +296,7 @@ const ProjectPage: Screen<PageProps> = ({
withSidebar={projectPage?.sidebar}
backLink={backLink}
>
{!subpage && shouldDisplayWebReader && (
<Webreader
marginTop={0}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
readId={null}
readClass="rs_read"
/>
)}
{!!subpage && (
<Box marginBottom={1} className="rs_read">
<Text as="h1" variant="h1">
{subpage.title}
</Text>
{shouldDisplayWebReader && (
<Webreader
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
readId={null}
readClass="rs_read"
/>
)}
{subpage.showTableOfContents && (
<Box marginY={6} className="rs_read">
<TOC slices={subpage.slices} title={navigationTitle} />
</Box>
)}
{subpage.content && (
<Box className="rs_read">
{webRichText(
subpage.content as SliceType[],
undefined,
activeLocale,
)}
</Box>
)}
</Box>
)}
{renderSlicesAsTabs && !!subpage && subpage.slices.length > 1 && (
<Box marginBottom={2} className="rs_read">
<TableOfContents
tableOfContentsTitle={n('tableOfContentsTitle', 'Undirkaflar')}
headings={subpage.slices.map((slice) => ({
headingId: slice.id,
headingTitle: (slice as OneColumnText).title,
}))}
selectedHeadingId={selectedSliceTab?.id}
onClick={(id) => {
const slice = subpage.slices.find(
(s) => s.id === id,
) as OneColumnText
router.push(
`${baseRouterPath}#${slugify(slice.title)}`,
undefined,
{ shallow: true },
)
setSelectedSliceTab(slice)
}}
/>
</Box>
)}
{renderSlicesAsTabs && selectedSliceTab && (
<Box className="rs_read">
<Text paddingTop={4} as="h2" variant="h2">
{selectedSliceTab.title}
</Text>
</Box>
)}
{content?.length > 0 && (
<Box className="rs_read" paddingBottom={SLICE_SPACING}>
{webRichText(content, {
renderComponent: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
TabSection: (slice) => (
<TabSectionSlice
slice={slice}
contentColumnProps={{ span: '1/1' }}
contentPaddingTop={0}
/>
),
},
})}
</Box>
)}
{!subpage && projectPage?.stepper && (
<Box marginTop={6} className="rs_read">
<Stepper
scrollUpWhenNextStepAppears={false}
stepper={projectPage.stepper}
optionsFromNamespace={stepOptionsFromNamespace}
namespace={stepperNamespace}
/>
</Box>
)}
{!renderSlicesAsTabs && pageSlices.length > 0 && (
<Stack space={SLICE_SPACING}>
{pageSlices.map((slice: Slice, index) => {
const sliceCount = pageSlices.length
return (
<Box className="rs_read">
<SliceMachine
key={slice.id}
slice={slice}
namespace={namespace}
fullWidth={true}
slug={projectPage?.slug}
marginBottom={
typeof sliceCount === 'number' && index === sliceCount - 1
? 8
: 0
}
/>
</Box>
)
})}
</Stack>
)}
{customContent ? customContent : mainContent}
</ProjectWrapper>

<Stack
Expand Down

0 comments on commit d64e3ef

Please sign in to comment.