Add the svgo tool to the docker image. (#3466)

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: gcr.io/istio-testing/website-builder:2019-02-13
+      - image: gcr.io/istio-testing/website-builder:2019-03-03
 
     working_directory: ~/site
 

Makefile

@@ -1,7 +1,7 @@
 ISTIO_SERVE_DOMAIN ?= localhost
 export ISTIO_SERVE_DOMAIN
 
-img := gcr.io/istio-testing/website-builder:2019-02-13
+img := gcr.io/istio-testing/website-builder:2019-03-03
 docker := docker run -e INTERNAL_ONLY=true -t -i --sig-proxy=true --rm -v $(shell pwd):/site -w /site $(img)
 
 ifeq ($(INTERNAL_ONLY),)
@@ -18,6 +18,9 @@ build:
 gen:
 	$(docker) scripts/gen_site.sh "" -minify -no_aliases
 
+opt:
+	$(docker) scripts/opt_site.sh
+
 lint:
 	$(docker) scripts/lint_site.sh
 

README.md

@@ -61,7 +61,6 @@ run 3 linters as a precommit requirement:
 You can run these linters locally using:
 
 ```bash
-$ make build
 $ make gen
 $ make lint
 ```
@@ -80,6 +79,22 @@ And you can set any value to an environment variable named "INTERNAL_ONLY", then
 $ make INTERNAL_ONLY=True lint
 ```
 
+## Optimizing
+
+You can run an SVG optimization tool over all SVG content in the site with:
+
+```bash
+$ make opt
+```
+
+This will go through all SVG files and rewrite them in place. You can then
+commit the resulting changes to the repo. The optimized images should look
+identical but can be considerably smaller than the original, thus saving
+load time for site visitors.
+
+Note that this repo is registered with the ImgBot GitHub app, which
+ensures we have optimal PNG images in our repo.
+
 ## Site infrastructure
 
 Here's how things work:

scripts/Dockerfile

@@ -31,6 +31,7 @@ RUN npm install -g \
     sass \
     markdown-spellcheck \
     svgstore-cli \
+    svgo \
     @babel/cli \
     @babel/core
 RUN npm install babel-preset-minify --save-dev

scripts/opt_site.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env sh
+set -e
+
+svgo --version
+
+npx svgo -f content
+npx svgo -f content_zh