Merge pull request #156 from ethereum/layout-algolia

Fix Algolia crawler DOM dependencies

Author: pettinarip

src/components/MainArticle.tsx

@@ -0,0 +1,9 @@
+import { Box, type BoxProps } from "@chakra-ui/react"
+
+import { MAIN_CONTENT_ID } from "@/lib/constants"
+
+const MainArticle = (props: BoxProps) => (
+  <Box as="article" id={MAIN_CONTENT_ID} tabIndex={-1} {...props} />
+)
+
+export default MainArticle

src/components/MdComponents.tsx

@@ -39,6 +39,7 @@ import DocLink from "./DocLink"
 import Emoji from "./Emoji"
 import ExpandableCard from "./ExpandableCard"
 import InfoBanner from "./InfoBanner"
+import MainArticle from "./MainArticle"
 
 /**
  * Base HTML elements
@@ -185,7 +186,7 @@ export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
 
   return (
     <Box
-      as="article"
+      as={MainArticle}
       flex={`1 1 ${lgBp}`}
       position="relative"
       px={8}

src/layouts/Docs.tsx

@@ -31,6 +31,7 @@ import GitHubContributors from "@/components/GitHubContributors"
 import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import InfoBanner from "@/components/InfoBanner"
 import Link from "@/components/Link"
+import MainArticle from "@/components/MainArticle"
 import {
   Heading1 as MdHeading1,
   Heading2 as MdHeading2,
@@ -86,6 +87,7 @@ const baseHeadingStyle: HeadingProps = {
   fontFamily: "mono",
   textTransform: "uppercase",
   fontWeight: "bold",
+  scrollMarginTop: 40,
 }
 
 const H1 = (props: HeadingProps) => (
@@ -141,7 +143,7 @@ const Content = (props: ChildOnlyProp) => {
 
   return (
     <Box
-      as="article"
+      as={MainArticle}
       flex={`1 1 ${mdBreakpoint}`}
       maxW={{ base: "full", lg: mdBreakpoint }}
       pt={{ base: 32, md: 12 }}

src/layouts/Roadmap.tsx

@@ -195,7 +195,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

@@ -14,6 +14,7 @@ import { HubHero } from "@/components/Hero"
 import NetworkUpgradeSummary from "@/components/History/NetworkUpgradeSummary"
 import Link from "@/components/Link"
 import Logo from "@/components/Logo"
+import MainArticle from "@/components/MainArticle"
 import MatomoOptOut from "@/components/MatomoOptOut"
 import {
   Heading1 as MdHeading1,
@@ -127,7 +128,7 @@ export const StaticLayout: React.FC<IProps> = ({
           )}
 
           <Box
-            as="article"
+            as={MainArticle}
             maxW="container.md"
             w="full"
             sx={{

src/layouts/Tutorial.tsx

@@ -2,7 +2,6 @@ import { useRouter } from "next/router"
 import {
   Badge,
   Box,
-  type BoxProps,
   chakra,
   Divider,
   Flex,
@@ -17,7 +16,6 @@ import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
 import type { MdPageContent, TutorialFrontmatter } from "@/lib/interfaces"
 
 import PostMergeBanner from "@/components/Banners/PostMergeBanner"
-// Components
 import { ButtonLink } from "@/components/Buttons"
 import CallToContribute from "@/components/CallToContribute"
 import Card from "@/components/Card"
@@ -29,13 +27,15 @@ import FeedbackCard from "@/components/FeedbackCard"
 import GitHubContributors from "@/components/GitHubContributors"
 import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import InfoBanner from "@/components/InfoBanner"
+import MainArticle from "@/components/MainArticle"
 import {
   Heading1 as MdHeading1,
   Heading2 as MdHeading2,
   Heading3 as MdHeading3,
   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"
@@ -45,13 +45,13 @@ import { DEFAULT_LOCALE, EDIT_CONTENT_URL } from "@/lib/constants"
 
 import { useClientSideGitHubLastEdit } from "@/hooks/useClientSideGitHubLastEdit"
 
-const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
+const ContentContainer = (props: ChildOnlyProp) => {
   const boxShadow = useToken("colors", "tableBoxShadow")
   const borderColor = useToken("colors", "primary.base")
 
   return (
     <Box
-      as="article"
+      as={MainArticle}
       maxW="1000px"
       minW={0}
       background="background.base"

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

@@ -34,7 +34,7 @@ import TableOfContents from "@/components/TableOfContents"
 
 import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
 
-import { EDIT_CONTENT_URL } from "@/lib/constants"
+import { EDIT_CONTENT_URL, MAIN_CONTENT_ID } from "@/lib/constants"
 
 const HeroContainer = (props: ChildOnlyProp) => (
   <Flex
@@ -236,7 +236,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}
@@ -256,7 +256,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"
 export const WEBSITE_EMAIL = "website@ethereum.org"
 
 // Config