Add build action

- also update to node 22
- remove css
- update esbuild dependency

Author: mtelgkamp

.github/workflows/npm.yml

@@ -0,0 +1,85 @@
+name: NodeJS
+on:
+  push:
+    branches: [ "main" ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js 22.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 22.x
+    - name: add package-version to environment
+      run: node -p -e '`PACKAGE_VERSION=${require("./package.json").version}`' >> $GITHUB_ENV
+    - name: Build
+      run: |
+        npm install
+        npm run build
+    - name: create package-version artifact
+      run: node -p -e '`${require("./package.json").version}`' > dist/version.txt
+    - name: package-version-to-git-tag
+      uses: pkgdeps/git-tag-action@v2
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        github_repo: ${{ github.repository }}
+        version: ${{ env.PACKAGE_VERSION }}
+        git_commit_sha: ${{ github.sha }}
+        git_tag_prefix: "v"
+    - name: Upload Build Artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: build-artifact
+        path: dist/*
+        
+  release:
+    runs-on: ubuntu-latest
+    needs: build
+    
+    steps:
+      - name: Download Build Artifacts
+        uses: actions/download-artifact@v5
+        with:
+          name: build-artifact
+      - name: Set tagname
+        shell: bash
+        run: |
+          version=`cat version.txt`
+          echo "TAGNAME=$version" >> $GITHUB_ENV
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: v${{ env.TAGNAME }}
+          release_name: Release v${{ env.TAGNAME }}
+          body: |
+            Changes in this Release
+            - First Change
+            - Second Change
+          draft: false
+          prerelease: false
+      - name: Upload bookmarklet
+        id: upload-bookmarklet
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }} 
+          asset_path: ./bookmarklet.txt
+          asset_name: bookmarklet.txt
+          asset_content_type: text/plain
+      - name: Upload Bookmarklet Page
+        id: upload-bookmark-export
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./ccc-bookmarklet.html
+          asset_name: ccc-bookmarklet.html
+          asset_content_type: text/html

.nvmrc

@@ -0,0 +1 @@
+v22

README.md

@@ -3,6 +3,7 @@
 With the CAAT Color Contrast Checker, you can easily check the color contrasts of website elements directly in your browser as a bookmarklet.
 This tool evaluates the contrast conformity according to the W3C guidelines for small and large text, as well as non-text content.
 Additionally, the color values and the calculated contrast ratio can be easily copied for further use.
+
 ## Features
 
 - Provides color contrast checks for websites
@@ -28,4 +29,4 @@ The default colors are controlled by the following variables:
 
 The color picker function is not available in all browsers and operating systems.
 
-if you have any questions or feedback, please open an issue.
+If you have any questions or feedback, please open an issue.

esbuild.mjs

@@ -9,24 +9,6 @@ import { minifyCSS } from "./minifyCSS.js";
 const bookmarkletPlugin = options => ({
     name: 'bookmarkletPlugin',
     setup(build) {
-        build.onLoad({ filter: /\.(tsx|js)$/ }, async args => {
-            let code = await fs.promises.readFile(args.path, 'utf8');
-
-            const cssRegex = /css`([^`]+)`/g;
-            let match;
-            let newCode = code;
-
-            while ((match = cssRegex.exec(code)) !== null) {
-                const originalCSS = match[1];
-                const minifiedCSS = minifyCSS(originalCSS);
-                newCode = newCode.replace(originalCSS, minifiedCSS);
-            }
-
-            return {
-                loader: 'tsx',
-                contents: newCode,
-            };
-        });
         build.onEnd(async (result) => {
             const { outputFiles } = result;
             if (!outputFiles) return;
@@ -53,7 +35,7 @@ await esbuild.build({
     entryPoints: ['src/bookmarklet.js'],
     bundle: true,
     minify: true,
-    outfile: 'dist/bookmarkletConverted.js',
+    outfile: 'dist/bookmarklet.txt',
     write: false,
     plugins: [
         bookmarkletPlugin()
@@ -71,7 +53,6 @@ await esbuild.build({
         <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <link rel="stylesheet" href="style.css"/>
             <title>CAAT Color Contrast Checker Bookmarklet</title>
         </head>
         <body>
@@ -89,65 +70,5 @@ await esbuild.build({
         </html>
     `;
 
-    const cssStyle = `
-        html, body {
-            margin: 0;
-            padding: 0;
-            background-color: #fff;
-        }
-        .row {
-            margin: 0 auto;
-            max-width: 45rem;
-            padding: 0 1rem;
-        }
-        h1, h2, h3, h4, h5, h6 {
-            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-            font-weight: 700;
-            color: #111;
-        }
-        h1 {
-            line-height: 1.2;
-            font-size: 2rem;
-            margin-bottom: 0;
-        }
-        @media screen and (min-width: 45em) {
-            h1 {
-                font-size: 3rem;
-            }
-        }
-        h2 {
-            line-height: 1.2;
-            font-size: 1.5rem;
-        }
-        p, li {
-            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-            color: #333;
-            line-height: 1.6;
-            font-size: 1.4rem;
-        }
-        p {
-            margin: 0 0 1rem 0;
-        }
-        li {
-            margin: 0 0 1rem 0;
-        }
-        ul, ol {
-            margin: 0 0 1rem 2rem;
-            padding: 0;
-            list-style-position: outside;
-        }
-        a {
-            color: #D7090E;
-        }
-        a:hover, a:focus {
-            color: #fff;
-            background-color: #ce171e;
-            border-top: 3px solid #ce171e;
-            text-decoration: none;
-            outline: none;
-        }
-    `;
-
     fs.writeFileSync(`${distDir}/ccc-bookmarklet.html`, htmlContent);
-    fs.writeFileSync(`${distDir}/style.css`, cssStyle);
 });