ci: add graphics build step

.github/workflows/ci.yml

@@ -1,23 +1,69 @@
 name: ci
 
 on:
-    push:
-        branches:
-            - master
+    - push
+    - pull_request
 
 permissions:
     contents: write
 
 jobs:
+    build:
+        runs-on: ubuntu-latest
+        env:
+            OFFLINE: true
+        steps:
+            -   name: Checkout code
+                uses: actions/checkout@v4v4
+            -   name: Install snap
+                run: sudo apt-get update && sudo apt-get install -y snapd
+            -   name: Install draw.io
+                run: sudo snap install drawio
+            -   name: Setup Python 3.x
+                uses: actions/setup-python@v5
+                with:
+                    python-version: 3.x
+            -   run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
+            -   uses: actions/cache@v4
+                with:
+                    key: mkdocs-material-${{ env.cache_id }}
+                    path: .cache
+                    restore-keys: |
+                        mkdocs-material-
+            -   name: Install Pip requirements
+                run: pip install -r requirements.txt
+            -   name: Build SVG assets
+                working-directory: docs/assets/
+                run: build.sh
+            -   name: Build
+                run: mkdocs build
+            -   name: Upload site
+                uses: actions/upload-artifact@v2
+                with:
+                    name: site
+                    path: site
+            -   name: Upload built SVG assets
+                uses: actions/upload-artifact@v2
+                with:
+                    name: diagram-svg
+                    path: docs/assets/svg/
     deploy:
         runs-on: ubuntu-latest
+        needs: [ build ]
+        if: github.event_name == 'push' && github.ref == 'refs/heads/master'
         steps:
-            -   uses: actions/checkout@v4
+            -   name: Checkout code
+                uses: actions/checkout@v4v4
+            -   name: Install snap
+                run: sudo apt-get update && sudo apt-get install -y snapd
+            -   name: Install draw.io
+                run: sudo snap install drawio
             -   name: Configure Git Credentials
                 run: |
                     git config user.name github-actions[bot]
                     git config user.email 41898282+github-actions[bot]@users.noreply.github.com
-            -   uses: actions/setup-python@v5
+            -   name: Setup Python 3.x
+                uses: actions/setup-python@v5
                 with:
                     python-version: 3.x
             -   run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
@@ -27,5 +73,10 @@ jobs:
                     path: .cache
                     restore-keys: |
                         mkdocs-material-
-            -   run: pip install -r requirements.txt
-            -   run: mkdocs gh-deploy --force
+            -   name: Install Pip requirements
+                run: pip install -r requirements.txt
+            -   name: Build SVG assets
+                working-directory: docs/assets/
+                run: build.sh
+            -   name: Deploy
+                run: mkdocs gh-deploy --force

docs/assets/README.md

@@ -1,7 +1,11 @@
 # Assets
 
 ## Diagrams.net files (.drawio)
-Export as SVG with 300% zoom and `100` border, embedded images, and embedded fonts.
+Diagrams.net/draw.io files can be automatically exported using the `build.sh` script.
+This script is automatically run by GitHub Actions prior to publishing.
+
+If you still need to manually export, always export as SVG with `100` border,
+embedded images, and embedded fonts.
 
 ## Adobe Illustrator files (.ai)
 Export as SVG with `Responsive` and `Minify` options.

docs/assets/build.sh

