fix: Fix template README when has front-matter notation (#1840)

site/package.json

@@ -38,6 +38,7 @@
     "cronstrue": "2.5.0",
     "dayjs": "1.11.2",
     "formik": "2.2.9",
+    "front-matter": "4.0.2",
     "history": "5.3.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

site/src/pages/TemplatePage/TemplatePageView.tsx

@@ -3,6 +3,7 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
+import frontMatter from "front-matter"
 import React from "react"
 import ReactMarkdown from "react-markdown"
 import { Link as RouterLink } from "react-router-dom"
@@ -33,6 +34,7 @@ export const TemplatePageView: React.FC<TemplatePageViewProps> = ({
   templateResources,
 }) => {
   const styles = useStyles()
+  const readme = frontMatter(activeTemplateVersion.readme)
 
   const getStartedResources = (resources: WorkspaceResource[]) => {
     return resources.filter((resource) => resource.workspace_transition === "start")
@@ -74,7 +76,7 @@ export const TemplatePageView: React.FC<TemplatePageViewProps> = ({
                 ),
               }}
             >
-              {activeTemplateVersion.readme}
+              {readme.body}
             </ReactMarkdown>
           </div>
         </WorkspaceSection>

site/src/testHelpers/entities.ts

@@ -88,7 +88,13 @@ export const MockTemplateVersion: TypesGen.TemplateVersion = {
   updated_at: "",
   job: MockProvisionerJob,
   name: "test-version",
-  readme: "## Instructions\nYou can add instructions here\n\n[Some link info](https://coder.com)",
+  readme: `---
+name:Template test
+---
+## Instructions
+You can add instructions here
+
+[Some link info](https://coder.com)`,
 }
 
 export const MockTemplate: TypesGen.Template = {

site/yarn.lock

@@ -6969,6 +6969,13 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+front-matter@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5"
+  integrity sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==
+  dependencies:
+    js-yaml "^3.13.1"
+
 fs-extra@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"