Improve preview

.github/workflows/build.yaml

@@ -1,6 +1,12 @@
-name: Build
-
-on: [push]
+on:
+  workflow_call:
+    inputs:
+      check:
+        default: false
+        type: boolean
+      preview:
+        default: false
+        type: boolean
 
 jobs:
   build:
@@ -14,18 +20,53 @@ jobs:
       with:
         python-version: '3.9' 
 
-    - name: Bootstrap
+    - name: Setup pnpm
+      if: inputs.preview
+      uses: pnpm/action-setup@v2
+      with:
+        version: '8.10.2'
+
+    - name: Bootstrap font builder
       run: |
-        sudo apt install python3-setuptools ttfautohint build-essential libffi-dev libgit2-dev -y
+        sudo apt install -y \
+          python3-setuptools \
+          ttfautohint \
+          build-essential \
+          libffi-dev \
+          libgit2-dev
         make configure
 
+    - name: Bootstrap preview
+      if: inputs.preview
+      run: make configure-preview
+
     - name: Build
-      run: |
-        make bundle
-        rm bundle/Lilex.zip
+      run: make build
+
+    - name: Check
+      if: inputs.check
+      run: make check
+
+    - name: Build preview
+      if: inputs.preview
+      run: make build-preview
 
-    - name: Upload bundle
+    - name: Upload build
       uses: actions/upload-artifact@v3
       with:
         name: Lilex
-        path: bundle/
+        path: build/
+
+    - name: Upload reports
+      if: inputs.check
+      uses: actions/upload-artifact@v3
+      with:
+        name: Reports
+        path: reports/
+
+    - name: Upload preview
+      if: inputs.preview
+      uses: actions/upload-artifact@v3
+      with:
+        name: Preview
+        path: preview/dist

.github/workflows/preview-master.yaml

@@ -0,0 +1,53 @@
+name: Pages Preview Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'release'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    uses: ./.github/workflows/build.yaml
+    with:
+      preview: true
+
+  publish:
+    environment:
+      name: PR preview
+      url: https://preview--lilex.netlify.app
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Download preview
+        uses: actions/download-artifact@v3
+        with:
+          name: Preview
+          path: preview/dist
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./preview/dist
+
+  deploy:
+    environment:
+      name: Production
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: publish
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/preview-pr.yaml

@@ -0,0 +1,39 @@
+name: Netlify Preview Deploy
+
+on:
+  pull_request:
+    types: ['opened', 'edited', 'synchronize']
+
+jobs:
+  build:
+    uses: ./.github/workflows/build.yaml
+    with:
+      preview: true
+  deploy:
+    environment:
+      name: PR preview
+      url: https://preview--lilex.netlify.app
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Download preview
+        uses: actions/download-artifact@v3
+        with:
+          name: Preview
+          path: preview/dist
+
+      - name: Verify build
+        run: ls -lah preview/dist
+
+      - uses: jsmrcaga/action-netlify-deploy@master
+        id: deploy
+        with:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          deploy_alias: preview
+          build_directory: preview/dist
+          install_command: "echo Skipping installing the dependencies"
+          build_command: "echo Skipping building the web files"

.github/workflows/qa.yaml

@@ -0,0 +1,16 @@
+name: Quality Assurance
+
+on:
+  push:
+    branches:
+      - "**"
+    tags:
+      - "!**"
+  workflow_dispatch:
+
+jobs:
+  build:
+    uses: ./.github/workflows/build.yaml
+    with:
+      check: true
+

Makefile

@@ -8,11 +8,11 @@ GLYPHS_FILE = Lilex.glyphs
 
 OS := $(shell uname)
 
-define build_font
+define build-font
 	$(VENV) python scripts/lilex.py build $(1)
 endef
 
-define check_font
+define check-font
 	$(VENV) fontbakery check-universal \
 		--auto-jobs \
 		--html "$(REPORTS_DIR)/universal_$(1).html" \
