refactor: update badges (#57)

.github/workflows/build.yaml

@@ -0,0 +1,37 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  setup:
+    name: Setup
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel previous
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - name: Install deps 🧶
+        run: npm ci
+
+  build:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - run: npm ci
+      - name: Build lib 👷‍♂️
+        run: npm run build

.github/workflows/coverage.yaml

@@ -0,0 +1,47 @@
+name: Coverage
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  coverage-badge:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v3
+      with:
+        node-version: '20.x'
+        cache: 'npm'
+    - name: Install deps 🧶
+      run: npm ci
+    - name: Build 
+      run: npm run build
+    - name: Test
+      run: npm run test:badge
+
+    # Only run the coverage once
+    - name: Get Coverage for badge
+      run: |
+        SUMMARY="$(npm run test:badge | tail -2 | head -1)"
+        TOKENS=($SUMMARY)
+        echo "COVERAGE=$(echo ${TOKENS[2]})" >> $GITHUB_ENV
+
+        REF=${{ github.ref }}
+        echo "github.ref: $REF"
+        IFS='/' read -ra PATHS <<< "$REF"
+        BRANCH_NAME="${PATHS[1]}_${PATHS[2]}"
+        echo $BRANCH_NAME
+        echo "BRANCH=$(echo ${BRANCH_NAME})" >> $GITHUB_ENV
+
+    - name: Create the Badge
+      uses: schneegans/dynamic-badges-action@v1.0.0
+      with:
+        auth: ${{ secrets.GIST_SECRET }}
+        gistID: f3a173e87a763056b73438f503680993
+        filename: pdap-design-system__${{ env.BRANCH }}.json
+        label: Test Coverage
+        message: ${{ env.COVERAGE }}
+        color: green
+        namedLogo: vitest
+        style: for-the-badge

.vscode/extensions.json

@@ -1,3 +1,6 @@
 {
-	"recommendations": ["tailwind.tailwindcss", "vue.volar", "vue.vscode-typescript-vue-plugin"]
-}
+	"recommendations": [
+		"tailwind.tailwindcss",
+		"vue.volar"
+	]
+}

README.md

@@ -2,8 +2,8 @@
 _A `Vue` component library, styling system, and image asset repository for PDAP-branded client apps._
 
 [![Current npm release](https://img.shields.io/npm/v/pdap-design-system?style=for-the-badge)](https://www.npmjs.com/package/pdap-design-system)
-![Build status](./badges/build.svg) 
-![Test coverage](./badges/coverage.svg) 
+![Build status](https://img.shields.io/github/actions/workflow/status/Police-Data-Accessibility-Project/design-system/build.yaml?branch=main&style=for-the-badge)
+![Coverage Badge](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/joshuagraber/f3a173e87a763056b73438f503680993/raw/c849e80481d329e6a4176699d52b7ad70d12d829/pdap-design-system__heads_main.json)
 ![License](https://img.shields.io/github/license/Police-Data-Accessibility-Project/design-system.svg?style=for-the-badge&color=green) 
 
 

package.json

@@ -59,7 +59,6 @@
 		"@vue/eslint-config-typescript": "^12.0.0",
 		"@vue/test-utils": "^2.4.1",
 		"autoprefixer": "^10.4.16",
-		"badge-maker": "^3.3.1",
 		"cheerio": "1.0.0-rc.12",
 		"conventional-changelog-angular": "^7.0.0",
 		"cross-env": "^7.0.3",
@@ -96,27 +95,24 @@
 	},
 	"scripts": {
 		"_commit": "cz",
-		"build": "vite build && vue-tsc && npm run badges:build",
+		"build": "vite build && vue-tsc",
 		"build:watch": "vite build && vue-tsc --watch",
 		"ci": "npm run clean && npm ci",
 		"clean": "run-p clean:*",
 		"clean:deps": "rimraf node_modules",
-		"clean:build": "rimraf coverage test/report dist",
-		"clean:test": "rimraf coverage test/report",
+		"clean:test": "rimraf coverage",
 		"lint": "run-p lint:*",
 		"lint:css": "stylelint 'src/**/*.{css,vue}'",
 		"lint:es": "eslint src --ext .ts .",
 		"lint:ts": "vue-tsc",
-		"postbuild": "run-p clean:test && rimraf dist/{config,utils}",
-		"posttest": "npm run badges:coverage",
+		"postbuild": "rimraf dist/{config,utils}",
+		"posttest": "npm run clean:test",
 		"prepare": "husky install",
 		"test": "vitest --dom --run --coverage",
 		"test:changed": "npm run test -- --changed",
+		"test:badge": "vitest run --coverage.enabled --coverage.reporter='text-summary'",
 		"test:ci": "npm run test -- --silent",
-		"typecheck": "vue-tsc",
-		"badges": "run-p badges:*",
-		"badges:build": "node ./tools/generateBuildBadge.js",
-		"badges:coverage": "node ./tools/generateCoverageBadge.js"
+		"typecheck": "vue-tsc"
 	},
 	"workspaces": [
 		"eslint-config"