@digital-ai/dot-illustrations 2.0.43 → 2.0.45

package/.github/workflows/publish.yml

@@ -91,7 +91,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Update npm (≥ 11.5.1 required for OIDC)
-        run: npm install -g npm@latest
+        run: npm install -g npm@11
 
       - name: Publish to npm
         run: npm publish --access public

package/README.md

@@ -106,7 +106,11 @@ The demo includes a built-in upload flow that handles everything automatically.
 
 #### Prerequisites
 
-Run the local proxy once so the demo can authenticate as you without entering a token:
+**On the hosted demo** (`digital-ai.github.io/dot-illustrations/demo/`): nothing to run yourself — click **Connect GitHub** and follow the device-code prompt. This works because a maintainer has deployed the `demo/oauth-proxy/` Worker + registered a GitHub OAuth App (one-time setup, see [`demo/oauth-proxy/`](demo/oauth-proxy/)). GitHub's device-flow endpoints don't support CORS, so the browser can't call them directly — the Worker forwards those two calls server-to-server. It holds no secrets; Device Flow for public OAuth Apps only needs the Client ID.
+
+If that isn't configured yet, **Connect GitHub** falls back to a manual Personal Access Token paste-in (scope: `public_repo`).
+
+**Running locally instead:** run the local proxy once so the demo can authenticate as you without entering a token:
 
 ```bash
 # From the repo root (requires gh CLI authenticated: gh auth login)
@@ -123,19 +127,19 @@ node demo/local-proxy.js
 - Enter the **Illustration ID** (lowercase, hyphens only — e.g. `my-new-state`)
 - Select the **Category**: Global or Dashboards
 - Upload the **Light SVG** (☀️) and **Dark SVG** (🌙) — both are required
-- Click **Connect GitHub** then **Create Pull Request**
+- Click **Connect GitHub** (device-code prompt on the hosted demo, local `gh auth` session with the local proxy running, or PAT paste-in fallback) then **Create Pull Request**
 
 **Integration logo**
 - Enter the **Integration ID** (lowercase, hyphens — e.g. `my-tool`)
 - Upload the single **SVG** file (no dark variant needed)
-- Click **Connect GitHub** then **Create Pull Request**
+- Click **Connect GitHub** (device-code prompt on the hosted demo, local `gh auth` session with the local proxy running, or PAT paste-in fallback) then **Create Pull Request**
 
 The PR is created automatically with:
 - SVG file(s) committed to the correct folder
 - CSS rule added to `index.css`
 - ID added to `demo/script.js` in alphabetical order
 
-> The local proxy uses your existing `gh auth` credentials — no token input required.
+> The local proxy uses your existing `gh auth` credentials — no token input required. The hosted demo's Connect GitHub button uses the device-flow proxy instead (see Prerequisites above); if it's not yet configured, it falls back to PAT paste-in.
 
 ---
 

package/demo/github-upload.js

@@ -6,11 +6,18 @@
  * 1. Register a GitHub OAuth App at https://github.com/settings/developers
  *    - Homepage: https://digital-ai.github.io/dot-illustrations/demo/
  *    - Check "Enable Device Flow" — no callback URL needed
- * 2. Set GITHUB_OAUTH_CLIENT_ID to your Client ID
+ * 2. Replace CLIENT_ID below with your app's Client ID
+ * 3. The Client ID is public-safe — only the Client Secret must stay private,
+ *    and Device Flow never requires the secret in the browser.
+ * 4. Deploy demo/oauth-proxy/ (Cloudflare Worker) — GitHub's device-flow
+ *    endpoints don't support CORS, so the browser can't call them directly;
+ *    the Worker forwards those two calls server-to-server. Holds no secrets.
+ * 5. Replace OAUTH_PROXY_URL below with the deployed Worker's *.workers.dev URL.
  */
 
 const GITHUB_UPLOAD_CONFIG = {
-  CLIENT_ID: 'YOUR_GITHUB_OAUTH_CLIENT_ID',
+  CLIENT_ID: 'Ov23liJSaMsvgE5Q51cI',
+  OAUTH_PROXY_URL: 'https://dot-illustrations-oauth-proxy.dot-icons.workers.dev',
   REPO_OWNER: 'digital-ai',
   REPO_NAME: 'dot-illustrations',
   BASE_BRANCH: 'main',
@@ -132,12 +139,20 @@ async function ghCreatePR(head, title, body) {
 }
 
 // ─── Device Flow ─────────────────────────────────────────────────────────────
+// Both calls go through demo/oauth-proxy/ (Cloudflare Worker) — GitHub's
+// device-flow endpoints don't support CORS, so the browser can't call
+// github.com directly.
 
 async function ghStartDeviceFlow() {
-  if (!GITHUB_UPLOAD_CONFIG.CLIENT_ID || GITHUB_UPLOAD_CONFIG.CLIENT_ID === 'YOUR_GITHUB_OAUTH_CLIENT_ID') {
+  if (
+    !GITHUB_UPLOAD_CONFIG.CLIENT_ID ||
+    GITHUB_UPLOAD_CONFIG.CLIENT_ID === 'YOUR_GITHUB_OAUTH_CLIENT_ID' ||
+    !GITHUB_UPLOAD_CONFIG.OAUTH_PROXY_URL ||
+    GITHUB_UPLOAD_CONFIG.OAUTH_PROXY_URL === 'YOUR_OAUTH_PROXY_WORKERS_DEV_URL'
+  ) {
     throw new Error('NO_CLIENT_ID');
   }
-  const resp = await fetch('https://github.com/login/device/code', {
+  const resp = await fetch(`${GITHUB_UPLOAD_CONFIG.OAUTH_PROXY_URL}/device/code`, {
     method: 'POST',
     headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
     body: JSON.stringify({ client_id: GITHUB_UPLOAD_CONFIG.CLIENT_ID, scope: GITHUB_UPLOAD_CONFIG.SCOPES }),
@@ -150,7 +165,7 @@ function ghPollForToken(deviceCode, intervalSec) {
   return new Promise((resolve, reject) => {
     const timer = setInterval(async () => {
       try {
-        const resp = await fetch('https://github.com/login/oauth/access_token', {
+        const resp = await fetch(`${GITHUB_UPLOAD_CONFIG.OAUTH_PROXY_URL}/access_token`, {
           method: 'POST',
           headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
           body: JSON.stringify({

package/demo/oauth-proxy/README.md

@@ -0,0 +1,23 @@
+# OAuth device-flow proxy
+
+Stateless Cloudflare Worker that forwards `POST /device/code` and `POST /access_token`
+to GitHub's device-flow endpoints. Exists only because those endpoints don't support
+CORS, so a static page can't call them directly from the browser. Holds no secrets —
+device flow for public GitHub OAuth Apps only needs the Client ID, which the browser
+already sends.
+
+## Deploy (one-time, per maintainer/environment)
+
+```bash
+cd demo/oauth-proxy
+npx wrangler login
+npx wrangler deploy
+```
+
+This prints a `*.workers.dev` URL. Then:
+
+1. Put that URL into `OAUTH_PROXY_URL` in [`demo/github-upload.js`](../github-upload.js)
+2. Put your GitHub OAuth App's Client ID into `CLIENT_ID` in the same file (see the
+   file's header comment for how to register the OAuth App)
+3. If the demo isn't served from `https://digital-ai.github.io`, update
+   `ALLOWED_ORIGIN` in [`wrangler.toml`](./wrangler.toml) to match

