refactor: migrate tutorials page to SSR

Author: wackerow

app/[locale]/developers/tutorials/_components/modal.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import React, { useState } from "react"
+import { FaGithub } from "react-icons/fa"
+
+import Translation from "@/components/Translation"
+import { Button } from "@/components/ui/buttons/Button"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import Modal from "@/components/ui/dialog-modal"
+import { Flex } from "@/components/ui/flex"
+
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
+const TutorialSubmitModal = ({
+  dir,
+}: Pick<React.HTMLAttributes<React.JSX.Element>, "dir">) => {
+  const [isModalOpen, setModalOpen] = useState(false)
+
+  const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
+
+  return (
+    <>
+      <Modal
+        open={isModalOpen}
+        onOpenChange={(open) => setModalOpen(open)}
+        size={modalSize}
+        contentProps={{ dir }}
+        title={
+          <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
+        }
+      >
+        <p className="mb-6">
+          <Translation id="page-developers-tutorials:page-tutorial-listing-policy-intro" />
+        </p>
+        <Flex className="flex-col gap-2 md:flex-row">
+          <Flex className="w-full flex-col justify-between rounded-sm border border-border p-4">
+            <b>
+              <Translation id="page-developers-tutorials:page-tutorial-create-an-issue" />
+            </b>
+            <p className="mb-6">
+              <Translation id="page-developers-tutorials:page-tutorial-create-an-issue-desc" />
+            </p>
+            <ButtonLink
+              variant="outline"
+              href="https://github.com/ethereum/ethereum-org-website/issues/new?assignees=&labels=Type%3A+Feature&template=suggest_tutorial.yaml&title="
+            >
+              <FaGithub />
+              <Translation id="page-developers-tutorials:page-tutorial-raise-issue-btn" />
+            </ButtonLink>
+          </Flex>
+        </Flex>
+      </Modal>
+
+      <Button
+        className="px-3 py-2 text-body"
+        variant="outline"
+        onClick={() => {
+          setModalOpen(true)
+          trackCustomEvent({
+            eventCategory: "tutorials tags",
+            eventAction: "click",
+            eventName: "submit",
+          })
+        }}
+      >
+        <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
+      </Button>
+    </>
+  )
+}
+
+TutorialSubmitModal.displayName = "TutorialSubmitModal"
+
+export default TutorialSubmitModal

app/[locale]/developers/tutorials/_components/tutorials.tsx

@@ -9,18 +9,14 @@ import React, {
   useState,
 } from "react"
 import { useLocale } from "next-intl"
-import { FaGithub } from "react-icons/fa"
 
 import { ITutorial, Lang } from "@/lib/types"
 
 import Emoji from "@/components/Emoji"
-import FeedbackCard from "@/components/FeedbackCard"
-import MainArticle from "@/components/MainArticle"
 import Translation from "@/components/Translation"
 import { getSkillTranslationId } from "@/components/TutorialMetadata"
 import TutorialTags from "@/components/TutorialTags"
-import { Button, ButtonLink } from "@/components/ui/buttons/Button"
-import Modal from "@/components/ui/dialog-modal"
+import { Button } from "@/components/ui/buttons/Button"
 import { Flex, FlexProps } from "@/components/ui/flex"
 import { Tag, TagButton } from "@/components/ui/tag"
 
@@ -36,12 +32,6 @@ import externalTutorials from "@/data/externalTutorials.json"
 
 import { DEFAULT_LOCALE } from "@/lib/constants"
 
-import { useBreakpointValue } from "@/hooks/useBreakpointValue"
-
-type LinkFlexProps = FlexProps & {
-  href: string
-}
-
 const FilterTag = forwardRef<
   HTMLButtonElement,
   { isActive: boolean; name: string } & ButtonHTMLAttributes<HTMLButtonElement>
@@ -66,6 +56,10 @@ const Text = ({ className, ...props }: HTMLAttributes<HTMLHeadElement>) => (
   <p className={cn("mb-6", className)} {...props} />
 )
 
