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,
     },

public/content/ai-agents/index.md

@@ -39,7 +39,7 @@ In contrast, Ethereum's decentralized ecosystem offers several key advantages:
 
 These factors transform AI agents from simple bots into dynamic, self-improving systems that offer significant value across multiple sectors:
 
-<CardGrid className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8">
+<CardGrid>
   <Card title="Automated DeFi" emoji=":money_with_wings:" description="AI agents keep a close eye on market trends, execute trades, and manage portfolios — making the complex world of DeFi a lot more approachable."/>
   <Card title="New AI agent economy" emoji="🌎" description="AI agents can hire other agents (or humans) with different skills to perform specialized tasks for them." />
   <Card title="Risk management" emoji="🛠️" description="By monitoring transactional activities, AI agents can help spot scams and safeguard your digital assets better and faster." />

public/content/payments/index.md

@@ -27,7 +27,7 @@ This isn't a far-off dream – it's happening today on Ethereum. While tradition
 
 For millions of people working abroad, sending money back home is a regular necessity. Traditional remittance services often come with high fees and slow processing times. Ethereum offers a compelling alternative.
 
-<CardGrid className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8">
+<CardGrid>
   <Card title="Cheaper Fees" emoji=":money_with_wings:" description="Remittance services charge up to $14 fees on average. Ethereum transactions can often be completed under $0.01."/>
   <Card title="Faster Transfers" emoji="📶" description="International wire transfers take several days to process. Ethereum transactions are settled in minutes." />
   <Card title="Open to anyone" emoji="🌎" description="You only need an internet connection and a wallet app to send or receive Ether." />

public/content/prediction-markets/index.md

@@ -30,7 +30,7 @@ In theory, because bettors stand to profit from being correct, prediction market
 
 Unlike traditional forecasting, blockchain-based prediction markets are:
 
-<CardGrid className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8">
+<CardGrid>
   <Card title="Incentivized" emoji=":money_with_wings:" description="Participants stake real funds, which infers high-quality predictions."/>
   <Card title="Decentralization" emoji="🌎" description="Using blockchain and smart contracts ensures transparent and automated payouts." />
   <Card title="Market driven odds" emoji="🤝" description="Prices are set by traders buying and selling outcome shares, rather than preset by a centralized bookmaker." />

src/components/ActionCard.tsx

@@ -41,7 +41,7 @@ const ActionCard = ({
   return (
     <LinkBox
       className={cn(
-        "flex flex-col md:flex-row shadow-table hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:duration-100 focus:scale-[1.02] focus:rounded focus:shadow-table-box-hover focus:duration-100",
+        "flex flex-col shadow-table hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:duration-100 focus:scale-[1.02] focus:rounded focus:shadow-table-box-hover focus:duration-100 md:flex-row",
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ const ActionCard = ({
           src={image}
           alt={alt || ""}
           width={imageWidth}
-          className="max-h-full object-cover p-4 self-center"
+          className="max-h-full self-center object-cover p-4"
         />
       </Flex>
       <div className="flex flex-col justify-center p-6">

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/layouts/md/Roadmap.tsx

@@ -11,13 +11,8 @@ import { ContentLayout } from "../ContentLayout"
 import { useTranslation } from "@/hooks/useTranslation"
 import RoadmapHubHeroImage from "@/public/images/heroes/roadmap-hub-hero.jpg"
 
-const CardGrid = (props: ChildOnlyProp) => (
-  <div className="grid grid-cols-1 gap-8 md:grid-cols-2" {...props} />
-)
-
 // Roadmap layout components
 export const roadmapComponents = {
-  CardGrid,
   RoadmapActionCard,
   RoadmapImageContent,
 }

src/layouts/md/UseCases.tsx

@@ -18,8 +18,16 @@ import { ContentLayout } from "../ContentLayout"
 
 import { useTranslation } from "@/hooks/useTranslation"
 
+const CardGrid = (props: ChildOnlyProp) => (
+  <div
+    className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8"
+    {...props}
+  />
+)
+
 // UseCases layout components
 export const useCasesComponents = {
+  CardGrid,
   AiAgentProductLists,
   BuildYourOwnAIAgent,
   PredictionMarketLists,

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

@@ -1,6 +1,7 @@
 import { MDXRemoteProps } from "next-mdx-remote"
 import readingTime, { ReadTimeResults } from "reading-time"
 
+import type { Layout } from "@/lib/types"
 import {
   CommitHistory,
   FileContributor,
@@ -12,15 +13,19 @@ import {
 import { getMarkdownFileContributorInfo } 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>
 }
 
@@ -37,13 +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,

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"
+}