Fix layout component logic

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

@@ -7,6 +7,7 @@ import mdComponents from "@/components/MdComponents"
 
 import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { dateToString } from "@/lib/utils/date"
+import { getLayoutFromSlug } from "@/lib/utils/layout"
 import { getPostSlugs } from "@/lib/utils/md"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
@@ -19,18 +20,6 @@ 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,
 }: {
@@ -69,7 +58,8 @@ export default async function Page({
     slug,
     // TODO: Address component typing error here (flip `FC` types to prop object types)
     // @ts-expect-error Incompatible component function signatures
-    components: { ...mdComponents, ...componentsMapping },
+    baseComponents: mdComponents,
+    componentsMapping,
     scope: {
       gfissues,
     },

src/components/Codeblock.tsx

@@ -41,10 +41,6 @@ const TopBarItem = ({
 
 const codeTheme = {
   light: {
-    plain: {
-      backgroundColor: "#f7f7f7", // background-highlight (gray-50)
-      color: "#6C24DF", // primary (purple-600)
-    },
     styles: [
       {
         style: { color: "#6c6783" },
@@ -113,10 +109,6 @@ const codeTheme = {
   },
   dark: {
     // Pulled from `defaultProps.theme` for potential customization
-    plain: {
-      backgroundColor: "#121212", // background-highlight (gray-900)
-      color: "#B38DF0", // primary (purple-400)
-    },
     styles: [
       {
         style: { color: "#6c6783" },
@@ -253,7 +245,7 @@ const Codeblock = ({
     /* Context: https://github.com/ethereum/ethereum-org-website/issues/6202 */
     <div className={cn("relative", className)} dir="ltr">
       <div
-        className="overflow-scroll rounded"
+        className="overflow-scroll rounded bg-background-highlight text-primary"
         style={{
           maxHeight: isCollapsed
             ? `calc((1.2rem * ${LINES_BEFORE_COLLAPSABLE}) + 4.185rem)`

src/layouts/Docs.tsx

@@ -1,3 +1,4 @@
+import { MDXRemoteProps } from "next-mdx-remote"
 import type { HTMLAttributes } from "react"
 
 import { ChildOnlyProp } from "@/lib/types"
@@ -34,8 +35,7 @@ import YouTube from "@/components/YouTube"
 import { cn } from "@/lib/utils/cn"
 import { getEditPath } from "@/lib/utils/editPath"
 
-const baseHeadingClasses =
-  "font-mono uppercase font-bold scroll-mt-40 break-words"
+const baseHeadingClasses = "font-bold scroll-mt-40 break-words"
 
 const H1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading1
@@ -72,12 +72,18 @@ const BackToTop = (props: ChildOnlyProp) => (
   </div>
 )
 
+const Pre = (props: React.HTMLAttributes<HTMLDivElement>) => {
+  const match = props.className?.match(/(language-\S+)/)
+  const codeLanguage = match ? match[0] : "plain-text"
+  return <Codeblock codeLanguage={codeLanguage} {...props} />
+}
+
 export const docsComponents = {
   h1: H1,
   h2: H2,
   h3: H3,
   h4: H4,
-  pre: Codeblock,
+  pre: Pre,
   ...mdxTableComponents,
   ButtonLink,
   Card,
@@ -88,7 +94,7 @@ export const docsComponents = {
   GlossaryTooltip,
   InfoBanner,
   YouTube,
-}
+} as MDXRemoteProps["components"]
 
 type DocsLayoutProps = Pick<
   MdPageContent,

src/layouts/Tutorial.tsx

@@ -1,3 +1,4 @@
+import { MDXRemoteProps } from "next-mdx-remote"
 import type { HTMLAttributes } from "react"
 
 import type { ChildOnlyProp } from "@/lib/types"
@@ -28,17 +29,11 @@ import YouTube from "@/components/YouTube"
 import { getEditPath } from "@/lib/utils/editPath"
 
 const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
-  <MdHeading1
-    className="font-monospace uppercase max-lg:text-[1.75rem]"
-    {...props}
-  />
+  <MdHeading1 className="max-lg:text-[1.75rem]" {...props} />
 )
 
 const Heading2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
-  <MdHeading2
-    className="mt-12 scroll-mt-40 font-monospace uppercase max-md:text-2xl"
-    {...props}
-  />
+  <MdHeading2 className="mt-12 scroll-mt-40 max-md:text-2xl" {...props} />
 )
 
 const Heading3 = (props: HTMLAttributes<HTMLHeadingElement>) => (
@@ -66,6 +61,12 @@ const KBD = (props: HTMLAttributes<HTMLElement>) => (
   />
 )
 
+const Pre = (props: React.HTMLAttributes<HTMLDivElement>) => {
+  const match = props.className?.match(/(language-\S+)/)
+  const codeLanguage = match ? match[0] : "plain-text"
+  return <Codeblock codeLanguage={codeLanguage} {...props} />
+}
+
 export const tutorialsComponents = {
   a: TooltipLink,
   h1: Heading1,
@@ -74,7 +75,7 @@ export const tutorialsComponents = {
   h4: Heading4,
   p: Paragraph,
   kbd: KBD,
-  pre: Codeblock,
+  pre: Pre,
   ...mdxTableComponents,
   ButtonLink,
   CallToContribute,
@@ -83,7 +84,8 @@ export const tutorialsComponents = {
   EnvWarningBanner,
   InfoBanner,
   YouTube,
-}
+} as MDXRemoteProps["components"]
+
 type TutorialLayoutProps = ChildOnlyProp &
   Pick<
     MdPageContent,

src/layouts/index.ts

@@ -1,3 +1,7 @@
+import { MDXRemoteProps } from "next-mdx-remote"
+
+import { Layout } from "@/lib/types"
+
 import { docsComponents, DocsLayout } from "./Docs"
 import * as mdLayouts from "./md"
 import { staticComponents, StaticLayout } from "./Static"
@@ -20,13 +24,13 @@ export const layoutMapping = {
   tutorial: TutorialLayout,
 }
 
-export const componentsMapping = {
-  ...staticComponents,
-  ...mdLayouts.useCasesComponents,
-  ...mdLayouts.stakingComponents,
-  ...mdLayouts.roadmapComponents,
-  ...mdLayouts.upgradeComponents,
-  ...mdLayouts.translatathonComponents,
-  ...docsComponents,
-  ...tutorialsComponents,
-} as const
+export const componentsMapping: Record<Layout, MDXRemoteProps["components"]> = {
+  static: staticComponents,
+  "use-cases": mdLayouts.useCasesComponents,
+  staking: mdLayouts.stakingComponents,
+  roadmap: mdLayouts.roadmapComponents,
+  upgrade: mdLayouts.upgradeComponents,
+  translatathon: mdLayouts.translatathonComponents,
+  docs: docsComponents,
+  tutorial: tutorialsComponents,
+}

src/lib/md/compile.ts

@@ -9,7 +9,7 @@ import remarkGfm from "remark-gfm"
 import remarkHeadingId from "remark-heading-id"
 
 import { CONTENT_DIR, CONTENT_PATH } from "../constants"
-import { Frontmatter, TocNodeType } from "../types"
+import { Frontmatter, Layout, TocNodeType } from "../types"
 
 import rehypeImg from "@/lib/md/rehypeImg"
 import remarkInferToc from "@/lib/md/remarkInferToc"
@@ -80,3 +80,15 @@ export const compile = async ({
     tocNodeItems,
   }
 }
+
+export const extractLayoutFromMarkdown = async (
+  markdown: string
+): Promise<Layout | undefined> => {
+  const source = preprocessMarkdown(markdown)
+
+  const { frontmatter } = await compileMDX<Frontmatter>({
+    source,
+    options: { parseFrontmatter: true },
+  })
+  return frontmatter.template
+}

src/lib/md/data.ts

@@ -13,15 +13,18 @@ import {
 import { getFileContributorInfo } from "@/lib/utils/contributors"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
-import { compile } from "./compile"
+import { getLayoutFromSlug } from "../utils/layout"
+
+import { compile, extractLayoutFromMarkdown } from "./compile"
 import { importMd } from "./import"
 
 const commitHistoryCache: CommitHistory = {}
 
 interface GetPageDataParams {
   locale: string
   slug: string
-  components: MDXRemoteProps["components"]
+  baseComponents: MDXRemoteProps["components"]
+  componentsMapping: Record<Layout, MDXRemoteProps["components"]>
   layout?: Layout
   scope?: Record<string, unknown>
 }
@@ -39,14 +42,26 @@ interface PageData {
 export async function getPageData({
   locale,
   slug,
-  components,
+  baseComponents,
+  componentsMapping,
   layout: layoutFromProps,
   scope,
 }: GetPageDataParams): Promise<PageData> {
   const slugArray = slug.split("/")
 
   // Import and compile markdown
   const { markdown, isTranslated } = await importMd(locale, slug)
+  // Determine layout first to finalize list of components
+  const layout =
+    layoutFromProps ||
+    (await extractLayoutFromMarkdown(markdown)) ||
+    getLayoutFromSlug(slug)
+
+  const components: MDXRemoteProps["components"] = {
+    ...baseComponents,
+    ...(layout ? componentsMapping[layout] : {}),
+  }
+
   const { content, frontmatter, tocNodeItems } = await compile({
     markdown,
     slugArray,
@@ -55,8 +70,6 @@ export async function getPageData({
     scope,
   })
 
-  const layout = layoutFromProps || frontmatter.template || "static"
-
   // Process TOC items
   const tocItems =
     tocNodeItems.length === 1 && "items" in tocNodeItems[0]

src/lib/utils/layout.ts

@@ -0,0 +1,5 @@
+export const getLayoutFromSlug = (slug: string) => {
+  if (slug.includes("developers/docs")) return "docs"
+  if (slug.includes("developers/tutorials")) return "tutorial"
+  return "static"
+}