Skip to content

Commit 2efc358

Browse files
pettinarippettinarip
authored
Merge pull request #10173 from rishisundar/dev
refactor(templates/tutorials.tsx): replaced styled components w/ Chakra components
2 parents c87d364 + d92c43d commit 2efc358

File tree

1 file changed

+179
-98
lines changed

1 file changed

+179
-98
lines changed

‎src/templates/tutorial.tsx

Lines changed: 179 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,19 @@ import React 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+
chakra,
8+
Divider,
9+
Flex,
10+
Heading,
11+
HeadingProps,
12+
Text,
13+
TextProps,
14+
useToken,
15+
Kbd,
16+
Box,
17+
} from "@chakra-ui/react"
718

819
import ButtonLink from "../components/ButtonLink"
920
import Card from "../components/Card"
@@ -20,17 +31,7 @@ import TableOfContents, {
2031
} from "../components/TableOfContents"
2132
import SectionNav from "../components/SectionNav"
2233
import CallToContribute from "../components/CallToContribute"
23-
import {
24-
Divider,
25-
Paragraph,
26-
Header1,
27-
Header2,
28-
Header3,
29-
Header4,
30-
ListItem,
31-
KBD,
32-
} from "../components/SharedStyledComponents"
33-
import Emoji from "../components/OldEmoji"
34+
import Emoji from "../components/Emoji"
3435
import YouTube from "../components/YouTube"
3536
import PostMergeBanner from "../components/Banners/PostMergeBanner"
3637
import FeedbackCard from "../components/FeedbackCard"
@@ -39,84 +40,157 @@ import { isLangRightToLeft, TranslationKey } from "../utils/translations"
3940
import { Lang } from "../utils/languages"
4041
import { Context } from "../types"
4142

42-
const Page = styled.div`
43-
display: flex;
44-
width: 100%;
45-
margin: 0 auto;
46-
padding: 0 2rem 0 0;
47-
background: ${(props) => props.theme.colors.ednBackground};
48-
border-bottom: 1px solid ${(props) => props.theme.colors.border};
49-
background-color: ${(props) => props.theme.colors.ednBackground};
50-
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
51-
margin: 2rem 0rem;
52-
padding: 0;
53-
background: ${(props) => props.theme.colors.background};
54-
}
55-
`
43+
// Apply styles for classes within markdown here
44+
const ContentContainer = (props) => {
45+
const boxShadow = useToken("colors", "tableBoxShadow")
46+
const borderColor = useToken("colors", "primary")
5647

57-
const DesktopTableOfContents = styled(TableOfContents)`
58-
padding-top: 4rem;
59-
`
60-
const MobileTableOfContents = styled(TableOfContents)`
61-
margin-bottom: 2rem;
62-
`
48+
return (
49+
<Box
50+
as="article"
51+
maxW="1000px"
52+
minW={0}
53+
background="background"
54+
boxShadow={{ base: "none", lg: boxShadow }}
55+
m={{ base: "2.5rem 0rem", lg: "2rem 2rem 6rem" }}
56+
p={{ base: "3rem 2rem", lg: 16 }}
57+
borderRadius="4px"
58+
{...props}
59+
sx={{
60+
".featured": {
61+
pl: "1rem",
62+
ml: "-1rem",
63+
borderLeft: `1px dotted ${borderColor}`,
64+
},
65+
".citation": {
66+
p: { color: "text200" },
67+
},
68+
}}
69+
/>
70+
)
71+
}
6372

