Update to github-pages@228 (#2067)

* Update to github-pages@228

* Add webrick

.babelrc

@@ -1,9 +1,10 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
       {
-        "forceAllTransforms": true
+        "useBuiltIns": "entry",
+        "targets": "> 2%"
       }
     ]
   ]

.gitattributes

@@ -0,0 +1 @@
+yarn.lock binary

.github/workflows/build.yml

@@ -0,0 +1,26 @@
+name: Build and test
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.14.2'
+          cache: yarn
+
+      - name: Use Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '2.7.5'
+          bundler-cache: true
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn test
+      - run: yarn test:smoke

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+name: Deploy
+on:
+  push:
+    branches:
+      master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: "Notes (read me) 📖"
+        run: |
+          # About this workflow:
+          # This workflow generates GitHub pages, but IT IS NOT USED. It is
+          # only generated as an emergency fallback in case Netlify goes down 😊
+
+      - uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.14.2'
+          cache: yarn
+
+      - name: Use Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '2.7.5'
+          bundler-cache: true
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+
+      - name: "Deploy to gh-pages 🚀"
+        uses: JamesIves/github-pages-deploy-action@releases/v3
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: _site
+
+      - name: "Deploy to mirror 🚀"
+        uses: JamesIves/github-pages-deploy-action@releases/v3
+        with:
+          ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          REPOSITORY_NAME: rstacruz/devhints-mirror
+          BRANCH: gh-pages
+          FOLDER: _site
+
+      - name: "Notify Slack 📢"
+        uses: rtCamp/action-slack-notify@v2.0.2
+        env:
+          SLACK_WEBHOOK: ${{ secrets.SLACK_DEPLOY_WEBHOOK_URL }}

.github/workflows/rebase.yml

@@ -0,0 +1,24 @@
+# https://github.com/cirrus-actions/rebase
+on:
+  issue_comment:
+    types: [created]
+
+name: Automatic rebase
+jobs:
+  rebase:
+    name: Rebase
+    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Automatic Rebase
+      uses: cirrus-actions/rebase@v1.2.0
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  # https://github.community/t5/GitHub-Actions/Workflow-is-failing-if-no-job-can-be-ran-due-to-condition/m-p/38186#M3250
+  always_job:
+    name: Aways run job
+    runs-on: ubuntu-latest
+    steps:
+      - name: Always run
+        run: echo "This job is used to prevent the workflow to fail when all other jobs are skipped."

.gitignore

@@ -3,3 +3,9 @@ _site
 .jekyll-metadata
 /node_modules
 /vendor
