Rendering HTML from Markdown files

.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

components/ContentPage.tsx

@@ -0,0 +1,52 @@
+// import React, { useRef, useState, useEffect } from "react";
+// import { Octokit } from "@octokit/rest";
+
+// const ContentPage: React.FunctionComponent<any> = (props) => {
+//   const octokit = useRef(
+//     new Octokit({
+//       auth: "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",
+//     }).rest.markdown
+//   );
+//   const [text, setText] = useState("");
+//   const [htmlDoc, setHtmlDoc] = useState(null);
+
+//   useEffect(() => {
+//     if (htmlDoc !== null) {
+//       return;
+//     }
+
+//     fetch(
+//       "https://raw.githubusercontent.com/prakharporwal/bank-server/master/README.md"
+//     )
+//       .then((res) => res.text())
+//       .then((data) => {
+//         console.log(data);
+//         setText(data);
+
+//         octokit.current
+//           .render({ text: data })
+//           .then((val) => val.data)
+//           .then((htmlDoc) => {
+//             setHtmlDoc(htmlDoc);
+//             console.log(htmlDoc);
+//           });
+//       })
+//       .catch((err) => {
+//         console.log(err);
+//       });
+//   }, []);
+
+//   return (
+//     <div
+//       style={{
+//         background: "#9f9f9f",
+//         fontFamily: "Lato",
+//         padding: "2rem",
+//         border: "50px solid #151528",
+//         borderRadius: "8px",
+//       }}
+//       dangerouslySetInnerHTML={{ __html: htmlDoc }}
+//     ></div>
+//   );
+// };
+// export default ContentPage;

components/CourseItem.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+
+const CourseItem: React.FunctionComponent<any> = (props) => {
+  return (
+    <Link href={props.route}>
+    <div
+      style={{
+        background: "whitesmoke",
+        border: "2px solid grey",
+        padding: "4px",
+        margin: "2px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "start",
+        justifyContent: "center",
+        width: "70vw",
+      }}
+    >
+      <h2 style={{ textTransform: "capitalize" }}>{props.course_name}</h2>
+      <div style={{display:"flex", gap:"1rem"}}>
+      {props.tags.split(",").map((tag) => {
+        return <span
+            style={{
+                background:"yellow",
+                border:"2px solid grey",
+                borderRadius:"10px",
+                padding:"2px 8px"
+            }}
+        >{tag}</span>;
+      })}
+      </div>
+    </div>
+    </Link>
+  );
+};
+
+export default CourseItem;

components/Layout.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Link from "next/link";
+
+type Metadata = {
+  data: { 
+    title : string
+    date : string
+  }
+  dangerousInnerHTML: string
+}
+
+const Layout: React.FunctionComponent<Metadata> = (props) => {
+  const {title, date} = props.data
+
+  return (
+    <div
+      style={{
+        background: "whitesmoke",
+        fontFamily: "Lato",
+        padding: "2rem",
+        margin: "2rem",
+        border: "2px solid #151528",
+        borderRadius: "8px",
+      }}
+    >
+      <article>
+        <h1>{title}</h1>
+        <p>{date}</p>
+        <div
+          dangerouslySetInnerHTML={{ __html: `${props.dangerousInnerHTML}` }}
+        ></div>
+
+        <Link href="/">Go back</Link>
+      </article>
+    </div>
+  );
+};
+
+export default Layout;