Markdown Documentation Updates

Markdown Updates

docs/general_documentation/Adding New Documentation.md

@@ -0,0 +1,11 @@
+# Creating Documentation
+
+Creating documentation is easy! There is a folder called "docs/general_documentation" in the repository. Inside this folder, you can create a new markdown file with the name of the documentation you want to create. For example, if you want to create a documentation called "Adding New Documentation", you can create a file called "Adding New Documentation.md". The file will be automatically pulled into the documentation page of the website, and you can access it by going to the "Documentation" page on the website.
+
+It's as easy as that! Subfolders are currently not supported, so please keep all documentation in the "docs/general_documentation" folder.
+
+# How to write in Markdown format
+
+Markdown is a lightweight markup language with plain text formatting syntax. It is designed so that it can be converted to HTML and many other formats using a tool by the same name. Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
+
+Here is a link to a markdown cheatsheet: [Markdown Cheatsheet](https://www.markdownguide.org/cheat-sheet/)

docs/resources.md

@@ -19,5 +19,5 @@
 
 ## Get Access to The Lab:
 
-[Getting Swite Access](docs/swipe-access)
+[Getting Swipe Access](/swipe-access)
 

src/comps/Hamburger/Hamburger.jsx

@@ -16,6 +16,7 @@ export default function Hamburger() {
         <Link href="/projects">Projects</Link>
         <Link href="/about">About</Link>
         <Link href="/resources">Resources</Link>
+        <Link href="/documentation">Documentation</Link>
         <Link href="https://github.com/Amp-Lab-at-VT/website">Github</Link>
         {/* <Link href="/useful_links">Useless Links</Link> */}
       </div>

src/pages/docs/[slug].jsx

@@ -0,0 +1,56 @@
+import fs from "fs";
+import path from "path";
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import { Paper, Typography, Container } from "@mui/material";
+
+// Page to render markdown content
+export default function DocPage({ content, title }) {
+  return (
+    <Container className="min-h-screen" sx={{ pt: "10px" }}>
+      <Typography variant="h5" gutterBottom>
+        Document: {title}
+      </Typography>
+      <Paper style={{ padding: "20px", margin: "20px" }}>
+        <ReactMarkdown rehypePlugins={[rehypeRaw]}>{content}</ReactMarkdown>
+      </Paper>
+    </Container>
+  );
+}
+
+// Generate paths for each markdown file
+export async function getStaticPaths() {
+  const docsDirectory = path.join(process.cwd(), "docs/general_documentation");
+  const filenames = await fs.promises.readdir(docsDirectory);
+
+  // Create a path for each file, replacing '.md' extension
+  const paths = filenames.map((filename) => ({
+    params: { slug: filename.replace(".md", "") },
+  }));
+
+  return {
+    paths,
+    fallback: false, // Return 404 for paths not generated at build time
+  };
+}
+
+// Fetch the markdown content for each document page
+export async function getStaticProps({ params }) {
+  const { slug } = params;
+  const filePath = path.join(
+    process.cwd(),
+    "docs/general_documentation",
+    `${slug}.md`,
+  );
+
+  // Read the content of the markdown file
+  const content = await fs.promises.readFile(filePath, "utf8");
+
+  return {
+    props: {
+      content, // Pass the markdown content to the page
+      title: slug, // Use the slug as the title
+    },
+  };
+}

src/pages/documentation.jsx

@@ -0,0 +1,104 @@
+import fs from "fs";
+import path from "path";
+import React from "react";
+import { useRouter } from "next/router";
+
+import ArticleIcon from "@mui/icons-material/Article";
+import {
+  Paper,
+  Typography,
+  Button,
+  Box,
+  Stack,
+  Container,
+} from "@mui/material";
+
+// Custom component for document card
+function IconAndName({ icon, title, buttonTitle, color, onClick }) {
+  return (
+    <Paper
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "20px", // Reduced padding
+        margin: "5px", // Reduced margin
+        width: "250px", // Adjusted width
+        height: "250px", // Adjusted height
+        backgroundColor: color,
+        borderRadius: "8px",
+        cursor: "pointer",
+        textAlign: "center", // Center the text
+      }}
+      onClick={onClick}
+    >
+      {icon}
+      <Typography variant="h6" gutterBottom>
+        {title}
+      </Typography>{" "}
+      {/* Adjusted typography */}
+      <Button size="small" color="primary">
+        {buttonTitle}
+      </Button>{" "}
+      {/* Smaller button */}
+    </Paper>
+  );
+}
+
+export default function Documentation({ files }) {
+  const router = useRouter();
+
+  return (
+    <Container className="min-h-screen">
+      <div className="min-h-screen">
+        <div>
+          <h1 className="m-5">Documentation:</h1>
+          <p className="text-left m-5">
+            Below is a list of documentation for the lab. Select one to get
+            started!
+          </p>
+        </div>
+
+        {/* Container that uses Box for wrapping */}
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "flex-start", // Aligns items to the left
+          }}
+        >
+          <Stack
+            direction="row"
+            spacing={2}
+            useFlexGap
+            sx={{
+              flexWrap: "wrap", // Allows items to wrap
+            }}
+          >
+            {files.map((file, index) => (
+              <IconAndName
+                key={index}
+                icon={<ArticleIcon />}
+                title={file}
+                buttonTitle="View Document"
+                color="#f9f9f9"
+                onClick={() => router.push(`/docs/${file.replace(".md", "")}`)} // Redirect on click
+              />
+            ))}
+          </Stack>
+        </Box>
+      </div>
+    </Container>
+  );
+}
+
+// Fetch the list of files in the directory
+export async function getStaticProps() {
+  const docsDirectory = path.join(process.cwd(), "docs/general_documentation");
+
+  // Get a list of all the files in the docs directory
+  const files = await fs.promises.readdir(docsDirectory);
+
+  return { props: { files } };
+}

src/pages/getting_started.jsx

@@ -89,7 +89,7 @@ export default function GettingStarted({ new_members, returning_members }) {
           </p>
         </IconAndName>
         <IconAndName
-          href="/docs/swipe-access"
+          href="/swipe-access"
           icon={<GiSwipeCard> </GiSwipeCard>}
           title="Get Lab Swipe Access"
           buttonTitle="Click here to begin"

src/pages/soldering/booking.jsx

@@ -17,10 +17,7 @@ export default function Booking() {
           You must be logged into your Microsoft account to access. If the
           application doesn't load, please log into your Microsoft account
           separately and return to this page
-
-          <Button href={src}>
-            Click here if the application doesn't load
-          </Button>
+          <Button href={src}>Click here if the application doesn't load</Button>
         </Alert>
         <iframe style={{ height: "90vh", border: "none" }} src={src}></iframe>
       </Stack>