Tech improvement: Fix CSS, and enable minification (#1472)

.github/workflows/build.yml

@@ -0,0 +1,50 @@
+name: Build and test CI
+on: push
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      # https://github.com/actions/cache/blob/master/examples.md#node---yarn
+      - name: "Cache: Get yarn cache directory path"
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: "Cache: Set up yarn cache"
+        uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      # https://github.com/actions/cache/blob/master/examples.md#ruby---bundler
+      - name: "Cache: Set up bundler cache"
+        uses: actions/cache@v2
+        with:
+          path: vendor/bundle
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-gems-
+
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with: { node-version: '12.x' }
+
+      - name: Use Ruby
+        uses: actions/setup-ruby@v1
+        with: { ruby-version: '2.7.1' }
+
+      - name: Setup dependencies
+        run: |
+          yarn --frozen-lockfile
+          bundle config path vendor/bundle
+          bundle install --jobs 4 --retry 3
+
+      - run: yarn build
+      - run: yarn test
+      - run: yarn test:smoke

.travis.yml

@@ -14,7 +14,7 @@ install:
 script:
   - yarn build
   - yarn test
-  - if ! make test; then make test-warning; exit 16; fi
+  - yarn test:smoke
 
 cache:
   bundler: true

Makefile

@@ -17,18 +17,3 @@ _site:
 
 dev: 
 	yarn dev
-
-test: _site ## Runs rudimentary tests
-	@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 "========="

_sass/2017/components/announcements-item.scss

@@ -52,7 +52,8 @@
   }
 
   & > .close::before {
-    content: "\00D7";
+    // https://stackoverflow.com/a/30421654
+    content: unquote("\"")+str-insert("00D7", "\\", 1)+unquote("\"");
     font-size: 14px;
   }
 }

_support/smoke_test.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+set -eou pipefail
+
+exit_failure() {
+  echo 'Failed :('
+  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.'
+}
+
+trap exit_failure ERR
+
+
+files=(
+  _site/vim.html
+  _site/react.html
+  _site/index.html
+)
+
+for fn in "${files[@]}"; do
+  echo ''
+  echo -n "→ Checking: $fn... "
+  test -f "$fn"
+  grep -q '<script src' "$fn"
+  grep -q 'assets/packed/app.js' "$fn"
+  grep -q 'doctype html' "$fn"
+  grep -q 'link rel="canonical"' "$fn"
+done
+echo ''
+echo ''
+echo "✓ Smoke tests good :)"

cssnano.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  preset: [
-    'default',
-    {
-      calc: false,
-      discardComments: {
-        removeAll: true
-      }
-    }
-  ]
-}

netlify.toml

@@ -1,3 +1,16 @@
 [build]
   command = "yarn build"
   publish = "_site/"
+
+# [[plugins]]
+#   # https://www.npmjs.com/package/netlify-plugin-minify-html
+#   package = "netlify-plugin-minify-html"
+#  
+#   [plugins.inputs]
+#     contexts = [ 'production', 'branch-deploy', 'deploy-preview' ]
+#  
+#   # https://github.com/kangax/html-minifier#options-quick-reference
+#   [plugins.inputs.minifierOptions]
+#     removeComments = true
+#     minifyCSS = true
+#     minifyJS = true

package.json

@@ -51,6 +51,7 @@
     "prejekyll:build": "bundle",
     "prejekyll:watch": "bundle",
     "prettier:format": "prettier --write '_parcel/**/*.{js,scss}'",
-    "test": "jest"
+    "test": "jest",
+    "test:smoke": "bash _support/smoke_test.sh"
   }
 }

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}