+.idea/
+.cache/
+
+# Generated by 'yarn dev'
+/_includes/2017/critical/*
+/assets/packed/*

.gitpod.yml

@@ -0,0 +1,15 @@
+image: gitpod/workspace-full
+
+ports:
+  - port: 4001
+    onOpen: open-preview
+
+tasks:
+  - init: yarn install && bundle install
+    command: env PORT=4001 yarn run dev
+
+github:
+  # Prebuild the docker image for gitpod - https://www.gitpod.io/docs/prebuilds/
+  prebuilds:
+    # enable for the master/default branch
+    master: true

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "none"
+}

.travis.yml

@@ -1,10 +0,0 @@
-language: ruby
-rvm:
-  - 2.5.0
-script:
-  - make -B _site
-  - if ! make test; then make test-warning; exit 16; fi
-cache:
-  directories:
-    - node_modules
-    - _site

CNAME

@@ -1 +0,0 @@
-devhints.io

CONTRIBUTING.md

@@ -1,8 +1,23 @@
 # Developer notes
 
+## Gitpod
+
+This repository supports contribution using [gitpod](https://gitpod.io) which is online IDE using [Theia](https://github.com/eclipse-theia/theia).
+
+To open-up the environment simple natigate on https://gitpod.io/#https://github.com/rstacruz/cheatsheets
+
+Or using a button:<br>
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rstacruz/cheatsheets)
+
+### Preview built website
+
+To preview the website you need to first build it then you can navigate to file that you are trying to contribute and preview directly.
+
+<img src='_docs/images/gitpod_preview_tut.png' width=828 height=459/>
+
 ## Starting a local instance
 
-This starts Jekyll and Webpack. This requires recent versions of [Node.js], [Yarn], [Ruby] and [Bundler] installed.
+This starts Jekyll and Parcel. This requires recent versions of [Node.js], [Yarn], [Ruby] and [Bundler] installed.
 
 ```bash
 yarn install
@@ -27,7 +42,7 @@ First time setup:
 docker-compose build
 
 # First-time setup
-docker-compose run --rm web bundle install
+docker-compose run --rm web bundle install && docker-compose run --rm web yarn install
 ```
 
 Starting the server:
@@ -42,9 +57,11 @@ See <https://devhints.io/cheatsheet-styles> for a reference on styling.
 
 ## JavaScript
 
-When updating JavaScript, be sure webpack is running (`yarn run dev` takes care of this).
+When updating JavaScript, be sure Parcel is running (`yarn dev` takes care of this).
 
-This auto-updates `/assets/packed/` with sources in `_js/`.
+This auto-updates `/assets/packed/` and `_includes/2017/critical/` with sources in `_parcel/`.
+
+Before committing, run `yarn parcel:build` first.
 
 ## JavaScript tests
 
@@ -61,16 +78,16 @@ Each sheet supports these metadata:
 ```yml
 ---
 title: React.js
-layout: 2017/sheet   # 'default' | '2017/sheet'
+layout: 2017/sheet # 'default' | '2017/sheet'
 
 # Optional:
 category: React
-updated: 2017-08-30       # To show in the updated list
-ads: false                # Add this to disable ads
-weight: -5                # lower number = higher in related posts list
-deprecated: true          # Don't show in related posts
-deprecated_by: /enzyme    # Point to latest version
-prism_languages: [vim]    # Extra syntax highlighting
+updated: 2020-06-14
+ads: false # Add this to disable ads
+weight: -5 # lower number = higher in related posts list
+deprecated: true # Don't show in related posts
+deprecated_by: /enzyme # Point to latest version
+prism_languages: [vim] # Extra syntax highlighting
 intro: |
   This is some *Markdown* at the beginning of the article.
 tags:
@@ -79,9 +96,10 @@ tags:
 
 # Special pages:
 # (don't set these for cheatsheets)
-type: home                # home | article | error
-og_type: website          # opengraph type
+type: home # home | article | error
+og_type: website # opengraph type
 ---
+
 ```
 
 ## Prism languages
@@ -101,6 +119,7 @@ title: ES2015
 category: Hidden
 redirect_to: /es6
 ---
+
 ```
 
 ## Localizations
@@ -128,7 +147,7 @@ The site devhints.io is backed by CloudFlare. Updates will take 2 days to propag
 
 There are multiple ways to set meta description.
 
-### keywords (and intro)
+### Keywords (and intro)
 
 Set `keywords` (and optionally `intro`). This is the easiest and the preferred
 way for now.
@@ -141,7 +160,7 @@ React.Component · render() · componentDidMount() · props/state · React is a
 JavaScript library for building web...
 ```
 
-### description (and intro)
+### Description (and intro)
 
 Set `description` (and optionally `intro`)
 
@@ -153,29 +172,6 @@ One-page reference to React and its API. React is a JavaScript library for
 building web user interfaces...
 ```
 
-### intro only
+### Intro only
 
 If you left out `description` or `keywords`, a default description will be added.
-
-## Critical path CSS
-
-The critical path CSS is stored in:
-
-- `_includes/2017/critical/home.html`
-- `_includes/2017/critical/sheet.html`
-
-You'll need to update these every now and then when you change something in the CSS. Use this to update these snippets:
-
-```
-yarn run critical
-```
-
-You can temporarily disable critical path optimizations by loading it with `?nocrit=1`, eg, `https://devhints.io/?nocrit=1`.
-
-## Critical path JS
-
-There's JavaScript that's included inline in every page. It's entrypoint is:
-
-- `_js/critical.js`
-
-This is automatically compiled into the partial `_includes/2017/critical/critical.js`. Keep this bundle as small as possible.

Dockerfile

@@ -1,9 +1,11 @@
-FROM ruby:2.5.1-alpine3.7
-RUN apk update && apk add --no-cache nodejs build-base
-RUN apk add yarn --no-cache --repository http://dl-3.alpinelinux.org/alpine/v3.8/community/ --allow-untrusted
+FROM ruby:2.7.1
+RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
+RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
+RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+RUN apt-get update -qq && apt-get install -qq --no-install-recommends \
+    nodejs \
+    yarn \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/*
 RUN mkdir -p /app
 WORKDIR /app
-# COPY Gemfile Gemfile.lock ./
-# RUN bundle install -j 4
-# COPY package.json yarn.lock ./
-# RUN yarn

Gemfile

@@ -1,2 +1,3 @@
 source 'https://rubygems.org'
+gem 'webrick'
 gem 'github-pages', group: :jekyll_plugins

Gemfile.lock

@@ -1,216 +1,272 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (4.2.8)
-      i18n (~> 0.7)
-      minitest (~> 5.1)
-      thread_safe (~> 0.3, >= 0.3.4)
-      tzinfo (~> 1.1)
-    addressable (2.5.2)
-      public_suffix (>= 2.0.2, < 4.0)
+    activesupport (7.1.0)
+      base64
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      mutex_m
+      tzinfo (~> 2.0)
+    addressable (2.8.5)
+      public_suffix (>= 2.0.2, < 6.0)
+    base64 (0.1.1)
+    bigdecimal (3.1.4)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.12.2)
+    coffee-script-source (1.11.1)
     colorator (1.1.0)
-    ethon (0.10.1)
-      ffi (>= 1.3.0)
-    execjs (2.7.0)
-    faraday (0.13.1)
-      multipart-post (>= 1.2, < 3)
-    ffi (1.9.18)
+    commonmarker (0.23.10)
+    concurrent-ruby (1.2.2)
+    connection_pool (2.4.1)
+    dnsruby (1.70.0)
+      simpleidn (~> 0.2.1)
+    drb (2.1.1)
+      ruby2_keywords
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    eventmachine (1.2.7)
+    execjs (2.9.1)
+    faraday (2.7.11)
+      base64
+      faraday-net_http (>= 2.0, < 3.1)
+      ruby2_keywords (>= 0.0.4)
+    faraday-net_http (3.0.2)
+    ffi (1.16.3)
     forwardable-extended (2.6.0)
-    gemoji (3.0.0)
-    github-pages (156)
-      activesupport (= 4.2.8)
-      github-pages-health-check (= 1.3.5)
-      jekyll (= 3.5.2)
-      jekyll-avatar (= 0.4.2)
-      jekyll-coffeescript (= 1.0.1)
+    gemoji (3.0.1)
+    github-pages (228)
+      github-pages-health-check (= 1.17.9)
+      jekyll (= 3.9.3)
+      jekyll-avatar (= 0.7.0)
+      jekyll-coffeescript (= 1.1.1)
+      jekyll-commonmark-ghpages (= 0.4.0)
       jekyll-default-layout (= 0.1.4)
-      jekyll-feed (= 0.9.2)
-      jekyll-gist (= 1.4.1)
-      jekyll-github-metadata (= 2.8.0)
-      jekyll-mentions (= 1.2.0)
-      jekyll-optional-front-matter (= 0.2.0)
+      jekyll-feed (= 0.15.1)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.13.0)
+      jekyll-include-cache (= 0.2.1)
+      jekyll-mentions (= 1.6.0)
+      jekyll-optional-front-matter (= 0.3.2)
       jekyll-paginate (= 1.1.0)
-      jekyll-readme-index (= 0.1.0)
-      jekyll-redirect-from (= 0.12.1)
-      jekyll-relative-links (= 0.4.1)
-      jekyll-sass-converter (= 1.5.0)
-      jekyll-seo-tag (= 2.3.0)
-      jekyll-sitemap (= 1.0.0)
-      jekyll-swiss (= 0.4.0)
-      jekyll-theme-architect (= 0.1.0)
-      jekyll-theme-cayman (= 0.1.0)
-      jekyll-theme-dinky (= 0.1.0)
-      jekyll-theme-hacker (= 0.1.0)
-      jekyll-theme-leap-day (= 0.1.0)
-      jekyll-theme-merlot (= 0.1.0)
-      jekyll-theme-midnight (= 0.1.0)
-      jekyll-theme-minimal (= 0.1.0)
-      jekyll-theme-modernist (= 0.1.0)
-      jekyll-theme-primer (= 0.5.0)
-      jekyll-theme-slate (= 0.1.0)
-      jekyll-theme-tactile (= 0.1.0)
-      jekyll-theme-time-machine (= 0.1.0)
-      jekyll-titles-from-headings (= 0.4.0)
-      jemoji (= 0.8.0)
-      kramdown (= 1.13.2)
-      liquid (= 4.0.0)
-      listen (= 3.0.6)
+      jekyll-readme-index (= 0.3.0)
+      jekyll-redirect-from (= 0.16.0)
+      jekyll-relative-links (= 0.6.1)
+      jekyll-remote-theme (= 0.4.3)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.8.0)
+      jekyll-sitemap (= 1.4.0)
+      jekyll-swiss (= 1.0.0)
+      jekyll-theme-architect (= 0.2.0)
+      jekyll-theme-cayman (= 0.2.0)
+      jekyll-theme-dinky (= 0.2.0)
+      jekyll-theme-hacker (= 0.2.0)
+      jekyll-theme-leap-day (= 0.2.0)
+      jekyll-theme-merlot (= 0.2.0)
+      jekyll-theme-midnight (= 0.2.0)
+      jekyll-theme-minimal (= 0.2.0)
+      jekyll-theme-modernist (= 0.2.0)
+      jekyll-theme-primer (= 0.6.0)
+      jekyll-theme-slate (= 0.2.0)
+      jekyll-theme-tactile (= 0.2.0)
+      jekyll-theme-time-machine (= 0.2.0)
+      jekyll-titles-from-headings (= 0.5.3)
+      jemoji (= 0.12.0)
+      kramdown (= 2.3.2)
+      kramdown-parser-gfm (= 1.1.0)
+      liquid (= 4.0.4)
       mercenary (~> 0.3)
-      minima (= 2.1.1)
-      rouge (= 1.11.1)
+      minima (= 2.5.1)
+      nokogiri (>= 1.13.6, < 2.0)
+      rouge (= 3.26.0)
       terminal-table (~> 1.4)
-    github-pages-health-check (1.3.5)
+    github-pages-health-check (1.17.9)
       addressable (~> 2.3)
-      net-dns (~> 0.8)
+      dnsruby (~> 1.60)
       octokit (~> 4.0)
-      public_suffix (~> 2.0)
-      typhoeus (~> 0.7)
-    html-pipeline (2.7.0)
+      public_suffix (>= 3.0, < 5.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.14.3)
       activesupport (>= 2)
       nokogiri (>= 1.4)
-    i18n (0.8.6)
-    jekyll (3.5.2)
+    http_parser.rb (0.8.0)
+    i18n (1.14.1)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.9.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (>= 0.7, < 2)
       jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 1.1)
-      kramdown (~> 1.3)
+      jekyll-watch (~> 2.0)
+      kramdown (>= 1.17, < 3)
       liquid (~> 4.0)
       mercenary (~> 0.3.3)
       pathutil (~> 0.9)
-      rouge (~> 1.7)
+      rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
-    jekyll-avatar (0.4.2)
-      jekyll (~> 3.0)
-    jekyll-coffeescript (1.0.1)
+    jekyll-avatar (0.7.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-coffeescript (1.1.1)
       coffee-script (~> 2.2)
+      coffee-script-source (~> 1.11.1)
+    jekyll-commonmark (1.4.0)
+      commonmarker (~> 0.22)
+    jekyll-commonmark-ghpages (0.4.0)
+      commonmarker (~> 0.23.7)
+      jekyll (~> 3.9.0)
+      jekyll-commonmark (~> 1.4.0)
+      rouge (>= 2.0, < 5.0)
     jekyll-default-layout (0.1.4)
       jekyll (~> 3.0)
-    jekyll-feed (0.9.2)
-      jekyll (~> 3.3)
-    jekyll-gist (1.4.1)
+    jekyll-feed (0.15.1)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-gist (1.5.0)
       octokit (~> 4.2)
-    jekyll-github-metadata (2.8.0)
-      jekyll (~> 3.1)
+    jekyll-github-metadata (2.13.0)
+      jekyll (>= 3.4, < 5.0)
       octokit (~> 4.0, != 4.4.0)
-    jekyll-mentions (1.2.0)
-      activesupport (~> 4.0)
+    jekyll-include-cache (0.2.1)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-mentions (1.6.0)
       html-pipeline (~> 2.3)
-      jekyll (~> 3.0)
-    jekyll-optional-front-matter (0.2.0)
-      jekyll (~> 3.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-optional-front-matter (0.3.2)
+      jekyll (>= 3.0, < 5.0)
     jekyll-paginate (1.1.0)
-    jekyll-readme-index (0.1.0)
-      jekyll (~> 3.0)
-    jekyll-redirect-from (0.12.1)
-      jekyll (~> 3.3)
-    jekyll-relative-links (0.4.1)
-      jekyll (~> 3.3)
-    jekyll-sass-converter (1.5.0)
+    jekyll-readme-index (0.3.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-relative-links (0.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-remote-theme (0.4.3)
+      addressable (~> 2.0)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
+      rubyzip (>= 1.3.0, < 3.0)
+    jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-seo-tag (2.3.0)
-      jekyll (~> 3.3)
-    jekyll-sitemap (1.0.0)
-      jekyll (~> 3.3)
-    jekyll-swiss (0.4.0)
-    jekyll-theme-architect (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-swiss (1.0.0)
+    jekyll-theme-architect (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-cayman (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-cayman (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-dinky (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-dinky (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-hacker (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-hacker (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-leap-day (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-leap-day (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-merlot (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-merlot (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-midnight (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-midnight (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-minimal (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-minimal (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-modernist (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-modernist (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-primer (0.5.0)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.2)
-    jekyll-theme-slate (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-primer (0.6.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-github-metadata (~> 2.9)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-tactile (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-slate (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-time-machine (0.1.0)
-      jekyll (~> 3.5)
+    jekyll-theme-tactile (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-titles-from-headings (0.4.0)
-      jekyll (~> 3.3)
-    jekyll-watch (1.5.0)
-      listen (~> 3.0, < 3.1)
-    jemoji (0.8.0)
-      activesupport (~> 4.0)
+    jekyll-theme-time-machine (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.3)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    jemoji (0.12.0)
       gemoji (~> 3.0)
       html-pipeline (~> 2.2)
-      jekyll (>= 3.0)
-    kramdown (1.13.2)
-    liquid (4.0.0)
-    listen (3.0.6)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9.7)
+      jekyll (>= 3.0, < 5.0)
+    kramdown (2.3.2)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.8.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.3.6)
-    mini_portile2 (2.2.0)
-    minima (2.1.1)
-      jekyll (~> 3.3)
-    minitest (5.10.3)
-    multipart-post (2.0.0)
-    net-dns (0.8.0)
-    nokogiri (1.8.0)
-      mini_portile2 (~> 2.2.0)
-    octokit (4.7.0)
-      sawyer (~> 0.8.0, >= 0.5.3)
-    pathutil (0.14.0)
+    minima (2.5.1)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.20.0)
+    mutex_m (0.1.2)
+    nokogiri (1.15.4-x86_64-linux)
+      racc (~> 1.4)
+    octokit (4.25.1)
+      faraday (>= 1, < 3)
+      sawyer (~> 0.9)
+    pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (2.0.5)
-    rb-fsevent (0.10.2)
-    rb-inotify (0.9.10)
-      ffi (>= 0.5.0, < 2)
-    rouge (1.11.1)
-    safe_yaml (1.0.4)
-    sass (3.5.1)
+    public_suffix (4.0.7)
+    racc (1.7.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.6)
+    rouge (3.26.0)
+    ruby2_keywords (0.0.5)
+    rubyzip (2.3.2)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sawyer (0.8.1)
-      addressable (>= 2.3.5, < 2.6)
-      faraday (~> 0.8, < 1.0)
+    sawyer (0.9.2)
+      addressable (>= 2.3.5)
+      faraday (>= 0.17.3, < 3)
+    simpleidn (0.2.1)
+      unf (~> 0.1.4)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
-    thread_safe (0.3.6)
-    typhoeus (0.8.0)
-      ethon (>= 0.8.0)
-    tzinfo (1.2.3)
-      thread_safe (~> 0.1)
-    unicode-display_width (1.3.0)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    unf (0.1.4)
+      unf_ext
+    unf_ext (0.0.8.2)
+    unicode-display_width (1.8.0)
+    webrick (1.8.1)
 
 PLATFORMS
-  ruby
+  x86_64-linux
 
 DEPENDENCIES
   github-pages
+  webrick
 
 BUNDLED WITH
-   1.11.2
+   2.3.3

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Rico Sta. Cruz and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -2,44 +2,18 @@ npmbin := ./node_modules/.bin
 PORT ?= 3000
 HOST ?= 127.0.0.1
 
+help:
+	@echo
+	@echo Makefile targets
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' Makefile | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+	@echo
+
 # Builds intermediate files. Needs a _site built first though
-update: _site critical
+update: _site
 
 # Builds _site
 _site:
-	bundle exec jekyll build --incremental
+	yarn build
 
-# Builds critical path CSS/JS
-critical: _site
-	node _support/critical.js
-
-# Starts development server
-dev:
-	$(npmbin)/concurrently -k -p command -c "blue,green" \
-		"make dev-webpack" \
-		"make dev-jekyll"
-
-dev-webpack:
-	$(npmbin)/webpack --watch --colors -p
-
-dev-jekyll:
-	if [ -f _site ]; then \
-		bundle exec jekyll serve --safe --trace --drafts --watch --incremental --host $(HOST) --port $(PORT); \
-		else \
-		bundle exec jekyll serve --safe --trace --drafts --watch --host $(HOST) --port $(PORT); \
-		fi
-
-test: _site
-	@test -f _site/vim.html
-	@test -f _site/react.html
-	@test -f _site/index.html
-	@grep "<script src" _site/index.html >/dev/null
-	@grep "<script src" _site/vim.html >/dev/null
-	@grep "<script src" _site/react.html >/dev/null
-
-test-warning:
-	@echo "========="
-	@echo "If your build failed at this point, it means"
-	@echo "the site failed to generate. Check the project"
-	@echo "out locally and try to find out why."
-	@echo "========="
+dev: 
+	yarn dev

README.md

@@ -1,8 +1,14 @@
-# Devhints
+<h1 align='center'>Devhints</h1>
 
-> TL;DR for developer documentation - a ridiculous collection of cheatsheets
+<blockquote align='center'>
+TL;DR for developer documentation - a ridiculous collection of cheatsheets
+</blockquote>
 
-[![Status](https://travis-ci.org/rstacruz/cheatsheets.svg?branch=master)](https://travis-ci.org/rstacruz/cheatsheets "See test builds")
+<p align='center'>
+<a href='https://travis-ci.org/rstacruz/cheatsheets'><img src='https://travis-ci.org/rstacruz/cheatsheets.svg?branch=master' alt='See test builds'></a>
+<a href='https://github.com/rstacruz/cheatsheets/actions?query=workflow%3ADeploy'><img src='https://github.com/rstacruz/cheatsheets/workflows/Deploy/badge.svg' alt='GitHub pages deploy status'></a>
+<a href='https://app.netlify.com/sites/devhints-cheatsheets/deploys'><img src='https://api.netlify.com/api/v1/badges/c66b2a8b-5147-4243-9bf6-e2143126f6c8/deploy-status' alt='Netlify deploy status'></a>
+</p>
 
 <br>
 
@@ -17,3 +23,12 @@
 ---
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for developer notes.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rstacruz/cheatsheets)
+
+<h2 align='center'>Similar projects</h1>
+
+- [Command Line Interface Pages](https://github.com/command-line-interface-pages)
+- [tldr-pages](https://github.com/tldr-pages/tldr)
+- [Cheat](https://github.com/cheat/cheat)
+- [Eg](https://github.com/srsudar/eg)

_config.yml

@@ -9,21 +9,25 @@ plugins:
   - jekyll-github-metadata
 
 exclude:
-  - Makefile
-  - README.md
+  - .babelrc
+  - .cache
+  - CNAME
   - CONTRIBUTING.md
+  - cssnano.config.js
+  - docker_compose.yml
+  - Dockerfile
   - Gemfile
   - Gemfile.lock
-  - CNAME
-  - vendor
-  - package.json
-  - .babelrc
-  - yarn.lock
-  - package-lock.json
-  - webpack.config.js
+  - Makefile
   - node_modules
-  - Dockerfile
-  - docker_compose.yml
+  - package.json
+  - package-lock.json
+  - postcss.config.js
+  - README.md
+  - vendor
+  - webpack.config.js
+  - yarn-error.log
+  - yarn.lock
 
 # Markdown
 

_data/berry.yml

@@ -1,4 +0,0 @@
-enabled: false
-token: "653d56e083fec2a9ae1b6c7cde4e5f5f"
-title: "Rollbar"
-description: "Real-time error monitoring, alerting, and analytics for developers 🚀"

_data/carbon.yml

@@ -1,2 +1,2 @@
-enabled: false
-src: //cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ricostacruzcom
+enabled: true
+src: https://pubsrv.devhints.io/carbon.js?serve=CE7IK5QM&placement=devhintsio

_data/categories.yml

@@ -3,12 +3,15 @@ names:
   - Analytics
   - Ansible
   - Apps
+  - C-like
   - CLI
   - CSS
+  - Databases
   - Devops
   - Elixir
   - Git
   - HTML
+  - Java & JVM
   - JavaScript
   - JavaScript libraries
   - Jekyll
@@ -16,6 +19,8 @@ names:
   - Markup
   - macOS
   - Node.js
+  - PHP
+  - Python
   - Rails
   - React
   - Ruby

_data/codefund.yml

@@ -1,2 +1,2 @@
 enabled: true
-token: "c2c8bc62-c275-4c7a-a304-74335c5a1cd0"
+# token: "c2c8bc62-c275-4c7a-a304-74335c5a1cd0"

_data/google_analytics.yml

@@ -1,3 +1,4 @@
 enabled: true
 hostname: devhints.io
-id: "UA-106902774-1"
+id: "G-N7TC6B227L"
+# id: "UA-106902774-1"

_includes/2017/berry-sponsor.html

@@ -1,13 +0,0 @@
-{% assign pixel_href = 'https://codefund.io/t/l/TOKEN/pixel.png' | replace: 'TOKEN', site.data.berry.token %}
-{% assign link_href = 'https://codefund.io/t/c/TOKEN/' | replace: 'TOKEN', site.data.berry.token %}
-
-<aside class='berry-sponsor' data-js-no-preview>
-  <div class='cs__wrapper'>
-    <div class='cs__header'>Proudly sponsored by</div>
-    <a href='{{ link_href }}' class='cs__blurb' target='_blank' rel='noopener'>
-      <strong>{{ site.data.berry.title }}</strong>
-      <span>{{ site.data.berry.description }}</span>
-    </a>
-    <img class='cs__pixel' src='{{ pixel_href }}' />
-  </div>
-</aside>

_includes/2017/codefund.html

@@ -1,4 +0,0 @@
-<aside class='codefund-sponsor' data-js-no-preview>
-  <script src='https://codefund.io/scripts/{{ site.data.codefund.token }}/embed.js?template=centered'></script>
-  <div id='codefund_ad'></div>
-</aside>

_includes/2017/critical/critical.js

@@ -1 +0,0 @@
-!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=2)}([function(e,n){function t(e,n){var t=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(t)return t.call(e,n);if(e.parentNode){for(var r=e.parentNode.querySelectorAll(n),o=r.length;o--;0)if(r[o]===e)return!0;return!1}}e.exports=t},function(e,n,t){function r(e,n){if(n){if(Array.isArray(n))return void o(n,function(n){r(e,n)});if(e.classList){var t=n.split(" ").filter(Boolean);o(t,function(n){e.classList.add(n)})}else e.className+=" "+n}}var o=t(4);e.exports=r},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(){d||((0,c.default)(document.documentElement,"LoadDone"),d=!0)}var i=t(3),u=r(i),a=t(1),c=r(a),f=t(6),l=r(f),s=document.querySelector("[data-js-main-body]");s&&((0,u.default)(s),(0,c.default)(s,"-wrapified")),(0,l.default)(window,"load",o),setTimeout(o,5e3);var d=void 0},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function i(e){u(e).forEach(function(e){(0,p.findChildren)(e,"[data-js-h3-section-list]").forEach(function(e){a(e)})})}function u(e){return c(e,{tag:"h2",wrapperFn:function(){return(0,p.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function a(e){return c(e,{tag:"h3",wrapperFn:function(){return(0,p.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body"})}})}function c(e,n){function t(e,n,t){var r=i(),o=e.className;o&&(0,d.default)(r,o),(0,p.before)(e,r);var a=u();return o&&(0,d.default)(a,o),(0,p.appendMany)(a,t),n&&r.appendChild(n),r.appendChild(a),r}var r=n.tag,i=n.wrapperFn,u=n.bodyFn,a=e.children[0],c=[];if(a&&!(0,l.default)(a,r)){var f=(0,p.nextUntil)(a,r);c.push(t(a,null,[a].concat(o(f))))}return(0,p.findChildren)(e,r).forEach(function(e){var n=(0,p.nextUntil)(e,r);c.push(t(e,e,n))}),c}Object.defineProperty(n,"__esModule",{value:!0}),n.default=i,n.groupify=c;var f=t(0),l=r(f),s=t(1),d=r(s),p=t(5)},function(e,n){function t(e,n){var t,r,o=e.length;if("number"==typeof o)for(t=0;t<o;t++)n(e[t],t);else{r=0;for(t in e)e.hasOwnProperty(t)&&n(e[t],t,r++)}return e}e.exports=t},function(e,n,t){"use strict";function r(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function o(e,n){n.forEach(function(n){e.appendChild(n)})}function i(e,n){return u(e.nextSibling,n,[])}function u(e,n,t){return e?(0,s.default)(e,n)?t:u(e.nextSibling,n,[].concat(r(t),[e])):t}function a(e,n){e.parentNode.insertBefore(n,e)}function c(e,n){return[].slice.call(e.children).filter(function(e){return(0,s.default)(e,n)})}function f(e){var n=document.createElement("div");return Object.keys(e).forEach(function(t){n.setAttribute(t,e[t])}),n}Object.defineProperty(n,"__esModule",{value:!0}),n.appendMany=o,n.nextUntil=i,n.before=a,n.findChildren=c,n.createDiv=f;var l=t(0),s=function(e){return e&&e.__esModule?e:{default:e}}(l)},function(e,n){function t(e,n,t){e.addEventListener?e.addEventListener(n,t):e.attachEvent("on"+n,function(){t.call(e)})}e.exports=t}]);

_includes/2017/foot.html

@@ -1,5 +1,3 @@
-<!-- critical js -->
 <script>{% include 2017/critical/critical.js %}</script>
-<script src='{{base}}/assets/packed/vendor.js?t={{ timestamp }}'></script>
 <script src='{{base}}/assets/packed/app.js?t={{ timestamp }}'></script>
 {% for lang in page.prism_languages %}<script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>{% endfor %}

_includes/2017/head.html

@@ -3,11 +3,11 @@
 
 <!-- critical css -->
 {% if include.critical == 'home'
-%}<style id='critical-css'>{% include 2017/critical/home.css %}</style>{%
+%}<style id='critical-css'>{% include 2017/critical/critical-home.css %}</style>{%
 endif
 %}{%
 if include.critical == 'sheet'
-%}<style id='critical-css'>{% include 2017/critical/sheet.css %}</style>{%
+%}<style id='critical-css'>{% include 2017/critical/critical-sheet.css %}</style>{%
 endif %}
 
 <!-- allow disabling critical CSS optimization by passing ?nocrit=1 -->

_includes/2017/headline-pub.html

@@ -0,0 +1,7 @@
+<div class='HeadlinePub' role='complementary'>
+  <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
+  <span class='placeholder -one'></span>
+  <span class='placeholder -two'></span>
+  <span class='placeholder -three'></span>
+  <span class='placeholder -four'></span>
+</div>

_includes/2017/top-nav.html

@@ -6,7 +6,7 @@ Params:
 {% endcomment %}
 <nav class='top-nav' data-js-no-preview role='navigation'>
   <div class='container'>
-    {% unless include.page.noback %}
+    {% unless include.noback %}
       <div class='left'>
         <a class='home back-button' href='{{base}}'></a>
       </div>

_includes/about-the-site.html

@@ -2,7 +2,7 @@
   <div class="container">
     <p class='blurb'>
     <strong><a href="{{ base }}">{{ site.title }}</a></strong> is a collection of cheatsheets I've written over the years.
-      Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues'>Send them in</a>.
+      Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
       <i class='fleuron'></i>
       I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>. 
       Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.

_includes/common/moment_format.md

@@ -5,18 +5,17 @@
 
 #### Date
 
-| Example              | Output                             |
-| ---                  | ---                                |
-| `YYYY-MM-DD`         | `2014-01-01`                       |
-| `dddd, MMMM Do YYYY` | `Friday, May 16th 2014`            |
-{: .-shortcuts}
+| Example                   | Output                 |
+| ------------------------- | ---------------------- |
+| `YYYY-MM-DD`              | 2014-01-01             |
+| `dddd, MMMM Do YYYY`      | Friday, May 16th 2014  |
+| `dddd [the] Do [of] MMMM` | Friday the 16th of May |
 
 #### Time
 
-| Example              | Output                             |
-| ---                  | ---                                |
-| `hh:mm a`            | `12:30 pm`                         |
-{: .-shortcuts}
+| Example   | Output   |
+| --------- | -------- |
+| `hh:mm a` | 12:30 pm |
 
 Used by [Moment.js](http://momentjs.com/docs/#/displaying/) and [date-fns/format](https://date-fns.org/v1.28.5/docs/format). Similar to Java [SimpleDateFormat](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html).
 
@@ -33,7 +32,7 @@ Used by [Moment.js](http://momentjs.com/docs/#/displaying/) and [date-fns/format
 | `YYYY` | `2013`                  |                  |
 | ---    | ---                     | ---              |
 | `M`    | `1`..`12` _(Jan is 1)_  | **Month**        |
-| `Mo`   | `1st`..`31st`           |                  |
+| `Mo`   | `1st`..`12th`           |                  |
 | `MM`   | `01`..`12` _(Jan is 1)_ |                  |
 | `MMM`  | `Jan`                   |                  |
 | `MMMM` | `January`               |                  |
@@ -86,17 +85,16 @@ Used by [Moment.js](http://momentjs.com/docs/#/displaying/) and [date-fns/format
 
 ### Presets
 
-| Example              | Output                             |
-| ---                  | ---                                |
-| `LT`                 | `8:30 PM`                          |
-| `LTS`                | `8:30:25 PM`                       |
-| ---                  | ---                                |
-| `LL`                 | `August 2 1985`                    |
-| `ll`                 | `Aug 2 1985`                       |
-| ---                  | ---                                |
-| `LLL`                | `August 2 1985 08:30 PM`           |
-| `lll`                | `Aug 2 1985 08:30 PM`              |
-| ---                  | ---                                |
-| `LLLL`               | `Thursday, August 2 1985 08:30 PM` |
-| `llll`               | `Thu, Aug 2 1985 08:30 PM`         |
-{: .-shortcuts}
+| Example | Output                           |
+| ------- | -------------------------------- |
+| `LT`    | 8:30 PM                          |
+| `LTS`   | 8:30:25 PM                       |
+| ---     | ---                              |
+| `LL`    | August 2 1985                    |
+| `ll`    | Aug 2 1985                       |
+| ---     | ---                              |
+| `LLL`   | August 2 1985 08:30 PM           |
+| `lll`   | Aug 2 1985 08:30 PM              |
+| ---     | ---                              |
+| `LLLL`  | Thursday, August 2 1985 08:30 PM |
+| `llll`  | Thu, Aug 2 1985 08:30 PM         |

_includes/head.html

@@ -4,7 +4,7 @@
   {% include meta.html %}
   {% include polyfills.html %}
   <style>html{opacity:0}</style>
-  <link href="https://ricostacruz.com/til/assets/style.css?t={{ timestamp }}" rel="stylesheet" />
+  <link rel="stylesheet" href="{{base}}/assets/2015/style.css?t={{ timestamp }}">
   <link href="{{base}}/assets/style.css?t={{ timestamp }}" rel="stylesheet" />
   <link href="{{base}}/assets/print.css?t={{ timestamp }}" rel="stylesheet" media="print" />
 </head>

_includes/meta.html

@@ -2,13 +2,13 @@
 <meta charset='utf-8'>
 <meta content='width=device-width, initial-scale=1.0' name='viewport'>
 <link href='{{ base }}/assets/favicon.png' rel='shortcut icon'>
-<meta content='{{ page.url }}' name='app:pageurl'>
+<meta content='{{ page.url | escape }}' name='app:pageurl'>
 
 {% if meta_title %}
-  <title>{{ meta_title }}</title>
-  <meta content='{{ meta_title }}' property='og:title'>
-  <meta content='{{ meta_title }}' property='twitter:title'>
-  <meta content='{{ page.og_type | default: "article" }}' property='og:type'>
+  <title>{{ meta_title | escape }}</title>
+  <meta content='{{ meta_title | escape }}' property='og:title'>
+  <meta content='{{ meta_title | escape }}' property='twitter:title'>
+  <meta content='{{ page.og_type | default: "article" | escape }}' property='og:type'>
 {% endif %}
 
 {% if meta_image %}
@@ -24,11 +24,11 @@
   <meta content="{{ meta_description | escape }}" property="twitter:description">
 {% endif %}
 
-<link rel="canonical" href="{{ page_url }}">
-<meta name="og:url" content="{{ page_url }}">
+<link rel="canonical" href="{{ page_url | escape }}">
+<meta name="og:url" content="{{ page_url | escape }}">
 {% if page.url == '/' %}
-  <link rel="prefetch" href="{{ site.url }}">
-  <link rel="prerender" href="{{ site.url }}">
+  <link rel="prefetch" href="{{ site.url | escape }}">
+  <link rel="prerender" href="{{ site.url | escape }}">
 {% endif %}
 
 {% if page.author %}
@@ -41,15 +41,15 @@
 {% endif %}
 
 {% if site.title %}
-  <meta content='{{ site.title }}' property='og:site_name'>
+  <meta content='{{ site.title | escape }}' property='og:site_name'>
 {% endif %}
 
 {% if site.facebook.app_id %}
-  <meta content='{{ site.facebook.app_id }}' property='fb:app_id'>
+  <meta content='{{ site.facebook.app_id | escape }}' property='fb:app_id'>
 {% endif %}
 
 {% if site.facebook.admin %}
-  <meta content='{{ site.facebook.admin }}' property='fb:admins'>
+  <meta content='{{ site.facebook.admin | escape }}' property='fb:admins'>
 {% endif %}
 
 {% if page.date %}
@@ -57,12 +57,12 @@
 {% endif %}
 
 {% if page.category %}
-  <meta content='{{ page.category }}' property='article:section'>
+  <meta content='{{ page.category | escape }}' property='article:section'>
 {% endif %}
 
 {% if page.tags %}
 {% for tag in page.tags %}
-  <meta content='{{ tag }}' property='article:tag'>
+  <meta content='{{ tag | escape }}' property='article:tag'>
 {% endfor %}
 {% endif %}
 

_js/app.js

@@ -1,7 +0,0 @@
-// 3rd party libs
-window.Prism = require('prismjs')
-
-// All the others
-function requireAll (r) { r.keys().forEach(r) }
-requireAll(require.context('./initializers/', true, /\.js$/))
-requireAll(require.context('./behaviors/', true, /\.js$/))

_js/helpers/__tests__/qs.test.js

@@ -1,21 +0,0 @@
-/* eslint-env jest */
-import qs from '../qs'
-
-describe('qs()', () => {
-  test('basic', run({
-    input: '?preview=1',
-    output: { preview: '1' }
-  }))
-
-  test('two fragments', run({
-    input: '?a=1&b=2',
-    output: { a: '1', b: '2' }
-  }))
-
-  function run ({ input, output }) {
-    return function () {
-      const result = qs(input)
-      expect(result).toEqual(output)
-    }
-  }
-})

