Read docs from disk

Author: CodeStix

.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [["styled-components", { "ssr": true }]]
+  }

components/SideBar.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 import styled from "styled-components";
+import ReactMarkdown from "react-markdown";
+
+const Sidebar = {
+    Home: "",
+};
 
 const Container = styled.div`
-    margin: 2em 0;
+    margin: 1em 0;
     position: sticky;
     top: 1em;
 `;
@@ -14,8 +19,9 @@ const Item = styled.div`
     cursor: pointer;
 
     &:hover {
-        transition: 100ms;
-        background: #0001;
+        transition: 50ms;
+        /* background: #0001; */
+        transform: translateX(3px);
         color: #0972d4;
     }
 `;

package.json

@@ -11,6 +11,7 @@
     "next": "10.0.8",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-markdown": "^5.0.3",
     "styled-components": "^5.2.1"
   },
   "devDependencies": {

pages/docs/[doc].tsx

@@ -0,0 +1,56 @@
+import { GetStaticProps, GetServerSideProps, GetStaticPaths } from "next";
+import fs from "fs/promises";
+import path from "path";
+import ReactMarkdown from "react-markdown";
+import React from "react";
+import { CenterContainer } from "../../components/CenterContainer";
+import { NavBar } from "../../components/NavBar";
+import { SideBar } from "../../components/SideBar";
+import styled from "styled-components";
+
+const ARTICLES_PATH = path.join(process.cwd(), "articles");
+
+interface Props {
+    content: string;
+}
+
+const Container = styled.div`
+    display: grid;
+    gap: 2em;
+    grid-template-columns: 200px 1fr;
+`;
+
+export default function DocPage(props: Props) {
+    return (
+        <>
+            <NavBar />
+            <CenterContainer style={{ margin: "2em 0" }}>
+                <Container>
+                    <div>
+                        <SideBar />
+                    </div>
+                    <div style={{ overflow: "hidden" }}>
+                        <ReactMarkdown>{props.content}</ReactMarkdown>;
+                    </div>
+                </Container>
+            </CenterContainer>
+        </>
+    );
+}
+
+export const getStaticProps: GetStaticProps<Props> = async function (props) {
+    let file = path.join(ARTICLES_PATH, props.params!.doc + ".md");
+    return {
+        props: {
+            content: await fs.readFile(file, "utf-8"),
+        },
+    };
+};
+
+export const getStaticPaths: GetStaticPaths = async function () {
+    let files = await fs.readdir(ARTICLES_PATH);
+    return {
+        paths: files.filter((e) => e.endsWith(".md")).map((e) => "/docs/" + e.slice(0, e.length - 3)),
+        fallback: false,
+    };
+};