64-
// Apply styles for classes within markdown here
65-
const ContentContainer = styled.article`
66-
flex: 1 1 ${(props) => props.theme.breakpoints.m};
67-
max-width: 1000px;
68-
background: ${(props) => props.theme.colors.background};
69-
box-shadow: ${(props) => props.theme.colors.tableBoxShadow};
70-
margin: 2rem 2rem;
71-
padding: 4rem 4rem;
72-
margin-bottom: 6rem;
73-
border-radius: 4px;
74-
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
75-
margin: 2.5rem 0rem;
76-
padding: 3rem 2rem;
77-
box-shadow: none;
78-
width: 100%;
79-
}
73+
const H1 = (props: HeadingProps) => {
74+
const monospaceFont = useToken("fonts", "monospace")
75+
return (
76+
<Heading
77+
as="h1"
78+
fontWeight="bold"
79+
fontFamily={monospaceFont}
80+
textTransform="uppercase"
81+
fontSize={{ base: "1.75rem", lg: "2.5rem" }}
82+
lineHeight="1.4"
83+
_before={{
84+
content: '""',
85+
display: "block",
86+
h: "140px",
87+
mt: "-140px",
88+
visibility: "hidden",
89+
}}
90+
sx={{
91+
a: { display: "none" },
92+
}}
93+
{...props}
94+
/>
95+
)
96+
}
8097

81-
.featured {
82-
padding-left: 1rem;
83-
margin-left: -1rem;
84-
border-left: 1px dotted ${(props) => props.theme.colors.primary};
85-
}
98+
const H2 = (props: HeadingProps) => {
99+
const monospaceFont = useToken("fonts", "monospace")
86100

87-
.citation {
88-
p {
89-
color: ${(props) => props.theme.colors.text200};
90-
}
91-
}
92-
`
101+
return (
102+
<Heading
103+
as="h2"
104+
fontFamily={monospaceFont}
105+
textTransform="uppercase"
106+
fontWeight="bold"
107+
fontSize={{ base: "2xl", md: "2rem" }}
108+
sx={{ position: "inherit !important" }}
109+
lineHeight="1.4"
110+
_before={{
111+
content: '""',
112+
display: "block",
113+
h: "120px",
114+
mt: "-120px",
115+
visibility: "hidden",
116+
}}
117+
{...props}
118+
/>
119+
)
120+
}
93121

94-
const H1 = styled(Header1)`
95-
font-size: 2.5rem;
96-
font-family: ${(props) => props.theme.fonts.monospace};
97-
text-transform: uppercase;
98-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
99-
font-size: 1.75rem;
100-
}
101-
`
122+
const H3 = (props: HeadingProps) => {
123+
return (
124+
<Heading
125+
as="h3"
126+
fontWeight={{ base: "semibold" }}
127+
fontSize={{ base: "1rem", md: "1.5rem" }}
128+
lineHeight="1.4"
129+
sx={{ position: "inherit !important" }}
130+
_before={{
131+
content: '""',
132+
display: "block",
133+
h: "120px",
134+
mt: "-120px",
135+
visibility: "hidden",
136+
}}
137+
{...props}
138+
/>
139+
)
140+
}
102141

103-
const H2 = styled(Header2)`
104-
font-family: ${(props) => props.theme.fonts.monospace};
105-
text-transform: uppercase;
106-
`
142+
const H4 = (props: HeadingProps) => {
143+
return (
144+
<Heading
145+
as="h4"
146+
fontWeight={{ base: "semibold" }}
147+
fontSize={{ base: "1rem", md: "1.25rem" }}
148+
lineHeight="1.4"
149+
sx={{ position: "unset !important" }}
150+
_before={{
151+
content: '""',
152+
display: "block",
153+
h: "120px",
154+
mt: "-120px",
155+
visibility: "hidden",
156+
}}
157+
{...props}
158+
/>
159+
)
160+
}
107161

108-
const H3 = styled(Header3)`
109-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
110-
font-size: 1rem;
111-
font-weight: 600;
112-
}
113-
`
114-
const H4 = styled(Header4)`
115-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
116-
font-size: 1rem;
117-
font-weight: 600;
118-
}
119-
`
162+
const StyledDivider = (props) => (
163+
<Divider
164+
my={16}
165+
w="10%"
166+
h="1"
167+
opacity="1"
168+
backgroundColor="homeDivider"
169+
{...props}
170+
/>
171+
)
172+
173+
const Paragraph = (props: TextProps) => (
174+
<Text as="p" mt={8} mb={4} mx={0} color="text300" fontSize="md" {...props} />
175+
)
176+
177+
const ListItem = (props) => {
178+
return <chakra.li color="text300" {...props} />
179+
}
180+
181+
const KBD = (props) => {
182+
const borderColor = useToken("colors", "primary")
183+
184+
return (
185+
<Kbd
186+
verticalAlign="middle"
187+
p="0.15rem 0.45rem"
188+
borderRadius="2px"
189+
border={`1px solid ${borderColor}`}
190+
{...props}
191+
/>
192+
)
193+
}
120194

