Merge pull request #9631 from soheil555/feat/static-template-to-chakra

migrate `static` template to Chakra

Author: pettinarip

src/templates/static.tsx

@@ -1,10 +1,18 @@
 import React from "react"
+import {
+  Badge,
+  Box,
+  Flex,
+  Text,
+  Divider as ChakraDivider,
+  Heading,
+  Icon,
+  chakra,
+} from "@chakra-ui/react"
 import { graphql, PageProps } from "gatsby"
 import { useI18next } from "gatsby-plugin-react-i18next"
 import { MDXProvider } from "@mdx-js/react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
-import styled from "@emotion/styled"
-import { Badge } from "@chakra-ui/react"
 
 import ButtonLink from "../components/ButtonLink"
 import Breadcrumbs from "../components/Breadcrumbs"
@@ -20,101 +28,141 @@ import MeetupList from "../components/MeetupList"
 import PageMetadata from "../components/PageMetadata"
 import RandomAppList from "../components/RandomAppList"
 import ExpandableCard from "../components/ExpandableCard"
-import TableOfContents, {
-  Item as ItemTableOfContents,
-} from "../components/TableOfContents"
+import TableOfContents from "../components/TableOfContents"
 import Translation from "../components/Translation"
 import SectionNav from "../components/SectionNav"
 import DocLink from "../components/DocLink"
 import GhostCard from "../components/GhostCard"
 import MatomoOptOut from "../components/MatomoOptOut"
 import UpgradeStatus from "../components/UpgradeStatus"
-import {
-  Divider,
-  Paragraph,
-  Header1,
-  Header2,
-  Header3,
-  Header4,
-  ListItem,
-  CardContainer,
-} from "../components/SharedStyledComponents"
-import Emoji from "../components/OldEmoji"
+import Emoji from "../components/Emoji"
 import UpcomingEventsList from "../components/UpcomingEventsList"
-import Icon from "../components/Icon"
 import SocialListItem from "../components/SocialListItem"
 import YouTube from "../components/YouTube"
 import TranslationChartImage from "../components/TranslationChartImage"
 import PostMergeBanner from "../components/Banners/PostMergeBanner"
 import EnergyConsumptionChart from "../components/EnergyConsumptionChart"
 import QuizWidget from "../components/Quiz/QuizWidget"
+import { Item as ItemTableOfContents } from "../components/TableOfContents/utils"
 
 import { getLocaleTimestamp } from "../utils/time"
 import { isLangRightToLeft, TranslationKey } from "../utils/translations"
 import { Lang } from "../utils/languages"
-import { Context } from "../types"
 
-const Container = styled.div`
-  width: 100%;
-`
+import { ChildOnlyProp, Context } from "../types"
 
-const Page = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin: 0 auto 4rem;
-  padding: 2rem;
+const Pre = (props: ChildOnlyProp) => (
+  <Text
+    as="pre"
+    maxW="full"
+    overflowX="scroll"
+    bgColor="preBackground"
+    borderRadius="base"
+    p={4}
+    border="1px solid"
+    borderColor="preBorder"
+    whiteSpace="pre-wrap"
+    {...props}
+  />
+)
 
-  @media (min-width: ${(props) => props.theme.breakpoints.l}) {
-    padding-top: 4rem;
-  }
-`
+const HR = () => (
+  <ChakraDivider
+    mt={8}
+    mb={4}
+    display="inline-block"
+    position="inherit"
+    bg="border"
+  />
+)
 
-// Apply styles for classes within markdown here
-const ContentContainer = styled.article`
-  max-width: ${(props) => props.theme.breakpoints.m};
-  width: 100%;
+const Divider = () => <Box my={16} w="10%" h={1} bgColor="homeDivider" />
 
-  .featured {
-    padding-left: 1rem;
-    margin-left: -1rem;
-    border-left: 1px dotted ${(props) => props.theme.colors.primary};
-  }
+const Header1 = (props: ChildOnlyProp) => (
+  <Heading
+    as="h1"
+    fontSize={{ base: "2.5rem", md: "5xl" }}
+    lineHeight={1.4}
+    fontWeight="bold"
+    _before={{
+      content: `""`,
+      display: "block",
+      h: "140px",
+      mt: "-140px",
+      visibility: "hidden",
+    }}
+    sx={{
+      a: {
+        display: "none",
+      },
+    }}
+    {...props}
+  />
+)
 
