Merge pull request #13843 from ethereum/layouts-unification

Md layouts tw migration & unification

Author: wackerow

public/content/roadmap/index.md

@@ -7,9 +7,9 @@ image: /images/heroes/roadmap-hub-hero.jpg
 alt: "Ethereum roadmap"
 summaryPoints:
 buttons:
-  - label: Further upgrades
+  - content: Further upgrades
     toId: what-changes-are-coming
-  - label: Past upgrades
+  - content: Past upgrades
     href: /history/
     variant: outline
 ---

src/components/Hero/CallToAction.tsx

@@ -1,6 +1,10 @@
 import type { ReactNode } from "react"
 
-import { Button, type ButtonProps } from "@/components/ui/buttons/Button"
+import {
+  Button,
+  ButtonLink,
+  type ButtonProps,
+} from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
 import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
@@ -10,25 +14,38 @@ export type CallToActionProps = Omit<
   "children" | "content" | "variant" | "isSecondary"
 > & {
   content: ReactNode
-  matomo: MatomoEventOptions
+  matomo?: MatomoEventOptions
   index: number
+  href?: string
 }
 
 export const CallToAction = ({
   content,
   matomo,
   index,
   className,
+  href,
   ...props
 }: CallToActionProps) => {
-  const handleClick = () => trackCustomEvent(matomo)
+  const handleClick = () => matomo && trackCustomEvent(matomo)
 
   const buttonProps: ButtonProps = {
     variant: index === 0 ? "solid" : "outline",
     isSecondary: index !== 0,
     className: cn("flex-[1] md:flex-[initial]", className),
   }
 
+  if (href) {
+    return (
+      <ButtonLink
+        href={href}
+        buttonProps={{ onClick: handleClick, ...buttonProps, ...props }}
+      >
+        {content}
+      </ButtonLink>
+    )
+  }
+
   return (
     <Button onClick={handleClick} {...buttonProps} {...props}>
       {content}

src/components/Hero/ContentHero/index.tsx

@@ -29,6 +29,7 @@ const ContentHero = (props: ContentHeroProps) => {
       >
         <Box
           order={{ lg: 1 }}
+          py={{ base: 0, lg: 12 }}
           height={{
             base: "300px",
             md: "400px",
@@ -47,6 +48,7 @@ const ContentHero = (props: ContentHeroProps) => {
             boxSize="full"
             style={{ objectFit: "contain" }}
             flex={{ base: "1 1 100%", md: "none" }}
+            maxHeight={451}
           />
         </Box>
         <Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">

src/components/Image.tsx

@@ -33,10 +33,16 @@ const imageProps: (keyof NextImageProps)[] = [
   "useMap",
 ]
 
+const isStaticImageData = (src: ImageProps["src"]): src is StaticImageData => {
+  return typeof src === "object" && "blurDataURL" in src
+}
+
 const DefaultNextImage = (props: ImageProps) => {
-  const hasBlurData = !!(
-    (props.src as StaticImageData).blurDataURL || props.blurDataURL
-  )
+  if (isStaticImageData(props.src)) {
+    return <NextImage placeholder="blur" {...props} />
+  }
+
+  const hasBlurData = !!props.blurDataURL
   return <NextImage placeholder={hasBlurData ? "blur" : "empty"} {...props} />
 }
 

src/components/LeftNavBar/index.tsx

@@ -1,68 +1,47 @@
-import { calc, Flex, type FlexProps, type HeadingProps } from "@chakra-ui/react"
-
 import type { ToCItem } from "@/lib/types"
 
 import ButtonDropdown, {
-  ButtonDropdownProps,
   List as ButtonDropdownList,
 } from "@/components/ButtonDropdown"
-import OldHeading from "@/components/OldHeading"
 import Translation from "@/components/Translation"
 import UpgradeTableOfContents from "@/components/UpgradeTableOfContents"
 
-export const H2 = (props: HeadingProps) => (
-  <OldHeading
-    fontWeight={700}
-    lineHeight={1.4}
-    size="lg"
-    textAlign="start"
-    mt={0}
-    {...props}
-  />
-)
-
-export const StyledButtonDropdown = ({
-  list,
-  ...rest
-}: FlexProps & Pick<ButtonDropdownProps, "list">) => (
-  <Flex align="flex-end" justify="flex-end" mb={8} {...rest} pos="relative">
-    <ButtonDropdown list={list} w="full" minW="240px" />
-  </Flex>
-)
+import { cn } from "@/lib/utils/cn"
 
-type LeftNavBarProps = FlexProps & {
+export type LeftNavBarProps = {
   dropdownLinks?: ButtonDropdownList
   maxDepth?: number
   tocItems: ToCItem[]
+  className?: string
 }
 
 const LeftNavBar = ({
   dropdownLinks,
   maxDepth = 1,
   tocItems,
+  className,
   ...props
 }: LeftNavBarProps) => {
   return (
-    <Flex
-      as="aside"
-      flexDirection="column"
-      flex="0 1 400px"
-      ms={8}
-      me={16}
-      position="sticky"
-      top="6.25rem"
-      height={calc("100vh").subtract("80px").toString()}
-      zIndex={99}
+    <aside
+      className={cn(
+        "z-99 sticky top-[6.25rem] me-16 ms-8 flex h-[calc(100vh-80px)] basis-[400px] flex-col",
+        className
+      )}
       {...props}
     >
-      {dropdownLinks && <StyledButtonDropdown list={dropdownLinks} />}
-      <H2>
+      {dropdownLinks && (
+        <div className="relative mb-8 flex items-end justify-end">
+          <ButtonDropdown list={dropdownLinks} w="full" minW="240px" />
+        </div>
+      )}
+      <h2 className="mb-8 text-3xl leading-xs">
         <Translation id="on-this-page" />
-      </H2>
+      </h2>
       {tocItems && (
         <UpgradeTableOfContents items={tocItems} maxDepth={maxDepth} />
       )}
-    </Flex>
+    </aside>
   )
 }
 

src/layouts/ContentLayout.tsx

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from "react"
+
+import FeedbackCard from "@/components/FeedbackCard"
+import LeftNavBar, { LeftNavBarProps } from "@/components/LeftNavBar"
+import {
+  ContentContainer,
+  MobileButton,
+  MobileButtonDropdown,
+  Page,
+} from "@/components/MdComponents"
+
+type ContentLayoutProps = HTMLAttributes<HTMLDivElement> &
+  Pick<LeftNavBarProps, "dropdownLinks" | "tocItems" | "maxDepth"> & {
+    children: React.ReactNode
+    heroSection: React.ReactNode
+  }
+
+export const ContentLayout = ({
+  children,
+  dropdownLinks,
+  tocItems,
+  maxDepth,
+  heroSection,
+  ...props
+}: ContentLayoutProps) => {
+  return (
+    <div {...props}>
+      {heroSection}
+
+      <Page>
+        <LeftNavBar
+          className="max-lg:hidden"
+          dropdownLinks={dropdownLinks}
+          tocItems={tocItems}
+          maxDepth={maxDepth}
+        />
+
+        <ContentContainer>
+          {children}
+          <FeedbackCard />
+        </ContentContainer>
+
+        {dropdownLinks && (
+          <MobileButton>
+            <MobileButtonDropdown list={dropdownLinks} />
+          </MobileButton>
+        )}
+      </Page>
+    </div>
+  )
+}