121195
// Note: you must pass components to MDXProvider in order to render them in markdown files
122196
// https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
@@ -135,22 +209,14 @@ const components = {
135209
InfoBanner,
136210
EnvWarningBanner,
137211
Card,
138-
Divider,
212+
StyledDivider,
139213
SectionNav,
140214
Badge,
141215
CallToContribute,
142216
Emoji,
143217
YouTube,
144218
}
145219

146-
const Contributors = styled(FileContributors)`
147-
margin-top: 3rem;
148-
border: 1px solid ${(props) => props.theme.colors.border};
149-
background: ${(props) => props.theme.colors.ednBackground};
150-
padding: 1rem;
151-
border-radius: 4px;
152-
`
153-
154220
const TutorialPage = ({
155221
data: { siteData, pageData: mdx },
156222
pageContext: { relativePath },
@@ -175,14 +241,22 @@ const TutorialPage = ({
175241
const { editContentUrl } = siteData.siteMetadata || {}
176242
const hideEditButton = !!mdx.frontmatter.hideEditButton
177243
const absoluteEditPath = `${editContentUrl}${relativePath}`
244+
const borderColor = useToken("colors", "border")
178245
return (
179246
<>
180247
{showPostMergeBanner && (
181248
<PostMergeBanner
182249
translationString={postMergeBannerTranslationString!}
183250
/>
184251
)}
185-
<Page dir={isRightToLeft ? "rtl" : "ltr"}>
252+
<Flex
253+
w="100%"
254+
borderBottom={`1px solid ${borderColor}`}
255+
dir={isRightToLeft ? "rtl" : "ltr"}
256+
m={{ base: "2rem 0rem", lg: "0 auto" }}
257+
p={{ base: "0", lg: "0 2rem 0 0" }}
258+
background={{ base: "background", lg: "ednBackground" }}
259+
>
186260
<PageMetadata
187261
title={mdx.frontmatter.title}
188262
description={mdx.frontmatter.description}
@@ -191,30 +265,37 @@ const TutorialPage = ({
191265
<ContentContainer>
192266
<H1>{mdx.frontmatter.title}</H1>
193267
<TutorialMetadata tutorial={mdx} />
194-
<MobileTableOfContents
268+
<TableOfContents
195269
items={tocItems}
196270
maxDepth={mdx.frontmatter.sidebarDepth!}
197271
editPath={absoluteEditPath}
198272
isMobile
273+
pt={8}
199274
/>
200275
<MDXProvider components={components}>
201276
<MDXRenderer>{mdx.body}</MDXRenderer>
202277
</MDXProvider>
203-
<Contributors
278+
<FileContributors
204279
relativePath={relativePath}
205280
editPath={absoluteEditPath}
281+
mt={12}
282+
p={2}
283+
borderRadius="4px"
284+
border={`1px solid ${borderColor}`}
285+
background="ednBackground"
206286
/>
207287
<FeedbackCard />
208288
</ContentContainer>
209289
{tocItems && (
210-
<DesktopTableOfContents
290+
<TableOfContents
211291
items={tocItems}
212292
maxDepth={mdx.frontmatter.sidebarDepth!}
213293
editPath={absoluteEditPath}
214294
hideEditButton={hideEditButton}
295+
pt={16}
215296
/>
216297
)}
217-
</Page>
298+
</Flex>
218299
</>
219300
)
220301
}

0 commit comments

Comments
 (0)