move readme to a new docs tab

rodrimaia · rodrimaia · commit 650044fa5889 · 2023-03-31T18:54:00.000Z
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -135,6 +135,10 @@ const CreateTokenPage = lazy(
 const TemplateFilesPage = lazy(
   () => import("./pages/TemplatePage/TemplateFilesPage/TemplateFilesPage"),
 )
+
+const TemplateDocsPage = lazy(
+  () => import("./pages/TemplatePage/TemplateDocsPage/TemplateDocsPage"),
+)
 const TemplateSchedulePage = lazy(
   () =>
     import(
@@ -171,6 +175,8 @@ export const AppRouter: FC = () => {
                   <Route element={<TemplateLayout />}>
                     <Route index element={<TemplateSummaryPage />} />
 
+                    <Route path="docs" element={<TemplateDocsPage />} />
+
                     <Route path="files" element={<TemplateFilesPage />} />
                   </Route>
 
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -110,6 +110,18 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
             >
               Summary
             </NavLink>
+            <NavLink
+              end
+              to={`/templates/${templateName}/docs`}
+              className={({ isActive }) =>
+                combineClasses([
+                  styles.tabItem,
+                  isActive ? styles.tabItemActive : undefined,
+                ])
+              }
+            >
+              Docs
+            </NavLink>
             {data.permissions.canUpdateTemplate && (
               <NavLink
                 to={`/templates/${templateName}/files`}
diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
@@ -0,0 +1,51 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { MemoizedMarkdown } from "components/Markdown/Markdown"
+import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
+import frontMatter from "front-matter"
+import { Helmet } from "react-helmet-async"
+import { pageTitle } from "util/page"
+
+export default function TemplateDocsPage() {
+  const { template, activeVersion } = useTemplateLayoutContext()
+  const styles = useStyles()
+
+  const readme = frontMatter(activeVersion.readme)
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle(`${template.name} · Documentation`)}</title>
+      </Helmet>
+
+      <div className={styles.markdownSection} id="readme">
+        <div className={styles.readmeLabel}>README.md</div>
+        <div className={styles.markdownWrapper}>
+          <MemoizedMarkdown>{readme.body}</MemoizedMarkdown>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export const useStyles = makeStyles((theme) => {
+  return {
+    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: {
+      padding: theme.spacing(0, 3, 5),
+      maxWidth: 800,
+      margin: "auto",
+    },
+  }
+})
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
@@ -5,15 +5,14 @@ import {
   WorkspaceResource,
 } from "api/typesGenerated"
 import { Loader } from "components/Loader/Loader"
-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 frontMatter from "front-matter"
-import { FC } from "react"
+import { FC, useEffect } from "react"
 import { DAUChart } from "../../../components/DAUChart/DAUChart"
 import { TemplateSummaryData } from "./data"
+import { useLocation, useNavigate } from "react-router-dom"
 
 export interface TemplateSummaryPageViewProps {
   data?: TemplateSummaryData
@@ -26,14 +25,22 @@ export const TemplateSummaryPageView: FC<TemplateSummaryPageViewProps> = ({
   template,
   activeVersion,
 }) => {
-  const styles = useStyles()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  useEffect(() => {
+    if (location.hash === "#readme") {
+      // We moved the readme to the docs page, but we known that some users
+      // have bookmarked the readme or linked it elsewhere. Redirect them to the docs page.
+      navigate(`/templates/${template.name}/docs`, { replace: true })
+    }
+  }, [template, navigate, location])
 
   if (!data) {
     return <Loader />
   }
 
   const { daus, resources, versions } = data
-  const readme = frontMatter(activeVersion.readme)
 
   const getStartedResources = (resources: WorkspaceResource[]) => {
     return resources.filter(
@@ -45,14 +52,8 @@ export const TemplateSummaryPageView: FC<TemplateSummaryPageViewProps> = ({
     <Stack spacing={4}>
       <TemplateStats template={template} activeVersion={activeVersion} />
 
-      <div className={styles.markdownSection} id="readme">
-        <div className={styles.readmeLabel}>README.md</div>
-        <div className={styles.markdownWrapper}>
-          <MemoizedMarkdown>{readme.body}</MemoizedMarkdown>
-        </div>
-      </div>
-
       {daus && <DAUChart daus={daus} />}
+
       <TemplateResourcesTable resources={getStartedResources(resources)} />
 
       <VersionsTable versions={versions} />
