Skip to content

Commit 708abd3

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Improve template README section (#4794)
* refactor: Improve template README section * Fix version * Add darcula * Fix typos
1 parent 6add465 commit 708abd3

File tree

3 files changed

+87
-37
lines changed

3 files changed

+87
-37
lines changed

‎.github/workflows/typos.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ MacOS = "macOS"
77
[default.extend-words]
88
# do as sudo replacement
99
doas = "doas"
10+
darcula = "darcula"
1011

1112
[files]
1213
extend-exclude = [

‎site/src/components/Markdown/Markdown.tsx

Lines changed: 64 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
import Link from "@material-ui/core/Link"
2-
import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"
2+
import { makeStyles } from "@material-ui/core/styles"
33
import Table from "@material-ui/core/Table"
44
import TableBody from "@material-ui/core/TableBody"
55
import TableCell from "@material-ui/core/TableCell"
66
import TableContainer from "@material-ui/core/TableContainer"
77
import TableHead from "@material-ui/core/TableHead"
88
import TableRow from "@material-ui/core/TableRow"
9-
import { FC } from "react"
9+
import React, { FC } from "react"
1010
import ReactMarkdown from "react-markdown"
11-
import SyntaxHighlighter from "react-syntax-highlighter"
12-
import { dracula as dark } from "react-syntax-highlighter/dist/cjs/styles/hljs"
11+
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
1312
import gfm from "remark-gfm"
13+
import { colors } from "theme/colors"
14+
import darcula from "react-syntax-highlighter/dist/cjs/styles/prism/darcula"
1415

1516
export interface MarkdownProps {
1617
children: string
1718
}
1819

1920
export const Markdown: FC<{ children: string }> = ({ children }) => {
20-
const theme: Theme = useTheme()
2121
const styles = useStyles()
2222

2323
return (
2424
<ReactMarkdown
25+
className={styles.markdown}
2526
remarkPlugins={[gfm]}
2627
components={{
2728
a: ({ href, target, children }) => (
@@ -30,22 +31,27 @@ export const Markdown: FC<{ children: string }> = ({ children }) => {
3031
</Link>
3132
),
3233

34+
pre: ({ node, children }) => {
35+
const firstChild = node.children[0]
36+
// When pre is wrapping a code, the SyntaxHighlighter is already going
37+
// to wrap it with a pre so we don't need it
38+
if (firstChild.type === "element" && firstChild.tagName === "code") {
39+
return <>{children}</>
40+
}
41+
return <pre>{children}</pre>
42+
},
43+
3344
code: ({ node, inline, className, children, ...props }) => {
3445
const match = /language-(\w+)/.exec(className || "")
46+
3547
return !inline && match ? (
3648
<SyntaxHighlighter
37-
// Custom style to match our main colors
38-
style={{
39-
...dark,
40-
hljs: {
41-
...dark.hljs,
42-
background: theme.palette.background.default,
43-
borderRadius: theme.shape.borderRadius,
44-
color: theme.palette.text.primary,
45-
},
46-
}}
49+
style={darcula}
4750
language={match[1]}
48-
PreTag="div"
51+
useInlineStyles={false}
52+
// Use inline styles does not work correctly
53+
// https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/329
54+
codeTagProps={{ style: {} }}
4955
{...props}
5056
>
5157
{String(children).replace(/\n$/, "")}
@@ -91,12 +97,50 @@ export const Markdown: FC<{ children: string }> = ({ children }) => {
9197
)
9298
}
9399

100+
export const MemoizedMarkdown = React.memo(Markdown)
101+
94102
const useStyles = makeStyles((theme) => ({
103+
markdown: {
104+
fontSize: 16,
105+
lineHeight: "24px",
106+
107+
"& h1, & h2, & h3, & h4, & h5, & h6": {
108+
marginTop: theme.spacing(4),
109+
marginBottom: theme.spacing(2),
110+
lineHeight: "1.25",
111+
},
112+
113+
"& p": {
114+
marginTop: 0,
115+
marginBottom: theme.spacing(2),
116+
},
117+
118+
"& ul, & ol": {
119+
display: "flex",
120+
flexDirection: "column",
121+
gap: theme.spacing(1),
122+
},
123+
124+
"& .prismjs": {
125+
background: theme.palette.background.paperLight,
126+
borderRadius: theme.shape.borderRadius,
127+
padding: theme.spacing(2, 3),
128+
129+
"& code": {
130+
color: theme.palette.text.secondary,
131+
},
132+
133+
"& .key, & .property": {
134+
color: colors.turquoise[7],
135+
},
136+
},
137+
},
138+
95139
codeWithoutLanguage: {
96-
overflowX: "auto",
97-
padding: "0.5em",
98-
background: theme.palette.background.default,
99-
borderRadius: theme.shape.borderRadius,
140+
padding: theme.spacing(0.5, 1),
141+
background: theme.palette.divider,
142+
borderRadius: 4,
100143
color: theme.palette.text.primary,
144+
fontSize: 14,
101145
},
102146
}))

‎site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,15 @@ import {
66
WorkspaceResource,
77
} from "api/typesGenerated"
88
import { AlertBanner } from "components/AlertBanner/AlertBanner"
9-
import { Markdown } from "components/Markdown/Markdown"
9+
import { MemoizedMarkdown } from "components/Markdown/Markdown"
1010
import { Stack } from "components/Stack/Stack"
1111
import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable"
1212
import { TemplateStats } from "components/TemplateStats/TemplateStats"
1313
import { VersionsTable } from "components/VersionsTable/VersionsTable"
14-
import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection"
1514
import frontMatter from "front-matter"
1615
import { FC } from "react"
1716
import { DAUChart } from "./DAUChart"
1817

19-
const Language = {
20-
readmeTitle: "README",
21-
resourcesTitle: "Resources",
22-
}
23-
2418
export interface TemplateSummaryPageViewProps {
2519
template: Template
2620
activeTemplateVersion: TemplateVersion
@@ -64,27 +58,38 @@ export const TemplateSummaryPageView: FC<
6458
<TemplateResourcesTable
6559
resources={getStartedResources(templateResources)}
6660
/>
67-
<WorkspaceSection
68-
title={Language.readmeTitle}
69-
contentsProps={{ className: styles.readmeContents }}
70-
>
61+
62+
<div className={styles.markdownSection}>
63+
<div className={styles.readmeLabel}>README.md</div>
7164
<div className={styles.markdownWrapper}>
72-
<Markdown>{readme.body}</Markdown>
65+
<MemoizedMarkdown>{readme.body}</MemoizedMarkdown>
7366
</div>
74-
</WorkspaceSection>
67+
</div>
68+
7569
<VersionsTable versions={templateVersions} />
7670
</Stack>
7771
)
7872
}
7973

8074
export const useStyles = makeStyles((theme) => {
8175
return {
82-
readmeContents: {
83-
margin: 0,
76+
markdownSection: {
77+
background: theme.palette.background.paper,
78+
border: `1px solid ${theme.palette.divider}`,
79+
borderRadius: theme.shape.borderRadius,
8480
},
81+
82+
readmeLabel: {
83+
color: theme.palette.text.secondary,
84+
fontWeight: 600,
85+
padding: theme.spacing(2, 3),
86+
borderBottom: `1px solid ${theme.palette.divider}`,
87+
},
88+
8589
markdownWrapper: {
86-
background: theme.palette.background.paper,
87-
padding: theme.spacing(3, 4),
90+
padding: theme.spacing(0, 3, 5),
91+
maxWidth: 800,
92+
margin: "auto",
8893
},
8994
}
9095
})

0 commit comments

Comments
 (0)