From 3032d388245d0ff588e79570b93a6ee2184658c8 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Fri, 24 Mar 2023 15:58:04 +0100 Subject: [PATCH 01/19] feat(404-pages): Remove hardcoded article redirects --- .../app/src/next-config/redirects/redirects.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/app/src/next-config/redirects/redirects.js b/packages/app/src/next-config/redirects/redirects.js index 49edd0f33b..0775ab9cde 100644 --- a/packages/app/src/next-config/redirects/redirects.js +++ b/packages/app/src/next-config/redirects/redirects.js @@ -101,22 +101,6 @@ async function redirects() { destination: `/landelijk/ziekenhuizen-en-zorg`, permanent: true, }, - // Redirects for unpublished articles - COR-1232 - { - source: '/artikelen/wat-betekent-de-britse-variant-voor-nederland', - destination: '/artikelen', - permanent: true, - }, - { - source: '/artikelen/hoe-weten-we-hoeveel-besmettelijke-mensen-er-zijn', - destination: '/artikelen', - permanent: true, - }, - { - source: '/artikelen/waarom-mogelijke-situaties-van-besmetting-niet-altijd-te-zien-zijn-op-het-dashboard', - destination: '/artikelen', - permanent: true, - }, ]; } From 9fd39426143a6c274d50f10849abfc87363a6152 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Fri, 24 Mar 2023 16:01:48 +0100 Subject: [PATCH 02/19] feat(404-pages): Enable configuration of 404 pages in Sanity. --- packages/cms/src/desk-structure.ts | 4 + .../cms/src/page/not-found-page-structure.ts | 10 +++ .../cms/src/schemas/documents/pages/index.ts | 3 + .../notFoundPages/not-found-page-item.ts | 82 +++++++++++++++++++ .../notFoundPages/not-found-page-links.ts | 37 +++++++++ .../not-found-pages-collection.ts | 29 +++++++ 6 files changed, 165 insertions(+) create mode 100644 packages/cms/src/page/not-found-page-structure.ts create mode 100644 packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts create mode 100644 packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts create mode 100644 packages/cms/src/schemas/documents/pages/notFoundPages/not-found-pages-collection.ts diff --git a/packages/cms/src/desk-structure.ts b/packages/cms/src/desk-structure.ts index 84a1dae5d9..c8eb5eaaca 100644 --- a/packages/cms/src/desk-structure.ts +++ b/packages/cms/src/desk-structure.ts @@ -6,6 +6,7 @@ import { RiPagesFill } from 'react-icons/ri'; import 'sanity-mobile-preview/dist/index.css?raw'; import { elementsListItem } from './elements/elements-list-item'; import { lokalizeListItem } from './lokalize/lokalize-list-item'; +import { notFoundPageStrcuture } from './page/not-found-page-structure'; import { pagePartListItem } from './page/page-part-list-item'; /** @@ -98,6 +99,9 @@ export default () => addListItem(GrCircleInformation, 'Toegankelijkheid', 'toegankelijkheid'), addListItem(RiPagesFill, 'Contact', 'contact'), + // 404 Page structure + notFoundPageStrcuture(), + S.divider(), S.listItem() diff --git a/packages/cms/src/page/not-found-page-structure.ts b/packages/cms/src/page/not-found-page-structure.ts new file mode 100644 index 0000000000..9914e0503e --- /dev/null +++ b/packages/cms/src/page/not-found-page-structure.ts @@ -0,0 +1,10 @@ +import { RiErrorWarningFill } from 'react-icons/ri'; +import { StructureBuilder as S } from '@sanity/structure'; + +export const notFoundPageStrcuture = () => { + return S.listItem() + .id('notFoundPages') + .title('404 Paginas') + .icon(RiErrorWarningFill) + .child(S.document().title('404 Paginas').schemaType('notFoundPagesCollection').documentId('notFoundPagesCollection')); +}; diff --git a/packages/cms/src/schemas/documents/pages/index.ts b/packages/cms/src/schemas/documents/pages/index.ts index f7a2f64b5c..f3383eefa9 100644 --- a/packages/cms/src/schemas/documents/pages/index.ts +++ b/packages/cms/src/schemas/documents/pages/index.ts @@ -1,6 +1,9 @@ export * from './cijfer-verantwoording-groepen-page'; export * from './cijfer-verantwoording-page'; export * from './contact'; +export * from './notFoundPages/not-found-pages-collection'; +export * from './notFoundPages/not-found-page-item'; +export * from './notFoundPages/not-found-page-links'; export * from './over-dit-dashboard-page'; export * from './over-risiconiveaus-page-new'; export * from './veelgestelde-vragen-groepen-page'; diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts new file mode 100644 index 0000000000..65cd356c61 --- /dev/null +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts @@ -0,0 +1,82 @@ +import { REQUIRED } from '../../../../validation'; + +export const notFoundPageItem = { + name: 'notFoundPageItem', + title: '404 Pagina', + type: 'document', + fields: [ + { + name: 'paginaType', + title: 'Paginatype', + description: + 'Select the page type. This determines the level (NL, GM, Artciles, General) for which you want this configuration to be used. Attention: This value for each 404 Page should be unique.', + type: 'string', + options: { + list: [ + { value: 'general', title: 'Algemeen' }, + { value: 'nl', title: 'Landelijk' }, + { value: 'gm', title: 'Geemente' }, + { value: 'article', title: 'Artikelen' }, + ], + layout: 'dropdown', + }, + validation: REQUIRED, + }, + { + name: 'title', + title: 'Titel', + description: 'Configure the header that will be shown on the page.', + type: 'localeRichContentBlock', + validation: REQUIRED, + }, + { + name: 'description', + title: 'Beschrijving', + description: 'Configure a description. This text will be shown below the header.', + type: 'localeRichContentBlock', + validation: REQUIRED, + }, + { + name: 'links', + title: 'Links', + description: 'Configure a list of links. On the general page, this will be displayed below the descripton. On all other pages, this will be below the CTA.', + type: 'array', + of: [{ type: 'reference', to: { type: 'notFoundPageLinks' } }], + }, + { + name: 'image', + title: 'Image', + description: 'Select an image to show on this page.', + type: 'image', + options: { + hotspot: true, + }, + fields: [ + { + title: 'Alt Text', + name: 'altText', + type: 'localeString', + }, + ], + validation: REQUIRED, + }, + { + name: 'cta', + title: 'Call To Action (CTA)', + description: 'This CTA will be displayed as a button on the page', + type: 'object', + fields: [ + { + title: 'CTA Label', + name: 'ctaLabel', + type: 'localeString', + }, + { + title: 'CTA Link', + name: 'ctaLink', + type: 'url', + }, + ], + }, + ], +}; diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts new file mode 100644 index 0000000000..87beeb6d9e --- /dev/null +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts @@ -0,0 +1,37 @@ +import { REQUIRED } from '../../../../validation'; +import { KpiIconInput } from '../../../../components/portable-text/kpi-configuration/kpi-icon-input'; + +export const themeLink = { + name: 'notFoundPageLinks', + title: 'Not Found Page Links', + type: 'document', + fields: [ + { + title: 'Link Label', + description: 'The text to show for the link.', + name: 'ctaLabel', + type: 'localeString', + validation: REQUIRED, + }, + { + title: 'Link URL', + description: 'The destination URL for this link.', + name: 'ctaLink', + type: 'url', + validation: REQUIRED, + }, + { + title: 'Icon', + description: 'The icon to use for this link. It will be shown to the left of this link.', + name: 'ctaIcon', + type: 'string', + inputComponent: KpiIconInput, + }, + ], + preview: { + select: { + title: 'ctaLabel.nl', + subtitle: 'ctaLink', + }, + }, +}; diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-pages-collection.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-pages-collection.ts new file mode 100644 index 0000000000..34264eb9f4 --- /dev/null +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-pages-collection.ts @@ -0,0 +1,29 @@ +import { Rule } from '~/sanity'; + +export const notFoundPagesCollection = { + name: 'notFoundPagesCollection', + title: '404 Paginas', + type: 'document', + fields: [ + { + name: 'notFoundPagesList', + title: 'Paginas', + description: + 'Configure each 404 page. Add a new item to configure a particular 404 page. When added, select a level from the dropdown list "Pagina Type" to get started. If you are unable to publish this page, please check the errors by hovering over the error icon next to the title above.', + type: 'array', + of: [{ type: 'reference', to: { type: 'notFoundPageItem' } }], + validation: (rule: Rule) => [ + rule.required(), + + // This will populate error messages and stop the document from being published. + rule.custom((value: string | any[]) => { + if (value && value?.length > 4) { + return 'You can only add 4 items to this list.'; + } + + return true; + }), + ], + }, + ], +}; From 54611a4dd48d9f833e2e6d3579209acaf100aaf2 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Mon, 27 Mar 2023 16:45:12 +0200 Subject: [PATCH 03/19] feat(404-pages): Adjust schemas. --- .../pages/notFoundPages/not-found-page-item.ts | 8 ++++---- .../pages/notFoundPages/not-found-page-links.ts | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts index 65cd356c61..f968c020d5 100644 --- a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts @@ -6,8 +6,8 @@ export const notFoundPageItem = { type: 'document', fields: [ { - name: 'paginaType', - title: 'Paginatype', + name: 'pageType', + title: 'Pagina Type', description: 'Select the page type. This determines the level (NL, GM, Artciles, General) for which you want this configuration to be used. Attention: This value for each 404 Page should be unique.', type: 'string', @@ -26,7 +26,7 @@ export const notFoundPageItem = { name: 'title', title: 'Titel', description: 'Configure the header that will be shown on the page.', - type: 'localeRichContentBlock', + type: 'localeString', validation: REQUIRED, }, { @@ -39,7 +39,7 @@ export const notFoundPageItem = { { name: 'links', title: 'Links', - description: 'Configure a list of links. On the general page, this will be displayed below the descripton. On all other pages, this will be below the CTA.', + description: 'Configure a list of links. On the general page, this will be displayed below the description. On all other pages, this will be below the CTA.', type: 'array', of: [{ type: 'reference', to: { type: 'notFoundPageLinks' } }], }, diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts index 87beeb6d9e..d94b1e064e 100644 --- a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts @@ -9,29 +9,29 @@ export const themeLink = { { title: 'Link Label', description: 'The text to show for the link.', - name: 'ctaLabel', + name: 'linkLabel', type: 'localeString', validation: REQUIRED, }, { title: 'Link URL', description: 'The destination URL for this link.', - name: 'ctaLink', + name: 'linkUrl', type: 'url', validation: REQUIRED, }, { title: 'Icon', description: 'The icon to use for this link. It will be shown to the left of this link.', - name: 'ctaIcon', + name: 'linkIcon', type: 'string', inputComponent: KpiIconInput, }, ], preview: { select: { - title: 'ctaLabel.nl', - subtitle: 'ctaLink', + title: 'linkLabel.nl', + subtitle: 'linkUrl', }, }, }; From 72e0f771a1b29cabccf962f0f48b84a921166b92 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Mon, 27 Mar 2023 16:46:45 +0200 Subject: [PATCH 04/19] feat(404-pages): Wrap breadcrumbs with a guard. --- packages/app/src/domain/layout/layout.tsx | 36 ++++++----------------- 1 file changed, 9 insertions(+), 27 deletions(-) diff --git a/packages/app/src/domain/layout/layout.tsx b/packages/app/src/domain/layout/layout.tsx index b1cd505b37..997c1d8f52 100644 --- a/packages/app/src/domain/layout/layout.tsx +++ b/packages/app/src/domain/layout/layout.tsx @@ -17,31 +17,14 @@ interface LayoutProps { breadcrumbsData?: Record; } -export function Layout( - props: LayoutProps & { lastGenerated: string; children: React.ReactNode } -) { - const { - breadcrumbsData, - children, - title, - description, - openGraphImage, - twitterImage, - url, - lastGenerated, - } = props; +export function Layout(props: LayoutProps & { lastGenerated: string; children: React.ReactNode }) { + const { breadcrumbsData, children, title, description, openGraphImage, twitterImage, url, lastGenerated } = props; const { commonTexts } = useIntl(); return (
- + {commonTexts.dashboard_wide_notification.title.length !== 0 && ( - + )} - - - + {breadcrumbsData && ( + + + + )}
{children}
From 5d3d98f232c57f26154aceacc387d8b0a3620536 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Wed, 29 Mar 2023 13:37:07 +0200 Subject: [PATCH 05/19] feat(404-pages): Middleware redirect logic with parameters for each 404 page. --- packages/app/src/pages/_middleware.ts | 33 +++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 packages/app/src/pages/_middleware.ts diff --git a/packages/app/src/pages/_middleware.ts b/packages/app/src/pages/_middleware.ts new file mode 100644 index 0000000000..8a7e0871e1 --- /dev/null +++ b/packages/app/src/pages/_middleware.ts @@ -0,0 +1,33 @@ +import { NextResponse } from 'next/server'; +import type { NextRequest } from 'next/server'; + +export const middleware = async (request: NextRequest) => { + const clonedURL = request.nextUrl.clone(); + + // Fetch the URL from the current request, if it is not a 404 then do not continue with execution. + const response = await fetch(request.nextUrl.href); + if (response.status !== 404) return NextResponse.next(); + + const isLevel = (level: string): boolean => request.nextUrl.pathname.startsWith(`/${level}`); + const showGenericNotFoundPage = !(isLevel('landelijk') || isLevel('gemeente') || isLevel('artikelen')); + + if (showGenericNotFoundPage) { + clonedURL.pathname = '/404/general'; + return NextResponse.rewrite(clonedURL); + } + + if (isLevel('landelijk')) { + clonedURL.pathname = '/404/nl'; + return NextResponse.rewrite(clonedURL); + } + + if (isLevel('gemeente')) { + clonedURL.pathname = '/404/gm'; + return NextResponse.rewrite(clonedURL); + } + + if (isLevel('artikelen')) { + clonedURL.pathname = '/404/article'; + return NextResponse.rewrite(clonedURL); + } +}; From 82960b2cd01307385c677ad0ac898f2f5a178a1e Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Wed, 29 Mar 2023 14:59:49 +0200 Subject: [PATCH 06/19] feat(404-pages): Add new icons. Adjust KpiIconInput component so that it closes upon selecting an icon. --- .../kpi-configuration/kpi-icon-input.tsx | 1 + packages/icons/icons.md | 2 ++ packages/icons/src/icon-name2filename.ts | 4 ++++ packages/icons/src/svg/form.svg | 11 +++++++++++ packages/icons/src/svg/town.svg | 5 +++++ 5 files changed, 23 insertions(+) create mode 100644 packages/icons/src/svg/form.svg create mode 100644 packages/icons/src/svg/town.svg diff --git a/packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx b/packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx index faac627ae2..31cd1db7a3 100644 --- a/packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx +++ b/packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx @@ -36,6 +36,7 @@ export const KpiIconInput = forwardRef((props: any, ref: any) => { const setValue = isDefined(value) ? set(allIconsToFilename[value]) : unset(); setSelectedIcon(value); onChange(PatchEvent.from(setValue)); + onClose(); }; return ( diff --git a/packages/icons/icons.md b/packages/icons/icons.md index abb96666f3..d3a6ee4a55 100644 --- a/packages/icons/icons.md +++ b/packages/icons/icons.md @@ -51,6 +51,7 @@ See below an overview of all the available icons in this package. This file is g | Experimenteel |
Experimenteel
| | External |
External
| | Eye |
Eye
| +| Form |
Form
| | FrisseLucht |
FrisseLucht
| | GedeeltelijkOpenRugzak |
GedeeltelijkOpenRugzak
| | GeenEntertainment |
GeenEntertainment
| @@ -120,6 +121,7 @@ See below an overview of all the available icons in this package. This file is g | Taxi |
Taxi
| | Testbewijs |
Testbewijs
| | Toegangsbewijzen |
Toegangsbewijzen
| +| Town |
Town
| | Travel |
Travel
| | Unchecked |
Unchecked
| | Up |
Up
| diff --git a/packages/icons/src/icon-name2filename.ts b/packages/icons/src/icon-name2filename.ts index d803069b65..b5c6c1aeee 100644 --- a/packages/icons/src/icon-name2filename.ts +++ b/packages/icons/src/icon-name2filename.ts @@ -46,6 +46,7 @@ export type IconName = | 'Experimenteel' | 'External' | 'Eye' + | 'Form' | 'FrisseLucht' | 'GedeeltelijkOpenRugzak' | 'GeenEntertainment' @@ -115,6 +116,7 @@ export type IconName = | 'Taxi' | 'Testbewijs' | 'Toegangsbewijzen' + | 'Town' | 'Travel' | 'Unchecked' | 'Up' @@ -181,6 +183,7 @@ export const iconName2filename: Record = { Experimenteel: 'experimenteel.svg', External: 'external.svg', Eye: 'eye.svg', + Form: 'form.svg', FrisseLucht: 'frisse_lucht.svg', GedeeltelijkOpenRugzak: 'gedeeltelijk_open_rugzak.svg', GeenEntertainment: 'geen_entertainment.svg', @@ -251,6 +254,7 @@ export const iconName2filename: Record = { Taxi: 'taxi.svg', Testbewijs: 'testbewijs.svg', Toegangsbewijzen: 'toegangsbewijzen.svg', + Town: 'town.svg', Travel: 'travel.svg', Unchecked: 'unchecked.svg', Up: 'up.svg', diff --git a/packages/icons/src/svg/form.svg b/packages/icons/src/svg/form.svg new file mode 100644 index 0000000000..f262370f74 --- /dev/null +++ b/packages/icons/src/svg/form.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/icons/src/svg/town.svg b/packages/icons/src/svg/town.svg new file mode 100644 index 0000000000..a603840121 --- /dev/null +++ b/packages/icons/src/svg/town.svg @@ -0,0 +1,5 @@ + + + + + From 855d09b1e97384f82fdcf48f1c7fd36bb6dce136 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Wed, 29 Mar 2023 15:16:10 +0200 Subject: [PATCH 07/19] feat(404-pages): Extract query to its own file and adjust not found schema. --- .../src/queries/get-not-found-page-query.ts | 30 +++++++++++++++++++ .../notFoundPages/not-found-page-item.ts | 24 +++++++++++---- .../notFoundPages/not-found-page-links.ts | 6 ++-- 3 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 packages/app/src/queries/get-not-found-page-query.ts diff --git a/packages/app/src/queries/get-not-found-page-query.ts b/packages/app/src/queries/get-not-found-page-query.ts new file mode 100644 index 0000000000..b6e53659a3 --- /dev/null +++ b/packages/app/src/queries/get-not-found-page-query.ts @@ -0,0 +1,30 @@ +export const getNotFoundPageQuery = (locale: string, pageType: string) => { + return `// groq + *[_type == 'notFoundPageItem' && pageType == '${pageType}' && !(_id in path('drafts.**'))]{ + ..., + 'title': title.${locale}, + 'description': { + ...description, + 'nl': [ + ...description.${locale}[] + ] + }, + 'links': links[]->{ + 'linkUrl': linkUrl, + 'linkLabel': linkLabel.${locale}, + 'linkIcon': linkIcon, + }, + 'cta': { + ...cta, + 'ctaLabel': cta.ctaLabel.${locale}, + }, + "image": { + ...image, + "altText": image.altText.${locale}, + "asset": { + ...image.asset->, + } + } + }[0] + `; +}; diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts index f968c020d5..8d7088a546 100644 --- a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts @@ -1,3 +1,4 @@ +import { KpiIconInput } from '~/components/portable-text/kpi-configuration/kpi-icon-input'; import { REQUIRED } from '../../../../validation'; export const notFoundPageItem = { @@ -46,16 +47,18 @@ export const notFoundPageItem = { { name: 'image', title: 'Image', - description: 'Select an image to show on this page.', + description: 'Select an image to show on this page. If selected, and alt text must be provided for accessibility.', type: 'image', options: { hotspot: true, }, fields: [ { - title: 'Alt Text', name: 'altText', + title: 'Alt Text', + description: 'This text will be used by screen readers for accessibility.', type: 'localeString', + validation: REQUIRED, }, ], validation: REQUIRED, @@ -63,18 +66,29 @@ export const notFoundPageItem = { { name: 'cta', title: 'Call To Action (CTA)', - description: 'This CTA will be displayed as a button on the page', + description: 'This CTA will be displayed as a button on the page.', type: 'object', fields: [ { - title: 'CTA Label', name: 'ctaLabel', + title: 'CTA Label', + description: 'If a CTA is configured, then a label must be provided.', type: 'localeString', + validation: REQUIRED, }, { - title: 'CTA Link', name: 'ctaLink', + title: 'CTA Link', + description: "If a CTA is configured, then a URL for the CTA's destination must be provided", type: 'url', + validation: REQUIRED, + }, + { + name: 'ctaIcon', + title: 'CTA Icon', + description: 'If a CTA is configured, you can choose to show an icon to the left of the CTA label', + type: 'string', + inputComponent: KpiIconInput, }, ], }, diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts index d94b1e064e..35c6e32a60 100644 --- a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts @@ -8,21 +8,21 @@ export const themeLink = { fields: [ { title: 'Link Label', - description: 'The text to show for the link.', + description: 'If a link is configured, then a label must be provided.', name: 'linkLabel', type: 'localeString', validation: REQUIRED, }, { title: 'Link URL', - description: 'The destination URL for this link.', + description: 'If a link is configured, then a destination URL must be provided.', name: 'linkUrl', type: 'url', validation: REQUIRED, }, { title: 'Icon', - description: 'The icon to use for this link. It will be shown to the left of this link.', + description: 'If a link is configured, you can choose to display an icon to the left of the link label.', name: 'linkIcon', type: 'string', inputComponent: KpiIconInput, From 902241b57ef3acb398629f80e7a3db2d3e004046 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Wed, 29 Mar 2023 15:52:10 +0200 Subject: [PATCH 08/19] feat(404-pages): Update SVG fill --- packages/icons/src/svg/form.svg | 18 +++++++++--------- packages/icons/src/svg/town.svg | 6 +++--- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/icons/src/svg/form.svg b/packages/icons/src/svg/form.svg index f262370f74..39bd326bbb 100644 --- a/packages/icons/src/svg/form.svg +++ b/packages/icons/src/svg/form.svg @@ -1,11 +1,11 @@ - + - - - - - - - - + + + + + + + + diff --git a/packages/icons/src/svg/town.svg b/packages/icons/src/svg/town.svg index a603840121..b7390a0af5 100644 --- a/packages/icons/src/svg/town.svg +++ b/packages/icons/src/svg/town.svg @@ -1,5 +1,5 @@ - + - - + + From 2b074005d6c11d84651231193b741c5a159d836d Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Wed, 29 Mar 2023 17:21:25 +0200 Subject: [PATCH 09/19] feat(404-pages): Adjust query and schema. Delete old 404 page --- packages/app/src/pages/404.tsx | 27 ------------------- .../src/queries/get-not-found-page-query.ts | 7 +---- .../notFoundPages/not-found-page-item.ts | 2 +- 3 files changed, 2 insertions(+), 34 deletions(-) delete mode 100644 packages/app/src/pages/404.tsx diff --git a/packages/app/src/pages/404.tsx b/packages/app/src/pages/404.tsx deleted file mode 100644 index 639bf97f59..0000000000 --- a/packages/app/src/pages/404.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Heading, Text } from '~/components/typography'; -import { Content } from '~/domain/layout/content'; -import { Layout } from '~/domain/layout/layout'; -import { useIntl } from '~/intl'; -import { - createGetStaticProps, - StaticProps, -} from '~/static-props/create-get-static-props'; -import { getLastGeneratedDate } from '~/static-props/get-data'; - -export const getStaticProps = createGetStaticProps(getLastGeneratedDate); - -const NotFound = (props: StaticProps) => { - const { lastGenerated } = props; - const { commonTexts } = useIntl(); - - return ( - - - {commonTexts.notfound_titel.text} - {commonTexts.notfound_beschrijving.text} - - - ); -}; - -export default NotFound; diff --git a/packages/app/src/queries/get-not-found-page-query.ts b/packages/app/src/queries/get-not-found-page-query.ts index b6e53659a3..360e89b154 100644 --- a/packages/app/src/queries/get-not-found-page-query.ts +++ b/packages/app/src/queries/get-not-found-page-query.ts @@ -3,12 +3,7 @@ export const getNotFoundPageQuery = (locale: string, pageType: string) => { *[_type == 'notFoundPageItem' && pageType == '${pageType}' && !(_id in path('drafts.**'))]{ ..., 'title': title.${locale}, - 'description': { - ...description, - 'nl': [ - ...description.${locale}[] - ] - }, + 'description': description.${locale}, 'links': links[]->{ 'linkUrl': linkUrl, 'linkLabel': linkLabel.${locale}, diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts index 8d7088a546..2fa1902612 100644 --- a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts @@ -1,4 +1,4 @@ -import { KpiIconInput } from '~/components/portable-text/kpi-configuration/kpi-icon-input'; +import { KpiIconInput } from '../../../../components/portable-text/kpi-configuration/kpi-icon-input'; import { REQUIRED } from '../../../../validation'; export const notFoundPageItem = { From c11f1fb44d39c64b83f7f6188b53d38fe0009f33 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Wed, 29 Mar 2023 17:22:07 +0200 Subject: [PATCH 10/19] feat(404-pages): WIP new 404 pages. --- packages/app/src/pages/404/[[...404]].tsx | 130 ++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 packages/app/src/pages/404/[[...404]].tsx diff --git a/packages/app/src/pages/404/[[...404]].tsx b/packages/app/src/pages/404/[[...404]].tsx new file mode 100644 index 0000000000..60908556f1 --- /dev/null +++ b/packages/app/src/pages/404/[[...404]].tsx @@ -0,0 +1,130 @@ +import { colors } from '@corona-dashboard/common'; +import { ChevronRight } from '@corona-dashboard/icons'; +import { PortableTextEntry } from '@sanity/block-content-to-react'; +import { GetStaticPaths } from 'next/types'; +import styled from 'styled-components'; +import { Box } from '~/components/base/box'; +import { RichContent } from '~/components/cms/rich-content'; +import { SanityImage } from '~/components/cms/sanity-image'; +import DynamicIcon, { IconName } from '~/components/get-icon-by-name'; +import { Header } from '~/components/page-information-block/components/header'; +import { Anchor } from '~/components/typography'; +import { GmComboBox } from '~/domain/layout/components/gm-combo-box'; +import { Layout } from '~/domain/layout/layout'; +import { useIntl } from '~/intl'; +import { getClient, getImageProps } from '~/lib/sanity'; +import { getNotFoundPageQuery } from '~/queries/get-not-found-page-query'; +import { getLastGeneratedDate } from '~/static-props/get-data'; +import { mediaQueries, sizes, space } from '~/style/theme'; +import { ImageBlock } from '~/types/cms'; +import { getFilenameToIconName } from '~/utils/get-filename-to-icon-name'; + +export const getStaticPaths: GetStaticPaths = () => { + return { paths: [], fallback: 'blocking' } +} + +export const getStaticProps = (async (context) => { + const { lastGenerated } = getLastGeneratedDate(); + const { params: notFoundParams , locale } = context; + + const pageType = notFoundParams['404'][0]; // The pageType param is always the first param as it is the only one passed in. + const query = getNotFoundPageQuery(locale, pageType) + + const client = await getClient(); + const notFoundPageConfiguration = await client.fetch(query); + notFoundPageConfiguration.isGM = pageType === 'gm'; + + return { + props: { lastGenerated, notFoundPageConfiguration }, + } +}) + +type Link = { + id: string; + linkUrl: string; + linkLabel: string; + linkIcon?: string; +} + +interface NotFoundProps { + lastGenerated: string; + notFoundPageConfiguration: { + title: string; + description: PortableTextEntry[]; + isGM: boolean; + image: ImageBlock; + links?: Link[]; + cta?: { + ctaLabel: string; + ctaLink: string; + ctaIcon?: string; + } + } +} + +const NotFound = (props: NotFoundProps) => { + const { lastGenerated, notFoundPageConfiguration } = props; + const { commonTexts } = useIntl(); + const { title, description, isGM, image, links = undefined, cta = undefined } = notFoundPageConfiguration; + console.log('description :', description); + + return ( + + + +
+ + + {isGM && } + + {links && links.map((link, index) => ( + + ))} + + {cta && {cta.ctaLabel}} + + + + + + + + ); +} + +export default NotFound; + +interface NotFoundLinkProps { + link: Link; + marginBottom: string | undefined; +} + +const NotFoundLink = ({link: {linkUrl, linkLabel, linkIcon}, marginBottom}: NotFoundLinkProps) => { + const iconNameFromFileName = linkIcon ? getFilenameToIconName(linkIcon) as IconName : null; + const icon = iconNameFromFileName ? : undefined; + + return ( + + {icon} + {linkLabel} + + + ); +} + +const NotFoundLayout = styled.div` + max-width: ${sizes.maxWidth}px; + margin: ${space[5]} auto; + padding: 0 ${space[4]}; + display: grid; + grid-template-columns: 30% 70%; + grid-gap: ${space[5]}; +`; + +const StyledAnchor = styled(Anchor)` + margin: 0 ${space[1]} 0 ${space[2]}; + + &:hover { + text-decoration: none; + } +`; \ No newline at end of file From 24db72c00f9d876206cc17a3ec0d9b46ae50ad0f Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Fri, 31 Mar 2023 17:59:25 +0200 Subject: [PATCH 11/19] feat(404-pages): Finalize 404 pages. --- packages/app/src/components/combo-box/combo-box.tsx | 9 +++++---- .../src/components/layout/components/top-navigation.tsx | 4 ++-- .../app/src/domain/layout/components/gm-combo-box.tsx | 4 +++- packages/app/src/queries/get-not-found-page-query.ts | 3 ++- packages/app/src/style/theme.ts | 1 + .../documents/pages/notFoundPages/not-found-page-item.ts | 3 ++- packages/icons/icons.md | 1 + packages/icons/src/icon-name2filename.ts | 2 ++ packages/icons/src/svg/home.svg | 6 ++++++ 9 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 packages/icons/src/svg/home.svg diff --git a/packages/app/src/components/combo-box/combo-box.tsx b/packages/app/src/components/combo-box/combo-box.tsx index caa7480c22..f2abb8d534 100644 --- a/packages/app/src/components/combo-box/combo-box.tsx +++ b/packages/app/src/components/combo-box/combo-box.tsx @@ -22,6 +22,7 @@ type TProps
GgdTesten
| | Groepen |
Groepen
| | HealthCare |
HealthCare
| +| Home |
Home
| | HomeAndVisits |
HomeAndVisits
| | HorecaEnEvenementenBestellen |
HorecaEnEvenementenBestellen
| | HorecaEnEvenementenEtendrinken |
HorecaEnEvenementenEtendrinken
| diff --git a/packages/icons/src/icon-name2filename.ts b/packages/icons/src/icon-name2filename.ts index b5c6c1aeee..88deb49806 100644 --- a/packages/icons/src/icon-name2filename.ts +++ b/packages/icons/src/icon-name2filename.ts @@ -57,6 +57,7 @@ export type IconName = | 'GgdTesten' | 'Groepen' | 'HealthCare' + | 'Home' | 'HomeAndVisits' | 'HorecaEnEvenementenBestellen' | 'HorecaEnEvenementenEtendrinken' @@ -195,6 +196,7 @@ export const iconName2filename: Record = { GgdTesten: 'ggd_testen.svg', Groepen: 'groepen.svg', HealthCare: 'health_care.svg', + Home: 'home.svg', HomeAndVisits: 'home_and_visits.svg', HorecaEnEvenementenBestellen: 'horeca_en_evenementen_bestellen.svg', HorecaEnEvenementenEtendrinken: 'horeca_en_evenementen_etendrinken.svg', diff --git a/packages/icons/src/svg/home.svg b/packages/icons/src/svg/home.svg new file mode 100644 index 0000000000..4ac1488de8 --- /dev/null +++ b/packages/icons/src/svg/home.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file From 028de01fcc58353b6e066c0a742e8d9dfa272429 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Fri, 31 Mar 2023 19:21:27 +0200 Subject: [PATCH 12/19] feat(404-pages): Fine tune implementation. --- packages/app/src/pages/404/[[...404]].tsx | 130 ----------- packages/app/src/pages/_middleware.ts | 8 +- packages/app/src/pages/not-found/[...404].tsx | 205 ++++++++++++++++++ 3 files changed, 209 insertions(+), 134 deletions(-) delete mode 100644 packages/app/src/pages/404/[[...404]].tsx create mode 100644 packages/app/src/pages/not-found/[...404].tsx diff --git a/packages/app/src/pages/404/[[...404]].tsx b/packages/app/src/pages/404/[[...404]].tsx deleted file mode 100644 index 60908556f1..0000000000 --- a/packages/app/src/pages/404/[[...404]].tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { colors } from '@corona-dashboard/common'; -import { ChevronRight } from '@corona-dashboard/icons'; -import { PortableTextEntry } from '@sanity/block-content-to-react'; -import { GetStaticPaths } from 'next/types'; -import styled from 'styled-components'; -import { Box } from '~/components/base/box'; -import { RichContent } from '~/components/cms/rich-content'; -import { SanityImage } from '~/components/cms/sanity-image'; -import DynamicIcon, { IconName } from '~/components/get-icon-by-name'; -import { Header } from '~/components/page-information-block/components/header'; -import { Anchor } from '~/components/typography'; -import { GmComboBox } from '~/domain/layout/components/gm-combo-box'; -import { Layout } from '~/domain/layout/layout'; -import { useIntl } from '~/intl'; -import { getClient, getImageProps } from '~/lib/sanity'; -import { getNotFoundPageQuery } from '~/queries/get-not-found-page-query'; -import { getLastGeneratedDate } from '~/static-props/get-data'; -import { mediaQueries, sizes, space } from '~/style/theme'; -import { ImageBlock } from '~/types/cms'; -import { getFilenameToIconName } from '~/utils/get-filename-to-icon-name'; - -export const getStaticPaths: GetStaticPaths = () => { - return { paths: [], fallback: 'blocking' } -} - -export const getStaticProps = (async (context) => { - const { lastGenerated } = getLastGeneratedDate(); - const { params: notFoundParams , locale } = context; - - const pageType = notFoundParams['404'][0]; // The pageType param is always the first param as it is the only one passed in. - const query = getNotFoundPageQuery(locale, pageType) - - const client = await getClient(); - const notFoundPageConfiguration = await client.fetch(query); - notFoundPageConfiguration.isGM = pageType === 'gm'; - - return { - props: { lastGenerated, notFoundPageConfiguration }, - } -}) - -type Link = { - id: string; - linkUrl: string; - linkLabel: string; - linkIcon?: string; -} - -interface NotFoundProps { - lastGenerated: string; - notFoundPageConfiguration: { - title: string; - description: PortableTextEntry[]; - isGM: boolean; - image: ImageBlock; - links?: Link[]; - cta?: { - ctaLabel: string; - ctaLink: string; - ctaIcon?: string; - } - } -} - -const NotFound = (props: NotFoundProps) => { - const { lastGenerated, notFoundPageConfiguration } = props; - const { commonTexts } = useIntl(); - const { title, description, isGM, image, links = undefined, cta = undefined } = notFoundPageConfiguration; - console.log('description :', description); - - return ( - - - -
- - - {isGM && } - - {links && links.map((link, index) => ( - - ))} - - {cta && {cta.ctaLabel}} - - - - - - - - ); -} - -export default NotFound; - -interface NotFoundLinkProps { - link: Link; - marginBottom: string | undefined; -} - -const NotFoundLink = ({link: {linkUrl, linkLabel, linkIcon}, marginBottom}: NotFoundLinkProps) => { - const iconNameFromFileName = linkIcon ? getFilenameToIconName(linkIcon) as IconName : null; - const icon = iconNameFromFileName ? : undefined; - - return ( - - {icon} - {linkLabel} - - - ); -} - -const NotFoundLayout = styled.div` - max-width: ${sizes.maxWidth}px; - margin: ${space[5]} auto; - padding: 0 ${space[4]}; - display: grid; - grid-template-columns: 30% 70%; - grid-gap: ${space[5]}; -`; - -const StyledAnchor = styled(Anchor)` - margin: 0 ${space[1]} 0 ${space[2]}; - - &:hover { - text-decoration: none; - } -`; \ No newline at end of file diff --git a/packages/app/src/pages/_middleware.ts b/packages/app/src/pages/_middleware.ts index 8a7e0871e1..a4d9387f67 100644 --- a/packages/app/src/pages/_middleware.ts +++ b/packages/app/src/pages/_middleware.ts @@ -12,22 +12,22 @@ export const middleware = async (request: NextRequest) => { const showGenericNotFoundPage = !(isLevel('landelijk') || isLevel('gemeente') || isLevel('artikelen')); if (showGenericNotFoundPage) { - clonedURL.pathname = '/404/general'; + clonedURL.pathname = '/not-found/general'; return NextResponse.rewrite(clonedURL); } if (isLevel('landelijk')) { - clonedURL.pathname = '/404/nl'; + clonedURL.pathname = '/not-found/nl'; return NextResponse.rewrite(clonedURL); } if (isLevel('gemeente')) { - clonedURL.pathname = '/404/gm'; + clonedURL.pathname = '/not-found/gm'; return NextResponse.rewrite(clonedURL); } if (isLevel('artikelen')) { - clonedURL.pathname = '/404/article'; + clonedURL.pathname = '/not-found/article'; return NextResponse.rewrite(clonedURL); } }; diff --git a/packages/app/src/pages/not-found/[...404].tsx b/packages/app/src/pages/not-found/[...404].tsx new file mode 100644 index 0000000000..7f6f03262c --- /dev/null +++ b/packages/app/src/pages/not-found/[...404].tsx @@ -0,0 +1,205 @@ +import { colors } from '@corona-dashboard/common'; +import { ChevronRight } from '@corona-dashboard/icons'; +import { PortableTextEntry } from '@sanity/block-content-to-react'; +import { GetStaticProps } from 'next'; +import { GetStaticPaths } from 'next/types'; +import styled from 'styled-components'; +import { Box } from '~/components/base/box'; +import { RichContent } from '~/components/cms/rich-content'; +import { SanityImage } from '~/components/cms/sanity-image'; +import DynamicIcon, { IconName } from '~/components/get-icon-by-name'; +import { Anchor, Heading } from '~/components/typography'; +import { GmComboBox } from '~/domain/layout/components/gm-combo-box'; +import { Layout } from '~/domain/layout/layout'; +import { useIntl } from '~/intl'; +import { getClient, getImageProps } from '~/lib/sanity'; +import { getNotFoundPageQuery } from '~/queries/get-not-found-page-query'; +import { getLastGeneratedDate } from '~/static-props/get-data'; +import { mediaQueries, radii, sizes, space } from '~/style/theme'; +import { ImageBlock } from '~/types/cms'; +import { getFilenameToIconName } from '~/utils/get-filename-to-icon-name'; + +export const getStaticPaths: GetStaticPaths = () => { + return { paths: [], fallback: 'blocking' }; +}; + +export const getStaticProps: GetStaticProps = async (context) => { + const { lastGenerated } = getLastGeneratedDate(); + const { params: notFoundParams, locale = 'nl' } = context; + + const pageType = notFoundParams && notFoundParams['404'] ? notFoundParams['404'].at(0) : undefined; // The pageType param is always the first param as it is the only one passed in. + const query = getNotFoundPageQuery(locale, pageType ?? 'general'); + + const client = await getClient(); + const notFoundPageConfiguration = await client.fetch(query); + notFoundPageConfiguration.isGmPage = pageType === 'gm'; + notFoundPageConfiguration.isGeneralPage = pageType === 'general'; + + return { + props: { lastGenerated, notFoundPageConfiguration }, + }; +}; + +type Link = { + id?: string; + linkIcon?: string; + linkLabel: string; + linkUrl: string; +}; + +interface NotFoundProps { + lastGenerated: string; + notFoundPageConfiguration: { + description: PortableTextEntry[]; + image: ImageBlock; + isGeneralPage: boolean; + isGmPage: boolean; + title: string; + cta?: { + ctaIcon?: string; + ctaLabel: string; + ctaLink: string; + }; + links?: Link[]; + }; +} + +const NotFound = ({ lastGenerated, notFoundPageConfiguration }: NotFoundProps) => { + const { commonTexts } = useIntl(); + const { title, description, isGmPage, isGeneralPage, image, links = undefined, cta = undefined } = notFoundPageConfiguration; + + return ( + + + + + {title} + + + + {isGmPage && ( + // Compensating for padding on the combo-box element using negative margins. + + + + )} + + {links && ( + + {links.map((link, index) => ( + + ))} + + )} + + {cta && Object.values(cta).some((item) => item !== null) && ( + + )} + + + + + + + + ); +}; + +export default NotFound; + +interface NotFoundLinkProps { + alignItems: string; + display: string; + link: Link; + border?: string; + borderRadius?: string; + className?: string; + hasChevron?: boolean; + isCTA?: boolean; + marginBottom?: string | undefined; + maxWidth?: string; + order?: number; + padding?: string; +} + +const NotFoundLink = ({ link: { linkUrl, linkLabel, linkIcon }, hasChevron, isCTA, ...restProps }: NotFoundLinkProps) => { + const iconNameFromFileName = linkIcon ? (getFilenameToIconName(linkIcon) as IconName) : null; + const icon = iconNameFromFileName ? : undefined; + + return ( + + {icon && icon} + + + {linkLabel} + + + {hasChevron && } + + ); +}; + +const NotFoundCTA = NotFoundLink; // Renaming for the sake of readability. + +const NotFoundLayout = styled.div` + display: flex; + flex-direction: column; + gap: ${space[4]}; + justify-content: space-between; + margin: ${space[5]} auto; + max-width: ${sizes.maxWidth}px; + padding: 0 ${space[3]}; + + @media ${mediaQueries.sm} { + flex-direction: row; + padding: 0 ${space[4]}; + } + + @media ${mediaQueries.md} { + align-items: flex-start; + } + + .not-found-content-cta { + transition: all 0.2s ease-in-out; + + svg rect { + fill: ${colors.transparent}; + } + + &:hover { + background-color: ${colors.gray1}; + } + } +`; + +interface StyledAnchorProps { + hasIcon: boolean; + isCTA: boolean | undefined; +} + +const StyledAnchor = styled(Anchor)` + margin-inline: ${({ hasIcon, isCTA }) => (hasIcon || isCTA ? space[2] : !hasIcon ? `0 ${space[2]}` : 0)}; + + &:hover { + text-decoration: none; + } +`; From 553db1761f6a56c6b3721ff295eaad489d779265 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Mon, 3 Apr 2023 11:17:03 +0200 Subject: [PATCH 13/19] feat(404-pages): PR Feedback, first round. --- packages/app/src/queries/get-not-found-page-query.ts | 1 - packages/cms/src/desk-structure.ts | 6 +++++- .../pages/notFoundPages/not-found-page-item.ts | 4 ++-- packages/icons/icons.md | 1 - packages/icons/src/icon-name2filename.ts | 2 -- packages/icons/src/svg/form.svg | 11 ----------- packages/icons/src/svg/home.svg | 6 ++---- packages/icons/src/svg/town.svg | 7 +++---- 8 files changed, 12 insertions(+), 26 deletions(-) delete mode 100644 packages/icons/src/svg/form.svg diff --git a/packages/app/src/queries/get-not-found-page-query.ts b/packages/app/src/queries/get-not-found-page-query.ts index fb0153c2b4..8c1e166753 100644 --- a/packages/app/src/queries/get-not-found-page-query.ts +++ b/packages/app/src/queries/get-not-found-page-query.ts @@ -1,7 +1,6 @@ export const getNotFoundPageQuery = (locale: string, pageType: string) => { return `// groq *[_type == 'notFoundPageItem' && pageType == '${pageType}' && !(_id in path('drafts.**'))]{ - ..., 'title': title.${locale}, 'description': description.${locale}, 'links': links[]->{ diff --git a/packages/cms/src/desk-structure.ts b/packages/cms/src/desk-structure.ts index c8eb5eaaca..2b47228b25 100644 --- a/packages/cms/src/desk-structure.ts +++ b/packages/cms/src/desk-structure.ts @@ -29,6 +29,10 @@ const hiddenDocTypes = [ 'lokalizeString', 'lokalizeSubject', 'lokalizeText', + 'notFoundPage', + 'notFoundPageItem', + 'notFoundPageLinks', + 'notFoundPagesCollection', 'overDitDashboard', 'overRisicoNiveaus', 'overRisicoNiveausNew', @@ -44,6 +48,7 @@ const hiddenDocTypes = [ 'themeLinkCollection', 'themeTile', 'themeTileCollection', + 'themeTileDateConfig', 'thermometer', 'thermometerLevel', 'thermometerTimeline', @@ -54,7 +59,6 @@ const hiddenDocTypes = [ 'topicalPage', 'topicalPageConfig', 'trendIcon', - 'themeTileDateConfig', 'veelgesteldeVragen', 'veelgesteldeVragenGroups', 'warning', diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts index 0d43fe5e14..ccc33a7c4c 100644 --- a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts +++ b/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts @@ -10,7 +10,7 @@ export const notFoundPageItem = { name: 'pageType', title: 'Pagina Type', description: - 'Select the page type. This determines the level (NL, GM, Artciles, General) for which you want this configuration to be used. Attention: This value for each 404 Page should be unique.', + 'Select the page type. This determines the level (NL, GM, Articles, General) for which you want this configuration to be used. Attention: This value for each 404 Page should be unique.', type: 'string', options: { list: [ @@ -48,7 +48,7 @@ export const notFoundPageItem = { { name: 'image', title: 'Image', - description: 'Select an image to show on this page. If selected, and alt text must be provided for accessibility.', + description: 'Select an image to show on this page. If selected, an alt text must be provided for accessibility.', type: 'image', options: { hotspot: true, diff --git a/packages/icons/icons.md b/packages/icons/icons.md index 61d4a86df6..f20cb7c91f 100644 --- a/packages/icons/icons.md +++ b/packages/icons/icons.md @@ -51,7 +51,6 @@ See below an overview of all the available icons in this package. This file is g | Experimenteel |
Experimenteel
| | External |
External
| | Eye |
Eye
| -| Form |
Form
| | FrisseLucht |
FrisseLucht
| | GedeeltelijkOpenRugzak |
GedeeltelijkOpenRugzak
| | GeenEntertainment |
GeenEntertainment
| diff --git a/packages/icons/src/icon-name2filename.ts b/packages/icons/src/icon-name2filename.ts index 88deb49806..5262f8dd35 100644 --- a/packages/icons/src/icon-name2filename.ts +++ b/packages/icons/src/icon-name2filename.ts @@ -46,7 +46,6 @@ export type IconName = | 'Experimenteel' | 'External' | 'Eye' - | 'Form' | 'FrisseLucht' | 'GedeeltelijkOpenRugzak' | 'GeenEntertainment' @@ -184,7 +183,6 @@ export const iconName2filename: Record = { Experimenteel: 'experimenteel.svg', External: 'external.svg', Eye: 'eye.svg', - Form: 'form.svg', FrisseLucht: 'frisse_lucht.svg', GedeeltelijkOpenRugzak: 'gedeeltelijk_open_rugzak.svg', GeenEntertainment: 'geen_entertainment.svg', diff --git a/packages/icons/src/svg/form.svg b/packages/icons/src/svg/form.svg deleted file mode 100644 index 39bd326bbb..0000000000 --- a/packages/icons/src/svg/form.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/packages/icons/src/svg/home.svg b/packages/icons/src/svg/home.svg index 4ac1488de8..c89c8ecfa1 100644 --- a/packages/icons/src/svg/home.svg +++ b/packages/icons/src/svg/home.svg @@ -1,6 +1,4 @@ - - + + d="M44.7041 47.253H32.3147C32.2932 46.9778 32.2608 46.7026 32.2554 46.4274C32.2338 42.7311 32.2068 39.0348 32.2068 35.3385C32.2068 34.896 32.1259 34.6964 31.6294 34.7018C29.1419 34.7234 26.6597 34.718 24.1721 34.718C24.0857 34.718 23.9994 34.7395 23.7836 34.7719V47.28C23.4598 47.28 23.2601 47.28 23.0659 47.28C19.3696 47.28 15.6733 47.2638 11.9824 47.2962C11.3402 47.3016 11.1999 47.0912 11.1999 46.503C11.2053 41.1339 11.1783 35.7648 11.1891 30.4011C11.1891 29.8615 11.0812 29.6511 10.4876 29.6834C9.5973 29.7266 8.69615 29.6618 7.80041 29.6618C7.29318 29.6618 7.09892 29.4028 7.03956 28.928C6.87228 27.6491 7.22842 26.6616 8.24288 25.7443C13.7307 20.7907 19.1537 15.767 24.6092 10.7702C25.4833 9.97159 26.3791 9.19456 27.2748 8.42832C27.9385 7.86173 28.1004 7.85094 28.7587 8.43371C30.5125 9.98778 32.2608 11.5526 33.9929 13.1337C38.6012 17.3588 43.1824 21.6217 47.823 25.8144C48.7512 26.6562 49.1073 27.5628 48.9724 28.7499C48.9077 29.3219 48.6864 29.6672 48.0551 29.6618C47.1593 29.6511 46.2636 29.6834 45.3678 29.6511C44.9092 29.6349 44.7257 29.759 44.7311 30.2392C44.7473 31.8419 44.7203 33.4445 44.7257 35.0525C44.7311 38.8837 44.7419 42.7149 44.7527 46.5461C44.7527 46.762 44.7257 46.9832 44.7041 47.2692V47.253Z" /> \ No newline at end of file diff --git a/packages/icons/src/svg/town.svg b/packages/icons/src/svg/town.svg index b7390a0af5..899e32c590 100644 --- a/packages/icons/src/svg/town.svg +++ b/packages/icons/src/svg/town.svg @@ -1,5 +1,4 @@ - - - - + + + From bf7cebfd74f998bb72432c29e0c8bb02b042d500 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Mon, 3 Apr 2023 11:33:18 +0200 Subject: [PATCH 14/19] feat(404-pages): PR Feedback, second round. --- packages/app/src/pages/_middleware.ts | 2 +- packages/app/src/pages/not-found/[...404].tsx | 4 ++-- packages/app/src/queries/get-not-found-page-query.ts | 1 + packages/cms/src/desk-structure.ts | 4 ++-- packages/cms/src/page/not-found-page-structure.ts | 2 +- packages/cms/src/schemas/documents/pages/index.ts | 6 +++--- .../not-found-page-item.ts | 5 +---- .../not-found-page-links.ts | 0 .../not-found-pages-collection.ts | 0 9 files changed, 11 insertions(+), 13 deletions(-) rename packages/cms/src/schemas/documents/pages/{notFoundPages => not-found-pages}/not-found-page-item.ts (96%) rename packages/cms/src/schemas/documents/pages/{notFoundPages => not-found-pages}/not-found-page-links.ts (100%) rename packages/cms/src/schemas/documents/pages/{notFoundPages => not-found-pages}/not-found-pages-collection.ts (100%) diff --git a/packages/app/src/pages/_middleware.ts b/packages/app/src/pages/_middleware.ts index a4d9387f67..c5086a3f03 100644 --- a/packages/app/src/pages/_middleware.ts +++ b/packages/app/src/pages/_middleware.ts @@ -8,7 +8,7 @@ export const middleware = async (request: NextRequest) => { const response = await fetch(request.nextUrl.href); if (response.status !== 404) return NextResponse.next(); - const isLevel = (level: string): boolean => request.nextUrl.pathname.startsWith(`/${level}`); + const isLevel = (level: string) => request.nextUrl.pathname.startsWith(`/${level}`); const showGenericNotFoundPage = !(isLevel('landelijk') || isLevel('gemeente') || isLevel('artikelen')); if (showGenericNotFoundPage) { diff --git a/packages/app/src/pages/not-found/[...404].tsx b/packages/app/src/pages/not-found/[...404].tsx index 7f6f03262c..dc09511a1c 100644 --- a/packages/app/src/pages/not-found/[...404].tsx +++ b/packages/app/src/pages/not-found/[...404].tsx @@ -91,7 +91,7 @@ const NotFound = ({ lastGenerated, notFoundPageConfiguration }: NotFoundProps) = alignItems="center" display="flex" hasChevron - key={`${index}-${link.id}`} + key={link.id} link={link} marginBottom={isGeneralPage ? (index === links.length - 1 ? space[4] : space[2]) : undefined} /> @@ -135,7 +135,7 @@ interface NotFoundLinkProps { className?: string; hasChevron?: boolean; isCTA?: boolean; - marginBottom?: string | undefined; + marginBottom?: string; maxWidth?: string; order?: number; padding?: string; diff --git a/packages/app/src/queries/get-not-found-page-query.ts b/packages/app/src/queries/get-not-found-page-query.ts index 8c1e166753..1955f1002a 100644 --- a/packages/app/src/queries/get-not-found-page-query.ts +++ b/packages/app/src/queries/get-not-found-page-query.ts @@ -4,6 +4,7 @@ export const getNotFoundPageQuery = (locale: string, pageType: string) => { 'title': title.${locale}, 'description': description.${locale}, 'links': links[]->{ + 'id': _id, 'linkUrl': linkUrl, 'linkLabel': linkLabel.${locale}, 'linkIcon': linkIcon, diff --git a/packages/cms/src/desk-structure.ts b/packages/cms/src/desk-structure.ts index 2b47228b25..c07cfea87e 100644 --- a/packages/cms/src/desk-structure.ts +++ b/packages/cms/src/desk-structure.ts @@ -6,7 +6,7 @@ import { RiPagesFill } from 'react-icons/ri'; import 'sanity-mobile-preview/dist/index.css?raw'; import { elementsListItem } from './elements/elements-list-item'; import { lokalizeListItem } from './lokalize/lokalize-list-item'; -import { notFoundPageStrcuture } from './page/not-found-page-structure'; +import { notFoundPageStructure } from './page/not-found-page-structure'; import { pagePartListItem } from './page/page-part-list-item'; /** @@ -104,7 +104,7 @@ export default () => addListItem(RiPagesFill, 'Contact', 'contact'), // 404 Page structure - notFoundPageStrcuture(), + notFoundPageStructure(), S.divider(), diff --git a/packages/cms/src/page/not-found-page-structure.ts b/packages/cms/src/page/not-found-page-structure.ts index 9914e0503e..2009e3b22f 100644 --- a/packages/cms/src/page/not-found-page-structure.ts +++ b/packages/cms/src/page/not-found-page-structure.ts @@ -1,7 +1,7 @@ import { RiErrorWarningFill } from 'react-icons/ri'; import { StructureBuilder as S } from '@sanity/structure'; -export const notFoundPageStrcuture = () => { +export const notFoundPageStructure = () => { return S.listItem() .id('notFoundPages') .title('404 Paginas') diff --git a/packages/cms/src/schemas/documents/pages/index.ts b/packages/cms/src/schemas/documents/pages/index.ts index f3383eefa9..edd9874ae8 100644 --- a/packages/cms/src/schemas/documents/pages/index.ts +++ b/packages/cms/src/schemas/documents/pages/index.ts @@ -1,9 +1,9 @@ export * from './cijfer-verantwoording-groepen-page'; export * from './cijfer-verantwoording-page'; export * from './contact'; -export * from './notFoundPages/not-found-pages-collection'; -export * from './notFoundPages/not-found-page-item'; -export * from './notFoundPages/not-found-page-links'; +export * from './not-found-pages/not-found-pages-collection'; +export * from './not-found-pages/not-found-page-item'; +export * from './not-found-pages/not-found-page-links'; export * from './over-dit-dashboard-page'; export * from './over-risiconiveaus-page-new'; export * from './veelgestelde-vragen-groepen-page'; diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts b/packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-item.ts similarity index 96% rename from packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts rename to packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-item.ts index ccc33a7c4c..bc3087c946 100644 --- a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-item.ts +++ b/packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-item.ts @@ -16,7 +16,7 @@ export const notFoundPageItem = { list: [ { value: 'general', title: 'Algemeen' }, { value: 'nl', title: 'Landelijk' }, - { value: 'gm', title: 'Geemente' }, + { value: 'gm', title: 'Gemeente' }, { value: 'article', title: 'Artikelen' }, ], layout: 'dropdown', @@ -50,9 +50,6 @@ export const notFoundPageItem = { title: 'Image', description: 'Select an image to show on this page. If selected, an alt text must be provided for accessibility.', type: 'image', - options: { - hotspot: true, - }, fields: [ { name: 'altText', diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts b/packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-links.ts similarity index 100% rename from packages/cms/src/schemas/documents/pages/notFoundPages/not-found-page-links.ts rename to packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-links.ts diff --git a/packages/cms/src/schemas/documents/pages/notFoundPages/not-found-pages-collection.ts b/packages/cms/src/schemas/documents/pages/not-found-pages/not-found-pages-collection.ts similarity index 100% rename from packages/cms/src/schemas/documents/pages/notFoundPages/not-found-pages-collection.ts rename to packages/cms/src/schemas/documents/pages/not-found-pages/not-found-pages-collection.ts From a4665620ae98cd32989d1602a9dfe1c1ba7608e2 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Mon, 3 Apr 2023 19:29:37 +0200 Subject: [PATCH 15/19] feat(404-pages): Non middleware solution. --- .../src/pages/{not-found => }/[...404].tsx | 31 ++++++++++++----- packages/app/src/pages/_middleware.ts | 33 ------------------- packages/app/src/static-paths/gm.ts | 2 +- 3 files changed, 24 insertions(+), 42 deletions(-) rename packages/app/src/pages/{not-found => }/[...404].tsx (89%) delete mode 100644 packages/app/src/pages/_middleware.ts diff --git a/packages/app/src/pages/not-found/[...404].tsx b/packages/app/src/pages/[...404].tsx similarity index 89% rename from packages/app/src/pages/not-found/[...404].tsx rename to packages/app/src/pages/[...404].tsx index dc09511a1c..22ba1f8c4d 100644 --- a/packages/app/src/pages/not-found/[...404].tsx +++ b/packages/app/src/pages/[...404].tsx @@ -1,8 +1,7 @@ import { colors } from '@corona-dashboard/common'; import { ChevronRight } from '@corona-dashboard/icons'; import { PortableTextEntry } from '@sanity/block-content-to-react'; -import { GetStaticProps } from 'next'; -import { GetStaticPaths } from 'next/types'; +import { GetServerSideProps } from 'next'; import styled from 'styled-components'; import { Box } from '~/components/base/box'; import { RichContent } from '~/components/cms/rich-content'; @@ -19,16 +18,32 @@ import { mediaQueries, radii, sizes, space } from '~/style/theme'; import { ImageBlock } from '~/types/cms'; import { getFilenameToIconName } from '~/utils/get-filename-to-icon-name'; -export const getStaticPaths: GetStaticPaths = () => { - return { paths: [], fallback: 'blocking' }; +const LevelsToPageTypeMapping: { [key: string]: string } = { + landelijk: 'nl', + gemeente: 'gm', + artikelen: 'article', }; -export const getStaticProps: GetStaticProps = async (context) => { +const determinePageType = (url: string) => { + const isLevel = (level: string) => url.includes(`/${level}`); + + let pageType = 'general'; + Object.keys(LevelsToPageTypeMapping).forEach((key) => { + if (isLevel(key)) { + pageType = LevelsToPageTypeMapping[key]; + } + }); + + return pageType; +}; + +export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { + res.statusCode = 404; const { lastGenerated } = getLastGeneratedDate(); - const { params: notFoundParams, locale = 'nl' } = context; - const pageType = notFoundParams && notFoundParams['404'] ? notFoundParams['404'].at(0) : undefined; // The pageType param is always the first param as it is the only one passed in. - const query = getNotFoundPageQuery(locale, pageType ?? 'general'); + const pageType = req.url ? determinePageType(req.url) : 'general'; + + const query = getNotFoundPageQuery('nl', pageType); const client = await getClient(); const notFoundPageConfiguration = await client.fetch(query); diff --git a/packages/app/src/pages/_middleware.ts b/packages/app/src/pages/_middleware.ts deleted file mode 100644 index c5086a3f03..0000000000 --- a/packages/app/src/pages/_middleware.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { NextResponse } from 'next/server'; -import type { NextRequest } from 'next/server'; - -export const middleware = async (request: NextRequest) => { - const clonedURL = request.nextUrl.clone(); - - // Fetch the URL from the current request, if it is not a 404 then do not continue with execution. - const response = await fetch(request.nextUrl.href); - if (response.status !== 404) return NextResponse.next(); - - const isLevel = (level: string) => request.nextUrl.pathname.startsWith(`/${level}`); - const showGenericNotFoundPage = !(isLevel('landelijk') || isLevel('gemeente') || isLevel('artikelen')); - - if (showGenericNotFoundPage) { - clonedURL.pathname = '/not-found/general'; - return NextResponse.rewrite(clonedURL); - } - - if (isLevel('landelijk')) { - clonedURL.pathname = '/not-found/nl'; - return NextResponse.rewrite(clonedURL); - } - - if (isLevel('gemeente')) { - clonedURL.pathname = '/not-found/gm'; - return NextResponse.rewrite(clonedURL); - } - - if (isLevel('artikelen')) { - clonedURL.pathname = '/not-found/article'; - return NextResponse.rewrite(clonedURL); - } -}; diff --git a/packages/app/src/static-paths/gm.ts b/packages/app/src/static-paths/gm.ts index 4f21b06638..a40c7d053c 100644 --- a/packages/app/src/static-paths/gm.ts +++ b/packages/app/src/static-paths/gm.ts @@ -11,6 +11,6 @@ export function getStaticPaths() { return { paths, // other routes should 404 - fallback: 'blocking', + fallback: false, }; } From d8fff903316e1a8c6878693c052739d714f0ee46 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Mon, 3 Apr 2023 22:18:00 +0200 Subject: [PATCH 16/19] feat(404-pages): Client side implementation --- .../app/src/pages/{[...404].tsx => 404.tsx} | 85 ++++++++++--------- .../src/queries/get-not-found-page-query.ts | 7 +- 2 files changed, 50 insertions(+), 42 deletions(-) rename packages/app/src/pages/{[...404].tsx => 404.tsx} (76%) diff --git a/packages/app/src/pages/[...404].tsx b/packages/app/src/pages/404.tsx similarity index 76% rename from packages/app/src/pages/[...404].tsx rename to packages/app/src/pages/404.tsx index 22ba1f8c4d..ba3c3bfb5f 100644 --- a/packages/app/src/pages/[...404].tsx +++ b/packages/app/src/pages/404.tsx @@ -1,14 +1,16 @@ import { colors } from '@corona-dashboard/common'; import { ChevronRight } from '@corona-dashboard/icons'; import { PortableTextEntry } from '@sanity/block-content-to-react'; -import { GetServerSideProps } from 'next'; +import { GetStaticProps } from 'next'; +import { useRouter } from 'next/router'; import styled from 'styled-components'; import { Box } from '~/components/base/box'; import { RichContent } from '~/components/cms/rich-content'; import { SanityImage } from '~/components/cms/sanity-image'; import DynamicIcon, { IconName } from '~/components/get-icon-by-name'; -import { Anchor, Heading } from '~/components/typography'; +import { Anchor, Heading, Text } from '~/components/typography'; import { GmComboBox } from '~/domain/layout/components/gm-combo-box'; +import { Content } from '~/domain/layout/content'; import { Layout } from '~/domain/layout/layout'; import { useIntl } from '~/intl'; import { getClient, getImageProps } from '~/lib/sanity'; @@ -18,40 +20,27 @@ import { mediaQueries, radii, sizes, space } from '~/style/theme'; import { ImageBlock } from '~/types/cms'; import { getFilenameToIconName } from '~/utils/get-filename-to-icon-name'; -const LevelsToPageTypeMapping: { [key: string]: string } = { - landelijk: 'nl', - gemeente: 'gm', - artikelen: 'article', -}; - -const determinePageType = (url: string) => { - const isLevel = (level: string) => url.includes(`/${level}`); +const determinePageType = (path: string) => { + const levelsToPageTypes: { [key: string]: string } = { landelijk: 'nl', gemeente: 'gm', artikelen: 'article' }; let pageType = 'general'; - Object.keys(LevelsToPageTypeMapping).forEach((key) => { - if (isLevel(key)) { - pageType = LevelsToPageTypeMapping[key]; + Object.keys(levelsToPageTypes).forEach((key) => { + if (path.startsWith(`/${key}`)) { + pageType = levelsToPageTypes[key]; } }); return pageType; }; -export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { - res.statusCode = 404; +export const getStaticProps: GetStaticProps = async ({ locale = 'nl' }) => { const { lastGenerated } = getLastGeneratedDate(); - - const pageType = req.url ? determinePageType(req.url) : 'general'; - - const query = getNotFoundPageQuery('nl', pageType); - + const query = getNotFoundPageQuery(locale); const client = await getClient(); - const notFoundPageConfiguration = await client.fetch(query); - notFoundPageConfiguration.isGmPage = pageType === 'gm'; - notFoundPageConfiguration.isGeneralPage = pageType === 'general'; + const notFoundPagesConfiguration = await client.fetch(query); return { - props: { lastGenerated, notFoundPageConfiguration }, + props: { lastGenerated, notFoundPagesConfiguration }, }; }; @@ -62,26 +51,44 @@ type Link = { linkUrl: string; }; +type NotFoundPageConfiguration = { + description: PortableTextEntry[]; + image: ImageBlock; + isGeneralPage: boolean; + isGmPage: boolean; + pageType: string; + title: string; + cta?: { + ctaIcon?: string; + ctaLabel: string; + ctaLink: string; + }; + links?: Link[]; +}; + interface NotFoundProps { lastGenerated: string; - notFoundPageConfiguration: { - description: PortableTextEntry[]; - image: ImageBlock; - isGeneralPage: boolean; - isGmPage: boolean; - title: string; - cta?: { - ctaIcon?: string; - ctaLabel: string; - ctaLink: string; - }; - links?: Link[]; - }; + notFoundPagesConfiguration: NotFoundPageConfiguration[]; } -const NotFound = ({ lastGenerated, notFoundPageConfiguration }: NotFoundProps) => { +const NotFound = ({ lastGenerated, notFoundPagesConfiguration }: NotFoundProps) => { const { commonTexts } = useIntl(); - const { title, description, isGmPage, isGeneralPage, image, links = undefined, cta = undefined } = notFoundPageConfiguration; + const { asPath } = useRouter(); + const pageType = determinePageType(asPath); + const pageConfig = notFoundPagesConfiguration.find((page) => page.pageType === pageType); + + if (!pageConfig) { + return ( + + + {commonTexts.notfound_titel.text} + {commonTexts.notfound_beschrijving.text} + + + ); + } + + const { title, description, isGmPage, isGeneralPage, image, links = undefined, cta = undefined } = pageConfig; return ( diff --git a/packages/app/src/queries/get-not-found-page-query.ts b/packages/app/src/queries/get-not-found-page-query.ts index 1955f1002a..3799ee51d4 100644 --- a/packages/app/src/queries/get-not-found-page-query.ts +++ b/packages/app/src/queries/get-not-found-page-query.ts @@ -1,6 +1,7 @@ -export const getNotFoundPageQuery = (locale: string, pageType: string) => { +export const getNotFoundPageQuery = (locale: string) => { return `// groq - *[_type == 'notFoundPageItem' && pageType == '${pageType}' && !(_id in path('drafts.**'))]{ + *[_type == 'notFoundPageItem' && !(_id in path('drafts.**'))]{ + 'pageType': pageType, 'title': title.${locale}, 'description': description.${locale}, 'links': links[]->{ @@ -21,6 +22,6 @@ export const getNotFoundPageQuery = (locale: string, pageType: string) => { ...image.asset->, } } - }[0] + } `; }; From d0b6f6906e6030225515939373bd0e931b5138dc Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Tue, 4 Apr 2023 09:50:30 +0200 Subject: [PATCH 17/19] feat(404-pages): Add isGm and isGeneralPage. --- packages/app/src/pages/404.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/pages/404.tsx b/packages/app/src/pages/404.tsx index ba3c3bfb5f..5db0ec4246 100644 --- a/packages/app/src/pages/404.tsx +++ b/packages/app/src/pages/404.tsx @@ -88,7 +88,7 @@ const NotFound = ({ lastGenerated, notFoundPagesConfiguration }: NotFoundProps) ); } - const { title, description, isGmPage, isGeneralPage, image, links = undefined, cta = undefined } = pageConfig; + const { title, description, isGmPage = pageType === 'gm', isGeneralPage = pageType === 'general', image, links = undefined, cta = undefined } = pageConfig; return ( From c888bfece7c256b3fb629a6c5224c1e57461d231 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Tue, 4 Apr 2023 13:59:30 +0200 Subject: [PATCH 18/19] feat(404-pages): Final tweaks --- packages/app/src/domain/layout/layout.tsx | 20 ++++++++++--------- .../not-found-pages/not-found-page-item.ts | 19 +++++++++++++++++- packages/icons/src/svg/town.svg | 6 +++--- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/packages/app/src/domain/layout/layout.tsx b/packages/app/src/domain/layout/layout.tsx index 997c1d8f52..3551d17395 100644 --- a/packages/app/src/domain/layout/layout.tsx +++ b/packages/app/src/domain/layout/layout.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import { ReactNode } from 'react'; +import { Box } from '~/components/base/box'; import { Breadcrumbs } from '~/components/breadcrumbs'; import { BreadcrumbsDataProvider } from '~/components/breadcrumbs/logic/use-breadcrumbs'; import { AppFooter } from '~/components/layout/app-footer'; @@ -8,22 +9,23 @@ import { SEOHead } from '~/components/seo-head'; import { SkipLinkMenu } from '~/components/skip-link-menu'; import { useIntl } from '~/intl'; import { CurrentDateProvider } from '~/utils/current-date-context'; + interface LayoutProps { + children: ReactNode; + lastGenerated: string; title: string; - url?: string; + breadcrumbsData?: Record; description?: string; openGraphImage?: string; twitterImage?: string; - breadcrumbsData?: Record; + url?: string; } -export function Layout(props: LayoutProps & { lastGenerated: string; children: React.ReactNode }) { - const { breadcrumbsData, children, title, description, openGraphImage, twitterImage, url, lastGenerated } = props; - +export function Layout({ breadcrumbsData, children, title, description, openGraphImage, twitterImage, url, lastGenerated }: LayoutProps) { const { commonTexts } = useIntl(); return ( -
+ -
{children}
+ {children} -
+ ); } diff --git a/packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-item.ts b/packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-item.ts index bc3087c946..d3fffc2690 100644 --- a/packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-item.ts +++ b/packages/cms/src/schemas/documents/pages/not-found-pages/not-found-page-item.ts @@ -1,6 +1,10 @@ +import sanityClient from 'part:@sanity/base/client'; +import { Rule } from '~/sanity'; import { KpiIconInput } from '../../../../components/portable-text/kpi-configuration/kpi-icon-input'; import { REQUIRED } from '../../../../validation'; +const client = sanityClient.withConfig({ apiVersion: '2021-10-21' }); + export const notFoundPageItem = { name: 'notFoundPageItem', title: '404 Pagina', @@ -21,7 +25,20 @@ export const notFoundPageItem = { ], layout: 'dropdown', }, - validation: REQUIRED, + validation: (rule: Rule) => [ + rule.required(), + + // This will populate error messages if there already is an item with this title. + rule.custom(async (pageType: string, context: any) => { + const query = `*[_type == 'notFoundPageItem' && pageType == '${pageType}' && !(_id in path('drafts.**')) && !(_id match "*${context.document._id.replace( + 'drafts.', + '' + )}")]{...,}`; + + const count = await client.fetch(query); + return count.length > 0 ? 'The page type needs to be unique.' : true; + }), + ], }, { name: 'title', diff --git a/packages/icons/src/svg/town.svg b/packages/icons/src/svg/town.svg index 899e32c590..00c2caa2bd 100644 --- a/packages/icons/src/svg/town.svg +++ b/packages/icons/src/svg/town.svg @@ -1,4 +1,4 @@ - - - + + \ No newline at end of file From f32e8661bc87b341dfdbba01f7d973d2e5c179af Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard28 Date: Tue, 4 Apr 2023 14:27:34 +0200 Subject: [PATCH 19/19] feat(404-pages): Revert undesired change. --- packages/app/src/static-paths/gm.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/static-paths/gm.ts b/packages/app/src/static-paths/gm.ts index a40c7d053c..4f21b06638 100644 --- a/packages/app/src/static-paths/gm.ts +++ b/packages/app/src/static-paths/gm.ts @@ -11,6 +11,6 @@ export function getStaticPaths() { return { paths, // other routes should 404 - fallback: false, + fallback: 'blocking', }; }