Add workflow/script to build the sprites

.github/workflows/build_sprites.yml

@@ -0,0 +1,31 @@
+name: Build sprites
+on:
+  push:
+    branches: [ gh-pages ]
+    paths: [ svgs/** ]
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkou️t
+        uses: actions/[email protected]
+
+      - name: Setup node
+        uses: actions/[email protected]
+        with:
+          node-version: 18
+
+      - name: Build
+        run: |
+          npm ci
+          npm run build_sprites
+
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          target-folder: sprites
+          folder: /home/runner/work/osm-liberty/osm-liberty/sprites
+          git-config-name: maputnik-bot
+          git-config-email: <>
+          commit-message: Build sprites

.github/workflows/ci.yml

@@ -13,14 +13,15 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4.1.0
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3.8.1
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
     - run: npm run validate
     - run: npm run diff
+    - run: npm run build_sprites

README.md

@@ -104,12 +104,13 @@ Green        | `#76a723`
 
 1. Take the `iconset.json` and import it to the [Maki Editor](https://www.mapbox.com/maki-icons/editor/).
 2. Apply your changes and download the icons in SVG format and the iconset in JSON format.
+Save the downloaded SVGs from Maki Editor to the folder [svgs_iconset](https://github.com/maputnik/osm-liberty/tree/gh-pages/svgs/svgs_iconset).
 3. Mandatory if the updated `iconset.json` should become part of this repo: Format the JSON with `cat iconset.json | jq -MS '.'` for better legibility.
-4. Add the SVG files from the folder [svgs_not_in_iconset](https://github.com/maputnik/osm-liberty/tree/gh-pages/svgs/svgs_not_in_iconset) to the folder `svgs` downloaded from the Maki Editor.
+4. There are also SVGs in the folder [svgs_not_in_iconset](https://github.com/maputnik/osm-liberty/tree/gh-pages/svgs/svgs_not_in_iconset).
 These are the SVGs for road shields, the dot used for city and town layers and the road area pattern which could not be modified using the Maki Editor. To modify these you could use e.g. [Inkscape](https://inkscape.org).
-5. Install [spritezero-cli](https://gitlab.com/beyondtracks/spritezero-cli): `npm install -g @beyondtracks/spritezero-cli` (We're using a maintained fork of https://github.com/mapbox/spritezero-cli.)
-6. Generate the low resolution sprite: `spritezero osm-liberty ./svgs/`
-7. Generate the high resolution sprite: `spritezero --retina osm-liberty@2x ./svgs/`
+5. Install the NPM dev dependencies: `npm install` to have [spritezero-cli](https://gitlab.com/beyondtracks/spritezero-cli) available (we're using a fork of https://github.com/mapbox/spritezero-cli ).
+6. Generate the low and high resolution sprites: `npm run build_sprites`
+7. **When submitting a PR, no need to include the sprites. They will be automatically created when merging a PR.**
 
 ## Have a look at ...
 

build_sprites.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+mkdir temp
+cp -a ./svgs/svgs_not_in_iconset/. ./temp/ 
+cp -a ./svgs/svgs_iconset/. ./temp/ 
+./node_modules/.bin/spritezero ./sprites/osm-liberty ./temp/
+./node_modules/.bin/spritezero --retina ./sprites/osm-liberty@2x ./temp/
+rm -r temp