gettingstuffdone / website

Source code for website.

Oxide Computer Company website

Table of Contents

• Prerequisites
• Stack
• Running locally
• Adding new content
  • Blog posts
  • Team members
• Previewing the production build
• Styling with TailwindCSS
  • Global CSS utilities.

Prerequisites

• Node and NPM

Stack

• Eleventy for templates and site generation
• Tailwindcss for a utility first CSS workflow

Running locally

# install the project dependencies
npm install

# run the build and server locally
npm run watch

Adding new content

Blog posts

Add a new markdown file to src/site/blog. Make sure it has the following metadata at the top of the file. To make things easy on yourself, duplicate an existing post.

---
title: 'Post title'
subtitle: 'Post subtitle (if any)'
date: 2020-02-03T23:00:00
tags: ['post', 'announcements']
authors: ["first-last", "first-last", "first-last"]
description: |
    A description that is used in snippets.
---

The authors field can hold more than one author and is the name of the json file for the specific author in _data/team.

Make sure to add a description to your post for the main pages as well as social media cards.

Team members

Add a json file to _data/team in the following format:

{
  "weight": 1,
  "name": "Jessie Frazelle",
  "title": "CPO",
  "twitter": "jessfraz",
  "github": "jessfraz",
  "linkedin": "https://www.linkedin.com/in/jessie-frazelle/",
  "blog": "https://jess.dev"
}

The order for the team page is currently set in _date/team/members.json.

Previewing the production build

When building for production, an extra build step will strip out all CSS classes not used in the site. This step is not performed during the automatic rebuilds which take place during dev.

# run the production build
npm run build

Styling with TailwindCSS

This site uses TailwindCSS to offer utility CSS classes and provide a rapid means to styling the site. This means that most styling can be done without writing any additional CSS. Instead, utility classes can be added directly to the HTML. This may not be to everyone's tastes, but it can provide some very rapid development and also offer surprising levels of familiarity for those used to working in this way (since the conventions and classes are not per site.)

While running/developing locally, the npm run start command will recompile the site as files are saved and this includes the CSS pipeline from Tailwind.

Global CSS utilities.

A small number of bespoke CSS rules are provided for efficiency of repeated or global classes. These reside in src/site/_includes/css/tailwind.css