Skip to content

Commit 5c3bb2c

Browse files
amit-kshamit-ksh
committed
refactor: template/docs.tsx to chakra
1 parent 3652bbc commit 5c3bb2c

File tree

1 file changed

+144
-98
lines changed

1 file changed

+144
-98
lines changed

‎src/templates/docs.tsx

Lines changed: 144 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
1-
import React, { useContext } from "react"
1+
import React, { ComponentPropsWithoutRef, useContext } from "react"
22
import { graphql, PageProps } from "gatsby"
33
import { MDXProvider } from "@mdx-js/react"
44
import { MDXRenderer } from "gatsby-plugin-mdx"
5-
import styled from "@emotion/styled"
6-
import { Badge } from "@chakra-ui/react"
5+
import {
6+
Badge,
7+
Divider as ChakraDivider,
8+
Flex,
9+
FlexProps,
10+
Heading,
11+
ListItem as ChakraListItem,
12+
ListItemProps,
13+
Text,
14+
TextProps,
15+
Box,
16+
useToken,
17+
HeadingProps,
18+
} from "@chakra-ui/react"
719

820
import BannerNotification from "../components/BannerNotification"
921
import ButtonLink from "../components/ButtonLink"
@@ -21,117 +33,153 @@ import TableOfContents, {
2133
} from "../components/TableOfContents"
2234
import SectionNav from "../components/SectionNav"
2335
import Translation from "../components/Translation"
24-
import Emoji from "../components/OldEmoji"
36+
import Emoji from "../components/Emoji"
2537
import DocsNav from "../components/DocsNav"
2638
import DeveloperDocsLinks from "../components/DeveloperDocsLinks"
2739
import RollupProductDevDoc from "../components/RollupProductDevDoc"
2840
import YouTube from "../components/YouTube"
29-
import {
30-
Divider,
31-
Paragraph,
32-
Header1,
33-
Header2,
34-
Header3,
35-
Header4,
36-
ListItem,
37-
} from "../components/SharedStyledComponents"
41+
3842
import PostMergeBanner from "../components/Banners/PostMergeBanner"
3943

4044
import { ZenModeContext } from "../contexts/ZenModeContext"
4145
import { isLangRightToLeft } from "../utils/translations"
4246
import { Lang } from "../utils/languages"
43-
import { Context } from "../types"
47+
import { ChildOnlyProp, Context } from "../types"
4448

45-
const Page = styled.div`
46-
display: flex;
47-
flex-direction: column;
48-
width: 100%;
49-
border-bottom: 1px solid ${(props) => props.theme.colors.border};
50-
`
49+
const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
50+
<Flex
51+
direction="column"
52+
w="full"
53+
border="1px"
54+
borderColor="border"
55+
{...props}
56+
/>
57+
)
5158

52-
const ContentContainer = styled.div<{ isZenMode: boolean }>`
53-
display: flex;
54-
justify-content: ${(props) => (props.isZenMode ? "center" : "space-between")};
55-
width: 100%;
56-
padding: 0 2rem 0 0;
57-
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
58-
padding: 0;
59-
}
60-
background-color: ${(props) => props.theme.colors.ednBackground};
61-
`
59+
const Divider = () => (
60+
<ChakraDivider
61+
my={16}
62+
w="10%"
63+
borderBottomWidth="0.25rem"
64+
borderColor="homeDivider"
65+
/>
66+
)
67+
const baseHeadingStyle: HeadingProps = {
68+
fontFamily: "monospace",
69+
textTransform: "uppercase",
70+
fontWeight: "bold",
71+
}
6272

63-
// Apply styles for classes within markdown here
64-
const Content = styled.article`
65-
flex: 1 1 ${(props) => props.theme.breakpoints.m};
66-
max-width: ${(props) => props.theme.breakpoints.m};
67-
padding: 3rem 4rem 4rem;
68-
margin: 0px auto;
69-
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
70-
max-width: 100%;
71-
}
72-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
73-
padding: 8rem 2rem 2rem;
74-
}
73+
const H1 = (props: HeadingProps) => (
74+
<Heading
75+
{...baseHeadingStyle}
76+
as="h1"
77+
fontSize={{ base: "2rem", md: "2.5rem" }}
78+
lineHeight={{ md: 1.4 }}
79+
mt={{ base: 0, md: 8 }}
80+
mb={{ base: 4, md: 8 }}
81+
{...props}
82+
/>
83+
)
7584

76-
.featured {
77-
padding-left: 1rem;
78-
margin-left: -1rem;
79-
border-left: 1px dotted ${(props) => props.theme.colors.primary};
80-
}
85+
const H2 = (props: HeadingProps) => (
86+
<Heading
87+
{...baseHeadingStyle}
88+
fontSize="2xl"
89+
lineHeight={1.4}
90+
pb={2}
91+
borderBottom="1px"
92+
borderColor="border"
93+
{...props}
94+
/>
95+
)
8196

82-
.citation {
83-
p {
84-
color: ${(props) => props.theme.colors.text200};
85-
}
86-
}
87-
`
97+
const baseSubHeadingStyles: HeadingProps = {
98+
lineHeight: 1.4,
99+
fontWeight: "semibold",
100+
fontSize: "md",
101+
}
88102

