unify dynamic pages and run a full build only in production envs

Author: pettinarip

app/[locale]/[...slug]/page.tsx

@@ -6,10 +6,11 @@ import I18nProvider from "@/components/I18nProvider"
 import mdComponents from "@/components/MdComponents"
 
 import { dataLoader } from "@/lib/utils/data/dataLoader"
+import { dateToString } from "@/lib/utils/date"
 import { getPostSlugs } from "@/lib/utils/md"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-import { LOCALES_CODES } from "@/lib/constants"
+import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants"
 
 import { componentsMapping, layoutMapping } from "@/layouts"
 import { fetchGFIs } from "@/lib/api/fetchGFIs"
@@ -18,6 +19,18 @@ import { getMdMetadata } from "@/lib/md/metadata"
 
 const loadData = dataLoader([["gfissues", fetchGFIs]])
 
+function getLayoutFromSlug(slug: string) {
+  if (slug.includes("developers/docs")) {
+    return "docs"
+  }
+
+  if (slug.includes("developers/tutorials")) {
+    return "tutorial"
+  }
+
+  return "static"
+}
+
 export default async function Page({
   params,
 }: {
@@ -26,7 +39,7 @@ export default async function Page({
   const { locale, slug: slugArray } = await params
 
   // Check if this specific path is in our valid paths
-  const validPaths = await generateStaticParams()
+  const validPaths = await pagesToBuild()
   const isValidPath = validPaths.some(
     (path) =>
       path.locale === locale && path.slug.join("/") === slugArray.join("/")
@@ -49,6 +62,7 @@ export default async function Page({
     tocItems,
     lastEditLocaleTimestamp,
     isTranslated,
+    contributors,
   } = await getPageData({
     locale,
     slug,
@@ -61,9 +75,14 @@ export default async function Page({
   })
 
   // Determine the actual layout after we have the frontmatter
-  const layout = frontmatter.template || "static"
+  const layout = frontmatter.template || getLayoutFromSlug(slug)
   const Layout = layoutMapping[layout]
 
+  // If the page has a published date, format it
+  if ("published" in frontmatter) {
+    frontmatter.published = dateToString(frontmatter.published)
+  }
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage(slug, layout)
@@ -77,15 +96,18 @@ export default async function Page({
         tocItems={tocItems}
         lastEditLocaleTimestamp={lastEditLocaleTimestamp}
         contentNotTranslated={!isTranslated}
+        contributors={contributors}
+        // TODO: Remove this once we have a real timeToRead value
+        timeToRead={2}
       >
         {content}
       </Layout>
     </I18nProvider>
   )
 }
 
-export async function generateStaticParams() {
-  const slugs = await getPostSlugs("/", /\/developers/)
+async function pagesToBuild() {
+  const slugs = await getPostSlugs("/")
 
   return LOCALES_CODES.flatMap((locale) =>
     slugs.map((slug) => ({
@@ -95,6 +117,19 @@ export async function generateStaticParams() {
   )
 }
 
+export async function generateStaticParams() {
+  const allPages = await pagesToBuild()
+
+  if (process.env.IS_PREVIEW_DEPLOY === "true") {
+    // Only build default locale
+    return allPages.filter((page) => page.locale === DEFAULT_LOCALE)
+  }
+
+  return allPages
+}
+
+export const dynamicParams = true
+
 export async function generateMetadata({
   params,
 }: {

app/[locale]/developers/docs/[[...doc]]/page.tsx

@@ -1,5 +1,7 @@
+import { docsComponents, DocsLayout } from "./Docs"
 import * as mdLayouts from "./md"
 import { staticComponents, StaticLayout } from "./Static"
+import { TutorialLayout, tutorialsComponents } from "./Tutorial"
 
 export * from "./BaseLayout"
 export * from "./Docs"
@@ -14,6 +16,8 @@ export const layoutMapping = {
   roadmap: mdLayouts.RoadmapLayout,
   upgrade: mdLayouts.UpgradeLayout,
   translatathon: mdLayouts.TranslatathonLayout,
+  docs: DocsLayout,
+  tutorial: TutorialLayout,
 }
 
 export const componentsMapping = {
@@ -23,4 +27,6 @@ export const componentsMapping = {
   ...mdLayouts.roadmapComponents,
   ...mdLayouts.upgradeComponents,
   ...mdLayouts.translatathonComponents,
+  ...docsComponents,
+  ...tutorialsComponents,
 } as const