Initial commit

.eleventy.js

@@ -0,0 +1,93 @@
+const markdownIt = require("markdown-it");
+const markdownItFootnote = require("markdown-it-footnote");
+const markdownImplicitFigures = require("markdown-it-implicit-figures");
+const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+
+const yaml = require('js-yaml');
+const fs = require('fs');
+const path = require('path');
+
+module.exports = function (eleventyConfig) {
+  const markdownLib = markdownIt({
+    html: true,
+    linkify: true,
+  })
+  .use(markdownItFootnote)
+  .use(markdownImplicitFigures, { figcaption: true });
+
+  eleventyConfig.setLibrary("md", markdownLib);
+
+  // copy assets from public/ directory to root of site build
+  eleventyConfig.addPassthroughCopy({ public: "/" });
+
+  // add base plugin to allow deployment to GitHub Pages subfolder
+  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+
+  // add filter to normalize links to array of objects with url and text properties
+  eleventyConfig.addFilter("normalizeLinks", function (links) {
+    if (typeof links === "undefined") return;
+    if (!Array.isArray(links)) {
+      throw new Error(
+        "links must be an array of urls or objects with url and text properties"
+      );
+    }
+    return links.map((link) => {
+      if (typeof link === "string") {
+        return { url: link, text: link };
+      }
+      if (typeof link === "object") {
+        if (typeof link.url === "undefined") {
+          throw new Error("link object must have url property");
+        }
+        if (typeof link.text === "undefined") {
+          throw new Error("link object must have text property");
+        }
+        return link;
+      }
+      throw new Error("link must be a string or object");
+    });
+  });
+
+  // Copy all HTML files that aren't index.html.
+  eleventyConfig.addPassthroughCopy("work/**/!(index).html");
+
+  // Copy media from their source folders to their respective published folders.
+  eleventyConfig.addPassthroughCopy("work/**/*.png");
+  eleventyConfig.addPassthroughCopy("work/**/*.jpg");
+  eleventyConfig.addPassthroughCopy("work/**/*.jpeg");
+  eleventyConfig.addPassthroughCopy("work/**/*.gif");
+  eleventyConfig.addPassthroughCopy("work/**/*.cur");
+
+  eleventyConfig.addPassthroughCopy("work/**/*.mov");
+  eleventyConfig.addPassthroughCopy("work/**/*.mp3");
+  eleventyConfig.addPassthroughCopy("work/**/*.mp4");
+
+  eleventyConfig.addPassthroughCopy("work/**/*.js");
+  eleventyConfig.addPassthroughCopy("work/**/*.css");
+
+  eleventyConfig.addPassthroughCopy("work/**/*.obj");
+  eleventyConfig.addPassthroughCopy("work/**/*.csv");
+  eleventyConfig.addPassthroughCopy("work/**/*.geojson");
+
+  eleventyConfig.addPassthroughCopy("work/**/*.eot");
+  eleventyConfig.addPassthroughCopy("work/**/*.ttf");
+  eleventyConfig.addPassthroughCopy("work/**/*.woff");
+  eleventyConfig.addPassthroughCopy("work/**/*.woff2");
+
+  // Open the work/students.yaml file and create a collection from it for
+  // Eleventy to render.
+  const yamlData = yaml.load(fs.readFileSync(path.join(__dirname, 'work/students.yaml'), 'utf8'));
+
+  eleventyConfig.addCollection('students', function(collection) {
+    return Object.entries(yamlData).map(([folder, name]) => ({
+      folder,
+      name
+    }));
+  });
+
+  return {
+    dir: {
+      layouts: "_layouts"
+    }
+  }
+};

.eleventyignore

@@ -0,0 +1,2 @@
+README.md
+**/_template/

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+name: Deploy static content to Pages
+
+on:
+  push:
+    branches:
+      - main
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+          cache: npm
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+      - name: Install dependencies
+        run: npm ci
+      - name: Build site
+        run: npm run build -- --pathprefix="${{ steps.pages.outputs.base_path }}"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./_site
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1,46 @@
+# Ignore eleventy output when doing manual tests
+_site/
+
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+.vscode

README.md