89-
const H1 = styled(Header1)`
90-
font-size: 2.5rem;
91-
font-family: ${(props) => props.theme.fonts.monospace};
92-
text-transform: uppercase;
93-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
94-
font-size: 2rem;
95-
line-height: 1.2;
96-
margin-top: 0;
97-
margin-bottom: 1rem;
98-
}
99-
`
103+
const H3 = (props: HeadingProps) => (
104+
<Heading
105+
{...baseSubHeadingStyles}
106+
as="h3"
107+
fontSize={{ md: "2xl" }}
108+
mt={12}
109+
{...props}
110+
/>
111+
)
100112

101-
const H2 = styled(Header2)`
102-
font-family: ${(props) => props.theme.fonts.monospace};
103-
text-transform: uppercase;
113+
const H4 = (props: HeadingProps) => (
114+
<Heading
115+
{...baseSubHeadingStyles}
116+
as="h4"
117+
fontSize={{ md: "xl" }}
118+
{...props}
119+
/>
120+
)
104121

105-
font-size: 1.5rem;
106-
padding-bottom: 0.5rem;
107-
border-bottom: 1px solid ${(props) => props.theme.colors.border};
108-
`
122+
const Paragraph = (props: TextProps) => (
123+
<Text fontSize="md" color="text300" mt={8} mb={4} {...props} />
124+
)
109125

110-
const H3 = styled(Header3)`
111-
margin-top: 3rem;
126+
const ListItem = (props: ListItemProps) => (
127+
<ChakraListItem color="text300" {...props} />
128+
)
112129

113-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
114-
font-size: 1rem;
115-
font-weight: 600;
116-
}
117-
`
130+
const ContentContainer = (props: ChildOnlyProp & { isZenMode: boolean }) => (
131+
<Flex
132+
justify={props.isZenMode ? "center" : "space-between"}
133+
w="full"
134+
py={0}
135+
pl={0}
136+
pr={{ base: 0, lg: 8 }}
137+
backgroundColor="ednBackground"
138+
{...props}
139+
/>
140+
)
118141

119-
const H4 = styled(Header4)`
120-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
121-
font-size: 1rem;
122-
font-weight: 600;
123-
}
124-
`
142+
// Apply styles for classes within markdown here
143+
const Content = (props: ChildOnlyProp) => {
144+
const mdBreakpoint = useToken("breakpoints", "md")
125145

126-
const BackToTop = styled.div`
127-
margin-top: 3rem;
128-
display: flex;
129-
padding-top: 2rem;
130-
border-top: 1px solid ${(props) => props.theme.colors.border};
131-
@media (min-width: ${(props) => props.theme.breakpoints.l}) {
132-
display: none;
133-
}
134-
`
146+
return (
147+
<Box
148+
as="article"
149+
flex={`1 1 ${mdBreakpoint}`}
150+
maxW={{ base: "full", lg: mdBreakpoint }}
151+
pt={{ base: 32, md: 12 }}
152+
pb={{ base: 8, md: 16 }}
153+
px={{ base: 8, md: 16 }}
154+
m="0 auto"
155+
sx={{
156+
".featured": {
157+
paddingLeft: 4,
158+
marginLeft: -4,
159+
borderLeft: "1px dotted",
160+
borderColor: "primary",
161+
},
162+
".citation": {
163+
p: {
164+
color: "text200",
165+
},
166+
},
167+
}}
168+
{...props}
169+
/>
170+
)
171+
}
172+
173+
const BackToTop = (props: ChildOnlyProp) => (
174+
<Flex
175+
display={{ lg: "none" }}
176+
mt={12}
177+
pt={8}
178+
borderTop="1px"
179+
borderColor="border"
180+
{...props}
181+
/>
182+
)
135183

136184
// Note: you must pass components to MDXProvider in order to render them in markdown files
137185
// https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
@@ -158,11 +206,9 @@ const components = {
158206
RollupProductDevDoc,
159207
}
160208

161-
const Contributors = styled(FileContributors)`
162-
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
163-
padding-bottom: 2rem;
164-
}
165-
`
209+
const Contributors = (
210+
props: ComponentPropsWithoutRef<typeof FileContributors>
211+
) => <FileContributors pb={{ base: 8, lg: 2 }} {...props} />
166212

167213
const DocsPage = ({
168214
data: { siteData, pageData: mdx },

0 commit comments

Comments
 (0)