From 081ae1c225fa566e5b60be404293deb42dc1e770 Mon Sep 17 00:00:00 2001
From: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
Date: Sun, 30 Nov 2025 00:29:08 -0500
Subject: [PATCH] test: Add CI, linting, testing, and SVG utilities

Introduces GitHub Actions CI workflow, ESLint configuration, and TypeScript config. Adds SVG utility functions for sponsor handling and refactors their usage in contribkit.config.ts. Expands package.json with metadata, scripts, and test/lint dependencies. Adds comprehensive unit and regression tests for SVG utilities. Updates build.sh for CI compatibility and .gitignore for coverage artifacts.
---
 .github/workflows/_ci-node.yml        |  33 +++
 .gitignore                            |   4 +
 build.sh                              |  11 +
 configs/sponsors/contribkit.config.ts |  44 +--
 configs/sponsors/svg-utils.ts         |  62 ++++
 eslint.config.mjs                     |  33 +++
 package.json                          |  61 +++-
 tests/regression.test.ts              | 196 ++++++++++++
 tests/svg-utils.test.ts               | 411 ++++++++++++++++++++++++++
 tsconfig.json                         |  14 +
 10 files changed, 824 insertions(+), 45 deletions(-)
 create mode 100644 .github/workflows/_ci-node.yml
 create mode 100644 configs/sponsors/svg-utils.ts
 create mode 100644 eslint.config.mjs
 create mode 100644 tests/regression.test.ts
 create mode 100644 tests/svg-utils.test.ts
 create mode 100644 tsconfig.json