+type LinkFlexProps = FlexProps & {
+  href: string
+}
+
 const LinkFlex = ({ href, children, ...props }: LinkFlexProps) => {
   return (
     <Flex asChild {...props}>
@@ -85,15 +79,11 @@ const published = (locale: string, published: string) => {
   ) : null
 }
 
-type TutorialPageProps = {
+type TutorialsListProps = {
   internalTutorials: ITutorial[]
-  contentNotTranslated: boolean
 }
 
-const TutorialPage = ({
-  internalTutorials,
-  contentNotTranslated,
-}: TutorialPageProps) => {
+const TutorialsList = ({ internalTutorials }: TutorialsListProps) => {
   const locale = useLocale()
   const effectiveLocale = internalTutorials.length > 0 ? locale : DEFAULT_LOCALE
   const filteredTutorialsByLang = useMemo(
@@ -111,7 +101,6 @@ const TutorialPage = ({
     [filteredTutorialsByLang]
   )
 
-  const [isModalOpen, setModalOpen] = useState(false)
   const [filteredTutorials, setFilteredTutorials] = useState(
     filteredTutorialsByLang
   )
@@ -152,66 +141,8 @@ const TutorialPage = ({
     setSelectedTags([...tempSelectedTags])
   }
 
-  const dir = contentNotTranslated ? "ltr" : "unset"
-
-  const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
   return (
-    <MainArticle
-      className={`mx-auto my-0 mt-16 flex w-full flex-col items-center ${dir}`}
-    >
-      <h1 className="no-italic mb-4 text-center font-monospace text-[2rem] font-semibold uppercase leading-[1.4] max-sm:mx-4 max-sm:mt-4 sm:mb-[1.625rem]">
-        <Translation id="page-developers-tutorials:page-tutorial-title" />
-      </h1>
-      <Text className="mb-4 text-center leading-xs text-body-medium">
-        <Translation id="page-developers-tutorials:page-tutorial-subtitle" />
-      </Text>
-
-      <Modal
-        open={isModalOpen}
-        onOpenChange={(open) => setModalOpen(open)}
-        size={modalSize}
-        contentProps={{ dir }}
-        title={
-          <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
-        }
-      >
-        <Text>
-          <Translation id="page-developers-tutorials:page-tutorial-listing-policy-intro" />
-        </Text>
-        <Flex className="flex-col gap-2 md:flex-row">
-          <Flex className="w-full flex-col justify-between rounded-sm border border-border p-4">
-            <b>
-              <Translation id="page-developers-tutorials:page-tutorial-create-an-issue" />
-            </b>
-            <Text>
-              <Translation id="page-developers-tutorials:page-tutorial-create-an-issue-desc" />
-            </Text>
-            <ButtonLink
-              variant="outline"
-              href="https://github.com/ethereum/ethereum-org-website/issues/new?assignees=&labels=Type%3A+Feature&template=suggest_tutorial.yaml&title="
-            >
-              <FaGithub />
-              <Translation id="page-developers-tutorials:page-tutorial-raise-issue-btn" />
-            </ButtonLink>
-          </Flex>
-        </Flex>
-      </Modal>
-
-      <Button
-        className="px-3 py-2 text-body"
-        variant="outline"
-        onClick={() => {
-          setModalOpen(true)
-          trackCustomEvent({
-            eventCategory: "tutorials tags",
-            eventAction: "click",
-            eventName: "submit",
-          })
-        }}
-      >
-        <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
-      </Button>
-
+    <>
       <div className="my-8 w-full shadow-table-box md:w-2/3">
         <Flex className="m-8 flex-col justify-center border-b border-border px-0 pb-4 pt-4 md:pb-8">
           <Flex className="mb-4 max-w-full flex-wrap items-center gap-2">
@@ -312,9 +243,10 @@ const TutorialPage = ({
           )
         })}
       </div>
-      <FeedbackCard />
-    </MainArticle>
+    </>
   )
 }
 
-export default TutorialPage
+TutorialsList.displayName = "TutorialsList"
+
+export default TutorialsList

app/[locale]/developers/tutorials/page.tsx

@@ -7,20 +7,28 @@ import {
 
 import { Lang } from "@/lib/types"
 
+import FeedbackCard from "@/components/FeedbackCard"
 import I18nProvider from "@/components/I18nProvider"
+import MainArticle from "@/components/MainArticle"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getTutorialsData } from "@/lib/utils/md"
 import { getMetadata } from "@/lib/utils/metadata"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-import Tutorials from "./_components/tutorials"
+import TutorialSubmitModal from "./_components/modal"
+import TutorialsList from "./_components/tutorials"
 
 const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   const { locale } = await params
 
   setRequestLocale(locale)
 
+  const t = await getTranslations({
+    locale,
+    namespace: "page-developers-tutorials",
+  })
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage(
@@ -29,13 +37,29 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   const messages = pick(allMessages, requiredNamespaces)
 
   const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[2])
+  const dir = contentNotTranslated ? "ltr" : "unset"
+
+  const internalTutorials = await getTutorialsData(locale)
 
   return (
     <I18nProvider locale={locale} messages={messages}>
-      <Tutorials
-        internalTutorials={getTutorialsData(locale)}
-        contentNotTranslated={contentNotTranslated}
-      />
+      <MainArticle
+        className="mx-auto my-0 mt-16 flex w-full flex-col items-center"
+        dir={dir}
+      >
+        <h1 className="no-italic mb-4 text-center font-monospace text-[2rem] font-semibold uppercase leading-[1.4] max-sm:mx-4 max-sm:mt-4 sm:mb-[1.625rem]">
+          {t("page-tutorial-title")}
+        </h1>
+        <p className="mb-4 text-center leading-xs text-body-medium">
+          {t("page-tutorial-subtitle")}
+        </p>
+
+        <TutorialSubmitModal dir={dir} />
+
+        <TutorialsList internalTutorials={internalTutorials} />
+
+        <FeedbackCard />
+      </MainArticle>
     </I18nProvider>
   )
 }

src/lib/utils/md.ts

@@ -1,4 +1,3 @@
-import fs from "fs"
 import fsp from "fs/promises"
 import { extname, join } from "path"
 
@@ -59,44 +58,50 @@ export const getPostSlugs = async (dir: string, filterRegex?: RegExp) => {
   return files
 }
 
-export const getTutorialsData = (locale: string): ITutorial[] => {
+export const getTutorialsData = async (
+  locale: string
+): Promise<ITutorial[]> => {
   const contentRoot = getContentRoot()
   const fullPath = join(
     contentRoot,
     locale !== "en" ? `translations/${locale!}` : "",
     "developers/tutorials"
   )
-  let tutorialData: ITutorial[] = []
-
-  if (fs.existsSync(fullPath)) {
-    const languageTutorialFiles = fs.readdirSync(fullPath)
-
-    tutorialData = languageTutorialFiles.map((dir) => {
-      const filePath = join(
-        contentRoot,
-        locale !== "en" ? `translations/${locale!}` : "",
-        "developers/tutorials",
-        dir,
-        "index.md"
-      )
-      const fileContents = fs.readFileSync(filePath, "utf8")
-      const { data, content } = matter(fileContents)
-      const frontmatter = data as Frontmatter
-
-      return {
-        href: join(`/${locale}/developers/tutorials`, dir),
-        title: frontmatter.title,
-        description: frontmatter.description,
-        author: frontmatter.author || "",
-        tags: frontmatter.tags,
-        skill: frontmatter.skill as Skill,
-        timeToRead: Math.round(readingTime(content).minutes),
-        published: dateToString(frontmatter.published),
-        lang: frontmatter.lang,
-        isExternal: false,
-      }
-    })
+  const tutorialData: ITutorial[] = []
+
+  const stats = await fsp.stat(fullPath)
+  if (!stats.isDirectory()) {
+    console.warn(`Tutorials directory not found for locale: ${locale}`)
+    return tutorialData // Return empty if the directory does not exist
   }
 
+  const languageTutorialFiles = await fsp.readdir(fullPath)
+
+  languageTutorialFiles.forEach(async (dir) => {
+    const filePath = join(
+      contentRoot,
+      locale !== "en" ? `translations/${locale!}` : "",
+      "developers/tutorials",
+      dir,
+      "index.md"
+    )
+    const fileContents = await fsp.readFile(filePath, "utf8")
+    const { data, content } = matter(fileContents)
+    const frontmatter = data as Frontmatter
+
+    tutorialData.push({
+      href: join(`/${locale}/developers/tutorials`, dir),
+      title: frontmatter.title,
+      description: frontmatter.description,
+      author: frontmatter.author || "",
+      tags: frontmatter.tags,
+      skill: frontmatter.skill as Skill,
+      timeToRead: Math.round(readingTime(content).minutes),
+      published: dateToString(frontmatter.published),
+      lang: frontmatter.lang,
+      isExternal: false,
+    })
+  })
+
   return tutorialData
 }