Table of Contents Component

frontend/src/Components/Article/SectionContent.js → frontend/src/Components/Article/Section/SectionContent.js

@@ -1,4 +1,4 @@
-import {Stack } from "react-bootstrap";
+import { Stack } from "react-bootstrap";
 
 //Component for the body content of an article section's content
 export default function SectionContent({ content }) {

frontend/src/Components/Article/SectionHeader.js → frontend/src/Components/Article/Section/SectionHeader.js

@@ -1,6 +1,5 @@
 import { Stack } from "react-bootstrap";
 
-//Component for the title of a article section
 //Component for the title of a article section
 export default function SectionHeader({ header }) {
   return (

frontend/src/Components/Article/Section/TableOfContents.js

@@ -0,0 +1,23 @@
+import { Stack } from "react-bootstrap";
+import SectionHeader from "./SectionHeader";
+
+/*
+component for table of contents in article page, takes in array of strings representing 
+table of content headings
+
+-will display the number corresponding to its position next to it
+*/
+export default function TableOfContents({ content_headings }) {
+  return (
+    <Stack>
+      <SectionHeader header={"Table of Contents"} />
+      <Stack className="pt-1 ps-3" gap={2}>
+        {content_headings.map((content_heading, index) => (
+          <p className="table-content-heading ps-3">
+            {index + 1}. {content_heading}
+          </p>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}

frontend/src/pages/ArticleExample.js

@@ -1,8 +1,10 @@
 import ArticleHeader from "../Components/Article/ArticleHeader/ArticleHeader";
-import BodySection from "../Components/Article/BodySection";
+import BodySection from "../Components/Article/Section/BodySection";
 import Header from "../Components/Header";
 import TopicList from "../Components/Article/Topics/TopicList";
+import TableOfContents from "../Components/Article/Section/TableOfContents";
 import ImageBanner from "../Components/Article/ImageBanner";
+import TableOfContents from "../Components/Article/Section/TableOfContents"
 //ONLY for displaying article components until we can construct the full page
 export default function ArticleExample() {
   return (
@@ -20,8 +22,28 @@ export default function ArticleExample() {
             author={"David Lam"}
             date={"October 29, 2023"}
           />
+
           <div style={{ display: "flex", marginTop: "2rem" }}>
-            <div style={{ width: "70%" }}>
+            <div
+              style={{
+                width: "70%",
+                display: "flex",
+                flexDirection: "column",
+                gap: "2rem",
+              }}
+            >
+              <TableOfContents
+                content_headings={[
+                  "Introduction to Machine Learning",
+                  "The Fundamentals of Machine Learning",
+                  "Types of Machine Learning Algorithms",
+                  "Real-World Applications of Machine Learning",
+                  "Challenges and Limitations in Machine Learning",
+                  "Ethical Considerations in Machine Learning",
+                  "Future Prospects and Developments in Machine Learning",
+                  "Conclusion and Key Takeaways",
+                ]}
+              />
               <BodySection
                 title={"Introduction"}
                 body={

frontend/src/scss/ArticleComponents.scss

@@ -9,33 +9,6 @@
   width: calc(100% - 0.7rem);
 }
 
-//SectionContent
-.section-content-marker-container {
-  display: flex;
-  width: 0.7rem;
-  justify-content: center;
-  align-items: stretch;
-}
-
-.section-content-marker {
-  display: inline-block;
-  width: 2px;
-  background-color: $primary;
-}
-
-.section-content-text {
-  width: calc(100% - 0.7rem);
-  font-size: calc(1rem + 0.1vw);
-
-  @media screen and (max-width: 800px) {
-    font-size: calc(0.65rem + 0.3vw);
-  }
-
-  @media screen and (max-width: 500px) {
-    font-size: calc(0.7rem + 0.3vw);
-  }
-}
-
 //ArticleHeaderDesc
 .article-desc {
   color: #5d5c5c;
@@ -61,6 +34,13 @@
   }
 }
 
+//Table of Contents
+.table-content-heading {
+  color: #5d5c5c;
+  font-weight: 600;
+  margin: 0;
+}
+
 //SectionContent
 .section-content-marker-container {
   display: flex;
@@ -75,7 +55,8 @@
   background-color: $primary;
 }
 
-.section-content-text {
+.section-content-text,
+.table-content-heading {
   width: calc(100% - 0.7rem);
   font-size: calc(1rem + 0.1vw);
 
@@ -89,7 +70,6 @@
 }
 
 //Topics List
-
 .topic-list-title,
 .topic-link {
   font-size: calc(0.65rem + 0.1vw);
@@ -107,8 +87,23 @@
   filter: brightness(0.6);
   text-decoration: underline;
 }
-.section-header {
-  width: calc(100% - 0.7rem);
+
+//Image Banner
+.article-image-banner {
+  width: 100%;
+  object-fit: cover;
+  height: 25vh;
+  max-height: 400px;
+  min-height: 300px;
+
+  @media screen and (max-width: 800px) {
+    min-height: 200px;
+    max-height: 300px;
+  }
+  @media screen and (max-width: 500px) {
+    min-height: 100px;
+    max-height: 150px;
+  }
 }
 
 //Image Banner