convert workshops from yaml to md

acmcsufoss · Feb 23, 2024 · 5165f6d · 5165f6d
1 parent 8381d86
commit 5165f6d
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 101 deletions.
diff --git a/lib/projects/ssr.tsx b/lib/projects/ssr.tsx
@@ -1,4 +1,4 @@
-import { CSS, Helmet, render } from "#/deps.ts";
+import { Helmet, render } from "#/deps.ts";
 import { withLayout } from "#/lib/shared/layout/mod.ts";
 import { PageHeading } from "#/lib/shared/page_heading/mod.ts";
 import type { Project } from "./projects.ts";
@@ -117,17 +117,15 @@ function ProjectPageComponent(props: { baseURL: string; project: Project }) {
           name="description"
           content={props.project.attrs?.description}
         />
-        <style>{CSS}</style>
       </Helmet>
 
       <article
         class="markdown-body"
         dangerouslySetInnerHTML={{ __html: html }}
       />
 
-      <hr />
-
       <ProjectMetadataTableComponent project={props.project} />
+
       <footer>
         <a href="../projects.html">↩ Projects</a>
       </footer>

diff --git a/lib/workshops/ssr.tsx b/lib/workshops/ssr.tsx
@@ -1,4 +1,4 @@
-import { Helmet } from "#/deps.ts";
+import { Helmet, render } from "#/deps.ts";
 import { withLayout } from "#/lib/shared/layout/mod.ts";
 import { PageHeading } from "#/lib/shared/page_heading/mod.ts";
 import type { Workshop, WorkshopGroup } from "./workshops.ts";
@@ -24,7 +24,7 @@ function WorkshopGroupsTableComponent(
         .map((group) => (
           <tr>
             <td>
-              <a href={`series/${group.groupID}.html`}>{group.groupID}</a>
+              <a href={`series/${group.id}.html`}>{group.id}</a>
             </td>
             <td>{group.workshops.length}</td>
           </tr>
@@ -94,22 +94,27 @@ function WorkshopGroupTableComponent(
 }
 
 function WorkshopGroupPageComponent(
-  props: { group: WorkshopGroup },
+  props: { baseURL: string; group: WorkshopGroup },
 ) {
+  const html = render(props.group.md, { baseUrl: props.baseURL });
   return (
     <main>
       <Helmet>
         <html lang="en" amp />
         <title>
-          {props.group.groupID} - Open Source Software workshops
+          {props.group.id} - Open Source Software workshops
         </title>
         <meta
           name="description"
-          content={`Workshops in the ${props.group.groupID} series`}
+          content={`Workshops in the ${props.group.id} series.`}
         />
       </Helmet>
 
-      <h1>{props.group.groupID}</h1>
+      <article
+        class="markdown-body"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+
       <WorkshopGroupTableComponent workshops={props.group.workshops} />
       <footer>
         <a href="../workshops.html">↩ Workshops</a>
@@ -120,8 +125,9 @@ function WorkshopGroupPageComponent(
 
 export function renderWorkshopGroupPageHTML(
   group: WorkshopGroup,
+  baseURL = "/",
 ) {
   return withLayout(
-    <WorkshopGroupPageComponent group={group} />,
+    <WorkshopGroupPageComponent group={group} baseURL={baseURL} />,
   );
 }
diff --git a/lib/workshops/walk.ts b/lib/workshops/walk.ts
@@ -1,17 +1,10 @@
 import { expandGlob } from "#/deps.ts";
-import type { WorkshopGroup } from "./workshops.ts";
-import { parseWorkshopsYAML } from "./workshops.ts";
+import { parseWorkshopGroup } from "./workshops.ts";
 
-function trimExtension(path: string): string {
-  return path.replace(/\.[^.]*$/, "");
-}
-
-export async function* walkWorkshopsYAML(glob: string | URL) {
+export async function* walkWorkshopGroups(glob: string | URL) {
   for await (const stat of expandGlob(glob)) {
     const content = await Deno.readTextFile(stat.path);
-    const groupID = trimExtension(stat.name);
-    const workshops = parseWorkshopsYAML(content);
-    const group: WorkshopGroup = { groupID, workshops };
+    const group = parseWorkshopGroup(stat.name, content);
     yield group;
   }
 }
diff --git a/lib/workshops/workshops.ts b/lib/workshops/workshops.ts
@@ -1,7 +1,12 @@
-import { parseYAML } from "#/deps.ts";
+import { extract, test } from "#/deps.ts";
 
 export interface WorkshopGroup {
-  groupID: string;
+  id: string;
+  md: string;
+  workshops: Workshop[];
+}
+
+export interface WorkshopGroupAttrs {
   workshops: Workshop[];
 }
 
@@ -29,13 +34,19 @@ export function isWorkshops(obj: unknown): obj is Workshop[] {
   return Array.isArray(obj) && obj.every((workshop) => isWorkshop(workshop));
 }
 
-export function parseWorkshopsYAML(
-  content: string,
-): Workshop[] {
-  const workshops = parseYAML(content);
-  if (!isWorkshops(workshops)) {
-    throw new Error("Invalid workshops");
+export function parseWorkshopGroup(
+  filename: string,
+  md: string,
+): WorkshopGroup {
+  const id = filename.replace(/\.md$/, "");
+  if (!test(md)) {
+    throw new Error(`Invalid workshop group: ${id}`);
   }
 
-  return workshops;
+  const extracted = extract<WorkshopGroupAttrs>(md);
+  return {
+    id,
+    md: extracted.body,
+    workshops: extracted.attrs.workshops,
+  };
 }
diff --git a/main.tsx b/main.tsx
@@ -8,7 +8,7 @@ import {
 import {
   renderWorkshopGroupPageHTML,
   renderWorkshopGroupsPageHTML,
-  walkWorkshopsYAML,
+  walkWorkshopGroups,
   type WorkshopGroup,
 } from "#/lib/workshops/mod.ts";
 import { withLayout } from "#/lib/shared/layout/mod.ts";
@@ -65,24 +65,22 @@ async function main(args: string[]) {
   // Render workshops assets.
   const workshopGroups: WorkshopGroup[] = [];
   for await (
-    const group of walkWorkshopsYAML(join(flags.indir, "workshops", "*.yaml"))
+    const group of walkWorkshopGroups(join(flags.indir, "workshops", "*.md"))
   ) {
     workshopGroups.push(group);
-    const html = renderWorkshopGroupPageHTML(group);
+    const html = renderWorkshopGroupPageHTML(group, flags["base-url"]);
     await Deno.writeTextFile(
-      join(flags.outdir, "series", `${group.groupID}.html`),
+      join(flags.outdir, "series", `${group.id}.html`),
       html,
     );
     const json = JSON.stringify(group, null, 2);
     await Deno.writeTextFile(
-      join(flags.outdir, "series", `${group.groupID}.json`),
+      join(flags.outdir, "series", `${group.id}.json`),
       json,
     );
   }
 
-  const workshopsIndexHTML = renderWorkshopGroupsPageHTML(
-    workshopGroups,
-  );
+  const workshopsIndexHTML = renderWorkshopGroupsPageHTML(workshopGroups);
   await Deno.writeTextFile(
     `${flags.outdir}/workshops.html`,
     workshopsIndexHTML,

diff --git a/workshops/spring2024.md b/workshops/spring2024.md
@@ -0,0 +1,20 @@
+---
+workshops:
+  - title: "Spring 2024 Open Source Software Kickoff"
+    description: "Launch into the vast expanse of collaborative development, exploring new frontiers and innovating together!"
+    timestamp: "2024-02-08"
+    url: "https://acmcsuf.com/spring24-oss-kickoff"
+  - title: "Making First Contributions"
+    description: "Make your first open source contribution and learn the basics of Git and GitHub."
+    timestamp: "2024-02-15"
+    url: "https://acmcsuf.com/1st-slides"
+  - title: "How to win FullyHacks"
+    description: "How to win a hackathon, and how to win FullyHacks in particular."
+    timestamp: "2024-02-22"
+    url: "https://acmcsuf.com/winning-fh"
+---
+
+# Spring 2024 workshops
+
+Workshops are a great way to learn new skills and meet new people. Here are the
+workshops we have hosted during the Spring 2024 semester.
diff --git a/workshops/spring2024.yaml b/workshops/spring2024.yaml
diff --git a/workshops/summer2023.md b/workshops/summer2023.md
@@ -0,0 +1,48 @@
+---
+workshops:
+  - title: "Intro to Deno Kv"
+    description: "Learn how to use Deno Kv in celebration of the Deno Kv Hackathon."
+    timestamp: "2023-06-14"
+    url: "https://acmcsuf.com/denokv"
+  - title: "Intro to design documents"
+    description: "Learn how to write a design document and why it's important."
+    timestamp: "2023-06-23"
+    url: "https://acmcsuf.com/dd"
+  - title: "Intro to HTTP APIs"
+    description: "Learn how to create and use HTTP APIs."
+    timestamp: "2023-06-30"
+    url: "https://acmcsuf.com/api-workshop"
+  - title: "Intro to acmcsuf.com"
+    description: "Learn how to contribute to the ACM CSUF website."
+    timestamp: "2023-07-07"
+    url: "https://acmcsuf.com/5.1-rampup"
+  - title: "Intro to JavaScript"
+    description: "Learn the basics of JavaScript and how to use it in web development."
+    timestamp: "2023-07-14"
+    url: "https://acmcsuf.com/js-workshop"
+  - title: "Intro to TypeScript"
+    description: "Learn the basics of TypeScript and how to use it in web development."
+    timestamp: "2023-07-21"
+    url: "https://acmcsuf.com/ts-workshop"
+  - title: "Intro to Go"
+    description: "Learn the basics of Go and how to use it in web development."
+    timestamp: "2023-07-28"
+    url: "https://acmcsuf.com/go-workshop"
+  - title: "Intro to Python"
+    description: "Learn the basics of Python and how to use it in web development."
+    timestamp: "2023-08-04"
+    url: "https://github.com/acmcsufoss/py-workshop#readme"
+  - title: "How to start an open source project"
+    description: "Learn how to start an open source project and how to maintain it."
+    timestamp: "2023-08-11"
+    url: "https://acmcsuf.com/start-oss"
+  - title: "API Design"
+    description: "Learn how to design an API and how to use it in web development."
+    timestamp: "2023-08-18"
+    url: "https://acmcsuf.com/api-design-workshop"
+---
+
+# Hot Open Source Summer 2023 Workshops
+
+Here are the workshops we have hosted during the
+[Hot Open Source Summer 2023 hackathon](https://acmcsuf.com/hot).
diff --git a/workshops/summer2023.yaml b/workshops/summer2023.yaml