@@ -0,0 +1,137 @@
+# GSAPP CDP Colloquium 1 Course Site
+
+This repository hosts the source code and site content for the Summer 2024
+[Computational Design Practices](https://www.arch.columbia.edu/programs/15-m-s-computational-design-practices) 
+Colloquium I course website.
+
+## Site Structure
+
+The site contains one folder, `work`, that contains student work, plus a few Markdown files:
+
+```
+about.md
+index.md
+public/
+work/
+├── students.yaml
+├── student1
+|   ├── index.html
+|   ├── featured.jpg
+|   ├── style.css
+|   ├── image-1.jpg
+|   ├── image-2.jpg
+├── student2
+|   ├── index.html
+|   ├── featured.jpg
+|   ├── style.css
+|   ├── image-1.jpg
+|   ├── image-2.jpg
+├── student2
+|   ├── index.html
+|   ├── featured.jpg
+|   ├── style.css
+|   ├── image-1.jpg
+|   ├── image-2.jpg
+├── *
+```
+
+## Work Folders and `index.html`
+
+These folders are intended to be independent websites, so the `index.html` files
+do not included the typical frontmatter needed for Eleventy to catalog and
+process them.
+
+To ensure we can render a nice catalog for the work, we include a catalog file
+at `work/students.yaml` that maps folders to names. Eleventy then reads this
+to generate the `work/index.html` file at render time.
+
+## Previewing Your Site
+
+When you get started, you can download your `index.html` file and set up a
+folder to iterate on your work locally. You can then preview your own site
+by just opening it in a browser (double-click on the file in macOS Finder,
+for example) or with Python like this:
+
+    python -m http.server
+
+Then navigate to `https://localhost:8000` or whatever URL it provides.
+
+## Files
+
+Include images, CSS, JavaScript, and other media in the folder alongside your
+`index.html` file. Then you can reference them in simple image tags relatively
+like this:
+
+```html
+<img src="image.png">
+<link href="style.css" rel="stylesheet" />
+<script src="script.js"></script>
+```
+
+### Videos
+
+If animated gifs get too large (over a few MB), consider converting it to a
+movie format like `mov` or `mp4.`
+
+For longer feature videos, please consider hosting them on external platforms
+like YouTube and Vimeo. Such services process videos so they can be streamed in
+different resolutions and adapt to a visitor's connection bandwidth.
+
+YouTube, Vimeo, and videos supported by HTML5 can be added thusly:
+
+```html
+<!--- YouTube -->
+<iframe
+  src="https://www.youtube.com/embed/laiVuCmEjlg"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen
+  style="aspect-ratio: 16 / 9; width: 100%;">
+</iframe>
+
+<!--- Vimeo -->
+<iframe
+  src="https://player.vimeo.com/video/158673446?h=30e98ac368&title=0&byline=0&portrait=0"
+  frameborder="0"
+  allow="autoplay; fullscreen; picture-in-picture"
+  allowfullscreen
+  style="aspect-ratio: 16 / 9; width: 100%;">
+</iframe>
+
+<!--- HTML5 video -->
+<video
+  src="earth.mp4"
+  controls
+  style="aspect-ratio: 16 / 9; width: 100%;">
+</video>
+```
+
+Note that each element has a `style` attribute that sets the width to 100%. This 
+causes them to be responsive and fill the width of the container.
+
+The aspect ratio can be changed by modifying the `style` attribute to fit your video.
+
+## Development
+
+This is only for the instructional team.
+
+This site is built with [Eleventy](https://www.11ty.dev/). After cloning the repo,
+run the site with:
+
+```
+npm install
+npx @11ty/eleventy --serve
+```
+
+Browse to <http://localhost:8080/> or use the URL outputted by `yarn start`.
+
+Sometimes this fails with some obscure errors about the passthrough copy. In this 
+case, one troubleshooting step is to completely remove the `_site` folder with 
+`rm -rf _site` and try serving the site again.
+
+## Deployment
+
+This repository is automatically deployed to GitHub Pages whenever a new commit 
+is pushed to the `main` branch using a GitHub workflow located at 
+`.github/workflows/deploy.yml`.
+

_layouts/article.html

@@ -0,0 +1,7 @@
+---
+layout: page
+---
+
+<article>
+  {{ content }}
+</article>

_layouts/page.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="description" content="An archive of student final projects from the Computation Design Practices degree program at Columbia GSAPP." />
+
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link href="/normalize.css" rel="stylesheet" />
+    <link href="/main.css" rel="stylesheet" />
+
+    <title>{{ title }}</title>
+  </head>
+  <body>
+    <header>
+      <h1>
+        <a href="https://www.arch.columbia.edu/" target="_blank">
+          Columbia GSAPP
+        </a>
+      </h1>
+
+      <h2>
+        <a href="https://www.arch.columbia.edu/programs/15-m-s-computational-design-practices">
+          M.S. Computational Design Practices
+        </a><br>
+        {% unless page.url == "/" %}
+          <a href="/">Home</a> →
+        {% endunless %}
+        {{ title }}
+      </h2>
+
+      <a href="/about">About</a>
+    </header>
+
+    <main>
+      {{ content }}
+    </main>
+
+    <footer></footer>
+  </body>
+</html>