Merge pull request #13153 from ethereum/performance-locale-timestamp

performance: get last edit/deploy locale timestamp for layouts on build time

Author: pettinarip

src/components/FileContributors.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react"
-import { useRouter } from "next/router"
 import {
   Avatar,
   Flex,
@@ -9,7 +8,7 @@ import {
   VStack,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp, FileContributor, Lang } from "@/lib/types"
+import type { ChildOnlyProp, FileContributor } from "@/lib/types"
 
 import { Button } from "@/components/Buttons"
 import InlineLink from "@/components/Link"
@@ -18,7 +17,6 @@ import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
-import { getLocaleTimestamp } from "@/lib/utils/time"
 
 const ContributorList = ({ children }: Required<ChildOnlyProp>) => (
   <UnorderedList maxH="2xs" m={0} mt={6} overflowY="scroll">
@@ -44,16 +42,15 @@ const Contributor = ({ contributor }: ContributorProps) => (
 
 export type FileContributorsProps = FlexProps & {
   contributors: FileContributor[]
-  lastEdit: string
+  lastEditLocaleTimestamp: string
 }
 
 const FileContributors = ({
   contributors,
-  lastEdit,
+  lastEditLocaleTimestamp,
   ...props
 }: FileContributorsProps) => {
   const [isModalOpen, setModalOpen] = useState(false)
-  const { locale } = useRouter()
 
   const lastContributor: FileContributor = contributors.length
     ? contributors[0]
@@ -102,7 +99,7 @@ const FileContributors = ({
             <InlineLink href={"https://github.com/" + lastContributor.login}>
               @{lastContributor.login}
             </InlineLink>
-            , {getLocaleTimestamp(locale as Lang, lastEdit)}
+            , {lastEditLocaleTimestamp}
           </Text>
         </Flex>
 

src/components/Footer.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"
 import { IoChevronUpSharp } from "react-icons/io5"
@@ -13,13 +12,12 @@ import {
   Text,
 } from "@chakra-ui/react"
 
-import type { FooterLink, FooterLinkSection, Lang } from "@/lib/types"
+import type { FooterLink, FooterLinkSection } from "@/lib/types"
 
 import { BaseLink } from "@/components/Link"
 import Translation from "@/components/Translation"
 
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
-import { getLocaleTimestamp } from "@/lib/utils/time"
 
 import { Button } from "./Buttons"
 
@@ -42,11 +40,10 @@ const socialLinks = [
 ]
 
 type FooterProps = {
-  lastDeployDate: string
+  lastDeployLocaleTimestamp: string
 }
 
-const Footer = ({ lastDeployDate }: FooterProps) => {
-  const { locale } = useRouter()
+const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
   const { t } = useTranslation("common")
 
   const linkSections: FooterLinkSection[] = [
@@ -319,6 +316,7 @@ const Footer = ({ lastDeployDate }: FooterProps) => {
       fill: "primary.base",
     },
   }
+
   const linkProps = {
     isPartiallyActive: false,
     textDecor: "none",
@@ -335,7 +333,7 @@ const Footer = ({ lastDeployDate }: FooterProps) => {
   return (
     <Box as="footer" py="4" px="8">
       <Flex
-        justify={{ base: "center", md: 'space-between'}}
+        justify={{ base: "center", md: "space-between" }}
         alignItems="center"
         flexWrap="wrap"
         gap={8}
@@ -344,12 +342,9 @@ const Footer = ({ lastDeployDate }: FooterProps) => {
         borderTop={"1px solid"}
         borderColor={"body.light"}
       >
-        {lastDeployDate && (
-          <Text fontSize={"sm"} fontStyle={"italic"} color={"body.medium"}>
-            <Translation id="website-last-updated" />:{" "}
-            {getLocaleTimestamp(locale as Lang, lastDeployDate)}
-          </Text>
-        )}
+        <Text fontSize={"sm"} fontStyle={"italic"} color={"body.medium"}>
+          <Translation id="website-last-updated" />: {lastDeployLocaleTimestamp}
+        </Text>
 
         <Button
           leftIcon={<IoChevronUpSharp />}
@@ -428,11 +423,7 @@ const Footer = ({ lastDeployDate }: FooterProps) => {
           m={0}
         >
           {dipperLinks.map(({ to, text }) => (
-            <ListItem
-              key={text}
-              textAlign="center"
-              px="2"
-            >
+            <ListItem key={text} textAlign="center" px="2">
               <BaseLink href={to} w={["100%", null]} {...linkProps}>
                 {text}
               </BaseLink>

src/layouts/Docs.tsx

@@ -197,11 +197,11 @@ type DocsLayoutProps = Pick<
   MdPageContent,
   | "slug"
   | "tocItems"
-  | "lastUpdatedDate"
+  | "lastEditLocaleTimestamp"
   | "contributors"
   | "contentNotTranslated"
 > &
-  Required<Pick<MdPageContent, "lastUpdatedDate">> &
+  Required<Pick<MdPageContent, "lastEditLocaleTimestamp">> &
   ChildOnlyProp & {
     frontmatter: DocsFrontmatter
   }
@@ -211,7 +211,7 @@ export const DocsLayout = ({
   frontmatter,
   slug,
   tocItems,
-  lastUpdatedDate,
+  lastEditLocaleTimestamp,
   contributors,
   contentNotTranslated,
 }: DocsLayoutProps) => {
@@ -233,7 +233,7 @@ export const DocsLayout = ({
           <H1 id="top">{frontmatter.title}</H1>
           <FileContributors
             contributors={contributors}
-            lastEdit={lastUpdatedDate}
+            lastEditLocaleTimestamp={lastEditLocaleTimestamp}
           />
           <TableOfContents
             slug={slug}

src/layouts/Roadmap.tsx

@@ -9,7 +9,7 @@ import {
   WrapItem,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
+import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, RoadmapFrontmatter } from "@/lib/interfaces"
 
 import Breadcrumbs from "@/components/Breadcrumbs"

src/layouts/RootLayout.tsx

@@ -24,7 +24,7 @@ export const RootLayout = ({
   children,
   // contentIsOutdated,
   // contentNotTranslated,
-  lastDeployDate,
+  lastDeployLocaleTimestamp,
 }: Root) => {
   // const { locale, asPath } = useRouter()
 
@@ -68,7 +68,7 @@ export const RootLayout = ({
 
       {children}
 
-      <Footer lastDeployDate={lastDeployDate} />
+      <Footer lastDeployLocaleTimestamp={lastDeployLocaleTimestamp} />
       <FeedbackWidget />
     </Container>
   )

src/layouts/Static.tsx

@@ -33,7 +33,6 @@ import TranslationChartImage from "@/components/TranslationChartImage"
 import UpcomingEventsList from "@/components/UpcomingEventsList"
 
 import { getEditPath } from "@/lib/utils/editPath"
-import { getLocaleTimestamp } from "@/lib/utils/time"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
 import GuideHeroImage from "@/public/heroes/guides-hub-hero.jpg"
@@ -76,7 +75,7 @@ export const staticComponents = {
 type StaticLayoutProps = ChildOnlyProp &
   Pick<
     MdPageContent,
-    "slug" | "tocItems" | "lastUpdatedDate" | "contentNotTranslated"
+    "slug" | "tocItems" | "lastEditLocaleTimestamp" | "contentNotTranslated"
   > & {
     frontmatter: StaticFrontmatter
   }
@@ -85,7 +84,7 @@ export const StaticLayout = ({
   frontmatter,
   slug,
   tocItems,
-  lastUpdatedDate,
+  lastEditLocaleTimestamp,
   contentNotTranslated,
 }: StaticLayoutProps) => {
   const { locale, asPath } = useRouter()
@@ -115,15 +114,14 @@ export const StaticLayout = ({
           ) : (
             <>
               <Breadcrumbs slug={slug} mb="8" />
-              {lastUpdatedDate && (
-                <Text
-                  color="text200"
-                  dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
-                >
-                  <Translation id="page-last-updated" />:{" "}
-                  {getLocaleTimestamp(locale as Lang, lastUpdatedDate)}
-                </Text>
-              )}
+
+              <Text
+                color="text200"
+                dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
+              >
+                <Translation id="page-last-updated" />:{" "}
+                {lastEditLocaleTimestamp}
+              </Text>
             </>
           )}
 

src/layouts/Tutorial.tsx

@@ -155,7 +155,7 @@ export const tutorialsComponents = {
 }
 type TutorialLayoutProps = ChildOnlyProp &
   Pick<MdPageContent, "tocItems" | "contributors" | "contentNotTranslated"> &
-  Required<Pick<MdPageContent, "lastUpdatedDate">> & {
+  Required<Pick<MdPageContent, "lastEditLocaleTimestamp">> & {
     frontmatter: TutorialFrontmatter
     timeToRead: number
   }
@@ -165,7 +165,7 @@ export const TutorialLayout = ({
   frontmatter,
   tocItems,
   timeToRead,
-  lastUpdatedDate,
+  lastEditLocaleTimestamp,
   contributors,
   contentNotTranslated,
 }: TutorialLayoutProps) => {
@@ -196,7 +196,7 @@ export const TutorialLayout = ({
           {children}
           <FileContributors
             contributors={contributors}
-            lastEdit={lastUpdatedDate}
+            lastEditLocaleTimestamp={lastEditLocaleTimestamp}
           />
           <FeedbackCard />
         </ContentContainer>

src/layouts/Upgrade.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import {
   Box,
@@ -10,7 +9,7 @@ import {
   useToken,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp, Lang } from "@/lib/types"
+import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, UpgradeFrontmatter } from "@/lib/interfaces"
 
 import BeaconChainActions from "@/components/BeaconChainActions"
@@ -29,7 +28,6 @@ import MergeInfographic from "@/components/MergeInfographic"
 import UpgradeStatus from "@/components/UpgradeStatus"
 
 import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
-import { getLocaleTimestamp } from "@/lib/utils/time"
 
 const Page = (props: FlexProps) => <MdPage sx={{}} {...props} />
 
@@ -62,7 +60,7 @@ export const upgradeComponents = {
 type UpgradeLayoutProps = ChildOnlyProp &
   Pick<
     MdPageContent,
-    "slug" | "tocItems" | "lastUpdatedDate" | "contentNotTranslated"
+    "slug" | "tocItems" | "lastEditLocaleTimestamp" | "contentNotTranslated"
   > & {
     frontmatter: UpgradeFrontmatter
   }
@@ -71,11 +69,10 @@ export const UpgradeLayout = ({
   frontmatter,
   slug,
   tocItems,
-  lastUpdatedDate,
+  lastEditLocaleTimestamp,
   contentNotTranslated,
 }: UpgradeLayoutProps) => {
   const { t } = useTranslation("page-upgrades")
-  const { locale } = useRouter()
 
   const summaryPoints = getSummaryPoints(frontmatter)
 
@@ -120,12 +117,10 @@ export const UpgradeLayout = ({
                 ))}
               </List>
             </Box>
-            {lastUpdatedDate && (
-              <LastUpdated>
-                {t("common:page-last-updated")}:{" "}
-                {getLocaleTimestamp(locale as Lang, lastUpdatedDate)}
-              </LastUpdated>
-            )}
+
+            <LastUpdated>
+              {t("common:page-last-updated")}: {lastEditLocaleTimestamp}
+            </LastUpdated>
           </>
         }
         heroImg={frontmatter.image}

src/lib/interfaces.ts

@@ -105,7 +105,8 @@ export interface MdPageContent {
   content: string
   frontmatter: Frontmatter
   tocItems: ToCItem[]
-  lastUpdatedDate?: string
+  lastEditLocaleTimestamp: string
+  lastDeployLocaleTimestamp: string
   contentNotTranslated: boolean
   contributors: FileContributor[]
 }

src/lib/types.ts

@@ -44,11 +44,11 @@ export type Root = {
   children: ReactNode
   contentIsOutdated: boolean
   contentNotTranslated: boolean
-  lastDeployDate: string
+  lastDeployLocaleTimestamp: string
 }
 
 export type BasePageProps = SSRConfig &
-  Pick<Root, "contentNotTranslated" | "lastDeployDate">
+  Pick<Root, "contentNotTranslated" | "lastDeployLocaleTimestamp">
 
 export type Frontmatter = RoadmapFrontmatter &
   UpgradeFrontmatter &