Merge pull request #13947 from ethereum/shadcn-docs

Shadcn migration - docs layout

Author: wackerow

src/layouts/Docs.tsx

@@ -1,16 +1,6 @@
 import { useRouter } from "next/router"
 import type { HTMLAttributes } from "react"
-import {
-  Badge,
-  Box,
-  type BoxProps,
-  Flex,
-  type FlexProps,
-  type ListProps,
-  OrderedList as ChakraOrderedList,
-  UnorderedList as ChakraUnorderedList,
-  useToken,
-} from "@chakra-ui/react"
+import { Badge } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 import type { DocsFrontmatter, MdPageContent } from "@/lib/interfaces"
@@ -27,51 +17,26 @@ import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
 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,
   Heading3 as MdHeading3,
   Heading4 as MdHeading4,
-  Paragraph,
 } from "@/components/MdComponents"
 import RollupProductDevDoc from "@/components/RollupProductDevDoc"
 import SideNav from "@/components/SideNav"
 import SideNavMobile from "@/components/SideNavMobile"
 import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
 import { Divider } from "@/components/ui/divider"
+import InlineLink from "@/components/ui/Link"
 import { mdxTableComponents } from "@/components/ui/Table"
 import YouTube from "@/components/YouTube"
 
 import { cn } from "@/lib/utils/cn"
 import { getEditPath } from "@/lib/utils/editPath"
 
-const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
-  <Flex
-    direction="column"
-    w="full"
-    borderBottom="1px"
-    borderColor="border"
-    {...props}
-  />
-)
-
-type ContentContainerProps = Pick<BoxProps, "children" | "dir">
-
-const ContentContainer = (props: ContentContainerProps) => (
-  <Flex
-    justify={"space-between"}
-    w="full"
-    py={0}
-    ps={0}
-    pe={{ base: 0, lg: 8 }}
-    backgroundColor="ednBackground"
-    {...props}
-  />
-)
-
 const baseHeadingClasses = "font-mono uppercase font-bold scroll-mt-40"
 
 const H1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
@@ -101,61 +66,19 @@ const H4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading4 className={baseSubHeadingClasses} {...props} />
 )
 
-const UnorderedList = (props: ListProps) => (
-  <ChakraUnorderedList ms="1.45rem" {...props} />
-)
-const OrderedList = (props: ListProps) => (
-  <ChakraOrderedList ms="1.45rem" {...props} />
-)
-
-// Apply styles for classes within markdown here
-const Content = (props: ChildOnlyProp) => {
-  const mdBreakpoint = useToken("breakpoints", "md")
-
-  return (
-    <Box
-      as={MainArticle}
-      flex={`1 1 ${mdBreakpoint}`}
-      w={{ base: "full", lg: "0" }}
-      pt={{ base: 8, md: 12 }}
-      pb={{ base: 8, md: 16 }}
-      px={{ base: 8, md: 16 }}
-      m="0 auto"
-      sx={{
-        ".citation": {
-          p: {
-            color: "text200",
-          },
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
 const BackToTop = (props: ChildOnlyProp) => (
-  <Flex
-    display={{ lg: "none" }}
-    mt={12}
-    pt={8}
-    borderTop="1px"
-    borderColor="border"
-    {...props}
-  >
-    <Link href="#top">
+  <div className="display-none mt-12 flex border-t pt-8" {...props}>
+    <InlineLink href="#top">
       <Translation id="back-to-top" /> ↑
-    </Link>
-  </Flex>
+    </InlineLink>
+  </div>
 )
 
 export const docsComponents = {
   h1: H1,
   h2: H2,
   h3: H3,
   h4: H4,
-  p: Paragraph,
-  ul: UnorderedList,
-  ol: OrderedList,
   pre: Codeblock,
   ...mdxTableComponents,
   Badge,
@@ -197,16 +120,19 @@ export const DocsLayout = ({
   const absoluteEditPath = getEditPath(relativePath)
 
   return (
-    <Page>
+    <div className="flex w-full flex-col border-b">
       <SideNavMobile path={relativePath} />
       {isPageIncomplete && (
         <BannerNotification shouldShow={isPageIncomplete}>
           <Translation id="page-developers-docs:banner-page-incomplete" />
         </BannerNotification>
       )}
-      <ContentContainer dir={contentNotTranslated ? "ltr" : "unset"}>
+      <div
+        className="flex justify-between bg-background-highlight lg:pe-8"
+        dir={contentNotTranslated ? "ltr" : "unset"}
+      >
         <SideNav path={relativePath} />
-        <Content>
+        <MainArticle className="min-w-0 flex-1 px-8 pb-8 pt-8 md:px-16 md:pb-16 md:pt-12">
           <H1 id="top">{frontmatter.title}</H1>
           <FileContributors
             contributors={contributors}
@@ -224,7 +150,7 @@ export const DocsLayout = ({
           <BackToTop />
           <FeedbackCard isArticle />
           <DocsNav contentNotTranslated={contentNotTranslated} />
-        </Content>
+        </MainArticle>
         {tocItems && (
           <TableOfContents
             editPath={absoluteEditPath}
@@ -234,7 +160,7 @@ export const DocsLayout = ({
             pt={isPageIncomplete ? "5rem" : "3rem"}
           />
         )}
-      </ContentContainer>
-    </Page>
+      </div>
+    </div>
   )
 }