@@ -0,0 +1,110 @@
+set -e
+
+DRAWIO_SEARCH_PATHS=("drawio")
+GOOGLE_FONTS_UA="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36"
+: "${PODS_GRAPHIC_BORDER:=100}"
+PODS_GRAPHIC_BORDER_SIDE=$((PODS_GRAPHIC_BORDER / 2))
+PODS_PLATFORM=$(uname -s)
+
+detectDrawio() {
+
+    if [[ $PODS_PLATFORM == "MINGW"* ]]; then
+        DRAWIO_SEARCH_PATHS+=("/c/Program Files/draw.io/draw.io.exe")
+    elif [[ $PODS_PLATFORM == "MSYS_NT"* ]]; then
+        DRAWIO_SEARCH_PATHS+=("/c/Program Files/draw.io/draw.io.exe")
+    elif grep -q -i Microsoft /proc/version; then
+        DRAWIO_SEARCH_PATHS+=("/mnt/c/Program Files/draw.io/draw.io.exe")
+    fi
+
+    for SEARCH_PATH in "${DRAWIO_SEARCH_PATHS[@]}"; do
+        if command -v "$SEARCH_PATH" &> /dev/null; then
+            DRAWIO_PATH="$SEARCH_PATH"
+            break
+        fi
+    done
+
+    if [[ -z "$DRAWIO_PATH" ]]; then
+        echo "No draw.io executable found. Please install drawio and add it to your PATH."
+        echo "For Windows (except when using WSL), you just need to install draw.io."
+        exit 1
+    fi
+}
+
+generateSvg() {
+    /bin/find diagram -name '*.drawio' | while read -r file
+    do
+        file=$(basename "${file%.drawio}")
+        if [[ -f "svg/$file.svg" ]]; then
+            rm "svg/$file.svg"
+        fi
+
+        "$DRAWIO_PATH" -x -f svg --border $PODS_GRAPHIC_BORDER -o "svg/$file.svg" "diagram/$file.drawio"
+        # Offset all the graphics by the border size, because for some reason this isn't done
+        # by draw.io itself.
+        sed -i "0,/<g>/{s/<g>/<g transform=\"translate($PODS_GRAPHIC_BORDER_SIDE, $PODS_GRAPHIC_BORDER_SIDE)\">/}" "svg/$file.svg"
+
+        embedFonts "svg/$file.svg"
+        addBackground "svg/$file.svg"
+
+        if command -v git &> /dev/null; then
+            git add "svg/$file.svg"
+        fi
+    done
+}
+
+googleFontsCssUrl() {
+    echo "https://fonts.googleapis.com/css?family=$(echo "$1" | tr ' ' '+' | tr '\n' '|' | sed 's/|$//')"
+}
+
+embedFonts() {
+    # Newline-delimited
+    USED_FONTS=$(grep -ohP "(?<=font-family(?:: |=\"))[^;]+?(?=:;|\")" "$1" | /usr/bin/sort -u)
+
+    if [[ -z "$USED_FONTS" ]]; then
+        return
+    fi
+
+    echo "Embedding fonts: $USED_FONTS"
+
+    # Get the Google Fonts CSS file
+    GOOGLE_FONTS_CSS="$(curl "$(googleFontsCssUrl "$USED_FONTS")" -H "User-Agent: $GOOGLE_FONTS_UA" | tr -d '\n')"
+    GOOGLE_FONTS_URLS="$(echo "$GOOGLE_FONTS_CSS" | grep -ohP '(?<=url\()[^)]+(?=\))' | /usr/bin/sort -u)"
+
+    CSS_ROOT=":root {"
+
+    for FONT_URL in $GOOGLE_FONTS_URLS; do
+        echo "Embedding font: $FONT_URL"
+        FONT_ID="$(basename "${FONT_URL%.*}" | tr -c '[:alnum:]' '-' | sed 's/-$//')"
+        FONT_BASE64="$(curl "$FONT_URL" | base64 -w 0)"
+        CSS_ROOT+="    --font-$FONT_ID: url('data:application/woff2;charset=utf-8;base64,$FONT_BASE64');\n"
+
+        # Replace the font URL with the variable
+        GOOGLE_FONTS_CSS="${GOOGLE_FONTS_CSS//"$FONT_URL"/var(--$FONT_ID)}"
+    done
+
+    CSS_ROOT+="}"
+
+    GOOGLE_FONTS_CSS="$CSS_ROOT\n\n$GOOGLE_FONTS_CSS"
+
+    # Embed this style in the SVG
+
+    # Break apart the <defs/> tag if it's collapsed
+    sed -i 's/<defs\/>/<defs><\/defs>/' "$1"
+    # Insert into the start of the <defs> tag
+    sed -i "0,/<defs>/{s#<defs>#<defs>\n<style type=\"text/css\">${GOOGLE_FONTS_CSS}</style>#}" "$1"
+}
+
+addBackground() {
+    SVG_WIDTH=$(grep -ohP '(?<=width=")\d+px(?=")' -m 1 "$1")
+    SVG_HEIGHT=$(grep -ohP '(?<=height=")\d+px(?=")' -m 1 "$1")
+
+    # Insert before the start of the <g> tag
+    sed -i "0,/<g/{s/<g/<rect width=\"$SVG_WIDTH\" height=\"$SVG_HEIGHT\" fill=\"\#ffffff\"\/><g/}" "$1"
+}
+
+detectDrawio
+echo "Using draw.io from $DRAWIO_PATH"
+mkdir -p svg
+generateSvg
+
+set +e

docs/disaster-event/cyclones.md

@@ -6,7 +6,7 @@ center. In the Philippines, tropical cyclones are generally referred
 to with the umbrella term "*bagyo*", which can vary from very weak
 storms to supertyphoons.
 
-![Illustration of the tropical cyclone event resource](../assets/cyclones.svg)
+![Illustration of the tropical cyclone event resource](../assets/svg/cyclones.svg)
 
 ## Canonical sources
 

docs/index.md

@@ -12,7 +12,7 @@ arises from the need to centralize and standardize the multitude of
 reports and systems used by Philippine government agencies for easy
 repackaging and distribution.
 
-![High level overview](./assets/overview.svg)
+![High level overview](./assets/svg/overview.svg)
 
 ## Rationale
 

mkdocs.yml

@@ -1,14 +1,16 @@
 site_name: Philippine Open Disaster Specification
 
-plugins:
+plugins:plugins:
   - search
   - macros
+  - git-authors
+  - offline:
+      enabled: !ENV [OFFLINE, false]
   - literate-nav:
       nav_file: nav.md
       implicit_index: false
   - git-revision-date-localized:
         enable_creation_date: true
-  - git-authors
 
 markdown_extensions:
   - admonition