From fb1b5dcd9f48e8337a141a346c0476a4cdfb060e Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Fri, 27 May 2022 14:44:22 +0000
Subject: [PATCH] fix: Fix template README when has front-matter notation

---
 site/package.json                                | 1 +
 site/src/pages/TemplatePage/TemplatePageView.tsx | 4 +++-
 site/src/testHelpers/entities.ts                 | 8 +++++++-
 site/yarn.lock                                   | 7 +++++++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/site/package.json b/site/package.json
index 0739ee932741d..8e9fdfe5c5f32 100644
--- a/site/package.json
+++ b/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",
diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx
index dcc0b4dca8904..f3f5db9a498a5 100644
--- a/site/src/pages/TemplatePage/TemplatePageView.tsx
+++ b/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>
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index dd937e7b0a2bd..959074c2f6bbf 100644
--- a/site/src/testHelpers/entities.ts
+++ b/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 = {
diff --git a/site/yarn.lock b/site/yarn.lock
index d6849cff02878..abc20e7ca7004 100644
--- a/site/yarn.lock
+++ b/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"