Computational Design Practices Project Archive

This respository hosts the source code and site content for the Computational Design Practices project archive.

This site is built with the static site generator Eleventy. Site content is written in Markdown and rendered with additional support for footnotes and implicit figures.

Development

npm install
npx @11ty/eleventy --serve

Browse to http://localhost:8080/ (port 8080 is default but it will switch to a new port if that one is taken, so use whatever port shows up when you run the --serve command).

Directory Structure

Site content files can be found in the following locations:

projects/
├── project-1.md
├── project-2.md
├── project-3.md
├── project-4.md
└── *.md
public/
└── img/
    ├── image-1.jpg
    └── image-2.png
about.md
index.md

All content files are Markdown files with the .md extension. Eleventy template files are Liquid templates with the .html extension in the /_includes/ directory. All other site assets are located in the /public/ directory and are copied to the root of the output folder on site build. The output folder is /_site., but this is a temporary build artifact that is not checked into source control.

Example Project

A new project can be added by creating a new Markdown file in the /projects/ directory with the .md extension.

Projects should have the following YAML frontmatter:

---
layout: project
title: "Example Project: My Subtitle"
author: Seth Thompson
year: 2023
image: /img/2023/diomede-islands.jpg #optional
---

If the project title contains a colon or other special character, it should be enclosed in quotes in order to form valid YAML.

The project thumbnail image should be located in the /public/img/2023/ directory. Since the public folder is copied to the root of the output folder on site build, the image path should start with /img/2023/ rather than /public/img/2023/.

Markdown Features

All site content files can contain standard Markdown syntax. The default Markdown parser for Eleventy is markdown-it.

Footnotes

Site content can additionally include footnotes:

Fusce et sapien rhoncus, tristique nisi ultrices, dictum tellus[^1].

[^1]: Example footnote content.

For more information, see the markdown-it-footnote plugin.

Implicit Figures & Captions

All block-level images in markdown are converted to figures & figure captions:

![This is my image caption.](/img/2023/image-1.jpg)

<!--- <figure><img src="/img/2023/image-1.jpg"><figcaption>This is my image caption.</figcaption></figure> -->

For more information, see the markdown-it-implicit-figures plugin.

Videos

Youtube, Vimeo, and HTML5 videos are supported via Markdown's built-in HTML support.

<!--- 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="/img/2023/earth.mp4"
  controls
  style="aspect-ratio: 16 / 9; width: 100%;">
</video>

Note that each element has a style attribute that sets the aspect ratio and the width to 100%. This allows videos to be responsive and fill the width of the container.

Most videos will have an aspect ratio of 16:9, but this can be changed by modifying the style attribute.

HTML5 video files should be added to the the /public/img/2023/ directory and referenced with the src attribute.

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.