-  .citation {
-    p {
-      color: ${(props) => props.theme.colors.text200};
-    }
-  }
-`
+const Header2 = (props: ChildOnlyProp) => (
+  <Heading
+    fontSize={{ base: "2xl", md: "2rem" }}
+    lineHeight={1.4}
+    fontWeight="bold"
+    sx={{ position: "inherit !important" }}
+    _before={{
+      content: `""`,
+      display: "block",
+      h: "120px",
+      mt: "-120px",
+      visibility: "hidden",
+    }}
+    {...props}
+  />
+)
 
-const LastUpdated = styled.p`
-  color: ${(props) => props.theme.colors.text200};
-`
+const Header3 = (props: ChildOnlyProp) => (
+  <Heading
+    as="h3"
+    fontSize={{ base: "xl", md: "2xl" }}
+    lineHeight={1.4}
+    sx={{ position: "inherit !important" }}
+    _before={{
+      content: `""`,
+      display: "block",
+      h: "120px",
+      mt: "-120px",
+      visibility: "hidden",
+    }}
+    {...props}
+  />
+)
 
-const Pre = styled.pre`
-  max-width: 100%;
-  overflow-x: scroll;
-  background-color: ${(props) => props.theme.colors.preBackground};
-  border-radius: 0.25rem;
-  padding: 1rem;
-  border: 1px solid ${(props) => props.theme.colors.preBorder};
-  white-space: pre-wrap;
-`
+const Header4 = (props: ChildOnlyProp) => (
+  <Heading
+    as="h4"
+    fontSize={{ base: "md", md: "xl" }}
+    lineHeight={1.4}
+    fontWeight="semibold"
+    sx={{ position: "unset !important" }}
+    _before={{
+      content: `""`,
+      display: "block",
+      h: "120px",
+      mt: "-120px",
+      visibility: "hidden",
+    }}
+    {...props}
+  />
+)
 
-const MobileTableOfContents = styled(TableOfContents)`
-  position: relative;
-  z-index: 2;
-`
+const Paragraph = (props: ChildOnlyProp) => (
+  <Text fontSize="md" mt={8} mb={4} color="text300" {...props} />
+)
 
-const HR = styled.hr`
-  width: 100%;
-  margin: 2rem 0rem;
-  margin-bottom: 1rem;
-  display: inline-block;
-  position: inherit;
-  background: ${(props) => props.theme.colors.border};
-`
+const ListItem = (props: ChildOnlyProp) => (
+  <chakra.li color="text300" {...props} />
+)
+
+const CardContainer = (props: ChildOnlyProp) => (
+  <Flex wrap="wrap" mx={-4} {...props} />
+)
 
 // Note: you must pass components to MDXProvider in order to render them in markdown files
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
@@ -190,26 +238,55 @@ const StaticPage = ({
   const absoluteEditPath = `${editContentUrl}${relativePath}`
 
   return (
-    <Container>
+    <Box w="full">
       {showPostMergeBanner && (
         <PostMergeBanner
           translationString={postMergeBannerTranslationString!}
         />
       )}
-      <Page dir={isRightToLeft ? "rtl" : "ltr"}>
+      <Flex
+        justifyContent="space-between"
+        w="full"
+        mx="auto"
+        mb={16}
+        p={8}
+        pt={{ base: 8, lg: 16 }}
+        dir={isRightToLeft ? "rtl" : "ltr"}
+      >
         <PageMetadata
           title={mdx.frontmatter.title}
           description={mdx.frontmatter.description}
         />
-        <ContentContainer>
+        <Box
+          as="article"
+          maxW="container.md"
+          w="full"
+          sx={{
+            ".featured": {
+              pl: 4,
+              ml: -4,
+              borderLeft: "1px dotted",
+              borderLeftColor: "primary",
+            },
+
+            ".citation": {
+              p: {
+                color: "text200",
+              },
+            },
+          }}
+        >
           <Breadcrumbs slug={slug} />
-          <LastUpdated
+          <Text
+            color="text200"
             dir={isLangRightToLeft(language as Lang) ? "rtl" : "ltr"}
           >
             <Translation id="page-last-updated" />:{" "}
             {getLocaleTimestamp(language as Lang, lastUpdatedDate)}
-          </LastUpdated>
-          <MobileTableOfContents
+          </Text>
+          <TableOfContents
+            position="relative"
+            zIndex={2}
             editPath={absoluteEditPath}
             items={tocItems}
             isMobile={true}
@@ -220,7 +297,7 @@ const StaticPage = ({
             <MDXRenderer>{mdx.body}</MDXRenderer>
           </MDXProvider>
           <FeedbackCard isArticle />
-        </ContentContainer>
+        </Box>
         {tocItems && (
           <TableOfContents
             editPath={absoluteEditPath}
@@ -229,8 +306,8 @@ const StaticPage = ({
             hideEditButton={!!mdx.frontmatter.hideEditButton}
           />
         )}
-      </Page>
-    </Container>
+      </Flex>
+    </Box>
   )
 }