Merge pull request ethereum#137 from ethereum/patch-layout-type

Add `Layout` type

src/lib/interfaces.ts

@@ -1,5 +1,12 @@
-import type { Frontmatter, Lang, TranslationKey, ToCItem } from "@/lib/types"
-import { ReactNode } from "react"
+import type { ReactNode } from "react"
+
+import type {
+  Frontmatter,
+  Lang,
+  TranslationKey,
+  ToCItem,
+  Layout,
+} from "@/lib/types"
 
 /**
  * Quiz data interfaces
@@ -19,7 +26,7 @@ export interface Answer {
 
 export interface RawQuestion {
   prompt: TranslationKey
-  answers: Array<Answer>
+  answers: Answer[]
   correctAnswerId: string
 }
 
@@ -33,12 +40,12 @@ export interface QuestionBank {
 
 export interface RawQuiz {
   title: TranslationKey
-  questions: Array<string> // TODO: Force to be an array of questionID's
+  questions: string[] // TODO: Force to be an array of questionID's
 }
 
 export interface Quiz {
   title: string
-  questions: Array<Question>
+  questions: Question[]
 }
 
 export interface RawQuizzes {
@@ -50,7 +57,7 @@ export interface DeveloperDocsLink {
   to: string
   path: string
   description: TranslationKey
-  items: Array<DeveloperDocsLink>
+  items: DeveloperDocsLink[]
 }
 
 /**
@@ -62,7 +69,7 @@ export interface SharedFrontmatter {
   lang: Lang
   sidebarDepth?: number
   isOutdated?: boolean
-  template?: string
+  template?: Layout
 }
 
 export interface StaticFrontmatter extends SharedFrontmatter {
@@ -72,7 +79,7 @@ export interface StaticFrontmatter extends SharedFrontmatter {
 
 /**
  * TODO: Refactor markdown content that currently uses SummaryPointsNumbered
- * to use SummaryPoints (`summaryPoints: Array<string>`) instead. Then
+ * to use SummaryPoints (`summaryPoints: string[]`) instead. Then
  * deprecate @/lib/util/getSummaryPoints.ts
  */
 export interface SummaryPointsNumbered {
@@ -83,7 +90,7 @@ export interface SummaryPointsNumbered {
 }
 
 interface SummaryPoints {
-  summaryPoints: Array<string>
+  summaryPoints: string[]
 }
 
 interface ImageInfo {
@@ -93,29 +100,29 @@ interface ImageInfo {
 
 export interface UpgradeFrontmatter
   extends SharedFrontmatter,
-    SummaryPointsNumbered,
-    ImageInfo {}
+  SummaryPointsNumbered,
+  ImageInfo { }
 
 export interface RoadmapFrontmatter extends SharedFrontmatter, ImageInfo {
-  buttons: Array<{
+  buttons: {
     label: string
     toId?: string
     to?: string
     variant?: string
-  }>
+  }[]
 }
 
 export interface UseCasesFrontmatter
   extends SharedFrontmatter,
-    SummaryPointsNumbered,
-    ImageInfo {
+  SummaryPointsNumbered,
+  ImageInfo {
   emoji: string
 }
 
 export interface StakingFrontmatter
   extends SharedFrontmatter,
-    SummaryPoints,
-    ImageInfo {
+  SummaryPoints,
+  ImageInfo {
   emoji: string
 }
 
@@ -125,7 +132,7 @@ export interface DocsFrontmatter extends SharedFrontmatter {
 }
 
 export interface TutorialFrontmatter extends SharedFrontmatter {
-  tags: Array<string>
+  tags: string[]
   author: string
   source?: string
   sourceUrl?: string
@@ -148,7 +155,7 @@ export interface MdPageContent {
   slug: string
   content: string
   frontmatter: Frontmatter
-  tocItems: Array<ToCItem>
+  tocItems: ToCItem[]
   lastUpdatedDate?: string
   contentNotTranslated: boolean
 }

src/lib/types.ts

@@ -14,6 +14,8 @@ import type {
 } from "@/lib/interfaces"
 import { Options } from "mdast-util-toc"
 
+import { layoutMapping } from "@/pages/[...slug]"
+
 export type ChildOnlyProp = { children?: ReactNode }
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
@@ -32,6 +34,9 @@ export type Frontmatter = RoadmapFrontmatter &
   DocsFrontmatter &
   TutorialFrontmatter
 
+export type LayoutMappingType = typeof layoutMapping
+export type Layout = keyof LayoutMappingType
+
 export type Lang =
   | "en"
   | "ar"

src/pages/[...slug].tsx

@@ -13,7 +13,12 @@ import { serialize } from "next-mdx-remote/serialize"
 import readingTime from "reading-time"
 import remarkGfm from "remark-gfm"
 
-import type { NextPageWithLayout, TocNodeType } from "@/lib/types"
+import type {
+  Layout,
+  LayoutMappingType,
+  NextPageWithLayout,
+  TocNodeType,
+} from "@/lib/types"
 
 import mdComponents from "@/components/MdComponents"
 import PageMetadata from "@/components/PageMetadata"
@@ -49,7 +54,7 @@ interface Params extends ParsedUrlQuery {
   slug: string[]
 }
 
-const layoutMapping = {
+export const layoutMapping = {
   static: StaticLayout,
   "use-cases": UseCasesLayout,
   staking: StakingLayout,
@@ -60,8 +65,6 @@ const layoutMapping = {
   // event: EventLayout,
 }
 
-type LayoutMappingType = typeof layoutMapping
-
 const componentsMapping = {
   static: staticComponents,
   "use-cases": useCasesComponents,
@@ -92,10 +95,7 @@ export const getStaticPaths = (({ locales }) => {
   }
 }) satisfies GetStaticPaths<Params>
 
-type Props = Omit<
-  Parameters<LayoutMappingType[keyof LayoutMappingType]>[0],
-  "children"
-> &
+type Props = Omit<Parameters<LayoutMappingType[Layout]>[0], "children"> &
   SSRConfig & {
     mdxSource: MDXRemoteSerializeResult
   }
@@ -136,11 +136,9 @@ export const getStaticProps = (async (context) => {
   const lastDeployDate = getLastDeployDate()
 
   // Get corresponding layout
-  let layout = frontmatter.template as keyof LayoutMappingType
+  let layout = (frontmatter.template as Layout) ?? "static"
 
   if (!frontmatter.template) {
-    layout = "static"
-
     if (params.slug.includes("docs")) {
       layout = "docs"
     }
@@ -177,7 +175,10 @@ const ContentPage: NextPageWithLayout<
 > = ({ mdxSource, layout }) => {
   // TODO: Address component typing error here (flip `FC` types to prop object types)
   // @ts-expect-error
-  const components: Record<string, React.ReactNode> = { ...mdComponents, ...componentsMapping[layout] }
+  const components: Record<string, React.ReactNode> = {
+    ...mdComponents,
+    ...componentsMapping[layout],
+  }
   return (
     <>
       <MDXRemote {...mdxSource} components={components} />
@@ -188,15 +189,8 @@ const ContentPage: NextPageWithLayout<
 // Per-Page Layouts: https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#with-typescript
 ContentPage.getLayout = (page) => {
   // values returned by `getStaticProps` method and passed to the page component
-  const {
-    slug,
-    frontmatter,
-    lastUpdatedDate,
-    layout,
-    timeToRead,
-    tocItems,
-  } = page.props
-
+  const { slug, frontmatter, lastUpdatedDate, layout, timeToRead, tocItems } =
+    page.props
 
   const layoutProps = {
     slug,