package/demo/oauth-proxy/worker.js

@@ -0,0 +1,62 @@
+/**
+ * OAuth device-flow proxy — Cloudflare Worker
+ *
+ * GitHub's device-flow endpoints (github.com/login/device/code and
+ * github.com/login/oauth/access_token) don't support CORS, so a static
+ * page can't call them directly from browser JS. This Worker forwards
+ * those two calls server-to-server, so the browser only ever talks to
+ * this Worker (which does send CORS headers).
+ *
+ * Holds no secrets: GitHub's device flow for public OAuth Apps only
+ * needs client_id (sent by the browser), never a client secret.
+ *
+ * Deploy: from this directory, `npx wrangler login && npx wrangler deploy`.
+ * Then set ALLOWED_ORIGIN below (or via `wrangler.toml` [vars]) and put the
+ * resulting *.workers.dev URL into demo/github-upload.js's OAUTH_PROXY_URL.
+ */
+
+const GITHUB_ENDPOINTS = {
+  '/device/code':   'https://github.com/login/device/code',
+  '/access_token':  'https://github.com/login/oauth/access_token',
+};
+
+export default {
+  async fetch(request, env) {
+    const allowedOrigin = env.ALLOWED_ORIGIN || 'https://digital-ai.github.io';
+    const corsHeaders = {
+      'Access-Control-Allow-Origin':  allowedOrigin,
+      'Access-Control-Allow-Methods': 'POST, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    };
+
+    if (request.method === 'OPTIONS') {
+      return new Response(null, { headers: corsHeaders });
+    }
+
+    const url    = new URL(request.url);
+    const target = GITHUB_ENDPOINTS[url.pathname];
+
+    if (!target || request.method !== 'POST') {
+      return new Response(JSON.stringify({ error: 'Not found' }), {
+        status: 404,
+        headers: { 'Content-Type': 'application/json', ...corsHeaders },
+      });
+    }
+
+    const body = await request.text();
+    const upstream = await fetch(target, {
+      method: 'POST',
+      headers: {
+        'Accept':       'application/json',
+        'Content-Type': 'application/json',
+      },
+      body,
+    });
+
+    const data = await upstream.text();
+    return new Response(data, {
+      status: upstream.status,
+      headers: { 'Content-Type': 'application/json', ...corsHeaders },
+    });
+  },
+};

package/demo/oauth-proxy/wrangler.toml

@@ -0,0 +1,6 @@
+name = "dot-illustrations-oauth-proxy"
+main = "worker.js"
+compatibility_date = "2026-01-01"
+
+[vars]
+ALLOWED_ORIGIN = "https://digital-ai.github.io"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-illustrations",
-  "version": "2.0.43",
+  "version": "2.0.45",
   "description": "A central place for the design team to keep illustrations and for dev teams to find them.",
   "main": "./index.css",
   "scripts": {