_js/helpers/search.js

@@ -1,40 +0,0 @@
-import { splitwords } from './permutate'
-import qsa from 'dom101/query-selector-all'
-
-/**
- * Show everything.
- *
- * @example
- *     Search.showAll()
- */
-
-export function showAll () {
-  qsa('[data-search-index]').forEach(el => {
-    el.removeAttribute('aria-hidden')
-  })
-}
-
-/**
- * Search for a given keyword.
- *
- * @example
- *     Search.show('hello')
- */
-
-export function show (val) {
-  const keywords = splitwords(val)
-
-  if (!keywords.length) return showAll()
-
-  const selectors = keywords
-    .map(k => `[data-search-index~=${JSON.stringify(k)}]`)
-    .join('')
-
-  qsa('[data-search-index]').forEach(el => {
-    el.setAttribute('aria-hidden', true)
-  })
-
-  qsa(selectors).forEach(el => {
-    el.removeAttribute('aria-hidden')
-  })
-}

_js/wrapify/__tests__/index.test.js

@@ -1,63 +0,0 @@
-/* eslint-env jest */
-import wrapify from '../index'
-import $ from 'jquery'
-
-it('simple usage', run(`
-  <div>
-    <h2>simple usage<h2>
-
-    <h3>install</h3>
-    <p>(install)</p>
-
-    <h3>usage</h3>
-    <p>(usage)</p>
-  </div>
-`, $div => {
-  expect($div.find('.h2-section .h3-section-list .h3-section').length).toEqual(2)
-}))
-
-it('h3 with class', run(`
-  <div>
-    <h3 class='-hello'>install</h3>
-    <p>(install)</p>
-  </div>
-`, $div => {
-  expect($div.find('div.h3-section.-hello').length).toEqual(1)
-  expect($div.find('div.h3-section-list.-hello').length).toEqual(1)
-}))
-
-it('multiple h2s', run(`
-  <div>
-    <h2>multiple h2<h2>
-
-    <h3>install</h3>
-    <p>(install)</p>
-
-    <h3>usage</h3>
-    <p>(usage)</p>
-
-    <h2>getting started<h2>
-
-    <h3>first</h3>
-    <p>(first)</p>
-
-    <h3>second</h3>
-    <p>(second)</p>
-  </div>
-`))
-
-function run (input, fn) {
-  return function () {
-    const $div = $(input)
-    wrapify($div[0])
-    expect($div[0]).toMatchSnapshot()
-    if (fn) fn($div)
-  }
-}
-
-it('h2 + pre', run(`
-  <div>
-    <h2>heading</h2>
-    <pre class='language-markdown'>(code)</pre>
-  </div>
-`))

