From 2ae7a6a4dba9122adb74e520ec0396ceb0ec8ab6 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Mon, 26 Jun 2023 15:58:07 +0200 Subject: [PATCH 01/10] fix: adding image to sanity and create columns for about page --- .../cms/src/schemas/documents/pages/about.ts | 14 ++++++- packages/cms/src/schemas/index.ts | 3 +- packages/cms/src/schemas/locale/image.ts | 42 +++++++++++++++++++ .../cms/src/studio/data/data-structure.ts | 4 +- 4 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 packages/cms/src/schemas/locale/image.ts diff --git a/packages/cms/src/schemas/documents/pages/about.ts b/packages/cms/src/schemas/documents/pages/about.ts index af73b947dd..ddc0347691 100644 --- a/packages/cms/src/schemas/documents/pages/about.ts +++ b/packages/cms/src/schemas/documents/pages/about.ts @@ -12,10 +12,22 @@ export const about = defineType({ title: 'Titel', validation: localeStringValidation((rule) => rule.required()), }), + defineField({ + name: 'intro', + type: 'localeBlock', + title: 'introductie (linker column)', + validation: localeValidation((rule) => rule.required()), + }), + defineField({ + name: 'timelineImage', + type: 'localeImage', + title: 'Afbeelding tijdslijn', + validation: localeValidation((rule) => rule.required()), + }), defineField({ name: 'description', type: 'localeBlock', - title: 'Beschrijving', + title: 'Beschrijving (rechter column)', validation: localeValidation((rule) => rule.required()), }), ], diff --git a/packages/cms/src/schemas/index.ts b/packages/cms/src/schemas/index.ts index f489046a86..2b2b743574 100644 --- a/packages/cms/src/schemas/index.ts +++ b/packages/cms/src/schemas/index.ts @@ -38,11 +38,12 @@ import { block } from './locale/block'; import { richContentBlock } from './locale/rich-content-block'; import { string } from './locale/string'; import { text } from './locale/text'; +import { image } from './locale/image'; import { inlineBlock } from './objects/inline-block'; import { inlineCollapsible } from './objects/inline-collapsible'; import { link } from './objects/link'; -const localeSpecificSchemas = [block, richContentBlock, string, text]; +const localeSpecificSchemas = [block, richContentBlock, string, text, image]; const richContentSchemas = [inlineBlock, inlineCollapsible]; const documentSchemas = [ advice, diff --git a/packages/cms/src/schemas/locale/image.ts b/packages/cms/src/schemas/locale/image.ts new file mode 100644 index 0000000000..80d72e83b7 --- /dev/null +++ b/packages/cms/src/schemas/locale/image.ts @@ -0,0 +1,42 @@ +import { StringRule, defineField, defineType } from 'sanity'; +import { supportedLanguages } from '../../studio/i18n'; +import { BsCardImage } from 'react-icons/bs'; + +export type LocaleText = { + [key: string]: string; +}; + +export const image = defineType({ + name: 'localeImage', + type: 'object', + title: 'Locale Image Content', + fields: supportedLanguages.map(({ title, id }) => + defineField({ + title, + name: id, + type: 'image', + icon: BsCardImage, + initialValue: { + isFullWidth: true, + }, + fields: [ + defineField({ + name: 'alt', + title: 'Alternatieve tekst (toegankelijkheid)', + type: 'string', + validation: (rule: StringRule) => rule.required().error('Alt text is verplicht'), + }), + defineField({ + name: 'isFullWidth', + title: 'Afbeelding breed weergeven?', + type: 'boolean', + }), + defineField({ + name: 'caption', + title: 'Onderschrift', + type: 'text', + }), + ], + }) + ), +}); diff --git a/packages/cms/src/studio/data/data-structure.ts b/packages/cms/src/studio/data/data-structure.ts index eb07b4ed63..bd1d87a6ab 100644 --- a/packages/cms/src/studio/data/data-structure.ts +++ b/packages/cms/src/studio/data/data-structure.ts @@ -75,7 +75,7 @@ export const dataStructure = { 'admissions_on_date_of_reporting', ], tested_overall: ['infected', 'infected_moving_average', 'infected_moving_average_rounded', 'infected_per_100k', 'infected_per_100k_moving_average'], - sewer: ['average', 'total_number_of_samples', 'sampled_installation_count', 'total_installation_count', 'data_is_outdated'], + sewer: ['average', 'data_is_outdated'], vaccine_coverage_per_age_group: [ 'vaccination_type', 'birthyear_range_12_plus', @@ -112,7 +112,7 @@ export const dataStructure = { hospital_nice: ['admissions_on_date_of_admission', 'admissions_on_date_of_admission_per_100000', 'admissions_on_date_of_reporting'], hospital_nice_choropleth: ['admissions_on_date_of_admission', 'admissions_on_date_of_admission_per_100000', 'admissions_on_date_of_reporting'], tested_overall: ['infected_per_100k', 'infected'], - sewer: ['average', 'total_installation_count', 'data_is_outdated'], + sewer: ['average', 'data_is_outdated'], vaccine_coverage_per_age_group: [ 'vaccination_type', 'birthyear_range_12_plus', From 001a0d87fc4ba2d748a06dbc259a074e35434926 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Mon, 26 Jun 2023 15:58:34 +0200 Subject: [PATCH 02/10] WiP: still net to get the qruey right --- packages/app/src/pages/over.tsx | 98 ++++++++++++++++++--------------- 1 file changed, 53 insertions(+), 45 deletions(-) diff --git a/packages/app/src/pages/over.tsx b/packages/app/src/pages/over.tsx index 3eced4edd9..3c0f0cc463 100644 --- a/packages/app/src/pages/over.tsx +++ b/packages/app/src/pages/over.tsx @@ -3,22 +3,19 @@ import Head from 'next/head'; import styled from 'styled-components'; import { Box } from '~/components/base'; import { RichContent } from '~/components/cms/rich-content'; +import { MaxWidth } from '~/components/max-width'; import { Heading } 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 { - createGetContent, - getLastGeneratedDate, -} from '~/static-props/get-data'; -import { RichContentBlock } from '~/types/cms'; +import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; +import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data'; +import { space } from '~/style/theme'; +import { ImageBlock, RichContentBlock } from '~/types/cms'; interface OverData { title: string | null; + intro: RichContentBlock[] | null; description: RichContentBlock[] | null; + timelineImage: ImageBlock | null; } export const getStaticProps = createGetStaticProps( @@ -26,19 +23,41 @@ export const getStaticProps = createGetStaticProps( createGetContent((context) => { const { locale = 'nl' } = context; return ` - *[_type == 'overDitDashboard']{ - ..., - "description": { - "_type": description._type, - "${locale}": [ - ...description.${locale}[] - { - ..., - "asset": asset-> - }, - ] - } - }[0] + *[ + _type == 'overDitDashboard' && !(_id in path('drafts.**')) + ][0]{..., + "description": { + "_type": description._type, + "${locale}": [ + ...description.${locale}[] + { + ..., + "asset": asset-> + }, + ] + }, + "intro": { + "_type": intro._type && !(_id in path('drafts.**')), + "${locale}": [ + ...intro.${locale}[] + { + ..., + "asset": asset-> + }, + ] + }, + "timelineImage": { + "_type": timelineImage._type && !(_id in path('drafts.**')), + "${locale}": [ + ...intro.${locale}[] + { + "alt": alt, + "caption": caption, + "asset": asset-> + }, + ] + } + }, `; }) ); @@ -50,30 +69,19 @@ const Over = (props: StaticProps) => { return ( - - + + - - - {content.title && {content.title}} - {content.description && ( - - )} - - + + + {content.title && {content.title}} + +
{content.intro && }
+
{content.description && }
+ + + ); }; From afc54462c3a84069fb874a5473c62285e028fea0 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 28 Jun 2023 17:10:07 +0200 Subject: [PATCH 03/10] fix: styling and query --- .../app/src/components/cms/content-image.tsx | 13 +++- .../src/components/fullscreen-chart-tile.tsx | 5 +- packages/app/src/pages/over.tsx | 59 +++++++++++-------- 3 files changed, 48 insertions(+), 29 deletions(-) diff --git a/packages/app/src/components/cms/content-image.tsx b/packages/app/src/components/cms/content-image.tsx index 7b33dfaf46..c0be398662 100644 --- a/packages/app/src/components/cms/content-image.tsx +++ b/packages/app/src/components/cms/content-image.tsx @@ -6,7 +6,7 @@ import { Box } from '~/components/base'; import { ContentBlock } from '~/components/cms/content-block'; import { SanityImage } from '~/components/cms/sanity-image'; import { getImageProps } from '~/lib/sanity'; -import { space } from '~/style/theme'; +import theme, { space } from '~/style/theme'; import { ImageBlock, RichContentImageBlock } from '~/types/cms'; import { Text } from '../typography'; @@ -14,6 +14,7 @@ interface ContentImageProps { node: ImageBlock | RichContentImageBlock; contentWrapper?: FunctionComponent; sizes?: string[][]; + enableShadow?: boolean; } const SanityImageTile = styled(SanityImage)( @@ -25,7 +26,7 @@ const SanityImageTile = styled(SanityImage)( const IMAGE_MAX_WIDTH = '980px'; -export function ContentImage({ node, contentWrapper, sizes }: ContentImageProps) { +export function ContentImage({ node, contentWrapper, sizes, enableShadow = false }: ContentImageProps) { const caption = 'caption' in node && node.caption && ( {node.caption} @@ -53,7 +54,13 @@ export function ContentImage({ node, contentWrapper, sizes }: ContentImageProps) ) : ( - {node.asset && } + + {node.asset && ( + + + + )} + {caption} diff --git a/packages/app/src/components/fullscreen-chart-tile.tsx b/packages/app/src/components/fullscreen-chart-tile.tsx index 4c670e1359..b6eb8c6de6 100644 --- a/packages/app/src/components/fullscreen-chart-tile.tsx +++ b/packages/app/src/components/fullscreen-chart-tile.tsx @@ -18,9 +18,10 @@ interface FullscreenChartTileProps { children: React.ReactNode; metadata?: MetadataProps; disabled?: boolean; + disableBorder?: boolean; } -export function FullscreenChartTile({ children, metadata, disabled }: FullscreenChartTileProps) { +export function FullscreenChartTile({ children, metadata, disabled, disableBorder }: FullscreenChartTileProps) { const [isFullscreen, setIsFullscreen] = useState(false); const wasFullscreen = usePrevious(isFullscreen); const breakpoints = useBreakpoints(); @@ -36,7 +37,7 @@ export function FullscreenChartTile({ children, metadata, disabled }: Fullscreen const label = replaceVariablesInText(isFullscreen ? commonTexts.common.modal_close : commonTexts.common.modal_open, { subject: commonTexts.common.grafiek_singular }); const tile = ( - + ((context) => { const { locale = 'nl' } = context; - return ` + return `// groq *[ _type == 'overDitDashboard' && !(_id in path('drafts.**')) ][0]{..., @@ -37,7 +38,7 @@ export const getStaticProps = createGetStaticProps( ] }, "intro": { - "_type": intro._type && !(_id in path('drafts.**')), + "_type": intro._type, "${locale}": [ ...intro.${locale}[] { @@ -47,17 +48,11 @@ export const getStaticProps = createGetStaticProps( ] }, "timelineImage": { - "_type": timelineImage._type && !(_id in path('drafts.**')), - "${locale}": [ - ...intro.${locale}[] - { - "alt": alt, - "caption": caption, - "asset": asset-> + "_type": timelineImage._type, + "${locale}": {...timelineImage.${locale}, }, - ] } - }, + } `; }) ); @@ -74,22 +69,38 @@ const Over = (props: StaticProps) => { - - {content.title && {content.title}} - -
{content.intro && }
+ + + {content.title && {content.title}} + + + + {content.intro && } + + {content.timelineImage && } + +
{content.description && }
- + ); }; -const RichContentWrapper = styled.div( - css({ - width: '100%', - }) -); - export default Over; + +const RichContentWrapper = styled('div')` + width: 100%; +`; + +const TwoColumnLayout = styled(Box)` + display: grid; + grid-template-columns: 1fr; + gap: ${space[4]}; + + @media ${mediaQueries.sm} { + grid-template-columns: 1fr 1fr; + } +} +`; From 83dce0daeadf153a6e092aa3b1fc0af785b9ea6a Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 28 Jun 2023 17:14:31 +0200 Subject: [PATCH 04/10] fix: casing typo --- packages/cms/src/schemas/documents/pages/about.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cms/src/schemas/documents/pages/about.ts b/packages/cms/src/schemas/documents/pages/about.ts index ddc0347691..d1bb7afac9 100644 --- a/packages/cms/src/schemas/documents/pages/about.ts +++ b/packages/cms/src/schemas/documents/pages/about.ts @@ -15,7 +15,7 @@ export const about = defineType({ defineField({ name: 'intro', type: 'localeBlock', - title: 'introductie (linker column)', + title: 'Introductie (linker column)', validation: localeValidation((rule) => rule.required()), }), defineField({ From d1ffbc20943e2f5b636ee3af05e1d4c9ad0bdb12 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Thu, 29 Jun 2023 17:22:33 +0200 Subject: [PATCH 05/10] fix: PR feedback --- .../app/src/components/cms/content-image.tsx | 10 +-- packages/app/src/pages/over.tsx | 73 ++++++++++--------- .../cms/src/schemas/documents/pages/about.ts | 4 +- packages/cms/src/schemas/locale/image.ts | 4 - 4 files changed, 43 insertions(+), 48 deletions(-) diff --git a/packages/app/src/components/cms/content-image.tsx b/packages/app/src/components/cms/content-image.tsx index c0be398662..b99dfbe833 100644 --- a/packages/app/src/components/cms/content-image.tsx +++ b/packages/app/src/components/cms/content-image.tsx @@ -6,7 +6,7 @@ import { Box } from '~/components/base'; import { ContentBlock } from '~/components/cms/content-block'; import { SanityImage } from '~/components/cms/sanity-image'; import { getImageProps } from '~/lib/sanity'; -import theme, { space } from '~/style/theme'; +import { space, shadows } from '~/style/theme'; import { ImageBlock, RichContentImageBlock } from '~/types/cms'; import { Text } from '../typography'; @@ -54,12 +54,8 @@ export function ContentImage({ node, contentWrapper, sizes, enableShadow = false ) : ( - - {node.asset && ( - - - - )} + + {node.asset && } {caption} diff --git a/packages/app/src/pages/over.tsx b/packages/app/src/pages/over.tsx index 7ca4f4a55a..18898b3078 100644 --- a/packages/app/src/pages/over.tsx +++ b/packages/app/src/pages/over.tsx @@ -4,19 +4,18 @@ import { Box } from '~/components/base'; import { ContentImage } from '~/components/cms/content-image'; import { RichContent } from '~/components/cms/rich-content'; import { FullscreenChartTile } from '~/components/fullscreen-chart-tile'; -import { MaxWidth } from '~/components/max-width'; import { Heading } from '~/components/typography'; import { Layout } from '~/domain/layout/layout'; import { useIntl } from '~/intl'; import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data'; -import { mediaQueries, space } from '~/style/theme'; +import { mediaQueries, sizes, space } from '~/style/theme'; import { ImageBlock, RichContentBlock } from '~/types/cms'; interface OverData { title: string | null; - intro: RichContentBlock[] | null; - description: RichContentBlock[] | null; - timelineImage: ImageBlock | null; + intro: RichContentBlock[]; + description: RichContentBlock[]; + timelineImage: ImageBlock; } export const getStaticProps = createGetStaticProps( @@ -24,33 +23,31 @@ export const getStaticProps = createGetStaticProps( createGetContent((context) => { const { locale = 'nl' } = context; return `// groq - *[ - _type == 'overDitDashboard' && !(_id in path('drafts.**')) - ][0]{..., + *[_type == 'overDitDashboard' && !(_id in path('drafts.**'))][0]{ + ..., "description": { "_type": description._type, "${locale}": [ - ...description.${locale}[] - { + ...description.${locale}[]{ ..., "asset": asset-> - }, + }, ] }, "intro": { "_type": intro._type, "${locale}": [ - ...intro.${locale}[] - { + ...intro.${locale}[]{ ..., "asset": asset-> - }, + }, ] }, "timelineImage": { "_type": timelineImage._type, - "${locale}": {...timelineImage.${locale}, - }, + "${locale}": { + ...timelineImage.${locale}, + }, } } `; @@ -63,26 +60,32 @@ const Over = (props: StaticProps) => { return ( - - - - + + + + + - - - - {content.title && {content.title}} - - - - {content.intro && } - - {content.timelineImage && } - + + + + {content.title} -
{content.description && }
- - + +
+ + + + + + +
+
+ +
+ + + ); @@ -97,7 +100,7 @@ const RichContentWrapper = styled('div')` const TwoColumnLayout = styled(Box)` display: grid; grid-template-columns: 1fr; - gap: ${space[4]}; + gap: ${space[4]} ${space[5]}; @media ${mediaQueries.sm} { grid-template-columns: 1fr 1fr; diff --git a/packages/cms/src/schemas/documents/pages/about.ts b/packages/cms/src/schemas/documents/pages/about.ts index d1bb7afac9..ccce92f048 100644 --- a/packages/cms/src/schemas/documents/pages/about.ts +++ b/packages/cms/src/schemas/documents/pages/about.ts @@ -15,7 +15,7 @@ export const about = defineType({ defineField({ name: 'intro', type: 'localeBlock', - title: 'Introductie (linker column)', + title: 'Introductie (linkerkolom)', validation: localeValidation((rule) => rule.required()), }), defineField({ @@ -27,7 +27,7 @@ export const about = defineType({ defineField({ name: 'description', type: 'localeBlock', - title: 'Beschrijving (rechter column)', + title: 'Beschrijving (rechterkolom)', validation: localeValidation((rule) => rule.required()), }), ], diff --git a/packages/cms/src/schemas/locale/image.ts b/packages/cms/src/schemas/locale/image.ts index 80d72e83b7..7b00a416c8 100644 --- a/packages/cms/src/schemas/locale/image.ts +++ b/packages/cms/src/schemas/locale/image.ts @@ -2,10 +2,6 @@ import { StringRule, defineField, defineType } from 'sanity'; import { supportedLanguages } from '../../studio/i18n'; import { BsCardImage } from 'react-icons/bs'; -export type LocaleText = { - [key: string]: string; -}; - export const image = defineType({ name: 'localeImage', type: 'object', From 3c6628bf76d582f9061b96978a232dc83ecb2d58 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Fri, 30 Jun 2023 09:35:38 +0200 Subject: [PATCH 06/10] fix: curly brackets --- packages/app/src/pages/over.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/app/src/pages/over.tsx b/packages/app/src/pages/over.tsx index 18898b3078..bf7f832176 100644 --- a/packages/app/src/pages/over.tsx +++ b/packages/app/src/pages/over.tsx @@ -101,9 +101,8 @@ const TwoColumnLayout = styled(Box)` display: grid; grid-template-columns: 1fr; gap: ${space[4]} ${space[5]}; - + @media ${mediaQueries.sm} { grid-template-columns: 1fr 1fr; } -} `; From 013f8c6c36ce78f027b5d6bf009f11350e00f242 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Mon, 3 Jul 2023 12:22:15 +0200 Subject: [PATCH 07/10] fix: IDE difference in typing --- packages/cms/src/schemas/locale/image.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/cms/src/schemas/locale/image.ts b/packages/cms/src/schemas/locale/image.ts index 7b00a416c8..ba3482e27b 100644 --- a/packages/cms/src/schemas/locale/image.ts +++ b/packages/cms/src/schemas/locale/image.ts @@ -20,12 +20,13 @@ export const image = defineType({ name: 'alt', title: 'Alternatieve tekst (toegankelijkheid)', type: 'string', - validation: (rule: StringRule) => rule.required().error('Alt text is verplicht'), + validation: (rule) => rule.required().error('Alt text is verplicht'), }), defineField({ name: 'isFullWidth', title: 'Afbeelding breed weergeven?', type: 'boolean', + initialValue: false, }), defineField({ name: 'caption', From aa666229ecc7c9bb3a3c7f5a13c992376f6c43f0 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:14:32 +0200 Subject: [PATCH 08/10] fix: size difference --- packages/app/src/pages/over.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/app/src/pages/over.tsx b/packages/app/src/pages/over.tsx index bf7f832176..ad5adbb985 100644 --- a/packages/app/src/pages/over.tsx +++ b/packages/app/src/pages/over.tsx @@ -69,7 +69,9 @@ const Over = (props: StaticProps) => { - {content.title} + + {content.title} +
From 3dc059f038863285f805957e3652b93c2be556d6 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Mon, 3 Jul 2023 16:06:12 +0200 Subject: [PATCH 09/10] fix: more legacy code --- packages/app/src/pages/over.tsx | 39 +++++++++++++++------------------ 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/app/src/pages/over.tsx b/packages/app/src/pages/over.tsx index ad5adbb985..ed7bd73620 100644 --- a/packages/app/src/pages/over.tsx +++ b/packages/app/src/pages/over.tsx @@ -65,28 +65,25 @@ const Over = (props: StaticProps) => { - - - - - - {content.title} - - - -
- - - - - - -
-
- -
- + + + + {content.title} + + +
+ + + + + + +
+
+ +
+ From 19ae77451b71e8ba7c6d624eab7f2be90c9a8672 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 5 Jul 2023 09:53:35 +0200 Subject: [PATCH 10/10] fix: remove unused import --- packages/cms/src/schemas/locale/image.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cms/src/schemas/locale/image.ts b/packages/cms/src/schemas/locale/image.ts index ba3482e27b..96d92a0c7a 100644 --- a/packages/cms/src/schemas/locale/image.ts +++ b/packages/cms/src/schemas/locale/image.ts @@ -1,4 +1,4 @@ -import { StringRule, defineField, defineType } from 'sanity'; +import { defineField, defineType } from 'sanity'; import { supportedLanguages } from '../../studio/i18n'; import { BsCardImage } from 'react-icons/bs';