Fix notfound meta for homepage (#933)

* fix wrong permalink for rootpage * not-found to use schema/not-found instead * add not-found.json
opengovsg · Dec 12, 2024 · 5fbb113 · 5fbb113
1 parent fd5d5cc
commit 5fbb113
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 10 deletions.
diff --git 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
@@ -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<ParamsContent>
+}
+
+// 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<ParamsContent["permalink"]> => {
+  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<ParamsContent, "permalink">) => {
+  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<Metadata> => {
-  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 (
     <RenderEngine

diff --git a/tooling/template/app/not-found.tsx b/tooling/template/app/not-found.tsx
@@ -26,7 +26,13 @@ export const generateMetadata = async (
   _props: never,
   _parent: ResolvingMetadata,
 ): Promise<Metadata> => {
-  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
@@ -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"
+    }
+  ]
+}