_layouts/2017/home.html

@@ -10,16 +10,10 @@
 %}
 {% include 2017/head.html critical='home' %}
 
-</head><body>
+</head><body class='UseCompactHeader HighlightPubFirstLine'>
 
 {% include 2017/top-nav.html page=page is_home=true noedit=true noback=true %}
 
-{% if site.data.carbon.enabled %}
-  <div class='SideAd' role='complementary'>
-    <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
-  </div>
-{% endif %}
-
 <div class='body-area -slim'>
   <div class='site-header' role='banner'>
     <h1>
@@ -31,16 +25,10 @@
 
     {% include 2017/search-form.html live=true %}
 
-    {% if site.data.berry.enabled %}
-    <div class='adbox' role='complementary'>
-      {% include 2017/berry-sponsor.html %}
-    </div>
-    {% endif %}
-
-    {% if site.data.codefund.enabled %}
-    <div class='adbox' role='complementary'>
-      {% include 2017/codefund.html %}
-    </div>
+    {% if site.data.carbon.enabled %}
+      <div class='pubbox'>
+        {% include 2017/headline-pub.html %}
+      </div>
     {% endif %}
   </div>
 
@@ -77,7 +65,7 @@
     <div class='message item missing-message'>
       <h3>See something missing?</h3>
       <p>
-        <a class='push-button' href='{{ site.github.repository_url }}/issues/new?title=Cheatsheet%20request:%20APP_NAME_HERE'>Request cheatsheet</a>
+        <a class='push-button' href='{{ site.github.repository_url }}/issues/907'>Request cheatsheet</a>
       </p>
     </div>
   </div>

_layouts/2017/sheet.html

@@ -4,7 +4,7 @@
 {% include 2017/head.html critical='sheet' %}
 {% include 2017/article-schema.html page=page %}
 
-</head><body>
+</head><body class='UseCompactHeader HighlightPubFirstLine'>
 
 {% include 2017/top-nav.html page=page %}
 
@@ -12,23 +12,9 @@
   <header class='main-heading -center' role='banner'>
     <h1 class='h1'>{{ page.title }} <em>{{ site.data.content.sheet.suffix }}</em></h1>
 
-    <div class='adbox' data-js-no-preview>
-      {% if site.data.berry.enabled %}
-      <div class='ad -berry' role='complementary'>
-        {% include 2017/berry-sponsor.html %}
-      </div>
-      {% endif %}
-
-      {% if site.data.codefund.enabled %}
-      <div class='ad -codefund' role='complementary'>
-        {% include 2017/codefund.html %}
-      </div>
-      {% endif %}
-
+    <div class='pubbox' data-js-no-preview>
       {% if site.data.carbon.enabled %}
-        <div class='HeadlineAd ad -carbon' role='complementary'>
-          <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
-        </div>
+        {% include 2017/headline-pub.html %}
       {% endif %}
     </div>
   </header>

_layouts/default-ad.html

@@ -14,7 +14,7 @@ type: article
     </div>
 
     {% if site.data.carbon.enabled %}
-      <div class='headline-ad'>
+      <div class='headline-pub'>
         <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
       </div>
     {% endif %}

_layouts/default.html

@@ -11,7 +11,10 @@ type: article
     <div class='post-headline -cheatsheet'>
       <p class='prelude'><span></span></p>
       <h1><span>{{ page.title }}</span></h1>
-      {% include social-list.html page=page %}
+
+      <div class='pubbox'>
+        {% include 2017/headline-pub.html %}
+      </div>
     </div>
 
     <div class='post-content -cheatsheet'>

_parcel/_base.scss

@@ -0,0 +1,3 @@
+// Base
+@import '../_sass/2017/base/base.scss';
+@import '../_sass/2017/base/fade.scss';

_parcel/_utils.scss

@@ -0,0 +1,11 @@
+// Vendor
+@import '../node_modules/modularscale-sass/stylesheets/_modularscale.scss';
+@import '../_sass/2017/variables.scss';
+@import '../_sass/vendor/ionicons-inline/ionicons.scss';
+
+// Utilities
+@import '../_sass/2017/utils/_font-size.scss';
+@import '../_sass/2017/utils/gutter.scss';
+@import '../_sass/2017/utils/heading-style.scss';
+@import '../_sass/2017/utils/section-gutter.scss';
+@import '../_sass/2017/utils/section-with-container.scss';

_parcel/app.js

