Adds Discord Activity support RE: fonts (#22)

.github/workflows/discord-fonts.yml

@@ -0,0 +1,46 @@
+name: Process and Upload Fonts
+
+on:
+  push:
+    branches:
+      - staging
+      - main
+    paths:
+      - '**.css'
+
+jobs:
+  process-fonts:
+    environment: ${{ github.ref_name == 'main' && 'production' || 'staging' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install required tools
+        run: sudo apt-get update && sudo apt-get install -y zsh perl curl
+
+      - id: 'auth'
+        uses: 'google-github-actions/auth@v1'
+        with:
+          credentials_json: '${{ secrets.GCP_KEYFILE }}'
+
+      - name: 'Set up Cloud SDK'
+        uses: 'google-github-actions/setup-gcloud@v1'
+
+      - name: Process Font URLs
+        run: |
+          chmod +x ./process-fonts.sh
+          CLIENT_ID=${{ github.ref_name == 'main' && '1199271093882589195' || '1199270539278164008' }}
+          DISCORD_ACTIVITY_CLIENT_ID=$CLIENT_ID \
+          ./process-fonts.sh --no-prompt --output-dir ${{ runner.temp }}/sheet-fonts
+
+      - name: Upload to GCS
+        run: |
+          ENV_PATH="${{ github.ref_name == 'main' && 'production' || 'staging' }}"
+
+          # Sync the entire fonts directory
+          gcloud storage rsync \
+            --project=roll20-actual \
+            ${{ runner.temp }}/sheet-fonts \
+            "gs://roll20-cdn/roll20-beacon-sheets/fonts/$ENV_PATH" \
+            --recursive \
+            --cache-control="no-cache"

magi-knights-awakening/package.json → magiknightawake/package.json

@@ -8,6 +8,7 @@
     "sandbox-server": "vite --port 7620 --mode staging",
     "sandbox": "run-s build-scss sandbox-server",
     "build": "run-s build-scss && vite build",
+    "build:discord": "run-s build-scss && vite build --config vite.discord.config.js",
     "build-scss": "sass ./src/rollTemplates/styles/host.scss ./public/host.css --no-source-map --no-charset",
     "preview": "vite preview"
   },

magi-knights-awakening/src/relay/handlers/onChange.js → magiknightawake/src/relay/handlers/onChange.js

@@ -1,4 +1,4 @@
-import { beaconPulse } from '../';
+import { beaconPulse } from '..';
 // onChange is called when the character data is updated. This is where you will update the sheet with the new data.
 export const onChange = async ({ character }) => {
   const old = beaconPulse.value // This is a way to trigger a re-render of the sheet, see relay.js for more information.

magi-knights-awakening/src/relay/handlers/onInit.js → magiknightawake/src/relay/handlers/onInit.js

@@ -1,4 +1,4 @@
-import { initValues } from '../';
+import { initValues } from '..';
 import { colorHandler } from './colorHandler';
 
 // onInit is called when the Relay is first loaded. It is used to set up the initial values of the sheet.

magiknightawake/vite.discord.config.js

@@ -0,0 +1,59 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import VueDevTools from 'vite-plugin-vue-devtools'
+
+const DISCORD_ACTIVITY_CLIENT_ID = process.env.DISCORD_ACTIVITY_CLIENT_ID || "1199270539278164008";
+const SHORT_NAME = process.env.VITE_SHEET_SHORT_NAME || 'magiknightawake';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    vue(),
+    VueDevTools(),
+  ],
+  base: 
+    mode === "production"
+      ? `https://${DISCORD_ACTIVITY_CLIENT_ID}.discordsays.com/.proxy/googleapis/storage/roll20-cdn/roll20-beacon-sheets/discord/${DISCORD_ACTIVITY_CLIENT_ID}/${SHORT_NAME}/`
+      : "/",
+  build: {
+    target: 'esnext',
+    emptyOutDir: true,
+    minify: true,
+    cssCodeSplit: false,
+    rollupOptions: {
+      input: {
+        sheet: "src/main.js"
+      },
+      output: {
+        dir: `dist/${SHORT_NAME}`,
+        compact: false,
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === "style.css") return "sheet.css";
+          return "assets/[name][extname]";
+        },
+        entryFileNames: "sheet.js",
+        minifyInternalExports: false
+      }
+    }
+  },
+  assetsInclude: ["**/*.hbs"],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: "globalThis"
+      }
+    }
+  },
+  server: {
+    cors: false
+  },
+  define: {
+    __DISCORD_ACTIVITY_CLIENT_ID__: JSON.stringify(DISCORD_ACTIVITY_CLIENT_ID)
+  }
+}))

process-fonts.sh

