Skip to content

Commit d4a9fa3

Browse files
pettinarippettinarip
authored
Merge pull request #10375 from amit-ksh/migrate-template/docs.tsx-to-chakra
refactor: template/docs.tsx to chakra
2 parents 56011e4 + c4d2538 commit d4a9fa3

File tree

1 file changed

+156
-98
lines changed

1 file changed

+156
-98
lines changed

‎src/templates/docs.tsx

Lines changed: 156 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
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+
UnorderedList as ChakraUnorderedList,
19+
OrderedList as ChakraOrderedList,
20+
ListProps,
21+
} from "@chakra-ui/react"
722

823
import BannerNotification from "../components/BannerNotification"
924
import ButtonLink from "../components/ButtonLink"
@@ -21,117 +36,160 @@ import TableOfContents, {
2136
} from "../components/TableOfContents"
2237
import SectionNav from "../components/SectionNav"
2338
import Translation from "../components/Translation"
24-
import Emoji from "../components/OldEmoji"
39+
import Emoji from "../components/Emoji"
2540
import DocsNav from "../components/DocsNav"
2641
import DeveloperDocsLinks from "../components/DeveloperDocsLinks"
2742
import RollupProductDevDoc from "../components/RollupProductDevDoc"
2843
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"
44+
3845
import PostMergeBanner from "../components/Banners/PostMergeBanner"
3946

4047
import { ZenModeContext } from "../contexts/ZenModeContext"
4148
import { isLangRightToLeft } from "../utils/translations"
4249
import { Lang } from "../utils/languages"
43-
import { Context } from "../types"
50+
import { ChildOnlyProp, Context } from "../types"
4451

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-
`
52+
const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
53+
<Flex
54+
direction="column"
55+
w="full"
56+
borderBottom="1px"
57+
borderColor="border"
58+
{...props}
59+
/>
60+
)
5161

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-
`
62+
const Divider = () => (
63+
<ChakraDivider
64+
my={16}
65+
w="10%"
66+
borderBottomWidth={1}
67+
borderColor="homeDivider"
68+
/>
69+
)
70+
const baseHeadingStyle: HeadingProps = {
71+
fontFamily: "mono",
72+
textTransform: "uppercase",
73+
fontWeight: "bold",
74+
}
6275

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-
}
76+
const H1 = (props: HeadingProps) => (
77+
<Heading
78+
{...baseHeadingStyle}
79+
as="h1"
80+
fontSize={{ base: "2rem", md: "2.5rem" }}
81+
lineHeight={{ md: 1.4 }}
82+
mt={{ base: 0, md: 8 }}
83+
mb={{ base: 4, md: 8 }}
84+
{...props}
85+
/>
86+
)
7587

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

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

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-
`
106+
const H3 = (props: HeadingProps) => (
107+
<Heading
108+
{...baseSubHeadingStyles}
109+
as="h3"
110+
fontSize={{ md: "2xl" }}
111+
mt={12}
112+
{...props}
113+
/>
114+
)
100115

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

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

110-
const H3 = styled(Header3)`
111-
margin-top: 3rem;
129+
const UnorderedList = (props: ListProps) => (
130+
<ChakraUnorderedList ms="1.45rem" {...props} />
131+
)
132+
const OrderedList = (props: ListProps) => (
133+
<ChakraOrderedList ms="1.45rem" {...props} />
134+
)
112135

113-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
114-
font-size: 1rem;
115-
font-weight: 600;
116-
}
117-
`
136+
const ListItem = (props: ListItemProps) => (
137+
<ChakraListItem color="text300" {...props} />
138+
)
118139

119-
const H4 = styled(Header4)`
120-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
121-
font-size: 1rem;
122-
font-weight: 600;
123-
}
124-
`
140+
const ContentContainer = (props: ChildOnlyProp & { isZenMode: boolean }) => (
141+
<Flex
142+
justify={props.isZenMode ? "center" : "space-between"}
143+
w="full"
144+
py={0}
145+
pl={0}
146+
pr={{ base: 0, lg: 8 }}
147+
backgroundColor="ednBackground"
148+
{...props}
149+
/>
150+
)
125151

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-
`
152+
// Apply styles for classes within markdown here
153+
const Content = (props: ChildOnlyProp) => {
154+
const mdBreakpoint = useToken("breakpoints", "md")
155+
156+
return (
157+
<Box
158+
as="article"
159+
flex={`1 1 ${mdBreakpoint}`}
160+
maxW={{ base: "full", lg: mdBreakpoint }}
161+
pt={{ base: 32, md: 12 }}
162+
pb={{ base: 8, md: 16 }}
163+
px={{ base: 8, md: 16 }}
164+
m="0 auto"
165+
sx={{
166+
".featured": {
167+
paddingLeft: 4,
168+
marginLeft: -4,
169+
borderLeft: "1px dotted",
170+
borderColor: "primary",
171+
},
172+
".citation": {
173+
p: {
174+
color: "text200",
175+
},
176+
},
177+
}}
178+
{...props}
179+
/>
180+
)
181+
}
182+
183+
const BackToTop = (props: ChildOnlyProp) => (
184+
<Flex
185+
display={{ lg: "none" }}
186+
mt={12}
187+
pt={8}
188+
borderTop="1px"
189+
borderColor="border"
190+
{...props}
191+
/>
192+
)
135193

136194
// Note: you must pass components to MDXProvider in order to render them in markdown files
137195
// https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
@@ -142,6 +200,8 @@ const components = {
142200
h3: H3,
143201
h4: H4,
144202
p: Paragraph,
203+
ul: UnorderedList,
204+
ol: OrderedList,
145205
li: ListItem,
146206
pre: Codeblock,
147207
table: MarkdownTable,
@@ -158,11 +218,9 @@ const components = {
158218
RollupProductDevDoc,
159219
}
160220

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

167225
const DocsPage = ({
168226
data: { siteData, pageData: mdx },

0 commit comments

Comments
 (0)