@@ -23,15 +23,15 @@ configure: requirements.txt
 	rm -rf $(VENV_DIR)
 	make $(VENV_DIR)
 
-configure_preview: preview/*.yaml preview/*.json
+configure-preview: preview/*.yaml preview/*.json
 	cd preview; pnpm install
 
 .PHONY: check
 check:
-	make clean_reports
+	make clean-reports
 	mkdir "$(REPORTS_DIR)"
-	$(call check_font,"ttf")
-	$(call check_font,"variable")
+	$(call check-font,"ttf")
+	$(call check-font,"variable")
 
 .PHONY: lint
 lint:
@@ -48,21 +48,19 @@ generate:
 
 .PHONY: build
 build:
-	make clean_build
-	$(call build_font)
+	make clean-build
+	$(call build-font)
 
-.PHONY: build_preview
-build_preview:
+.PHONY: build-preview
+build-preview:
 	cd preview; pnpm run build
 
-.PHONY: run_preview
-run_preview:
+.PHONY: run-preview
+run-preview:
 	cd preview; pnpm run dev
 
-.PHONY: bundle
-bundle:
-	make build
-	make check
+.PHONY: pack-bundle
+pack-bundle:
 	rm -rf "$(BUNDLE_DIR)"
 	mkdir "$(BUNDLE_DIR)"
 # Copy fonts
@@ -71,39 +69,45 @@ bundle:
 	cp "$(REPORTS_DIR)/"* "$(BUNDLE_DIR)/"
 	cd "$(BUNDLE_DIR)"; zip -r Lilex.zip ./*
 
+.PHONY: bundle
+bundle:
+	make build
+	make check
+	make pack-bundle
+
 .PHONY: clean
 clean:
-	make clean_build
-	make clean_reports
+	make clean-build
+	make clean-reports
 
-.PHONY: clean_build
-clean_build:
+.PHONY: clean-build
+clean-build:
 	rm -rf "$(BUILD_DIR)"
 
-.PHONY: clean_reports
-clean_reports:
+.PHONY: clean-reports
+clean-reports:
 	rm -rf "$(REPORTS_DIR)"
 
 .PHONY: ttf
 ttf:
-	$(call build_font,ttf)
+	$(call build-font,ttf)
 
 .PHONY: otf
 otf:
-	$(call build_font,otf)
+	$(call build-font,otf)
 
 .PHONY: variable
 variable:
-	$(call build_font,variable)
+	$(call build-font,variable)
 
 install:
-	make install_$(OS)
+	make install-$(OS)
 
-install_Darwin:
+install-Darwin:
 	rm -rf ~/Library/Fonts/Lilex
 	cp -r build/variable ~/Library/Fonts/Lilex
 
-install_Linux:
+install-Linux:
 	rm -rf ~/.fonts/Lilex
 	cp -r build/ttf ~/.fonts/Lilex
 

preview/.eslintrc

@@ -160,7 +160,8 @@
       "allowTernary": true,
       "allowTaggedTemplates": true
     }],
-    "no-unused-vars": ["error", {
+    "no-unused-vars": ["off"],
+    "@typescript-eslint/no-unused-vars": ["error", {
       "args": "none",
       "caughtErrors": "none",
       "ignoreRestSiblings": true,

preview/package.json

@@ -10,20 +10,21 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.3",
-    "@tsconfig/svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.6",
+    "@tsconfig/svelte": "^5.0.2",
     "@types/node": "^18.15.11",
     "@types/opentype.js": "^1.3.4",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
     "eslint": "^8.37.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "svelte": "^3.55.1",
-    "svelte-check": "^2.10.3",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.2.0",
-    "vite-plugin-singlefile": "^0.13.3"
+    "sass": "^1.69.5",
+    "svelte": "^4.2.2",
+    "svelte-check": "^3.5.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vite-plugin-singlefile": "^0.13.5"
   },
   "dependencies": {
     "eslint-plugin-import": "^2.27.5",