implement MAIN_CONTENT_ID in layouts

uncomment PageMetadata on layouts

Author: wackerow

src/components/MdComponents.tsx

@@ -32,6 +32,8 @@ import OldHeading from "@/components/OldHeading"
 import { mdxTableComponents } from "@/components/Table"
 import YouTube from "@/components/YouTube"
 
+import { MAIN_CONTENT_ID } from "@/lib/constants"
+
 import GlossaryTooltip from "./Glossary/GlossaryTooltip"
 import { StandaloneQuizWidget } from "./Quiz/QuizWidget"
 import Card from "./Card"
@@ -187,6 +189,7 @@ export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
   return (
     <Box
       as="article"
+      id={MAIN_CONTENT_ID}
       flex={`1 1 ${lgBp}`}
       position="relative"
       px={8}

src/layouts/Docs.tsx

@@ -38,8 +38,7 @@ import {
   Heading4 as MdHeading4,
   Paragraph,
 } from "@/components/MdComponents"
-// TODO: IMPLEMENT PAGEMETADATA
-// import PageMetadata from "@/components/PageMetadata"
+import PageMetadata from "@/components/PageMetadata"
 import RollupProductDevDoc from "@/components/RollupProductDevDoc"
 import SideNav from "@/components/SideNav"
 import SideNavMobile from "@/components/SideNavMobile"
@@ -49,7 +48,11 @@ import Translation from "@/components/Translation"
 import YouTube from "@/components/YouTube"
 
 // Utils
-import { DEFAULT_LOCALE, EDIT_CONTENT_URL } from "@/lib/constants"
+import {
+  DEFAULT_LOCALE,
+  EDIT_CONTENT_URL,
+  MAIN_CONTENT_ID,
+} from "@/lib/constants"
 
 import { useClientSideGitHubLastEdit } from "@/hooks/useClientSideGitHubLastEdit"
 
@@ -138,7 +141,7 @@ const ListItem = (props: ListItemProps) => (
 )
 
 // Apply styles for classes within markdown here
-const Content = (props: ChildOnlyProp) => {
+const Content = (props: Pick<FlexProps, "children" | "id">) => {
   const mdBreakpoint = useToken("breakpoints", "md")
 
   return (
@@ -235,11 +238,10 @@ export const DocsLayout = ({
 
   return (
     <Page>
-      {/* // TODO: IMPLEMENT PAGEMETADATA */}
-      {/* <PageMetadata
+      <PageMetadata
         title={frontmatter.title}
         description={frontmatter.description}
-      /> */}
+      />
       <SideNavMobile path={relativePath} />
       {isPageIncomplete && (
         <BannerNotification shouldShow={isPageIncomplete}>
@@ -248,7 +250,7 @@ export const DocsLayout = ({
       )}
       <ContentContainer>
         <SideNav path={relativePath} />
-        <Content>
+        <Content id={MAIN_CONTENT_ID}>
           <H1 id="top">{frontmatter.title}</H1>
           {useGitHubContributors ? (
             <GitHubContributors

src/layouts/Roadmap.tsx

@@ -190,7 +190,7 @@ export const RoadmapLayout: React.FC<IProps> = ({
           maxDepth={frontmatter.sidebarDepth!}
           tocItems={tocItems}
         />
-        <ContentContainer id="content">
+        <ContentContainer>
           {children}
           <FeedbackCard />
         </ContentContainer>

src/layouts/Staking.tsx

@@ -287,7 +287,7 @@ export const StakingLayout: React.FC<IProps> = ({
           tocItems={tocItems}
           maxDepth={frontmatter.sidebarDepth!}
         />
-        <ContentContainer id="content">
+        <ContentContainer>
           {children}
           <StakingCommunityCallout my={16} />
           <FeedbackCard />

src/layouts/Static.tsx

@@ -30,7 +30,7 @@ import UpcomingEventsList from "@/components/UpcomingEventsList"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
-import { CONTENT_DIR } from "@/lib/constants"
+import { CONTENT_DIR, MAIN_CONTENT_ID } from "@/lib/constants"
 
 const Heading1 = (props: HeadingProps) => (
   <MdHeading1 fontSize={{ base: "2.5rem", md: "5xl" }} {...props} />
@@ -103,6 +103,7 @@ export const StaticLayout: React.FC<IProps> = ({
       >
         <Box
           as="article"
+          id={MAIN_CONTENT_ID}
           maxW="container.md"
           w="full"
           sx={{
@@ -121,9 +122,7 @@ export const StaticLayout: React.FC<IProps> = ({
           }}
         >
           <Breadcrumbs slug={slug} mb="8" />
-          <Text
-            color="text200"
-          >
+          <Text color="text200">
             <Translation id="page-last-updated" />:{" "}
             {getLocaleTimestamp(locale as Lang, lastUpdatedDate!)}
           </Text>

src/layouts/Tutorial.tsx

@@ -16,10 +16,7 @@ import {
 import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
 import type { MdPageContent, TutorialFrontmatter } from "@/lib/interfaces"
 
-// TODO: Import once intl implements?
-// import PageMetadata from "@/components/PageMetadata"
 import PostMergeBanner from "@/components/Banners/PostMergeBanner"
-// Components
 import { ButtonLink } from "@/components/Buttons"
 import CallToContribute from "@/components/CallToContribute"
 import Card from "@/components/Card"
@@ -38,12 +35,17 @@ import {
   Heading4 as MdHeading4,
 } from "@/components/MdComponents"
 import MdLink from "@/components/MdLink"
+import PageMetadata from "@/components/PageMetadata"
 import { mdxTableComponents } from "@/components/Table"
 import TableOfContents from "@/components/TableOfContents"
 import TutorialMetadata from "@/components/TutorialMetadata"
 import YouTube from "@/components/YouTube"
 
-import { DEFAULT_LOCALE, EDIT_CONTENT_URL } from "@/lib/constants"
+import {
+  DEFAULT_LOCALE,
+  EDIT_CONTENT_URL,
+  MAIN_CONTENT_ID,
+} from "@/lib/constants"
 
 import { useClientSideGitHubLastEdit } from "@/hooks/useClientSideGitHubLastEdit"
 
@@ -211,13 +213,12 @@ export const TutorialLayout = ({
         p={{ base: "0", lg: "0 2rem 0 0" }}
         background={{ base: "background.base", lg: "ednBackground" }}
       >
-        {/* TODO: Implement PageMetaData after intl */}
-        {/* <PageMetadata
+        <PageMetadata
           title={frontmatter.title}
           description={frontmatter.description}
           canonicalUrl={frontmatter.sourceUrl}
-        /> */}
-        <ContentContainer>
+        />
+        <ContentContainer id={MAIN_CONTENT_ID}>
           <Heading1>{frontmatter.title}</Heading1>
           <TutorialMetadata frontmatter={frontmatter} timeToRead={timeToRead} />
           <TableOfContents

src/layouts/Upgrade.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "next-i18next"
 import { MdExpandMore } from "react-icons/md"
 import {
   Box,
-  Center,
   Flex,
   type FlexProps,
   Icon,
@@ -14,7 +13,7 @@ import {
   useToken,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp, Lang /* Context */ } from "@/lib/types"
+import type { ChildOnlyProp, Lang } from "@/lib/types"
 import type { MdPageContent, UpgradeFrontmatter } from "@/lib/interfaces"
 
 import BeaconChainActions from "@/components/BeaconChainActions"
@@ -38,6 +37,8 @@ import UpgradeStatus from "@/components/UpgradeStatus"
 import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
+import { MAIN_CONTENT_ID } from "@/lib/constants"
+
 const Page = (props: FlexProps) => <MdPage sx={{}} {...props} />
 
 const Title = (props: ChildOnlyProp) => (
@@ -205,7 +206,7 @@ export const UpgradeLayout: React.FC<IProps> = ({
         )}
       </HeroContainer>
       <Show above={lgBreakpoint}>
-        <MoreContent to="#content">
+        <MoreContent to={"#" + MAIN_CONTENT_ID}>
           <Icon as={MdExpandMore} fontSize="2xl" color="secondary" />
         </MoreContent>
       </Show>
@@ -217,7 +218,7 @@ export const UpgradeLayout: React.FC<IProps> = ({
           tocItems={tocItems}
           maxDepth={frontmatter.sidebarDepth!}
         />
-        <ContentContainer id="content">
+        <ContentContainer>
           {children}
           <FeedbackCard />
         </ContentContainer>

src/layouts/UseCases.tsx

@@ -33,6 +33,8 @@ import TableOfContents from "@/components/TableOfContents"
 
 import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
 
+import { MAIN_CONTENT_ID } from "@/lib/constants"
+
 const HeroContainer = (props: ChildOnlyProp) => (
   <Flex
     bg="cardGradient"
@@ -235,7 +237,7 @@ export const UseCasesLayout: React.FC<IProps> = ({
       <Show above={lgBp}>
         <Flex
           as={BaseLink}
-          to="#content"
+          to={"#" + MAIN_CONTENT_ID}
           bg="ednBackground"
           justifyContent="center"
           p={4}
@@ -255,7 +257,7 @@ export const UseCasesLayout: React.FC<IProps> = ({
           tocItems={tocItems}
           maxDepth={frontmatter.sidebarDepth!}
         />
-        <ContentContainer id="content">
+        <ContentContainer>
           {children}
           <FeedbackCard />
         </ContentContainer>

src/lib/constants.ts

@@ -19,6 +19,7 @@ export const LOCALES_CODES = BUILD_LOCALES
 export const SITE_URL = "https://ethereum.org"
 export const DISCORD_PATH = "/discord/"
 export const EDIT_CONTENT_URL = `https://github.com/ethereum/ethereum-org-website/tree/dev/`
+export const MAIN_CONTENT_ID = "main-content"
 
 // Config
 export const CONTENT_IMAGES_MAX_WIDTH = 800