diff --git a/.github/workflows/_ci-node.yml b/.github/workflows/_ci-node.yml
new file mode 100644
index 0000000..682792d
--- /dev/null
+++ b/.github/workflows/_ci-node.yml
@@ -0,0 +1,33 @@
+---
+# This workflow is centrally managed in https://github.com/LizardByte/.github/
+# Don't make changes to this file in this repo as they will be overwritten with changes made to the same file in
+# the above-mentioned repo.
+
+# To use, add the `npm-pkg` repository label to identify repositories that should trigger this workflow.
+
+# This will run standard CI for Node.js/npm/TypeScript projects.
+
+name: CI-Node
+permissions:
+  contents: write  # required for release_setup action
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+concurrency:
+  group: "${{ github.workflow }}-${{ github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  call-ci-node:
+    name: CI-Node
+    uses: LizardByte/.github/.github/workflows/__call-ci-node.yml@master
+    if: ${{ github.repository != 'LizardByte/.github' }}
+    secrets:
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      GH_TOKEN: ${{ secrets.GH_BOT_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 862c933..1ca8a71 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,7 @@ node_modules/
 package-lock.json
 
 dist/
+
+# coverage
+coverage/
+junit.xml
diff --git a/build.sh b/build.sh
index 77509e0..c4517f8 100644
--- a/build.sh
+++ b/build.sh
@@ -18,6 +18,17 @@ github_accounts=(
 
 output_dir="$(pwd)/dist"
 
+# Debug output for CI environment
+echo "GITHUB_JOB: ${GITHUB_JOB:-not set}"
+
+# Check if we're running in a GitHub Actions job named "build"
+# If so, skip all token-dependent sections since secrets won't be available
+if [[ "${GITHUB_JOB}" = "build" ]]; then
+  echo "Running in GitHub Actions 'build' job - skipping all token-dependent sections"
+  echo "Done!"
+  exit 0
+fi
+
 echo "Building sponsors..."
 pushd configs/sponsors || exit 1
 npx contribkit --outputDir="${output_dir}" -w=800 --name=sponsors --force
diff --git a/configs/sponsors/contribkit.config.ts b/configs/sponsors/contribkit.config.ts
index 7ec6d95..ecc4cd7 100644
--- a/configs/sponsors/contribkit.config.ts
+++ b/configs/sponsors/contribkit.config.ts
@@ -2,6 +2,7 @@ import {
   defineConfig,
   tierPresets,
 } from '@lizardbyte/contribkit'
+import { extractSvgDimensions, createWrappedSponsorSvg } from './svg-utils.js'
 
 const createThemeAwareSvgStyle = (pathClass: string, lightColor: string = '#000000', darkColor: string = '#ffffff') => `
       <style>
@@ -127,49 +128,6 @@ const specialSupporters = [
   },
 ];
 
-// Function to create wrapped SVG for a special sponsor
-function createWrappedSponsorSvg(
-    sponsor: { name: string, url: string },
-    svgContent: string,
-    svgWidth: number,
-    svgHeight: number,
-    height: number,
-    x: number,
-    y: number
-): string {
-  const scale = height ? height / svgHeight : 1;
-  const scaledWidth = svgWidth * scale;
-  const scaledHeight = svgHeight * scale;
-
-  return `
-  <a xlink:href="${sponsor.url}" class="contribkit-link" target="_blank" id="${sponsor.name.replace(/\s+/g, '')}">
-    <svg x="${x}" y="${y}" width="${scaledWidth}" height="${scaledHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}">
-      <rect width="${svgWidth}" height="${svgHeight}" fill="transparent" />
-      ${svgContent}
-    </svg>
-  </a>`;
-}
-
-// Function to extract dimensions from SVG content
-function extractSvgDimensions(svgContent: string): { width: number, height: number } {
-  // Try to get dimensions from viewBox first
-  const viewBoxMatch = svgContent.match(/viewBox=['"]([^'"]*)['"]/);
-  if (viewBoxMatch) {
-    const [, minX, minY, width, height] = viewBoxMatch[1].split(/\s+/).map(Number);
-    if (!isNaN(width) && !isNaN(height)) {
-      return { width, height };
-    }
-  }
-
-  // Try to get from width/height attributes
-  const widthMatch = svgContent.match(/width=['"]([^'"]*)['"]/);
-  const heightMatch = svgContent.match(/height=['"]([^'"]*)['"]/);
-
-  const width = widthMatch ? parseInt(widthMatch[1]) : 200;
-  const height = heightMatch ? parseInt(heightMatch[1]) : 100;
-
-  return { width, height };
-}
 
 export default defineConfig({
   tiers: [
diff --git a/configs/sponsors/svg-utils.ts b/configs/sponsors/svg-utils.ts
new file mode 100644
index 0000000..813d51e
--- /dev/null
+++ b/configs/sponsors/svg-utils.ts
@@ -0,0 +1,62 @@
+/**
+ * Utility functions for SVG dimension extraction
+ */
+
+/**
+ * Extracts dimensions from SVG content by parsing viewBox or width/height attributes
+ * @param svgContent - The SVG content as a string
+ * @returns Object containing width and height
+ */
+export function extractSvgDimensions(svgContent: string): { width: number; height: number } {
+  // Try to get dimensions from viewBox first
+  const viewBoxMatch = svgContent.match(/viewBox=['"]([^'"]*)['"]/);
+  if (viewBoxMatch) {
+    const [minX, minY, width, height] = viewBoxMatch[1].split(/\s+/).map(Number);
+    // Check that both width and height are valid numbers (not NaN and not undefined)
+    if (!Number.isNaN(width) && !Number.isNaN(height) && width !== undefined && height !== undefined) {
+      return { width, height };
+    }
+  }
+
+  // Try to get from width/height attributes
+  const widthMatch = svgContent.match(/width=['"]([^'"]*)['"]/);
+  const heightMatch = svgContent.match(/height=['"]([^'"]*)['"]/);
+
+  const width = widthMatch ? Number.parseInt(widthMatch[1], 10) : 200;
+  const height = heightMatch ? Number.parseInt(heightMatch[1], 10) : 100;
+
+  return { width, height };
+}
+
+/**
+ * Creates a wrapped SVG element for a sponsor with positioning and scaling
+ * @param sponsor - Sponsor object with name and url
+ * @param svgContent - The SVG content to wrap
+ * @param svgWidth - Original width of the SVG
+ * @param svgHeight - Original height of the SVG
+ * @param height - Target height for the scaled SVG
+ * @param x - X position for the SVG
+ * @param y - Y position for the SVG
+ * @returns Wrapped SVG string
+ */
+export function createWrappedSponsorSvg(
+  sponsor: { name: string; url: string },
+  svgContent: string,
+  svgWidth: number,
+  svgHeight: number,
+  height: number,
+  x: number,
+  y: number
+): string {
+  const scale = height ? height / svgHeight : 1;
+  const scaledWidth = svgWidth * scale;
+  const scaledHeight = svgHeight * scale;
+
+  return `
+  <a xlink:href="${sponsor.url}" class="contribkit-link" target="_blank" id="${sponsor.name.replaceAll(/\s+/g, '')}">
+    <svg x="${x}" y="${y}" width="${scaledWidth}" height="${scaledHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}">
+      <rect width="${svgWidth}" height="${svgHeight}" fill="transparent" />
+      ${svgContent}
+    </svg>
+  </a>`;
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..872ac3b
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,33 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+export default [
+  pluginJs.configs.recommended,
+  {
+    ignores: [
+        "coverage/**",
+        "dist/**",
+    ],
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        "require": "readonly",
+      },
+    },
+    plugins: {
+      jest: {
+        extends: ["eslint:recommended"],
+        rules: {
+          "jest/no-disabled-tests": "error",
+          "jest/no-focused-tests": "error",
+          "jest/no-identical-title": "error",
+          "jest/prefer-to-have-length": "error",
+          "jest/valid-expect": "error",
+        },
+      },
+    },
+  },
+];
diff --git a/package.json b/package.json
index 5778f8e..200ca4d 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,69 @@
 {
+  "name": "@lizardbyte/contributors",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LizardByte/contributors.git"
+  },
+  "version": "0.0.0",
+  "description": "contribkit for LizardByte",
+  "license": "MIT",
+  "funding": "https://app.lizardbyte.dev",
+  "homepage": "https://github.com/LizardByte/contributors#readme",
+  "bugs": {
+    "url": "https://github.com/LizardByte/contributors/issues"
+  },
+  "keywords": [
+    "contributors",
+    "sponsors",
+    "github-sponsors"
+  ],
   "scripts": {
-    "build": "bash build.sh"
+    "build": "bash build.sh",
+    "test": "npm-run-all test:unit test:report test:lint test:typecheck",
+    "test:unit": "jest --coverage",
+    "test:report": "jest --reporters=jest-junit",
+    "test:lint": "eslint .",
+    "test:typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@lizardbyte/contribkit": "2025.1130.1103"
   },
   "devDependencies": {
-    "@types/node": "^24.0.0"
+    "@types/jest": "30.0.0",
+    "@types/node": "24.10.1",
+    "eslint": "9.39.1",
+    "eslint-plugin-jest": "29.2.1",
+    "jest": "30.2.0",
+    "jest-junit": "16.0.0",
+    "npm-run-all": "4.1.5",
+    "ts-jest": "29.4.5",
+    "typescript": "5.9.3"
+  },
+  "jest": {
+    "preset": "ts-jest/presets/default-esm",
+    "testEnvironment": "node",
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    },
+    "transform": {
+      "^.+\\.tsx?$": [
+        "ts-jest",
+        {
+          "useESM": true
+        }
+      ]
+    },
+    "testMatch": [
+      "**/tests/**/*.test.ts",
+      "**/tests/**/*.spec.ts"
+    ],
+    "collectCoverageFrom": [
+      "configs/**/*.ts",
+      "!configs/**/*.d.ts"
+    ]
   }
 }
diff --git a/tests/regression.test.ts b/tests/regression.test.ts
new file mode 100644
index 0000000..16d0ada
--- /dev/null
+++ b/tests/regression.test.ts
@@ -0,0 +1,196 @@
+/**
+ * Regression tests for specific bugs that were fixed
+ * These tests ensure that previously fixed bugs don't reappear
+ */
+
+import { extractSvgDimensions, createWrappedSponsorSvg } from '../configs/sponsors/svg-utils';
+
+describe('Regression Tests', () => {
+  describe('Bug: ViewBox destructuring with leading comma (2025-11-30)', () => {
+    it('should NOT skip the first viewBox value when destructuring', () => {
+      // This was the bug: const [, minX, minY, width, height] = ...
+      // The leading comma caused it to skip the first value (65.2)
+      // Making minX=173.5, minY=180, width=180, height=undefined
+
+      const digitalOceanSvg = `
+        <svg viewBox="65.2 173.5 180 180" width="180" height="180">
+          <path d="M155.2,351.7v-34.2..."/>
+        </svg>
+      `;
+
+      const result = extractSvgDimensions(digitalOceanSvg);
+
+      // Should correctly extract the 3rd and 4th values (width and height)
+      expect(result.width).toBe(180);
+      expect(result.height).toBe(180);
+
+      // Should NOT be undefined (the bug symptom)
+      expect(result.height).not.toBeUndefined();
+    });
+
+    it('should produce valid SVG coordinates without NaN values', () => {
+      const digitalOceanSvg = `
+        <svg viewBox="65.2 173.5 180 180" width="180" height="180">
+          <path d="M155.2,351.7v-34.2..."/>
+        </svg>
+      `;
+
+      const { width, height } = extractSvgDimensions(digitalOceanSvg);
+      const wrappedSvg = createWrappedSponsorSvg(
+        { name: 'DigitalOcean', url: 'https://digitalocean.com' },
+        digitalOceanSvg,
+        width,
+        height,
+        60,
+        203.0769230769231,
+        90
+      );
+
+      // The bug caused these to be NaN
+      expect(wrappedSvg).toContain('x="203.0769230769231"');
+      expect(wrappedSvg).toContain('y="90"');
+      expect(wrappedSvg).toContain('width="60"');
+      expect(wrappedSvg).toContain('height="60"');
+
+      // Should NOT contain NaN (the bug symptom)
+      expect(wrappedSvg).not.toContain('NaN');
+      expect(wrappedSvg).not.toContain('undefined');
+
+      // ViewBox should be correctly formed
+      expect(wrappedSvg).toContain('viewBox="0 0 180 180"');
+      expect(wrappedSvg).not.toMatch(/viewBox="0 0 180 undefined"/);
+    });
+
+    it('should correctly parse all special supporter SVGs without producing NaN', () => {
+      const testCases = [
+        {
+          name: 'DigitalOcean',
+          svg: '<svg viewBox="65.2 173.5 180 180" width="180" height="180"></svg>',
+          expectedWidth: 180,
+          expectedHeight: 180,
+        },
+        {
+          name: 'JetBrains',
+          svg: '<svg width="64" height="64" viewBox="0 0 64 64"></svg>',
+          expectedWidth: 64,
+          expectedHeight: 64,
+        },
+        {
+          name: 'GitHub Copilot',
+          svg: '<svg width="256px" height="208px" viewBox="0 0 256 208"></svg>',
+          expectedWidth: 256,
+          expectedHeight: 208,
+        },
+        {
+          name: 'Codecov',
+          svg: '<svg width="60px" height="60px" viewBox="0 0 60 60"></svg>',
+          expectedWidth: 60,
+          expectedHeight: 60,
+        },
+        {
+          name: 'Crowdin',
+          svg: '<svg width="248" height="248" viewBox="0 0 248 248"></svg>',
+          expectedWidth: 248,
+          expectedHeight: 248,
+        },
+      ];
+
+      testCases.forEach(testCase => {
+        const { width, height } = extractSvgDimensions(testCase.svg);
+
+        expect(width).toBe(testCase.expectedWidth);
+        expect(height).toBe(testCase.expectedHeight);
+        expect(width).not.toBeUndefined();
+        expect(height).not.toBeUndefined();
+        expect(Number.isNaN(width)).toBe(false);
+        expect(Number.isNaN(height)).toBe(false);
+
+        const wrappedSvg = createWrappedSponsorSvg(
+          { name: testCase.name, url: 'https://example.com' },
+          testCase.svg,
+          width,
+          height,
+          60,
+          100,
+          90
+        );
+
+        expect(wrappedSvg).not.toContain('NaN');
+        expect(wrappedSvg).not.toContain('undefined');
+      });
+    });
+
+    it('should correctly destructure viewBox without leading comma', () => {
+      // Test various viewBox formats to ensure proper destructuring
+      const testCases = [
+        { viewBox: '0 0 100 200', expectedWidth: 100, expectedHeight: 200 },
+        { viewBox: '10 20 100 200', expectedWidth: 100, expectedHeight: 200 },
+        { viewBox: '-10 -20 100 200', expectedWidth: 100, expectedHeight: 200 },
+        { viewBox: '65.2 173.5 180 180', expectedWidth: 180, expectedHeight: 180 },
+        { viewBox: '0.5 1.5 256.5 208.5', expectedWidth: 256.5, expectedHeight: 208.5 },
+      ];
+
+      testCases.forEach(testCase => {
+        const svg = `<svg viewBox="${testCase.viewBox}"></svg>`;
+        const result = extractSvgDimensions(svg);
+
+        expect(result.width).toBe(testCase.expectedWidth);
+        expect(result.height).toBe(testCase.expectedHeight);
+        expect(result.width).not.toBeUndefined();
+        expect(result.height).not.toBeUndefined();
+      });
+    });
+  });
+
+  describe('Bug: Number.parseInt without radix parameter', () => {
+    it('should use radix 10 to parse width/height attributes', () => {
+      // Without radix, "08" and "09" could be misinterpreted in some contexts
+      const svg = `<svg width="08" height="09"></svg>`;
+      const result = extractSvgDimensions(svg);
+
+      expect(result.width).toBe(8);
+      expect(result.height).toBe(9);
+    });
+
+    it('should correctly parse numbers with leading zeros', () => {
+      const testCases = [
+        { width: '08', height: '09', expectedWidth: 8, expectedHeight: 9 },
+        { width: '010', height: '011', expectedWidth: 10, expectedHeight: 11 },
+        { width: '0100', height: '0200', expectedWidth: 100, expectedHeight: 200 },
+      ];
+
+      testCases.forEach(testCase => {
+        const svg = `<svg width="${testCase.width}" height="${testCase.height}"></svg>`;
+        const result = extractSvgDimensions(svg);
+
+        expect(result.width).toBe(testCase.expectedWidth);
+        expect(result.height).toBe(testCase.expectedHeight);
+      });
+    });
+  });
+
+  describe('Bug: Undefined check in viewBox validation', () => {
+    it('should properly check for undefined in viewBox values', () => {
+      // When viewBox has fewer than 4 values, destructuring creates undefined
+      const svg = `<svg viewBox="0 0 100" width="50" height="60"></svg>`;
+      const result = extractSvgDimensions(svg);
+
+      // Should fall back to width/height attributes when viewBox is incomplete
+      expect(result.width).toBeDefined();
+      expect(result.height).toBeDefined();
+      expect(Number.isNaN(result.width)).toBe(false);
+      expect(Number.isNaN(result.height)).toBe(false);
+    });
+
+    it('should handle viewBox with invalid values gracefully', () => {
+      const svg = `<svg viewBox="invalid data here" width="50" height="60"></svg>`;
+      const result = extractSvgDimensions(svg);
+
+      // Should fall back to width/height attributes
+      expect(result.width).toBeDefined();
+      expect(result.height).toBeDefined();
+      expect(Number.isNaN(result.width)).toBe(false);
+      expect(Number.isNaN(result.height)).toBe(false);
+    });
+  });
+});
diff --git a/tests/svg-utils.test.ts b/tests/svg-utils.test.ts
new file mode 100644
index 0000000..d5fa3a3
--- /dev/null
+++ b/tests/svg-utils.test.ts
@@ -0,0 +1,411 @@
+/**
+ * Tests for SVG dimension extraction utilities
+ * These tests prevent regression bugs in SVG parsing and positioning
+ */
+
+import { extractSvgDimensions, createWrappedSponsorSvg } from '../configs/sponsors/svg-utils';
+
+describe('extractSvgDimensions', () => {
+  describe('viewBox extraction', () => {
+    it('should correctly extract dimensions from viewBox with 4 values', () => {
+      const svgContent = `
+        <svg viewBox="0 0 100 200">
+          <rect />
+        </svg>
+      `;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 100, height: 200 });
+    });
+
+    it('should correctly extract dimensions from viewBox with offset (minX, minY)', () => {
+      // This is the DigitalOcean case that was broken
+      const svgContent = `
+        <svg viewBox="65.2 173.5 180 180">
+          <rect />
+        </svg>
+      `;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 180, height: 180 });
+    });
+
+    it('should handle viewBox with different quote styles', () => {
+      const svgContentDoubleQuotes = `<svg viewBox="0 0 256 208"></svg>`;
+      const svgContentSingleQuotes = `<svg viewBox='0 0 256 208'></svg>`;
+
+      expect(extractSvgDimensions(svgContentDoubleQuotes)).toEqual({ width: 256, height: 208 });
+      expect(extractSvgDimensions(svgContentSingleQuotes)).toEqual({ width: 256, height: 208 });
+    });
+
+    it('should handle viewBox with decimal values', () => {
+      const svgContent = `<svg viewBox="0 0 100.5 200.75"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 100.5, height: 200.75 });
+    });
+
+    it('should handle viewBox with multiple spaces between values', () => {
+      const svgContent = `<svg viewBox="0   0    100    200"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 100, height: 200 });
+    });
+
+    it('should handle viewBox with negative offset values', () => {
+      const svgContent = `<svg viewBox="-10 -20 100 200"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 100, height: 200 });
+    });
+  });
+
+  describe('width/height attribute extraction', () => {
+    it('should extract dimensions from width and height attributes when no viewBox', () => {
+      const svgContent = `<svg width="64" height="64"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 64, height: 64 });
+    });
+
+    it('should handle width/height attributes with px units', () => {
+      const svgContent = `<svg width="256px" height="208px"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 256, height: 208 });
+    });
+
+    it('should handle width/height attributes with different quote styles', () => {
+      const svgContentDoubleQuotes = `<svg width="100" height="200"></svg>`;
+      const svgContentSingleQuotes = `<svg width='100' height='200'></svg>`;
+
+      expect(extractSvgDimensions(svgContentDoubleQuotes)).toEqual({ width: 100, height: 200 });
+      expect(extractSvgDimensions(svgContentSingleQuotes)).toEqual({ width: 100, height: 200 });
+    });
+
+    it('should parse integer values correctly with radix 10', () => {
+      // Ensures Number.parseInt uses base 10, not auto-detecting octal for "08" etc.
+      const svgContent = `<svg width="08" height="09"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 8, height: 9 });
+    });
+  });
+
+  describe('fallback behavior', () => {
+    it('should return default width when no width attribute or viewBox', () => {
+      const svgContent = `<svg height="100"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result.width).toBe(200); // default width
+      expect(result.height).toBe(100);
+    });
+
+    it('should return default height when no height attribute or viewBox', () => {
+      const svgContent = `<svg width="100"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result.width).toBe(100);
+      expect(result.height).toBe(100); // default height
+    });
+
+    it('should return both defaults when no dimensions found', () => {
+      const svgContent = `<svg></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 200, height: 100 });
+    });
+
+    it('should fallback to width/height attributes when viewBox is invalid', () => {
+      const svgContent = `<svg viewBox="invalid" width="50" height="75"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      // When viewBox match exists but produces NaN, it still tries viewBox path first
+      // This returns undefined values, then falls back to width/height
+      expect(result.width).toBeDefined();
+      expect(result.height).toBeDefined();
+      expect(Number.isNaN(result.width)).toBe(false);
+      expect(Number.isNaN(result.height)).toBe(false);
+    });
+  });
+
+  describe('complex real-world SVG examples', () => {
+    it('should extract dimensions from DigitalOcean SVG', () => {
+      const digitalOceanSvg = `
+        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+             width="180" height="180" viewBox="65.2 173.5 180 180"
+             style="enable-background:new 65.2 173.5 180 180;" xml:space="preserve">
+          <path d="M155.2,351.7v-34.2..."/>
+        </svg>
+      `;
+      const result = extractSvgDimensions(digitalOceanSvg);
+      expect(result).toEqual({ width: 180, height: 180 });
+    });
+
+    it('should extract dimensions from JetBrains SVG', () => {
+      const jetBrainsSvg = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" viewBox="0 0 64 64">
+          <path fill="#000" d="M48 16H8v40h40V16Z"/>
+        </svg>
+      `;
+      const result = extractSvgDimensions(jetBrainsSvg);
+      expect(result).toEqual({ width: 64, height: 64 });
+    });
+
+    it('should extract dimensions from GitHub Copilot SVG', () => {
+      const copilotSvg = `
+        <svg width="256px" height="208px" viewBox="0 0 256 208" version="1.1"
+             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <title>GitHub Copilot</title>
+        </svg>
+      `;
+      const result = extractSvgDimensions(copilotSvg);
+      expect(result).toEqual({ width: 256, height: 208 });
+    });
+
+    it('should extract dimensions from Crowdin SVG', () => {
+      const crowdinSvg = `
+        <svg width="248" height="248" viewBox="0 0 248 248" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M163.024 177.312C157.024..."/>
+        </svg>
+      `;
+      const result = extractSvgDimensions(crowdinSvg);
+      expect(result).toEqual({ width: 248, height: 248 });
+    });
+  });
+
+  describe('edge cases and error handling', () => {
+    it('should handle empty string', () => {
+      const result = extractSvgDimensions('');
+      expect(result).toEqual({ width: 200, height: 100 });
+    });
+
+    it('should handle malformed SVG gracefully', () => {
+      const result = extractSvgDimensions('<notsvg>');
+      expect(result).toEqual({ width: 200, height: 100 });
+    });
+
+    it('should handle NaN values in viewBox', () => {
+      const svgContent = `<svg viewBox="a b c d" width="50" height="60"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      expect(result).toEqual({ width: 50, height: 60 });
+    });
+
+    it('should handle incomplete viewBox (only 3 values)', () => {
+      const svgContent = `<svg viewBox="0 0 100" width="50" height="60"></svg>`;
+      const result = extractSvgDimensions(svgContent);
+      // With only 3 values, height is undefined, so it falls back to width/height
+      // But the implementation returns the parsed values which includes width=100, height=undefined
+      expect(result.width).toBeDefined();
+      expect(result.height).toBeDefined();
+      expect(Number.isNaN(result.width)).toBe(false);
+      expect(Number.isNaN(result.height)).toBe(false);
+    });
+  });
+});
+
+describe('createWrappedSponsorSvg', () => {
+  const mockSponsor = {
+    name: 'Test Sponsor',
+    url: 'https://example.com'
+  };
+
+  const simpleSvgContent = '<circle cx="50" cy="50" r="40"/>';
+
+  describe('basic functionality', () => {
+    it('should create a wrapped SVG with correct positioning', () => {
+      const result = createWrappedSponsorSvg(
+        mockSponsor,
+        simpleSvgContent,
+        100,
+        100,
+        60,
+        50,
+        100
+      );
+
+      expect(result).toContain('x="50"');
+      expect(result).toContain('y="100"');
+      expect(result).toContain('xlink:href="https://example.com"');
+      expect(result).toContain('id="TestSponsor"');
+    });
+
+    it('should correctly scale dimensions', () => {
+      // Original: 100x100, target height: 60
+      // Scale should be 0.6, so width becomes 60
+      const result = createWrappedSponsorSvg(
+        mockSponsor,
+        simpleSvgContent,
+        100,
+        100,
+        60,
+        0,
+        0
+      );
+
+      expect(result).toContain('width="60"');
+      expect(result).toContain('height="60"');
+    });
+
+    it('should handle non-square aspect ratios', () => {
+      // Original: 256x208, target height: 60
+      // Scale: 60/208 = 0.288..., width becomes ~73.846
+      const result = createWrappedSponsorSvg(
+        mockSponsor,
+        simpleSvgContent,
+        256,
+        208,
+        60,
+        0,
+        0
+      );
+
+      expect(result).toContain('width="73.84615384615384"');
+      // Height might have floating point precision issues (59.99999999999999)
+      expect(result).toMatch(/height="(60|59\.9999999999999\d*)"/);
+    });
+
+    it('should remove spaces from sponsor name in id', () => {
+      const sponsorWithSpaces = {
+        name: 'GitHub Copilot',
+        url: 'https://github.com'
+      };
+
+      const result = createWrappedSponsorSvg(
+        sponsorWithSpaces,
+        simpleSvgContent,
+        100,
+        100,
+        60,
+        0,
+        0
+      );
+
+      expect(result).toContain('id="GitHubCopilot"');
+      expect(result).not.toContain('id="GitHub Copilot"');
+    });
+
+    it('should handle multiple spaces in sponsor name', () => {
+      const sponsorWithSpaces = {
+        name: 'Test   Multiple   Spaces',
+        url: 'https://example.com'
+      };
+
+      const result = createWrappedSponsorSvg(
+        sponsorWithSpaces,
+        simpleSvgContent,
+        100,
+        100,
+        60,
+        0,
+        0
+      );
+
+      expect(result).toContain('id="TestMultipleSpaces"');
+    });
+  });
+
+  describe('viewBox generation', () => {
+    it('should create correct viewBox', () => {
+      const result = createWrappedSponsorSvg(
+        mockSponsor,
+        simpleSvgContent,
+        180,
+        180,
+        60,
+        0,
+        0
+      );
+
+      expect(result).toContain('viewBox="0 0 180 180"');
+    });
+
+    it('should preserve original dimensions in viewBox regardless of scaling', () => {
+      const result = createWrappedSponsorSvg(
+        mockSponsor,
+        simpleSvgContent,
+        256,
+        208,
+        60,
+        0,
+        0
+      );
+
+      expect(result).toContain('viewBox="0 0 256 208"');
+    });
+  });
+
+  describe('position validation', () => {
+    it('should not produce NaN for x coordinate', () => {
+      const result = createWrappedSponsorSvg(
+        mockSponsor,
+        simpleSvgContent,
+        180,
+        180,
+        60,
+        203.0769230769231,
+        90
+      );
+
+      expect(result).toContain('x="203.0769230769231"');
+      expect(result).not.toContain('x="NaN"');
+    });
+
+    it('should not produce NaN for y coordinate', () => {
+      const result = createWrappedSponsorSvg(
+        mockSponsor,
+        simpleSvgContent,
+        180,
+        180,
+        60,
+        50,
+        90
+      );
+
+      expect(result).toContain('y="90"');
+      expect(result).not.toContain('y="NaN"');
+    });
+
+    it('should not produce NaN or undefined values', () => {
+      const result = createWrappedSponsorSvg(
+        mockSponsor,
+        simpleSvgContent,
+        180,
+        180,
+        60,
+        0,
+        0
+      );
+
+      // Width validation
+      expect(result).toContain('width="60"');
+      expect(result).not.toContain('width="NaN"');
+      expect(result).not.toContain('width="undefined"');
+
+      // Height validation
+      expect(result).toContain('height="60"');
+      expect(result).not.toContain('height="NaN"');
+      expect(result).not.toContain('height="undefined"');
+
+      // General undefined check
+      expect(result).not.toContain('undefined');
+    });
+  });
+
+  describe('integration with extractSvgDimensions', () => {
+    it('should work correctly with extracted dimensions from DigitalOcean SVG', () => {
+      const digitalOceanSvg = `
+        <svg viewBox="65.2 173.5 180 180" width="180" height="180">
+          <path d="M155.2,351.7v-34.2..."/>
+        </svg>
+      `;
+
+      const { width, height } = extractSvgDimensions(digitalOceanSvg);
+      const result = createWrappedSponsorSvg(
+        { name: 'DigitalOcean', url: 'https://digitalocean.com' },
+        digitalOceanSvg,
+        width,
+        height,
+        60,
+        203,
+        90
+      );
+
+      expect(result).toContain('x="203"');
+      expect(result).toContain('y="90"');
+      expect(result).toContain('width="60"');
+      expect(result).toContain('height="60"');
+      expect(result).not.toContain('NaN');
+      expect(result).not.toContain('undefined');
+    });
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..4eeec75
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true
+  }
+}