@@ -0,0 +1,30 @@
+// Prismjs
+import 'prismjs'
+import 'prismjs/plugins/line-highlight/prism-line-highlight.min.js'
+import 'prismjs/components/prism-jsx.min.js'
+import 'prismjs/components/prism-bash.min.js'
+import 'prismjs/components/prism-scss.min.js'
+import 'prismjs/components/prism-css.min.js'
+import 'prismjs/components/prism-elixir.min.js'
+import 'prismjs/components/prism-ruby.min.js'
+
+// Initializers
+import './initializers/prism'
+import './initializers/onmount'
+
+// Behaviors
+import './behaviors/anchors'
+import './behaviors/dismissable'
+import './behaviors/dismiss'
+import './behaviors/disqus'
+import './behaviors/h3-section-list'
+import './behaviors/main-body'
+import './behaviors/no-preview'
+import './behaviors/searchable-header'
+import './behaviors/searchable-item'
+import './behaviors/search-form'
+import './behaviors/search-input'
+
+// CSS
+import 'prismjs/plugins/line-highlight/prism-line-highlight.css'
+import 'hint.css/hint.min.css'

_parcel/behaviors/anchors.js

@@ -9,7 +9,7 @@ const DEFAULTS = {
   // text of anchor
   text: '#',
   // append before or after innerText?
-  shouldAppend: false,
+  shouldAppend: false
 }
 
 /*
@@ -19,7 +19,9 @@ const DEFAULTS = {
 onmount('[data-js-anchors]', function () {
   const data = JSON.parse(this.getAttribute('data-js-anchors') || '{}')
   const rules = Array.isArray(data)
-    ? (data.length ? data : [DEFAULTS])
+    ? data.length
+      ? data
+      : [DEFAULTS]
     : [Object.assign({}, DEFAULTS, data)]
 
   for (const { rule, className, text, shouldAppend } of rules) {

_parcel/behaviors/dismiss.js

@@ -14,7 +14,7 @@ onmount('[data-js-dismiss]', function () {
   const dismissable = getData(parent, 'js-dismissable')
   const id = (dismissable && dismissable.id) || ''
 
-  on(this, 'click', e => {
+  on(this, 'click', (e) => {
     Dismiss.setDismissed(id)
     e.preventDefault()
     if (parent) remove(parent)

_parcel/behaviors/h3-section-list.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-new */
 
-import Isotope from 'isotope-layout/dist/isotope.pkgd.js'
+import Isotope from 'isotope-layout'
 import onmount from 'onmount'
 import on from 'dom101/on'
 import qsa from 'dom101/query-selector-all'
