From 5fbb11389e2dcaf073e1f41e0e0ce385274a32cc Mon Sep 17 00:00:00 2001 From: Adrian Goh Jun Wei Date: Thu, 12 Dec 2024 16:09:56 +0800 Subject: [PATCH] Fix notfound meta for homepage (#933) * fix wrong permalink for rootpage * not-found to use schema/not-found instead * add not-found.json --- tooling/build/scripts/publisher.sh | 6 ++ .../template/app/[[...permalink]]/page.tsx | 34 +++++++++--- tooling/template/app/not-found.tsx | 8 ++- tooling/template/schema/not-found.json | 55 +++++++++++++++++++ 4 files changed, 93 insertions(+), 10 deletions(-) create mode 100644 tooling/template/schema/not-found.json diff --git a/tooling/build/scripts/publisher.sh b/tooling/build/scripts/publisher.sh index 449a7aca63..85a4a2bcea 100644 --- a/tooling/build/scripts/publisher.sh +++ b/tooling/build/scripts/publisher.sh @@ -83,6 +83,12 @@ mv data/ ../../../template/ cp sitemap.json ../../../template/public/ mv sitemap.json ../../../template/ cd ../../../template +# Create not-found.json by copying _index.json if it doesn't exist +# Refer to tooling/template/app/not-found.tsx for more context +if [ ! -f "schema/not-found.json" ]; then + echo "Creating not-found.json..." + cp schema/_index.json schema/not-found.json +fi echo $(pwd) echo "Fetching cached tooling-template node_modules..." TOOLING_TEMPLATE_NODE_MODULES_CACHE_PATH="s3://$S3_CACHE_BUCKET_NAME/$ISOMER_BUILD_REPO_BRANCH/isomer-tooling-template/node_modules.tar.gz" diff --git a/tooling/template/app/[[...permalink]]/page.tsx b/tooling/template/app/[[...permalink]]/page.tsx index d976d2d262..5ee3058556 100644 --- a/tooling/template/app/[[...permalink]]/page.tsx +++ b/tooling/template/app/[[...permalink]]/page.tsx @@ -15,10 +15,23 @@ import { export const dynamic = "force-static" const INDEX_PAGE_PERMALINK = "_index" + +interface ParamsContent { + permalink: string[] +} interface DynamicPageProps { - params: Promise<{ - permalink: string[] - }> + params: Promise +} + +// Note: permalink should not be able to be undefined +// However, nextjs had some magic props passing going on that causes +// { permalink: [""] } to be converted to {} +// Thus the patch is necessary to convert it back if its undefined +const getPatchedPermalink = async ( + props: DynamicPageProps, +): Promise => { + const params = await props.params + return params.permalink ?? [""] } const timeNow = new Date() @@ -29,9 +42,8 @@ const lastUpdated = " " + timeNow.getFullYear() -const getSchema = async (paramsPromise: DynamicPageProps) => { - const { permalink } = await paramsPromise.params - const joinedPermalink = !!permalink ? permalink.join("/") : "" +const getSchema = async ({ permalink }: Pick) => { + const joinedPermalink: string = permalink.join("/") const schema = (await import(`@/schema/${joinedPermalink}.json`) .then((module) => module.default) @@ -56,7 +68,7 @@ const getSchema = async (paramsPromise: DynamicPageProps) => { // @ts-expect-error to fix when types are proper getSitemapXml(sitemap).find( ({ url }) => joinedPermalink === url.replace(/^\//, ""), - )?.lastModified || new Date().toISOString() + ).lastModified || new Date().toISOString() schema.page.permalink = "/" + joinedPermalink schema.page.lastModified = lastModified @@ -76,7 +88,9 @@ export const generateMetadata = async ( props: DynamicPageProps, _parent: ResolvingMetadata, ): Promise => { - const schema = await getSchema(props) + const schema = await getSchema({ + permalink: await getPatchedPermalink(props), + }) schema.site = { ...config.site, environment: process.env.NEXT_PUBLIC_ISOMER_NEXT_ENVIRONMENT, @@ -94,7 +108,9 @@ export const generateMetadata = async ( } const Page = async (props: DynamicPageProps) => { - const renderSchema = await getSchema(props) + const renderSchema = await getSchema({ + permalink: await getPatchedPermalink(props), + }) return ( => { - const schema = (await import(`@/schema/_index.json`).then( + // Context for using @/schema/not-found.json + // For some next15 magical reason, using @/schema/_index.json will cause + // duplicated generation of the homepage, resulting in wrong meta values + // Suspected to be due to next15 changing app router SSG to render twice and in async manner + // During deployment, publisher.sh duplicate homepage "_index.json" to "not-found.json" + // For development, if `not-found.json` isn't found, simply manually copy and rename + const schema = (await import(`@/schema/not-found.json`).then( (module) => module.default, )) as IsomerPageSchemaType schema.site = { diff --git a/tooling/template/schema/not-found.json b/tooling/template/schema/not-found.json new file mode 100644 index 0000000000..ad649061d9 --- /dev/null +++ b/tooling/template/schema/not-found.json @@ -0,0 +1,55 @@ +{ + "version": "0.1.0", + "layout": "homepage", + "page": { + "title": "Home" + }, + "content": [ + { + "type": "hero", + "variant": "gradient", + "backgroundColor": "black", + "title": "Ministry of Trade and Industry", + "subtitle": "A leading global city of enterprise and talent, a vibrant nation of innovation and opportunity", + "buttonLabel": "Main CTA", + "buttonUrl": "/", + "secondaryButtonLabel": "Sub CTA", + "secondaryButtonUrl": "/", + "backgroundUrl": "https://ohno.isomer.gov.sg/images/hero-banner.png" + }, + { + "type": "infobar", + "title": "This is an infobar", + "description": "This is the description that goes into the Infobar section" + }, + { + "type": "infopic", + "title": "This is an infopic", + "description": "This is the description for the infopic component", + "imageSrc": "https://placehold.co/600x400" + }, + { + "type": "keystatistics", + "statistics": [ + { + "label": "Average all nighters pulled in a typical calendar month", + "value": "3" + }, + { + "label": "Growth in tasks assigned Q4 2024 (YoY)", + "value": "+12.2%" + }, + { + "label": "Creative blocks met per single evening", + "value": "89" + }, + { + "value": "4.0", + "label": "Number of lies in this stat block" + } + ], + "variant": "top", + "title": "Irrationality in numbers" + } + ] +}