create and implement MainArticle component

contains default props including id, tabIndex and as="article"; to be used once per page for the main article which will bear the #main-content ID

Author: wackerow

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

@@ -32,15 +32,14 @@ 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"
 import DocLink from "./DocLink"
 import Emoji from "./Emoji"
 import ExpandableCard from "./ExpandableCard"
 import InfoBanner from "./InfoBanner"
+import MainArticle from "./MainArticle"
 
 /**
  * Base HTML elements
@@ -188,8 +187,7 @@ export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
 
   return (
     <Box
-      as="article"
-      id={MAIN_CONTENT_ID}
+      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,
@@ -48,11 +49,7 @@ import Translation from "@/components/Translation"
 import YouTube from "@/components/YouTube"
 
 // Utils
-import {
-  DEFAULT_LOCALE,
-  EDIT_CONTENT_URL,
-  MAIN_CONTENT_ID,
-} from "@/lib/constants"
+import { DEFAULT_LOCALE, EDIT_CONTENT_URL } from "@/lib/constants"
 
 import { useClientSideGitHubLastEdit } from "@/hooks/useClientSideGitHubLastEdit"
 
@@ -91,6 +88,7 @@ const baseHeadingStyle: HeadingProps = {
   fontFamily: "mono",
   textTransform: "uppercase",
   fontWeight: "bold",
+  scrollMarginTop: 40,
 }
 
 const H1 = (props: HeadingProps) => (
@@ -141,12 +139,12 @@ const ListItem = (props: ListItemProps) => (
 )
 
 // Apply styles for classes within markdown here
-const Content = (props: Pick<FlexProps, "children" | "id">) => {
+const Content = (props: ChildOnlyProp) => {
   const mdBreakpoint = useToken("breakpoints", "md")
 
   return (
     <Box
-      as="article"
+      as={MainArticle}
       flex={`1 1 ${mdBreakpoint}`}
       maxW={{ base: "full", lg: mdBreakpoint }}
       pt={{ base: 32, md: 12 }}
@@ -250,7 +248,7 @@ export const DocsLayout = ({
       )}
       <ContentContainer>
         <SideNav path={relativePath} />
-        <Content id={MAIN_CONTENT_ID}>
+        <Content>
           <H1 id="top">{frontmatter.title}</H1>
           {useGitHubContributors ? (
             <GitHubContributors

src/layouts/Static.tsx

@@ -13,6 +13,7 @@ import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
 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,
@@ -30,7 +31,7 @@ import UpcomingEventsList from "@/components/UpcomingEventsList"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
-import { CONTENT_DIR, MAIN_CONTENT_ID } from "@/lib/constants"
+import { CONTENT_DIR } from "@/lib/constants"
 
 const Heading1 = (props: HeadingProps) => (
   <MdHeading1 fontSize={{ base: "2.5rem", md: "5xl" }} {...props} />
@@ -102,8 +103,7 @@ export const StaticLayout: React.FC<IProps> = ({
         pt={{ base: 8, lg: 16 }}
       >
         <Box
-          as="article"
-          id={MAIN_CONTENT_ID}
+          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,
@@ -28,6 +27,7 @@ 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,
@@ -41,21 +41,17 @@ import TableOfContents from "@/components/TableOfContents"
 import TutorialMetadata from "@/components/TutorialMetadata"
 import YouTube from "@/components/YouTube"
 
-import {
-  DEFAULT_LOCALE,
-  EDIT_CONTENT_URL,
-  MAIN_CONTENT_ID,
-} from "@/lib/constants"
+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"
@@ -218,7 +214,7 @@ export const TutorialLayout = ({
           description={frontmatter.description}
           canonicalUrl={frontmatter.sourceUrl}
         />
-        <ContentContainer id={MAIN_CONTENT_ID}>
+        <ContentContainer>
           <Heading1>{frontmatter.title}</Heading1>
           <TutorialMetadata frontmatter={frontmatter} timeToRead={timeToRead} />
           <TableOfContents

src/lib/utils/url.ts

@@ -1,4 +1,4 @@
-import { DISCORD_PATH } from "@/lib/constants"
+import { DISCORD_PATH, MAIN_CONTENT_ID } from "@/lib/constants"
 
 export const isDiscordInvite = (href: string): boolean =>
   href.includes(DISCORD_PATH) && !href.includes("http")
@@ -17,8 +17,7 @@ export const isPdf = (href: string): boolean => href.endsWith(".pdf")
 export const sanitizeHitUrl = (url: string): string =>
   url
     .replace(/^https?:\/\/[^\/]+(?=\/)/, "")
-    .replace("#gatsby-focus-wrapper", "")
-    .replace("#main-content", "")
+    .replace(MAIN_CONTENT_ID, "")
     .replace("#content", "")
     .replace("#top", "")