@@ -17,7 +17,7 @@ onmount('[data-js-h3-section-list]', function () {
 
   const images = qsa('img', this)
 
-  images.forEach(image => {
+  images.forEach((image) => {
     on(image, 'load', () => {
       iso.layout()
     })

_parcel/behaviors/search-form.js

@@ -6,10 +6,10 @@ import on from 'dom101/on'
  */
 
 onmount('[data-js-search-form]', function () {
-  on(this, 'submit', e => {
+  on(this, 'submit', (e) => {
     e.preventDefault()
 
-    const link = document.querySelector('a[data-search-index]:visible')
+    const link = document.querySelector('a[data-search-index]:not([hidden])')
     const href = link && link.getAttribute('href')
 
     if (href) window.location = href

_parcel/behaviors/search-input.js

@@ -17,6 +17,8 @@ onmount('[data-js-search-input]', function () {
   const query = (qs(window.location.search) || {}).q
   if (query && query.length) {
     this.value = query
-    setTimeout(() => { Search.show(query) })
+    setTimeout(() => {
+      Search.show(query)
+    })
   }
 })

_parcel/behaviors/searchable-header.js

@@ -10,11 +10,12 @@ import './searchable-item'
  */
 
 onmount('[data-js-searchable-header]', function () {
-  const els = nextUntil(this, '[data-js-searchable-header]')
-    .filter(el => matches(el, '[data-search-index]'))
+  const els = nextUntil(this, '[data-js-searchable-header]').filter((el) =>
+    matches(el, '[data-search-index]')
+  )
 
   const keywords = els
-    .map(n => n.getAttribute('data-search-index'))
+    .map((n) => n.getAttribute('data-search-index'))
     .join(' ')
     .split(' ')
 

_parcel/critical-home.js

@@ -0,0 +1,2 @@
+import 'sanitize.css'
+import './critical-home.scss'

_parcel/critical-home.scss

@@ -0,0 +1,16 @@
+@import './_utils.scss';
+@import './_base.scss';
+
+// Components
+@import '../_sass/2017/components/attribute-peg.scss';
+@import '../_sass/2017/components/announcements-item.scss';
+@import '../_sass/2017/components/announcements-list.scss';
+@import '../_sass/2017/components/back-button.scss';
+@import '../_sass/2017/components/body-area.scss';
+@import '../_sass/2017/components/headline-pub.scss';
+@import '../_sass/2017/components/page-actions.scss';
+@import '../_sass/2017/components/pages-list.scss';
+@import '../_sass/2017/components/search-box.scss';
+@import '../_sass/2017/components/site-header.scss';
+@import '../_sass/2017/components/top-nav.scss';
+@import '../_sass/2017/components/top-sheet.scss';

_parcel/critical-sheet.js

@@ -0,0 +1,2 @@
+import 'sanitize.css'
+import './critical-sheet.scss'

_parcel/critical-sheet.scss

@@ -0,0 +1,21 @@
+@import './_utils.scss';
+@import './_base.scss';
+
+// Markdown
+@import '../_sass/2017/markdown/a-em.scss';
+@import '../_sass/2017/markdown/code.scss';
+@import '../_sass/2017/markdown/headings.scss';
+@import '../_sass/2017/markdown/local-anchor.scss';
+@import '../_sass/2017/markdown/p.scss';
+@import '../_sass/2017/markdown/table.scss';
+@import '../_sass/2017/markdown/ul.scss';
+
+// Components
+@import '../_sass/2017/components/back-button.scss';
+@import '../_sass/2017/components/body-area.scss';
+@import '../_sass/2017/components/h3-section.scss';
+@import '../_sass/2017/components/h3-section-list.scss';
+@import '../_sass/2017/components/headline-pub.scss';
+@import '../_sass/2017/components/main-heading.scss';
+@import '../_sass/2017/components/page-actions.scss';
+@import '../_sass/2017/components/top-nav.scss';

_parcel/critical.js

@@ -20,7 +20,7 @@ on(window, 'load', done)
 setTimeout(done, 5000)
 
 let isDone
-function done () {
+function done() {
   if (isDone) return
   addClass(document.documentElement, 'LoadDone')
   isDone = true

_parcel/helpers/data.js

@@ -2,7 +2,7 @@
  * Stores and retrieves data from an element. Works like jQuery.data().
  */
 
-export function data (el, key, val) {
+export function data(el, key, val) {
   if (typeof val !== 'undefined') {
     return getData(el, key)
   } else {
@@ -10,11 +10,11 @@ export function data (el, key, val) {
   }
 }
 
-export function getData (el, key) {
+export function getData(el, key) {
   const str = el.getAttribute('data-' + key)
   return JSON.parse(str || '{}')
 }
 
-export function setData (el, key, val) {
+export function setData(el, key, val) {
   el.setAttribute('data-' + key, JSON.stringify(val))
 }

_parcel/helpers/dismiss.js

@@ -7,7 +7,7 @@ import * as Store from './store'
  *     setDismissed('2017-09-02-happy-birthday')
  */
 
-export function setDismissed (id) {
+export function setDismissed(id) {
   Store.update('dismissed', function (data) {
     data[id] = true
     return data
@@ -22,7 +22,7 @@ export function setDismissed (id) {
  *     isDismissed('2017-09-02-happy-birthday') => true
  */
 
-export function isDismissed (id) {
+export function isDismissed(id) {
   const data = Store.fetch('dismissed')
   return data && data[id]
 }

_parcel/helpers/dom.js

@@ -4,33 +4,35 @@ import matches from 'dom101/matches'
  * Just like jQuery.append
  */
 
-export function appendMany (el, children) {
-  children.forEach(child => { el.appendChild(child) })
+export function appendMany(el, children) {
+  children.forEach((child) => {
+    el.appendChild(child)
+  })
 }
 
 /*
  * Just like jQuery.nextUntil
  */
 
-export function nextUntil (el, selector) {
+export function nextUntil(el, selector) {
   const nextEl = el.nextSibling
   return nextUntilTick(nextEl, selector, [])
 }
 
-function nextUntilTick (el, selector, acc) {
+function nextUntilTick(el, selector, acc) {
   if (!el) return acc
 
   const isMatch = matches(el, selector)
   if (isMatch) return acc
 
-  return nextUntilTick(el.nextSibling, selector, [ ...acc, el ])
+  return nextUntilTick(el.nextSibling, selector, [...acc, el])
 }
 
 /*
  * Just like jQuery.before
  */
 
-export function before (reference, newNode) {
+export function before(reference, newNode) {
   reference.parentNode.insertBefore(newNode, reference)
 }
 
@@ -38,9 +40,8 @@ export function before (reference, newNode) {
  * Like jQuery.children('selector')
  */
 
-export function findChildren (el, selector) {
-  return [].slice.call(el.children)
-    .filter(child => matches(child, selector))
+export function findChildren(el, selector) {
+  return [].slice.call(el.children).filter((child) => matches(child, selector))
 }
 
 /**
@@ -52,9 +53,9 @@ export function findChildren (el, selector) {
  *     createDiv({ class: 'foo' })
  */
 
-export function createDiv (props) {
+export function createDiv(props) {
   const d = document.createElement('div')
-  Object.keys(props).forEach(key => {
+  Object.keys(props).forEach((key) => {
     d.setAttribute(key, props[key])
   })
   return d

_parcel/helpers/inject_disqus.js

@@ -5,12 +5,12 @@
  *     inject('devhints.disqus.com')
  */
 
-export default function inject (host) {
+export default function inject(host) {
   injectEmbed(host)
   injectCount(host)
 }
 
-export function injectEmbed (host) {
+export function injectEmbed(host) {
   const d = document
   const s = d.createElement('script')
   s.src = `https://${host}/embed.js`
@@ -18,7 +18,7 @@ export function injectEmbed (host) {
   ;(d.head || d.body).appendChild(s)
 }
 
-export function injectCount (host) {
+export function injectCount(host) {
   const d = document
   const s = d.createElement('script')
   s.src = `https://${host}/count.js`

_parcel/helpers/permutate.js

@@ -7,7 +7,7 @@
  *     })
  */
 
-export default function permutate (data) {
+export default function permutate(data) {
   let words = []
   if (data.slug) {
     words = words.concat(permutateString(data.slug))
@@ -26,11 +26,11 @@ export default function permutate (data) {
  *     => ['h', 'hi', 'j', 'jo', 'joe']
  */
 
-export function permutateString (str) {
+export function permutateString(str) {
   let words = []
   let inputs = splitwords(str)
 
-  inputs.forEach(word => {
+  inputs.forEach((word) => {
     words = words.concat(permutateWord(word))
   })
 
@@ -45,7 +45,7 @@ export function permutateString (str) {
  *     => ['h', 'he', 'hel', 'hell', 'hello']
  */
 
-export function permutateWord (str) {
+export function permutateWord(str) {
   let words = []
   const len = str.length
   for (var i = 1; i <= len; ++i) {
@@ -62,10 +62,11 @@ export function permutateWord (str) {
  *     => ['hello', 'world']
  */
 
-export function splitwords (str) {
-  const words = str.toLowerCase()
+export function splitwords(str) {
+  const words = str
+    .toLowerCase()
     .split(/[ /\-_]/)
-    .filter(k => k && k.length !== 0)
+    .filter((k) => k && k.length !== 0)
 
   return words
 }

_parcel/helpers/preview.js

@@ -2,6 +2,6 @@
  * Checks if we're in preview mode (?preview=1).
  */
 
-export function isPreview () {
+export function isPreview() {
   return window.location.search.indexOf('preview=1') !== -1
 }

_parcel/helpers/qs.js

@@ -2,16 +2,16 @@
  * Helper: minimal qs implementation
  */
 
-export default function qs (search) {
+export default function qs(search) {
   search = search.substr(1)
-  const parts = search.split('&').map(p => p.split('='))
+  const parts = search.split('&').map((p) => p.split('='))
   return parts.reduce((result, part) => {
     result[part[0]] = qsdecode(part[1])
     return result
   }, {})
 }
 
-export function qsdecode (string) {
+export function qsdecode(string) {
   if (!string) string = ''
   string = string.replace(/\+/g, ' ')
   return string

_parcel/helpers/search.js

@@ -0,0 +1,43 @@
+import { splitwords } from './permutate'
+import qsa from 'dom101/query-selector-all'
+
+/**
+ * Show everything.
+ *
+ * @example
+ *     Search.showAll()
+ */
+
+export function showAll() {
+  qsa('[data-search-index]').forEach((el) => {
+    el.removeAttribute('hidden')
+    el.style.removeProperty('display')
+  })
+}
+
+/**
+ * Search for a given keyword.
+ *
+ * @example
+ *     Search.show('hello')
+ */
+
+export function show(val) {
+  const keywords = splitwords(val)
+
+  if (!keywords.length) return showAll()
+
+  const selectors = keywords
+    .map((k) => `[data-search-index~=${JSON.stringify(k)}]`)
+    .join('')
+
+  qsa('[data-search-index]').forEach((el) => {
+    el.setAttribute('hidden', true)
+    el.style.setProperty('display', "none")
+  })
+
+  qsa(selectors).forEach((el) => {
+    el.removeAttribute('hidden')
+    el.style.removeProperty('display')
+  })
+}

_parcel/helpers/store.js

@@ -9,7 +9,7 @@
  *     })
  */
 
-export function update (key, fn) {
+export function update(key, fn) {
   if (!window.localStorage) return
   let data = JSON.parse(window.localStorage[key] || '{}')
   data = fn(data)
@@ -23,7 +23,7 @@ export function update (key, fn) {
  *     const data = fetch('dismissed')
  */
 
-export function fetch (key) {
+export function fetch(key) {
   if (!window.localStorage) return
   return JSON.parse(window.localStorage[key] || '{}')
 }

_parcel/initializers/onmount.js

@@ -6,5 +6,7 @@ import onmount from 'onmount'
  */
 
 ready(() => {
-  setTimeout(() => { onmount() })
+  setTimeout(() => {
+    onmount()
+  })
 })

_parcel/initializers/prism.js

@@ -0,0 +1 @@
+window.Prism = require('prismjs')

_parcel/wrapify/__tests__/index.test.js

@@ -0,0 +1,88 @@
+/* eslint-env jest */
+import wrapify from '../index'
+
+it(
+  'simple usage',
+  run(
+    `
+  <div>
+    <h2>simple usage<h2>
+
+    <h3>install</h3>
+    <p>(install)</p>
+
+    <h3>usage</h3>
+    <p>(usage)</p>
+  </div>
+`,
+    (root) => {
+      expect(
+        root.querySelectorAll('.h2-section .h3-section-list .h3-section').length
+      ).toEqual(2)
+    }
+  )
+)
+
+it(
+  'h3 with class',
+  run(
+    `
+  <div>
+    <h3 class='-hello'>install</h3>
+    <p>(install)</p>
+  </div>
+`,
+    (root) => {
+      expect(root.querySelectorAll('div.h3-section.-hello').length).toEqual(1)
+      expect(
+        root.querySelectorAll('div.h3-section-list.-hello').length
+      ).toEqual(1)
+    }
+  )
+)
+
+it(
+  'multiple h2s',
+  run(`
+  <div>
+    <h2>multiple h2<h2>
+
+    <h3>install</h3>
+    <p>(install)</p>
+
+    <h3>usage</h3>
+    <p>(usage)</p>
+
+    <h2>getting started<h2>
+
+    <h3>first</h3>
+    <p>(first)</p>
+
+    <h3>second</h3>
+    <p>(second)</p>
+  </div>
+`)
+)
+
+function run(input, fn) {
+  return function () {
+    const div = document.createElement('div')
+    div.innerHTML = input
+
+    const root = div.children[0]
+    wrapify(root)
+    expect(root).toMatchSnapshot()
+
+    if (fn) fn(root)
+  }
+}
+
+it(
+  'h2 + pre',
+  run(`
+  <div>
+    <h2>heading</h2>
+    <pre class='language-markdown'>(code)</pre>
+  </div>
+`)
+)

_parcel/wrapify/index.js

@@ -1,6 +1,12 @@
 import matches from 'dom101/matches'
 import addClass from 'dom101/add-class'
-import { appendMany, nextUntil, before, findChildren, createDiv } from '../helpers/dom'
+import {
+  appendMany,
+  nextUntil,
+  before,
+  findChildren,
+  createDiv
+} from '../helpers/dom'
 
 /**
  * Wraps h2 sections into h2-section.
@@ -9,14 +15,16 @@ import { appendMany, nextUntil, before, findChildren, createDiv } from '../helpe
  * @private
  */
 
-export default function wrapify (root) {
+export default function wrapify(root) {
   // These are your H2 sections. Returns a list of .h2-section nodes.
   const sections = wrapifyH2(root)
 
   // For each h2 section, wrap the H3's in them
-  sections.forEach(section => {
+  sections.forEach((section) => {
     const bodies = findChildren(section, '[data-js-h3-section-list]')
-    bodies.forEach(body => { wrapifyH3(body) })
+    bodies.forEach((body) => {
+      wrapifyH3(body)
+    })
   })
 }
 
@@ -33,14 +41,15 @@ export default function wrapify (root) {
  * @private
  */
 
-function wrapifyH2 (root) {
+function wrapifyH2(root) {
   return groupify(root, {
     tag: 'h2',
     wrapperFn: () => createDiv({ class: 'h2-section' }),
-    bodyFn: () => createDiv({
-      class: 'body h3-section-list',
-      'data-js-h3-section-list': ''
-    })
+    bodyFn: () =>
+      createDiv({
+        class: 'body h3-section-list',
+        'data-js-h3-section-list': ''
+      })
   })
 }
 
@@ -57,7 +66,7 @@ function wrapifyH2 (root) {
  * @private
  */
 
-function wrapifyH3 (root) {
+function wrapifyH3(root) {
   return groupify(root, {
     tag: 'h3',
     wrapperFn: () => createDiv({ class: 'h3-section' }),
@@ -71,27 +80,27 @@ function wrapifyH3 (root) {
  * @private
  */
 
-export function groupify (el, { tag, wrapperFn, bodyFn }) {
+export function groupify(el, { tag, wrapperFn, bodyFn }) {
   const first = el.children[0]
   let result = []
 
   // Handle the markup before the first h2
   if (first && !matches(first, tag)) {
     const sibs = nextUntil(first, tag)
-    result.push(wrap(first, null, [ first, ...sibs ]))
+    result.push(wrap(first, null, [first, ...sibs]))
   }
 
   // Find all h3's inside it
   const children = findChildren(el, tag)
 
-  children.forEach(child => {
+  children.forEach((child) => {
     const sibs = nextUntil(child, tag)
     result.push(wrap(child, child, sibs))
   })
 
   return result
 
-  function wrap (pivot, first, sibs) {
+  function wrap(pivot, first, sibs) {
     const wrap = wrapperFn()
 
     const pivotClass = pivot.className

_sass/2015/base/normalize.scss

@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

_sass/2015/base/typography.sass

@@ -0,0 +1,58 @@
+@import url('//brick.a.ssl.fastly.net/Roboto:400,400i,700')
+@import url('//fonts.googleapis.com/css?family=Raleway:800')
+@import url('//fonts.googleapis.com/css?family=Fira+Mono:400,400i')
+@import url('//brick.a.ssl.fastly.net/EB+Garamond:400i')
+
+$body-font-size: 17px
+$body-line-height: 1.7
+
+@mixin font-size($multiplier, $lhmultiplier, $size, $line-height)
+  font-size: $size * $multiplier
+  @if $line-height != none
+    line-height: $line-height * $lhmultiplier
+
+@mixin body-font
+  font-family: 'Roboto', sans-serif
+  font-weight: 400
+
+@mixin italic-font
+  font-family: 'eb garamond', serif
+  font-weight: 400
+  font-style: italic
+  +kernliga
+
+@mixin headline-font
+  font-family: 'eb garamond', serif
+  font-weight: 400
+  font-style: italic
+  +kernliga
+
+@mixin caps-font
+  text-transform: uppercase
+  letter-spacing: 2px
+
+@mixin mono-font
+  font-family: 'fira mono', monospace
+  font-weight: 400
+  letter-spacing: -0.5px
+  +no-antialias
+
+@mixin bold-font
+  font-family: 'raleway', sans-serif
+  font-weight: 800
+
+/*
+ * sizes
+ */
+
+@mixin italic-font-size($size, $line-height: none)
+  +font-size(1.0, 1.0, $size, $line-height)
+
+@mixin headline-font-size($size, $line-height: none)
+  +font-size(1.0, 1.0, $size, $line-height)
+
+@mixin bold-font-size($size, $line-height: none)
+  +font-size(1.0, 1.0, $size, $line-height)
+
+@mixin mono-font-size($size, $line-height: none)
+  +font-size(1.0, 1.0, $size, $line-height)

_sass/2015/base/utils.sass

@@ -0,0 +1,41 @@
+@mixin kernliga
+  font-size-adjust: none
+  // don't display digraphs in languages that don't support it
+  -webkit-font-language-override: normal
+  font-language-override: normal
+
+  // use font-defined kerning info
+  -webkit-font-kerning: auto
+  font-kerning: auto
+
+  // opentype options: kerning, ligatures, horiz ligatures, discretionary ligatures, contextual swash
+  // https://en.wikipedia.org/wiki/List_of_typographic_features
+  -webkit-font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"
+  font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"
+
+  // allow browser to auto-infer missing glyphs
+  font-synthesis: weight style
+
+  // swashes on first letters
+  // &:first-letter
+  //   font-feature-settings: "kern", "swsh"
+  //   -webkit-font-feature-settings: "kern", "swsh"
+
+@mixin antialias
+  text-rendering: optimizeLegibility
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+@mixin no-antialias
+  text-rendering: auto
+  -webkit-font-smoothing: subpixel-antialiased
+  -moz-osx-font-smoothing: auto
+
+@mixin clearfix
+  &:after
+    display: table
+    content: ''
+    clear: both
+    height: 0
+    zoom: 1
+

_sass/2015/components/about-the-site.sass

@@ -0,0 +1,105 @@
+/*
+ * .about-the-site
+ */
+
+.about-the-site
+  &
+    position: relative
+
+  .container
+    text-align: center
+    padding: 3em 80px
+    margin: 0 auto
+    +clearfix
+
+    @media (max-width: 768px)
+      padding-left: 40px
+      padding-right: 40px
+
+  &:before
+    content: ''
+    position: absolute
+    display: block
+    left: 20px
+    right: 20px
+    top: 0
+    border-top: solid 1px $hairline
+
+  &
+    +body-font
+    font-size: 0.85em
+    color: lighten($gray, 20%)
+
+  a, a:visited
+    color: lighten($gray, 10%)
+    box-shadow: inset 0 -1px rgba(black, 0.05)
+    padding-bottom: 2px
+
+  a:hover, a:focus
+    color: $black
+    box-shadow: inset 0 -2px $accent
+
+  strong
+    +bold-font
+
+  strong a, strong a:visited
+    color: $black
+    box-shadow: none
+
+  strong a:hover, strong a:focus
+    color: $black
+    box-shadow: inset 0 -2px $accent
+
+  .identity
+    margin: 0
+    margin-top: 0.2em
+    float: right
+    +italic-font
+    +italic-font-size(2.5em)
+
+  .identity a,
+  .identity a:visited
+    color: $black
+    box-shadow: none
+
+  .identity a:hover,
+  .identity a:focus
+    color: $accent
+
+  .blurb
+    margin: 0
+    max-width: 500px
+    text-align: left
+    float: left
+    line-height: 1.55
+
+  .back
+    float: right
+    margin-top: 0.4em
+    margin-right: 2em
+
+  .fleuron:before
+    content: '\f492'
+    font-family: Ionicons
+    font-size: 16px
+    font-weight: normal
+    font-style: normal
+    display: inline-block
+    vertical-align: middle
+    color: $black
+    margin: 0 7px
+
+    @media (max-width: 768px)
+      display: none
+
+  @media (max-width: 768px)
+    .identity
+      float: left
+      clear: both
+    .blurb
+      float: none
+      margin-bottom: 1em
+      width: auto
+    .back
+      float: right
+      margin-right: 0

_sass/2015/components/big-button.sass

@@ -0,0 +1,66 @@
+.big-button,
+a.big-button
+  display: inline-block
+
+  width: 180px
+  height: 50px
+  line-height: 50px - 2px
+  padding: 0
+  border-radius: 30px
+  font-size: 0.85em
+  box-shadow: none
+  background: transparent
+
+  @media (max-width: 768px)
+    width: 140px
+    height: 40px
+    line-height: 40px - 2px
+
+  &, &:visited
+    border: solid 2px $accent
+    color: $accent
+
+  &.-back,
+  &.-back:visited
+    border: solid 1px rgba($gray, 0.2)
+    color: $gray
+
+  &.-back:before,
+  &.-next:after
+    font-family: Ionicons
+    font-size: 20px
+    display: inline-block
+    vertical-align: middle
+    position: relative
+    top: -1px
+
+  &.-back:before
+    content: '\f38f'
+
+  &.-next:after
+    content: '\f3d1'
+    margin-left: 16px
+    top: 0
+
+  &.-slim
+    width: 60px
+    border-width: 2px
+    height: 60px
+    line-height: 60px
+    border-radius: 50%
+
+    @media (max-width: 768px)
+      width: 40px
+      height: 40px
+      line-height: 40px
+
+  &:hover, &:focus
+    background: $accent
+    border-color: transparent
+    color: white
+    box-shadow: none
+
+  &.-back:hover,
+  &.-back:focus
+    background: $accent
+    color: white

_sass/2015/components/brief-intro.sass

@@ -0,0 +1,8 @@
+/*
+ * .brief-intro -- Brief introduction
+ */
+
+.brief-intro
+  font-size: 1.1em
+  color: $gray
+

_sass/2015/components/full-image.sass

@@ -0,0 +1,38 @@
+/*
+ * .full-image -- full width image containers
+ */
+
+.full-image
+  &
+    overflow: hidden
+    text-align: center
+    position: relative
+
+  img
+    background: #fcfcfc
+
+  &.cropped img,
+  &.cropped img:first-child:last-child
+    margin-bottom: -50px
+    display: block
+    background: transparent
+
+  &.cropped:after
+    content: ''
+    display: block
+    position: absolute
+    bottom: 0
+    left: 20px
+    right: 20px
+    border-bottom: solid 1px $lightgray
+
+  &.stretched img
+    width: 100%
+
+  @media (max-width: 768px)
+    margin-left: -20px
+    margin-right: -20px
+
+  @media (min-width: 769px)
+    width: 100vw
+    margin-left: calc(-50vw + #{$page-width} / 2)

_sass/2015/components/hint.sass

@@ -0,0 +1,14 @@
+.hint--top, .hint--bottom
+  &:before
+    margin-top: -14px
+    margin-left: -8px
+    border-radius: 2px
+
+  &:before, &:after
+    transition-duration: 10ms
+
+  &:after
+    box-shadow: none
+    border-radius: 2px
+    text-shadow: none
+    margin-left: -55px

_sass/2015/components/hljs.sass

@@ -0,0 +1,78 @@
+.hljs-literal,
+.hljs-number,
+.hljs-string,
+.hljs-symbol,
+.hljs-value
+  color: $accent
+
+.hljs-key,
+.hljs-attribute
+  color: darken($accent, 20%)
+
+.hljs-keyword,
+.hljs-constant
+  color: $black
+
+.hljs-comment
+  color: $gray
+  font-style: italic
+
+//
+// Prism
+//
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata
+  color: $gray
+  font-style: italic
+
+.token.punctuation
+  color: #999
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted
+  color: #905
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted
+  color: $accent
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string
+  color: #a67f59
+
+.token.atrule,
+.token.attr-value,
+.token.keyword
+  color: #07a
+
+.token.function
+  color: #DD4A68
+
+.token.regex,
+.token.important,
+.token.variable
+  color: #e90
+
+.token.important,
+.token.bold
+  font-weight: bold
+.token.italic
+  font-style: italic
+
+.token.entity
+  cursor: help

_sass/2015/components/next-article.sass

@@ -0,0 +1,142 @@
+/*
+ * .next-article -- lead into the next article
+ */
+
+.next-article
+  $bg: darken(#8e44ad, 15%)
+  $textcolor: saturate(mix(white, $bg, 85%), 90%)
+
+  &
+    display: block
+    padding: 0
+    margin-left: 40px
+    margin-right: 40px
+    position: relative
+
+
+  &, &:hover, &:focus
+    box-shadow: none
+
+  &:after
+    content: ''
+    display: block
+    position: absolute
+    left: -20px
+    right: -20px
+    bottom: 0
+    border-bottom: solid 1px $hairline
+
+  // suppress its hairline
+  & + .about-the-site:before
+    display: none
+
+  @media (max-width: 768px)
+    margin-left: 0
+    margin-right: 0
+
+    // remove horizontal line
+    & + .about-the-site:before
+      display: none
+
+  .container
+    display: block
+    text-align: center
+    padding: 10em 20px
+
+    @media (min-width: 769px)
+      margin-top: 8em
+      padding: 8em 20px
+
+  .h3
+    display: block
+    margin: 0 auto auto
+    padding: 0
+    font-size: 2.2em
+    line-height: 1.3em
+    +bold-font
+    color: white
+    transition: all 250ms linear
+
+    // &:hover > span
+      // box-shadow: inset 0 -2px $accent
+      // text-shadow: 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg
+
+    @media (max-width: 768px)
+      font-size: 1.5em
+
+  .h3, .excerpt
+    max-width: $page-width * 0.9
+
+  .h3 + .excerpt
+    margin-top: 0.5em
+
+  .excerpt
+    display: block
+    margin-left: auto
+    margin-right: auto
+    font-size: 1em
+    line-height: 1.6em
+
+  .big-button
+    margin-top: 2em
+
+  h3 a:hover,
+  h3 a:focus
+    color: $accent
+
+  .heading
+    display: block
+    +caps-font
+    font-size: 0.7em
+    margin-bottom: 1em
+
+  .heading:before
+    font-family: Ionicons
+    content: '\f4a8'
+    margin-right: 15px
+    font-size: 16px
+    display: inline-block
+    vertical-align: middle
+    color: $accent
+
+  .big-button,
+  a.big-button
+    background: transparent
+
+    &, &:visited
+      border-color: $accent
+      color: white
+
+    &:hover, &:focus
+      background: $accent
+      border-color: transparent
+
+@mixin recolor-article($bg, $bg2, $url: '', $a: 0.9, $angle: 177deg)
+  $w: 1500
+  $h: 10
+  $textcolor: mix(white, $bg, 75%)
+  $notch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$w}' height='#{$h}' version='1.1'><polyline fill='white' points='#{$w},0 0,0 0,#{$h}'/></svg>"
+
+  &
+    background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 0%), $a), rgba(adjust-color($bg2, $lightness: 0%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
+  &:hover, &:focus
+    background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 1%), $a), rgba(adjust-color($bg2, $lightness: 1%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
+  .excerpt, .heading
+    color: $textcolor
+
+.next-article
+  &
+    +recolor-article(#612e76, #5867cc)
+  &.-v2
+    text-shadow: 0 1px 1px rgba(black, 0.5)
+    +recolor-article(#027d65, #00536b, "bg/pebbles.jpg", 0.7, $angle: 35deg)
+  &.-v3
+    text-shadow: 0 1px 1px rgba(black, 0.5)
+    +recolor-article(#1d2434, #202a3e, "bg/roughwall.jpg", 0.9, $angle: 1deg)
+  &.-v4
+    text-shadow: 0 1px 1px rgba(black, 0.5)
+    +recolor-article(#902014, #c77e0a, "bg/woodfloor.jpg", 0.45, $angle: 1deg)
+  &.-v5
+    text-shadow: 0 1px 1px rgba(black, 0.5)
+    +recolor-article(#17283a, #25295e, "bg/stairs.jpg", 0.85, $angle: 1deg)
+  // &.next-article

_sass/2015/components/post-headline.sass

@@ -0,0 +1,64 @@
+/*
+ * .post-headline -- H1's of posts
+ */
+
+.post-headline
+  &
+    margin: 1.5em auto 3em auto
+    text-align: center
+
+  .post-icon
+    margin-bottom: 2px
+
+  h1
+    text-align: center
+    margin-bottom: 0
+    +headline-font
+    +headline-font-size(2.8em, 1.2)
+    width: 80%
+    margin-left: auto
+    margin-right: auto
+
+    @media (max-width: 768px)
+      +headline-font-size(2em)
+
+  .meta
+    display: block
+    text-align: center
+    margin: 0
+    margin-top: 1em
+    font-weight: normal
+    +caps-font
+    font-size: 0.8em
+
+  .meta .author,
+  .meta .date
+    margin: 0 5px
+    padding-bottom: 2px
+
+  .meta a,
+  .meta a:visited
+    color: $gray
+
+  .meta a:hover,
+  .meta a:focus
+    &, span
+      color: $gray
+
+    time
+      color: $black
+      box-shadow: inset 0 -2px $accent
+
+  a, a:visited, a:focus, a:hover
+    color: $black
+    text-decoration: none
+    box-shadow: none
+
+  .pubbox
+    margin-top: 32px
+    font-size: 16px
+    line-height: 1.5
+
+  .carbon-img
+    margin-top: 4px
+

_sass/2015/components/post-icon.sass

@@ -0,0 +1,58 @@
+/*
+ * .post-icon -- category icons
+ */
+
+$icon-size: 56px
+
+@mixin iconify($color, $text)
+  &
+    background: $color
+    color: lighten($color, 50%)
+    box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba($color, 0.2), 1px 3px rgba($color, 0.3)
+
+  span:after
+    content: $text
+
+.post-icon,
+abbr.post-icon
+  border: 0
+  margin: 0
+  display: inline-block
+  width: $icon-size
+  height: $icon-size
+  line-height: $icon-size + 2px
+  text-align: center
+  border-radius: 50%
+  color: #aaa
+  background: #eee
+
+  +body-font
+  font-size: 16px
+  letter-spacing: 1px
+
+  span:after
+    content: attr(data-label)
+    font-size: 0.9em
+    position: relative
+    top: -1px
+
+  @media (max-width: 480px)
+    transform: scale(0.75)
+
+  &.-icon-css
+    +iconify(#3498db, 'CSS')
+    font-size: 14px
+    line-height: $icon-size + 2px
+  &.-icon-development
+    +iconify(#34495e, 'DEV')
+    font-size: 14px
+    line-height: $icon-size + 2px
+  &.-icon-ruby
+    +iconify(#e74c3c, 'RB')
+    text-indent: 2px
+  &.-icon-javascript
+    +iconify(#2ecc71, 'JS')
+    text-indent: 1px
+  &.-icon-productivity
+    +iconify(#2ecc71, 'PROD')
+    text-indent: 1px

_sass/2015/components/post-index.sass

@@ -0,0 +1,73 @@
+/*
+ * .post-index (et al) -- utility classes
+ */
+
+.post-index
+  &
+    margin: 0 auto 4em auto
+    position: relative
+    padding-top: 4em
+    font-size: 0.9em
+
+  .container
+    overflow: hidden
+    max-width: $page-width
+    margin: 0 auto
+
+  h3
+    +caps-font
+    color: $gray
+    font-size: 1em
+
+.post-index-item
+  display: block
+  overflow: hidden
+  padding: 6px 20px
+  border-top: solid 1px $hairline
+
+  &, &:hover, &:focus
+    box-shadow: none
+
+  &:hover, &:focus
+    .article
+      transition: none
+
+  .date
+    display: block
+
+  .date
+    width: 100px
+    font-size: 0.8em
+    color: $gray
+
+  @media (min-width: 768px)
+    padding-left: 0
+    padding-right: 0
+
+    .date, .tag
+      margin-top: 0.2em
+
+    .date, article
+      float: left
+
+    .tag
+      float: right
+
+  .article
+    color: $text
+    margin-right: 3px
+    transition: all 100ms linear
+
+  &:hover .article
+    color: $accent
+
+  &:nth-of-type(1) .article,
+  &:nth-of-type(2) .article,
+  &:nth-of-type(3) .article,
+  &:nth-of-type(4) .article
+    +bold-font
+
+  .tag
+    color: $gray
+    font-weight: normal
+    font-size: 0.8em

_sass/2015/components/post-list.sass

@@ -0,0 +1,23 @@
+.post-item
+  max-width: $page-width
+  margin: 0 auto
+
+.post-list
+  margin: 40px auto
+  padding: 20px
+
+  @media (max-width: 768px)
+    margin: 0 auto
+
+.post-list > .post-item:not(:first-child)
+  &:before
+    content: ''
+    display: block
+    width: 150px
+    height: 1px
+    background: $hairline
+    margin: 7em auto
+
+    @media (max-width: 768px)
+      margin: 4em auto
+

_sass/2015/components/site-header.sass

@@ -0,0 +1,17 @@
+
+.site-header
+  text-align: center
+  padding: 0 20px
+
+  .container
+    padding: 15px 20px
+    font-size: 0.9em
+    color: rgba($gray, 0.6)
+    border-bottom: solid 1px $hairline
+
+  em
+    +italic-font
+    +italic-font-size(1.1em)
+    font-size: 1.1em
+    color: $text
+

_sass/2015/components/social-list.sass

@@ -0,0 +1,73 @@
+/*
+ * .social-list -- social share icons
+ */
+
+.social-list
+  &, li
+    margin: 0
+    padding: 0
+
+  &
+    display: block
+    text-align: center
+    width: 100%
+    margin-top: 2em
+
+    @media (min-width: 768px)
+      margin-top: 4em
+
+  &.-top
+    margin-top: -2em
+
+    @media (min-width: 768px)
+      margin-top: -1em
+
+  li
+    display: inline-block
+
+  a
+    display: inline-block
+    padding: 6px
+    text-align: center
+    box-shadow: none
+
+  a:before, a:after
+    transition: all 100ms linear
+
+  .text
+    display: none
+
+  a:before
+    font-family: 'Ionicons'
+    font-weight: normal
+    font-style: normal
+    font-size: 18px
+    width: 40px
+    height: 40px
+    line-height: 40px
+    display: inline-block
+    text-align: center
+    border: solid 2px transparent
+    border-radius: 50%
+
+  @mixin socialiconify($color, $content, $filled)
+    &
+      color: darken($lightgray, 10%)
+
+    &:hover,
+    &:focus
+      color: $color
+    &:before
+      content: $filled
+    &:hover:before,
+    &:focus:before
+      border-color: $color
+      content: $filled
+
+  .facebook a
+    +socialiconify(#4c66a4, '\f230', '\f231')
+  .twitter a
+    +socialiconify(dodgerblue, '\f242', '\f243')
+  .googleplus a
+    +socialiconify(#f53, '\f234', '\f235')
+

_sass/2015/elements/body.sass

@@ -0,0 +1,157 @@
+/*
+ * html base (html, body)
+ */
+
+*
+  +antialias
+
+html
+  font-size: $body-font-size
+  line-height: $body-line-height
+  background: $bg
+  color: $text
+
+  @media (max-width: 768px)
+    font-size: floor($body-font-size * 14/17)
+
+html
+  transition: opacity 200ms linear
+  opacity: 1
+
+html, input, textarea, td, th
+  +body-font
+
+html, body
+  overflow-x: hidden
+
+/*
+ * fouc prevention
+ */
+
+body
+  transition: opacity 100ms linear
+
+html.no-js *
+  opacity: 0
+
+/*
+ * basic styles (a, p, img...)
+ */
+
+a, a:visited
+  color: $text
+  text-decoration: none
+  box-shadow: inset 0 -1px rgba(#888, 0.3)
+  transition: all 100ms linear
+
+a:focus, a:hover
+  box-shadow: inset 0 -2px $accent
+  color: $black
+
+strong, b
+  &, a, a:visited
+    color: $black
+
+h3, p, ul, ol
+  margin: 1.5em 0
+
+/*
+ * iframes
+ */
+
+p > iframe
+  margin: 0 auto
+  display: block
+
+/*
+ * lists
+ */
+
+ul, ol
+  padding-left: 1.5em
+
+ul
+  &
+    list-style: none
+
+  > li
+    position: relative
+
+  > li:before
+    content: ''
+    display: block
+    position: absolute
+    left: -1.4em
+    top: 0
+    margin-top: 0.7em
+    width: 4px
+    height: 4px
+    border-radius: 50%
+    border: solid 2px $lightgray
+
+    @media (max-width: 768px)
+      width: 3px
+      height: 3px
+
+/*
+ * headings
+ */
+
+h2
+  &, a, a:visited
+    color: $black
+
+h2
+  text-align: center
+  +headline-font
+  +headline-font-size(2em, 1.4)
+  margin: 2em auto 0 auto
+  @media (max-width: 768px)
+    +headline-font-size(1.6em)
+
+@media (min-width: 769px)
+  h2:before,
+  h2:after
+    content: ''
+    display: inline-block
+    vertical-align: middle
+    width: 46px
+    height: 1px
+    background: $lightgray
+    margin: 0 30px
+
+h3
+  +bold-font
+  +bold-font-size(1.1em)
+  margin-top: 2em
+
+  &, a, a:visited
+    color: $black
+
+  @media (max-width: 768px)
+    margin-top: 1.5em
+
+h3 + p
+  margin-top: -1.7em
+
+/*
+ * images
+ */
+
+p > img:first-child:last-child
+  display: block
+  margin: 0 auto
+  max-width: 100%
+
+code
+  +mono-font
+  +mono-font-size(0.9em)
+
+hr
+  width: 200px
+  height: 1px
+  border: 0
+  background: $lightgray
+  margin: 3em auto
+  display: block
+

_sass/2015/elements/code.sass

@@ -0,0 +1,119 @@
+$term-border: mix($accent, white, 50%)
+
+/*
+ * pre > code -- code blocks
+ */
+
+pre > code
+  +mono-font
+  +mono-font-size(0.82em)
+  color: $text
+  padding-right: 20px
+  // box-shadow: inset 1px 1px rgba(black, 0.06)
+
+pre
+  padding: 20px 50px
+  border-radius: 4px
+  background: $wash
+  margin: 2.2em -50px
+  line-height: 1.2em
+
+  @media (min-width: 768px)
+    border-top: solid 1px #eef3fa
+    border-bottom: solid 1px #c7d7ee
+    border-radius: 4px
+
+  @media (max-width: 768px)
+    padding: 20px
+    margin: 2em -20px
+    background: darken($wash, 3%)
+
+  @media (max-width: 660px)
+    border-radius: 0
+
+pre + pre
+  margin-top: -1.5em
+
+pre.medium
+  > code
+    font-size: 1em
+  @media (min-width: 768px)
+    padding-top: 30px
+    padding-bottom: 30px
+
+pre.large
+  > code
+    font-size: 1.1em
+    line-height: 1.4em
+  @media (min-width: 768px)
+    padding-top: 30px
+    padding-bottom: 30px
+
+pre.terminal,
+pre.light
+  &
+    background: white
+    border: solid 1px $term-border
+    position: relative
+
+pre.light
+  background: #fdfdff
+
+pre.terminal
+  &
+    padding-top: 56px
+
+  &.large
+    padding-top: 65px
+
+  &:before
+    content: ''
+    display: block
+    height: 34px
+    line-height: 34px
+    background: white
+    border-bottom: solid 1px $term-border
+    border-top-left-radius: 3px
+    border-top-right-radius: 3px
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    +bold-font
+
+  &:after
+    content: ''
+    position: absolute
+    display: block
+    width: 4px
+    height: 4px
+    border-radius: 50%
+    left: 15px
+    top: 15px
+    font-size: 20px
+    background-color: $term-border
+    box-shadow: 20px 0 $term-border, 40px 0 $term-border
+
+  @media (max-width: 768px)
+    margin-left: 0
+    margin-right: 0
+
+pre + pre
+  margin-top: -1.7em
+
+@media (min-width: 769px)
+  pre.cursor > code > :last-child:after
+    content: ''
+    display: inline-block
+    width: 3px
+    height: 1em
+    transform: scaleY(1.5) translateY(0.1em)
+    margin-left: 0.4em
+    background-color: $accent
+    -webkit-animation: blink 700ms steps(2,end) infinite
+    -moz-animation: blink 700ms steps(2,end) infinite
+    animation: blink 700ms steps(2,end) infinite
+
+h3 + pre,
+h3 + table
+  margin-top: -1em

_sass/2015/elements/table.sass

@@ -0,0 +1,73 @@
+/*
+ * table
+ */
+
+table
+  min-width: 100%
+  margin-top: 2em
+  margin-bottom: 2em
+  font-size: 0.9em
+  border-bottom: solid 1px $gray
+
+thead > tr:first-child > th,
+thead > tr:first-child > td,
+tbody > tr:first-child > th,
+tbody > tr:first-child > td
+  border-top: solid 1px $gray
+
+td, th
+  text-align: left
+  border-top: solid 1px $hairline
+  padding: 8px 10px
+
+th
+  +bold-font
+  color: $black
+
+td:first-child,
+th:first-child
+  text-align: left
+  padding-left: 0
+
+td:last-child,
+th:last-child
+  padding-right: 0
+
+table.no-head
+  thead
+    display: none
+
+table.shortcuts
+  &
+    table-layout: fixed
+
+  thead
+    display: none
+
+  th:nth-child(1), td:nth-child(1)
+    width: 25%
+
+  th:nth-child(2), td:nth-child(2)
+    width: 75%
+
+  td:first-child > code
+    background: #fcfcfc
+    padding: 5px 10px
+    border-radius: 2px
+
+table.lite-headings
+  &
+    border-bottom: solid 1px mix($gray, $lightgray, 50%)
+    
+  th
+    color: mix($gray, $lightgray, 50%)
+    font-size: 0.9em
+
+  thead > tr:first-child > td,
+  thead > tr:first-child > th
+    border-top: solid 1px mix($gray, $lightgray, 50%)
+
+  tbody > tr:first-child > td,
+  tbody > tr:first-child > th
+    border-top: solid 1px $hairline
+

_sass/2015/helpers/blink.sass

@@ -0,0 +1,11 @@
+@keyframes blink
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@-webkit-keyframes blink
+  0%
+    opacity: 0
+  100%
+    opacity: 1

_sass/2015/helpers/general.sass

@@ -0,0 +1,27 @@
+/*
+ * .center (et al) -- utility classes
+ */
+
+.center
+  text-align: center
+
+.spaced
+  @media (min-width: 769px)
+    margin-top: 4em
+    margin-bottom: 4em
+
+.spaced-more
+  @media (min-width: 769px)
+    margin-top: 6em
+    margin-bottom: 6em
+
+.spaced-less
+  @media (min-width: 769px)
+    margin-top: 2em
+    margin-bottom: 2em
+
+.wide
+  @media (min-width: 920px)
+    width: 140%
+    margin-left: -25%
+