From 6abf187d6a1515ad6d6fbb2f88d3a0b350071f58 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 28 Oct 2022 14:45:48 +0000 Subject: [PATCH 1/5] refactor: Improve template README section --- site/package.json | 2 +- site/src/components/Markdown/Markdown.tsx | 84 ++++++++++++++----- .../TemplateSummaryPageView.tsx | 39 +++++---- site/yarn.lock | 2 +- 4 files changed, 88 insertions(+), 39 deletions(-) diff --git a/site/package.json b/site/package.json index b38494f51ddf2..8eeb573c691c0 100644 --- a/site/package.json +++ b/site/package.json @@ -58,7 +58,7 @@ "react-i18next": "11.18.4", "react-markdown": "8.0.3", "react-router-dom": "6.4.1", - "react-syntax-highlighter": "15.5.0", + "react-syntax-highlighter": "^15.5.0", "remark-gfm": "3.0.1", "sourcemapped-stacktrace": "1.1.11", "swr": "1.3.0", diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx index f068b72194048..40945c112ad54 100644 --- a/site/src/components/Markdown/Markdown.tsx +++ b/site/src/components/Markdown/Markdown.tsx @@ -1,27 +1,28 @@ import Link from "@material-ui/core/Link" -import { makeStyles, Theme, useTheme } from "@material-ui/core/styles" +import { makeStyles } from "@material-ui/core/styles" import Table from "@material-ui/core/Table" import TableBody from "@material-ui/core/TableBody" import TableCell from "@material-ui/core/TableCell" import TableContainer from "@material-ui/core/TableContainer" import TableHead from "@material-ui/core/TableHead" import TableRow from "@material-ui/core/TableRow" -import { FC } from "react" +import React, { FC } from "react" import ReactMarkdown from "react-markdown" -import SyntaxHighlighter from "react-syntax-highlighter" -import { dracula as dark } from "react-syntax-highlighter/dist/cjs/styles/hljs" +import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import gfm from "remark-gfm" +import { colors } from "theme/colors" +import darcula from "react-syntax-highlighter/dist/cjs/styles/prism/darcula" export interface MarkdownProps { children: string } export const Markdown: FC<{ children: string }> = ({ children }) => { - const theme: Theme = useTheme() const styles = useStyles() return ( ( @@ -30,22 +31,27 @@ export const Markdown: FC<{ children: string }> = ({ children }) => { ), + pre: ({ node, children }) => { + const firstChild = node.children[0] + // When pre is wrapping a code, the SyntaxHighlighter is already going + // to wrap it with a pre so we don't need it + if (firstChild.type === "element" && firstChild.tagName === "code") { + return <>{children} + } + return 
{children}
+ }, + code: ({ node, inline, className, children, ...props }) => { const match = /language-(\w+)/.exec(className || "") + return !inline && match ? ( {String(children).replace(/\n$/, "")} @@ -91,12 +97,50 @@ export const Markdown: FC<{ children: string }> = ({ children }) => { ) } +export const MemoizedMarkdown = React.memo(Markdown) + const useStyles = makeStyles((theme) => ({ + markdown: { + fontSize: 16, + lineHeight: "24px", + + "& h1, & h2, & h3, & h4, & h5, & h6": { + marginTop: theme.spacing(4), + marginBottom: theme.spacing(2), + lineHeight: "1.25", + }, + + "& p": { + marginTop: 0, + marginBottom: theme.spacing(2), + }, + + "& ul, & ol": { + display: "flex", + flexDirection: "column", + gap: theme.spacing(1), + }, + + "& .prismjs": { + background: theme.palette.background.paperLight, + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(2, 3), + + "& code": { + color: theme.palette.text.secondary, + }, + + "& .key": { + color: colors.turquoise[7], + }, + }, + }, + codeWithoutLanguage: { - overflowX: "auto", - padding: "0.5em", - background: theme.palette.background.default, - borderRadius: theme.shape.borderRadius, + padding: theme.spacing(0.5, 1), + background: theme.palette.divider, + borderRadius: 4, color: theme.palette.text.primary, + fontSize: 14, }, })) diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx index 2ceb20463e75e..6fa7aab3da861 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx @@ -6,21 +6,15 @@ import { WorkspaceResource, } from "api/typesGenerated" import { AlertBanner } from "components/AlertBanner/AlertBanner" -import { Markdown } from "components/Markdown/Markdown" +import { MemoizedMarkdown } from "components/Markdown/Markdown" import { Stack } from "components/Stack/Stack" import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable" import { TemplateStats } from "components/TemplateStats/TemplateStats" import { VersionsTable } from "components/VersionsTable/VersionsTable" -import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection" import frontMatter from "front-matter" import { FC } from "react" import { DAUChart } from "./DAUChart" -const Language = { - readmeTitle: "README", - resourcesTitle: "Resources", -} - export interface TemplateSummaryPageViewProps { template: Template activeTemplateVersion: TemplateVersion @@ -64,14 +58,14 @@ export const TemplateSummaryPageView: FC< - + +
+
README.md
- {readme.body} + {readme.body}
- +
+ ) @@ -79,12 +73,23 @@ export const TemplateSummaryPageView: FC< export const useStyles = makeStyles((theme) => { return { - readmeContents: { - margin: 0, + markdownSection: { + background: theme.palette.background.paper, + border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadius, }, + + readmeLabel: { + color: theme.palette.text.secondary, + fontWeight: 600, + padding: theme.spacing(2, 3), + borderBottom: `1px solid ${theme.palette.divider}`, + }, + markdownWrapper: { - background: theme.palette.background.paper, - padding: theme.spacing(3, 4), + padding: theme.spacing(0, 3, 5), + maxWidth: 800, + margin: "auto", }, } }) diff --git a/site/yarn.lock b/site/yarn.lock index 69c339576ebb3..721bda93a6bf6 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -11556,7 +11556,7 @@ react-router@6.4.1: dependencies: "@remix-run/router" "1.0.1" -react-syntax-highlighter@15.5.0, react-syntax-highlighter@^15.4.5: +react-syntax-highlighter@^15.4.5, react-syntax-highlighter@^15.5.0: version "15.5.0" resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20" integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg== From 04dc5f0d2b8e28a7cf43b3aaf3f20a645e40863e Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 28 Oct 2022 14:47:22 +0000 Subject: [PATCH 2/5] Fix version --- site/package.json | 2 +- site/yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/package.json b/site/package.json index 8eeb573c691c0..b38494f51ddf2 100644 --- a/site/package.json +++ b/site/package.json @@ -58,7 +58,7 @@ "react-i18next": "11.18.4", "react-markdown": "8.0.3", "react-router-dom": "6.4.1", - "react-syntax-highlighter": "^15.5.0", + "react-syntax-highlighter": "15.5.0", "remark-gfm": "3.0.1", "sourcemapped-stacktrace": "1.1.11", "swr": "1.3.0", diff --git a/site/yarn.lock b/site/yarn.lock index 721bda93a6bf6..69c339576ebb3 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -11556,7 +11556,7 @@ react-router@6.4.1: dependencies: "@remix-run/router" "1.0.1" -react-syntax-highlighter@^15.4.5, react-syntax-highlighter@^15.5.0: +react-syntax-highlighter@15.5.0, react-syntax-highlighter@^15.4.5: version "15.5.0" resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20" integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg== From cd9db53c014da6821268a12850a620a5f976bb1a Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 28 Oct 2022 16:06:10 +0000 Subject: [PATCH 3/5] Add darcula --- .github/workflows/typos.toml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/typos.toml b/.github/workflows/typos.toml index f3d22513ac40a..1924008de7c5c 100644 --- a/.github/workflows/typos.toml +++ b/.github/workflows/typos.toml @@ -3,6 +3,7 @@ alog = "alog" Jetbrains = "JetBrains" IST = "IST" MacOS = "macOS" +darcula = "dracula" [default.extend-words] # do as sudo replacement From 650a6556774f7df5aa014efacde71eb0718b33ff Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 28 Oct 2022 16:16:03 +0000 Subject: [PATCH 4/5] Fix typos --- .github/workflows/typos.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/typos.toml b/.github/workflows/typos.toml index 1924008de7c5c..455392eb13754 100644 --- a/.github/workflows/typos.toml +++ b/.github/workflows/typos.toml @@ -3,11 +3,11 @@ alog = "alog" Jetbrains = "JetBrains" IST = "IST" MacOS = "macOS" -darcula = "dracula" [default.extend-words] # do as sudo replacement doas = "doas" +darcula = "darcula" [files] extend-exclude = [ From 189318b9d227eceb9a775d171ec62f9740de60ae Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 28 Oct 2022 18:58:40 +0000 Subject: [PATCH 5/5] Add json style --- site/src/components/Markdown/Markdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx index 40945c112ad54..1e06f5be6e23f 100644 --- a/site/src/components/Markdown/Markdown.tsx +++ b/site/src/components/Markdown/Markdown.tsx @@ -130,7 +130,7 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.text.secondary, }, - "& .key": { + "& .key, & .property": { color: colors.turquoise[7], }, },