Skip to content

Commit 22f853f

Browse files
rishisundarrishisundar
committed
refactor: templates/tutorials.tsx Chakra migration
1 parent 231bb66 commit 22f853f

File tree

1 file changed

+181
-98
lines changed

1 file changed

+181
-98
lines changed

‎src/templates/tutorial.tsx

Lines changed: 181 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,159 @@ 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")
47+
const mediumBp = useToken("breakpoints", "md")
5648

57-
const DesktopTableOfContents = styled(TableOfContents)`
58-
padding-top: 4rem;
59-
`
60-
const MobileTableOfContents = styled(TableOfContents)`
61-
margin-bottom: 2rem;
62-
`
49+
return (
50+
<Box
51+
as="article"
52+
maxW="1000px"
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+
w={{ base: "100%", lg: "auto" }}
58+
flex={`1 1 ${mediumBp}`}
59+
borderRadius="4px"
60+
{...props}
61+
sx={{
62+
".featured": {
63+
pl: "1rem",
64+
ml: "-1rem",
65+
borderLeft: `1px dotted ${borderColor}`,
66+
},
67+
".citation": {
68+
p: { color: "text200" },
69+
},
70+
}}
71+
/>
72+
)
73+
}
6374

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-
}
75+
const H1 = (props: HeadingProps) => {
76+
const monospaceFont = useToken("fonts", "monospace")
77+
return (
78+
<Heading
79+
as="h1"
80+
fontWeight="bold"
81+
fontFamily={monospaceFont}
82+
textTransform="uppercase"
83+
fontSize={{ base: "1.75rem", lg: "2.5rem" }}
84+
lineHeight="1.4"
85+
_before={{
86+
content: '""',
87+
display: "block",
88+
h: "140px",
89+
mt: "-140px",
90+
visibility: "hidden",
91+
}}
92+
sx={{
93+
a: { display: "none" },
94+
}}
95+
{...props}
96+
/>
97+
)
98+
}
8099

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

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

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-
`
124+
const H3 = (props: HeadingProps) => {
125+
return (
126+
<Heading
127+
as="h3"
128+
fontWeight={{ base: "semibold" }}
129+
fontSize={{ base: "1rem", md: "1.5rem" }}
130+
lineHeight="1.4"
131+
sx={{ position: "inherit !important" }}
132+
_before={{
133+
content: '""',
134+
display: "block",
135+
h: "120px",
136+
mt: "-120px",
137+
visibility: "hidden",
138+
}}
139+
{...props}
140+
/>
141+
)
142+
}
102143

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

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-
`
164+
const StyledDivider = (props) => (
165+
<Divider
166+
my={16}
167+
w="10%"
168+
h="1"
169+
opacity="1"
170+
backgroundColor="homeDivider"
171+
{...props}
172+
/>
173+
)
174+
175+
const Paragraph = (props: TextProps) => (
176+
<Text as="p" mt={8} mb={4} mx={0} color="text300" fontSize="md" {...props} />
177+
)
178+
179+
const ListItem = (props) => {
180+
return <chakra.li color="text300" {...props} />
181+
}
182+
183+
const KBD = (props) => {
184+
const borderColor = useToken("colors", "primary")
185+
186+
return (
187+
<Kbd
188+
verticalAlign="middle"
189+
p="0.15rem 0.45rem"
190+
borderRadius="2px"
191+
border={`1px solid ${borderColor}`}
192+
{...props}
193+
/>
194+
)
195+
}
120196

121197
// Note: you must pass components to MDXProvider in order to render them in markdown files
122198
// https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
@@ -135,22 +211,14 @@ const components = {
135211
InfoBanner,
136212
EnvWarningBanner,
137213
Card,
138-
Divider,
214+
StyledDivider,
139215
SectionNav,
140216
Badge,
141217
CallToContribute,
142218
Emoji,
143219
YouTube,
144220
}
145221

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-
154222
const TutorialPage = ({
155223
data: { siteData, pageData: mdx },
156224
pageContext: { relativePath },
@@ -175,14 +243,22 @@ const TutorialPage = ({
175243
const { editContentUrl } = siteData.siteMetadata || {}
176244
const hideEditButton = !!mdx.frontmatter.hideEditButton
177245
const absoluteEditPath = `${editContentUrl}${relativePath}`
246+
const borderColor = useToken("colors", "border")
178247
return (
179248
<>
180249
{showPostMergeBanner && (
181250
<PostMergeBanner
182251
translationString={postMergeBannerTranslationString!}
183252
/>
184253
)}
185-
<Page dir={isRightToLeft ? "rtl" : "ltr"}>
254+
<Flex
255+
w="100%"
256+
borderBottom={`1px solid ${borderColor}`}
257+
dir={isRightToLeft ? "rtl" : "ltr"}
258+
m={{ base: "2rem 0rem", lg: "0 auto" }}
259+
p={{ base: "0", lg: "0 2rem 0 0" }}
260+
background={{ base: "background", lg: "ednBackground" }}
261+
>
186262
<PageMetadata
187263
title={mdx.frontmatter.title}
188264
description={mdx.frontmatter.description}
@@ -191,30 +267,37 @@ const TutorialPage = ({
191267
<ContentContainer>
192268
<H1>{mdx.frontmatter.title}</H1>
193269
<TutorialMetadata tutorial={mdx} />
194-
<MobileTableOfContents
270+
<TableOfContents
195271
items={tocItems}
196272
maxDepth={mdx.frontmatter.sidebarDepth!}
197273
editPath={absoluteEditPath}
198274
isMobile
275+
pt={8}
199276
/>
200277
<MDXProvider components={components}>
201278
<MDXRenderer>{mdx.body}</MDXRenderer>
202279
</MDXProvider>
203-
<Contributors
280+
<FileContributors
204281
relativePath={relativePath}
205282
editPath={absoluteEditPath}
283+
mt={12}
284+
p={2}
285+
borderRadius="4px"
286+
border={`1px solid ${borderColor}`}
287+
background="ednBackground"
206288
/>
207289
<FeedbackCard />
208290
</ContentContainer>
209291
{tocItems && (
210-
<DesktopTableOfContents
292+
<TableOfContents
211293
items={tocItems}
212294
maxDepth={mdx.frontmatter.sidebarDepth!}
213295
editPath={absoluteEditPath}
214296
hideEditButton={hideEditButton}
297+
pt={16}
215298
/>
216299
)}
217-
</Page>
300+
</Flex>
218301
</>
219302
)
220303
}

0 commit comments

Comments
 (0)