@@ -0,0 +1,159 @@
+#!/bin/zsh
+
+setopt ERR_EXIT
+setopt PIPE_FAIL
+setopt NO_UNSET
+
+if [[ -z "${DISCORD_ACTIVITY_CLIENT_ID}" ]]; then
+    print "Error: DISCORD_ACTIVITY_CLIENT_ID environment variable is required" >&2
+    exit 1
+fi
+
+# Process arguments
+test_mode=0
+no_prompt=0
+output_dir="/tmp/discord-fonts"
+
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        --test)
+            test_mode=1
+            shift
+            ;;
+        --no-prompt)
+            no_prompt=1
+            shift
+            ;;
+        --output-dir)
+            output_dir="$2"
+            shift 2
+            ;;
+        *)
+            shift
+            ;;
+    esac
+done
+
+# Clean/create output directory
+if [[ -d "$output_dir" ]]; then
+    rm -rf "$output_dir"
+fi
+mkdir -p "$output_dir"
+
+print "Starting directory search..." >&2
+
+# Get directories
+dirs=(*(/))
+dirs=(${dirs:#sheets})    # Exclude sheets
+dirs=(${dirs:#.git})       # Exclude .git
+dirs=(${dirs:#node_modules}) # Exclude node_modules
+
+if [[ ${#dirs} -eq 0 ]]; then
+    print "No directories found!" >&2
+    exit 1
+fi
+
+if [[ $test_mode -eq 1 ]]; then
+    print "Test mode: processing first 5 directories" >&2
+    dirs=(${dirs[1,5]})
+fi
+
+print "\nFound directories:" >&2
+print -l "  ${dirs[@]}" >&2
+
+# Extract URLs function
+extract_font_urls() {
+    perl -ne '
+        next if /^\s*\/\*/;  # Skip comment lines
+        while (/url\(['"'"'"]?(https:\/\/fonts\.googleapis\.com[^'"'"'"\s\)]+)['"'"'"]?\)/g) {
+            print "$1\n";
+        }
+    ' "$1"
+}
+
+# Process each directory
+for dir in ${dirs[@]}; do
+    print "Checking directory: $dir" >&2
+    mkdir -p "$output_dir/$dir"
+
+    # Find fonts.css files recursively
+    fonts_files=($dir/**/fonts.css(.N))
+
+    if [[ ${#fonts_files} -gt 0 ]]; then
+        print "Found fonts.css files in $dir:" >&2
+        print -l "    ${fonts_files[@]}" >&2
+
+        # Collect URLs for this directory
+        urls_file=$(mktemp)
+        trap "rm -f '$urls_file'" EXIT
+
+        for fonts_file in ${fonts_files[@]}; do
+            print "Processing: $fonts_file" >&2
+
+            found_urls=$(extract_font_urls "$fonts_file")
+
+            if [[ -n "$found_urls" ]]; then
+                print "Found font URLs in $fonts_file:" >&2
+                print -l "      $found_urls" >&2
+                print "$found_urls" >> "$urls_file"
+            fi
+        done
+
+        # If we found URLs in this directory
+        unique_urls=($(sort -u "$urls_file"))
+        if [[ ${#unique_urls} -gt 0 ]]; then
+            print "\nFound ${#unique_urls} unique font URLs in $dir" >&2
+
+            if [[ $no_prompt -eq 0 ]]; then
+                print "Proceed with fetching and transforming URLs for $dir? [y/N] " >&2
+                read -q response || true
+                print >&2
+
+                if [[ "$response" != "y" ]]; then
+                    print "Skipping $dir" >&2
+                    touch "$output_dir/$dir/fonts.css"
+                    continue
+                fi
+            fi
+
+            raw_file=$(mktemp)
+            trap "rm -f '$raw_file'" EXIT
+
+            # Process URLs for this directory
+            for font_url in $unique_urls; do
+                response=$(curl -sS -w "\n%{http_code}" -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36" \
+                     "$font_url")
+
+                if [[ $? -eq 0 ]]; then
+                    http_code=$(print "$response" | tail -n1)
+                    content=$(print "$response" | sed '$d')
+
+                    if [[ "$http_code" = "200" ]]; then
+                        print "$content" | \
+                        sed "s/fonts\.gstatic\.com/${DISCORD_ACTIVITY_CLIENT_ID}.discordsays.com\/.proxy\/gstatic\/fonts/g" \
+                        >> "$raw_file"
+                        print >> "$raw_file"
+                    else
+                        print "Error: HTTP $http_code for $font_url" >&2
+                    fi
+                else
+                    print "Error: Failed to fetch $font_url" >&2
+                fi
+            done
+
+            if [[ -s "$raw_file" ]]; then
+                mv "$raw_file" "$output_dir/$dir/fonts.css"
+                print "Generated fonts.css for $dir" >&2
+            else
+                touch "$output_dir/$dir/fonts.css"
+                print "Generated empty fonts.css for $dir (no valid content)" >&2
+            fi
+        else
+            touch "$output_dir/$dir/fonts.css"
+            print "Generated empty fonts.css for $dir (no URLs found)" >&2
+        fi
+    else
+        touch "$output_dir/$dir/fonts.css"
+        print "Generated empty fonts.css for $dir (no fonts.css files found)" >&2
+    fi
+done