Add Lectures page with YAML-based content loading [#41] (#43)

* add placeholder Lectures page and link it to sidebar [#41]

* feat: load lectures from src/data/lectures.yml and style page like other sections [#41]

* style: fix formatting in lectures.astro to pass Prettier check [#41]

* Remove placeholder content from lectures.yml as per feedback

Author: Dymon18

package-lock.json

@@ -21,6 +21,7 @@
     "astro": "^4.11.1",
     "axios": "^1.7.7",
     "fs": "^0.0.1-security",
+    "js-yaml": "^4.1.0",
     "katex": "^0.16.10",
     "mathjax": "^3.2.2",
     "mathjax-full": "^3.2.2",

package.json

@@ -28,7 +28,8 @@ const sections = [
     icon: "mdi mdi-video",
     title: "Lectures",
     disabled: false,
-    link: "https://www.youtube.com/playlist?list=PLY7TEz3ZRQHTnY56q2uJtdXg-bl-c0sDk",
+    // link: "https://www.youtube.com/playlist?list=PLY7TEz3ZRQHTnY56q2uJtdXg-bl-c0sDk",
+    link: "/lectures",
   },
   { icon: "mdi mdi-creation", title: "Sandbox", disabled: true },
   // { icon: "mdi mdi-beaker", title: "Experiments", disabled: true },

src/components/Sidebar/Sidebar.astro

@@ -0,0 +1,3 @@
+- course: COMP 2804
+  title: Fall 2020 Lecture
+  link: https://www.youtube.com/playlist?list=PLY7TEz3ZRQHTnY56q2uJtdXg-bl-c0sDk

src/data/lectures.yml

@@ -0,0 +1,57 @@
+---
+import Back from "@components/Back/Back.astro";
+import { default as Layout } from "src/layouts/Content/Content.astro";
+import RowCard from "@components/RowCard/RowCard.astro";
+import fs from "fs";
+import path from "path";
+import yaml from "js-yaml";
+
+const filePath = path.resolve("src/data/lectures.yml");
+const file = fs.readFileSync(filePath, "utf8");
+const lectures = yaml.load(file);
+
+const grouped = {};
+for (const lec of lectures) {
+  if (!grouped[lec.course]) grouped[lec.course] = [];
+  grouped[lec.course].push(lec);
+}
+---
+
+<Layout title="Lectures">
+  <div class="Question__bar">
+    <Back href="/" label="Home" />
+  </div>
+
+  <h1>📚 Lectures</h1>
+  <p>Playlists of recorded lecture videos categorized by course.</p>
+
+  <div style="margin-top:2.5rem"></div>
+
+  {
+    Object.entries(grouped).map(([course, list]) => (
+      <>
+        <h2>{course}</h2>
+        <div class="Items">
+          {list.map((lec) => (
+            <a href={lec.link} target="_blank">
+              <RowCard title={lec.title} icon="mdi mdi-video" />
+            </a>
+          ))}
+        </div>
+        <div style="margin-top:2.5rem" />
+      </>
+    ))
+  }
+</Layout>
+
+<style>
+  p {
+    color: gray;
+  }
+
+  .Items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+</style>