CONTRIBUTING.md, port 9000, .env file, api-renamed folder

Adds `disable_animations` to the gist card so it matches the stats,
top-languages, repo and wakatime cards.

## Changes

- `packages/core/src/cards/gist.ts`: new `disable_animations` option
(default `false`). When it is `true`, `card.disableAnimations()` is
called. The default output stays the same, with the title fade-in still
animated.
- `packages/core/src/api/gist.ts`: reads the query param and passes it
through `parseBoolean`.
- Wizard (`buildCardUrl.ts`): appends `disable_animations=true` for the
gist card when "Enable Animations?" is unchecked. `Customize.tsx` now
shows that checkbox for the gist card. All five card types now support
it, so I removed the card-type condition around the checkbox. Keeping it
would have tripped `@typescript-eslint/no-unnecessary-condition`.
- Docs: added `disable_animations` to the options table in
`gist-pin.md`.

## Tests

- `renderGistCard.test.ts`: by default the blanket `animation-duration:
0s` rule is absent, and `disable_animations: true` adds it.
- `buildCardUrl.test.ts`: the gist URL gets `disable_animations=true`
when animations are turned off.
- `gist.test.js` (backend contract): added `disable_animations: "true"`
to the many-params snapshot request. The only snapshot change is the
added rule.
- `xss.test.js`: added `disable_animations` to the gist API param list.

## Verified locally (Node 24)

- New tests before the fix: 2 failing (render + wizard URL). After the
fix, all pass.
- `pnpm run test`: 40 files, 766 tests passed
- `pnpm run lint`: ok
- `pnpm run typecheck`: ok
- `prettier --check` on the changed files: ok

Closes #614

---------

Co-authored-by: martin-mfg <2026226+martin-mfg@users.noreply.github.com>

.dockerignore

@@ -0,0 +1,5 @@
+**/node_modules
+.git
+**/tests
+
+**/.env

.github/CODE_OF_CONDUCT.md

@@ -21,4 +21,4 @@ If you believe someone is violating the code of conduct, we ask that you report
   - Repeated harassment of others. In general, if someone asks you to stop, then stop.
 - **When we disagree, try to understand why.** Disagreements, both social and technical, happen all the time. It is important that we resolve disagreements and differing views constructively. Remember that we’re different. Different people have different perspectives on issues. Being unable to understand why someone holds a viewpoint doesn’t mean that they’re wrong. Don’t forget that it is human to err and blaming each other doesn’t get us anywhere. Instead, focus on helping to resolve issues and learning from mistakes.
 
-Based on the [Django Code of Conduct](https://www.djangoproject.com/conduct/).
+Based on the [Django Code of Conduct](https://www.djangoproject.com/conduct/).

.github/CONTRIBUTING.md

@@ -2,25 +2,84 @@
 
 ## Local Development
 
-To set up the project GitHub-Stats-Extended locally, run the following commands:
+You can either build and run the whole project via Docker, or build and run the components individually via pnpm.
+
+### via Docker
+
+```bash
+docker build -f Dockerfile.vercel -t github-stats-extended .
+docker run -p 9000:80 --env-file apps/backend/.env github-stats-extended
+```
+
+### via pnpm
+
+First install all dependencies:
 
 ```bash
 pnpm install
-pnpm run build:packages
+```
+
+To run the frontend dev server:
+
+```bash
 pnpm run dev:frontend
 ```
 
-The easiest way to run and test the project is to deploy it to Vercel as described in the [deployment guide](../docs/deploy.md).
+The frontend attempts to load stats cards from the backend in several places. To make this work locally, run the backend dev server in a separate terminal.
+
+To run the backend dev server:
+
+```bash
+pnpm run build:packages
+pnpm run dev:backend
+```
+
+### Environment Variables
+
+To successfully render stats cards, your test server needs a valid [Personal Access Token](https://github-stats-extended.vercel.app/frontend/docs/deploy/#first-step-get-your-personal-access-token-pat). Set this PAT and any of the [other, optional environment variables](https://github-stats-extended.vercel.app/frontend/docs/deploy/#available-environment-variables) in [`apps/backend/.env`](./apps/backend/.env).
+
+## Tests
+
+```bash
+pnpm run lint           # eslint
+pnpm run typecheck      # tsc
+pnpm run format:check   # prettier
+pnpm run test           # unit tests
+```
+
+The **Backend E2E test** in CI compares the cards your branch renders against the ones served by the preview deployment, which is still on the last commit merged to master.
+So if your PR changes card output at all, that job goes red until the preview catches up.
+It's marked `continue-on-error`, so it won't block your PR, but do open it and check the diff is only what you expected.
+
+If the change to card markup was intentional, update the snapshots:
+
+```bash
+pnpm --filter ./packages/core/ run test:update:snapshot
+pnpm --filter ./apps/backend/ run test:update:snapshot
+```
+
+## GraphQL Queries
+
+The GraphQL queries live in `packages/core/src/graphql/queries/*.graphql`,
+and their TypeScript types are generated from GitHub's published schema into `packages/core/src/graphql/generated/`.
+Those generated files are committed, so if you change a query, regenerate them and include the result in your PR:
+
+```bash
+pnpm --filter ./packages/core/ run generate-graphql-types
+```
+
+CI runs `pnpm --filter ./packages/core/ run check-graphql-types`, which fails if the committed types no longer match the queries.
+Never edit the generated files by hand — change the `.graphql` file and regenerate.
 
 ## Themes Contribution
 
-We have stopped the addition of new themes to decrease maintenance efforts. If you are considering contributing your theme just because you are using it personally, then instead of adding it to our theme collection, you can use card [customization options](../docs/advanced_documentation.md#customization).
+We have stopped the addition of new themes to decrease maintenance efforts. If you are considering contributing your theme just because you are using it personally, then instead of adding it to our theme collection, you can use card [customization options](https://github-stats-extended.vercel.app/frontend/docs/customization/common-options/).
 
 ## Translations Contribution
 
-GitHub-Stats-Extended supports multiple languages. If we are missing your language, you can contribute it! You can check the currently supported languages [here](../docs/advanced_documentation.md#available-locales).
+GitHub-Stats-Extended supports multiple languages. If we are missing your language, you can contribute it! You can check the currently supported languages [here](https://github-stats-extended.vercel.app/frontend/docs/customization/locales/).
 
-To contribute your language you need to edit the [backend/src/translations.js](../backend/src/translations.js) file and add a new property to each object where the key is the language code in [ISO 639-1 standard](https://www.andiamo.co.uk/resources/iso-language-codes/) and the value is the translated string.
+To contribute your language you need to edit the [packages/core/src/translations.ts](../packages/core/src/translations.ts) file and add a new property to each object where the key is the language code in [ISO 639-1 standard](https://www.andiamo.co.uk/resources/iso-language-codes/) and the value is the translated string.
 
 ## Any contributions you make will be under the MIT Software License
 
@@ -30,25 +89,7 @@ In short, when you submit changes, your submissions are understood to be under t
 
 We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/stats-organization/github-stats-extended/issues/new/choose). If there is already an open issue for your bug in the upstream repo [github-readme-stats](https://github.com/anuraghazra/github-readme-stats/issues) you don't need to report it here.
 
-## Frequently Asked Questions (FAQs)
-
-**Q:** How to hide Jupyter Notebook?
-
-> **Ans:** &hide=jupyter%20notebook
-
-**Q:** Language Card is incorrect
-
-> **Ans:** Please read all the related issues/comments before opening any issues regarding language card stats:
->
-> - <https://github.com/anuraghazra/github-readme-stats/issues/136#issuecomment-665164174>
->
-> - <https://github.com/anuraghazra/github-readme-stats/issues/136#issuecomment-665172181>
-
-**Q:** How to count private stats?
-
-> see [here](../docs/fork.md#private-contributions-support)
-
-### Feature Request
+## Feature Request
 
 **Great Feature Requests** tend to have:
 

.github/SECURITY.md

@@ -1,3 +1,3 @@
 # Security Policy
 
-Please report any security vulnerabilities to github.stats.extended@gmail.com. I will try to respond as quickly as possible, but since I am maintaining this project in my free time, please allow some time for a response.
+Please report any security vulnerabilities to github.stats.extended@gmail.com. I will try to respond as quickly as possible, but since I am maintaining this project in my free time, please allow some time for a response.

.github/actions/install-dependencies/action.yml

@@ -14,11 +14,11 @@ runs:
 
   steps:
     - name: Install pnpm
-      uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
+      uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
 
     - name: Setup Node.js (via input)
       if: ${{ inputs.node-version }}
-      uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
       with:
         node-version: ${{ inputs.node-version }}
         cache: "pnpm"
@@ -26,7 +26,7 @@ runs:
 
     - name: Setup Node.js (via .nvmrc)
       if: ${{ !inputs.node-version }}
-      uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
       with:
         node-version-file: ".nvmrc"
         cache: "pnpm"

.github/dependabot.yml

@@ -4,7 +4,8 @@ updates:
   - package-ecosystem: npm
     directory: "/"
     schedule:
-      interval: daily
+      interval: cron
+      cronjob: "45 0 * * 3,6"
     open-pull-requests-limit: 20
     commit-message:
       prefix: "build(deps)"
@@ -31,6 +32,12 @@ updates:
         patterns:
           - "vite"
           - "@vitejs/*"
+      astro:
+        patterns:
+          - "astro"
+          - "astro-*"
+          - "@astrojs/*"
+          - "starlight-*"
       tailwind:
         patterns:
           - "tailwindcss"
@@ -57,6 +64,11 @@ updates:
         patterns:
           - "axios"
           - "axios-*"
+      graphql:
+        patterns:
+          - "graphql"
+          - "@graphql-codegen/*"
+          - "@octokit/graphql-schema"
 
   # Maintain dependencies for GitHub Actions
   - package-ecosystem: github-actions

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Install Dependencies
         uses: ./.github/actions/install-dependencies
@@ -59,7 +59,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Install Dependencies
         uses: ./.github/actions/install-dependencies
@@ -67,8 +67,10 @@ jobs:
       - name: Build packages
         run: pnpm run build:packages
 
+      # Only install chromium since it is the only browser enabled in
+      # apps/frontend/playwright.config.ts. Update this if more projects are added.
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+        run: pnpm exec playwright install --with-deps chromium
 
       - name: Run Playwright tests
         run: pnpm --filter ./apps/frontend/ run test:e2e
@@ -81,11 +83,15 @@ jobs:
     permissions:
       contents: read
 
+    # Compares the cards we render here against the preview deployment,
+    # which is still on the last commit merged on master.
+    # So any PR that changes card output turns this red until the preview catches up.
+    # Worth a look, just not always a bug.
     continue-on-error: true
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Install Dependencies
         uses: ./.github/actions/install-dependencies
@@ -106,7 +112,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Install Dependencies
         uses: ./.github/actions/install-dependencies
@@ -120,5 +126,11 @@ jobs:
       - name: Lint (knip)
         run: pnpm run lint:knip
 
+      - name: Lint (deduped deps)
+        run: pnpm run lint:deps
+
+      - name: Lint (generated GraphQL types)
+        run: pnpm --filter ./packages/core/ run check-graphql-types
+
       - name: Typecheck
         run: pnpm run typecheck

.github/workflows/generate-language-colors.yml

@@ -11,50 +11,37 @@ on:
     #        │ │  │   │ │
     #        │ │  │   │ │
     #        * *  *   * *
-    - cron: "0 0 */30 * *"
+    - cron: "45 22 */7 * *"
 
 permissions:
-  actions: read
-  checks: read
   contents: write
-  deployments: read
-  issues: read
-  discussions: read
-  packages: read
-  pages: read
   pull-requests: write
-  repository-projects: read
-  security-events: read
-  statuses: read
 
 jobs:
   update-languages:
-    if: |
-      github.repository == 'anuraghazra/github-readme-stats' ||
-      github.repository == 'stats-organization/github-readme-stats' ||
-      github.repository == 'stats-organization/github-stats-extended'
-    name: Update supported languages
+    if: github.repository == 'stats-organization/github-stats-extended'
+    name: Generate Language Colors
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Install Dependencies
         uses: ./.github/actions/install-dependencies
 
       - name: Run update-languages-json.js script
-        run: pnpm --filter ./packages/core/ run generate-langs-json
+        run: pnpm --filter ./packages/core/ run generate-language-colors
 
       - name: Create Pull Request if upstream language file is changed
-        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
         with:
-          commit-message: "feat(backend): update languages JSON"
+          commit-message: "feat(core): update language colors"
           branch: "update_langs/patch"
           delete-branch: true
-          title: Update languages JSON
-          body: "The
-            [update-langs](https://github.com/stats-organization/github-stats-extended/actions/workflows/update-langs.yml)
-            action found new/updated languages in the [upstream languages JSON
-            file](https://raw.githubusercontent.com/github/linguist/master/lib/linguist/languages.yml)."
+          title: Update languages colors
+          body: >-
+            The [generate-language-colors](https://github.com/stats-organization/github-stats-extended/actions/workflows/generate-language-colors.yml)
+            workflow detected changes in the [upstream languages JSON
+            file](https://raw.githubusercontent.com/github/linguist/master/lib/linguist/languages.yml) and regenerated the local language colors JSON file.
           labels: "ci"

.github/workflows/generate-theme-doc.yml

@@ -1,53 +0,0 @@
-name: Generate Theme Readme
-on:
-  push:
-    branches:
-      - master
-    paths:
-      - "packages/core/src/themes/index.js"
-  workflow_dispatch:
-
-permissions: {}
-
-jobs:
-  generate-theme-doc:
-    runs-on: ubuntu-latest
-    name: Generate theme doc
-
-    permissions:
-      actions: read
-      checks: read
-      contents: write
-      deployments: read
-      issues: read
-      discussions: read
-      packages: read
-      pages: read
-      pull-requests: write
-      repository-projects: read
-      security-events: read
-      statuses: read
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Install Dependencies
-        uses: ./.github/actions/install-dependencies
-
-      - name: Generate readme
-        run: |
-          pnpm --filter ./packages/core/ run theme-readme-gen
-
-      - name: Create Pull Request if themes README has changed
-        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8
-        with:
-          commit-message: "feat(backend): update themes README"
-          branch: "update_themes_readme/patch"
-          delete-branch: true
-          title: Update themes README
-          body: "The
-            [generate-theme-doc](https://github.com/stats-organization/github-stats-extended/actions/workflows/generate-theme-doc.yml)
-            action found new/updated languages in the [upstream languages JSON
-            file](https://raw.githubusercontent.com/github/linguist/master/lib/linguist/languages.yml)."
-          labels: "ci"

.github/workflows/generate-theme-readme.yml

@@ -0,0 +1,56 @@
+name: Generate Themes Doc
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "packages/core/src/themes/index.ts"
+      - "scripts/generate-theme-readme.ts"
+  workflow_dispatch:
+  schedule:
+    #        ┌───────────── minute (0 - 59)
+    #        │ ┌───────────── hour (0 - 23)
+    #        │ │  ┌───────────── day of the month (1 - 31)
+    #        │ │  │   ┌───────────── month (1 - 12 or JAN-DEC)
+    #        │ │  │   │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
+    #        │ │  │   │ │
+    #        │ │  │   │ │
+    #        │ │  │   │ │
+    #        * *  *   * *
+    - cron: "45 22 */7 * *"
+
+permissions: {}
+
+jobs:
+  generate-theme-doc:
+    runs-on: ubuntu-latest
+    name: Generate Themes Doc
+
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+
+      - name: Install Dependencies
+        uses: ./.github/actions/install-dependencies
+
+      - name: Generate themes doc
+        run: pnpm run generate-theme-readme
+
+      - name: Create Pull Request if the themes doc has changed
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
+        with:
+          commit-message: "docs(frontend): update available themes page"
+          branch: "update_themes_doc/patch"
+          delete-branch: true
+          title: Update available themes page
+          body: >-
+            The [generate-theme-readme](https://github.com/stats-organization/github-stats-extended/actions/workflows/generate-theme-readme.yml)
+            workflow detected changes in
+            [`packages/core/src/themes/index.ts`](https://github.com/stats-organization/github-stats-extended/blob/master/packages/core/src/themes/index.ts)
+            and regenerated the Available Themes page,
+            [`apps/frontend/src/content/docs/docs/customization/themes.md`](https://github.com/stats-organization/github-stats-extended/blob/master/apps/frontend/src/content/docs/docs/customization/themes.md).
+          labels: "ci"

.github/workflows/release.yml

@@ -14,7 +14,7 @@ jobs:
       id-token: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Install Dependencies
         uses: ./.github/actions/install-dependencies
@@ -27,4 +27,72 @@ jobs:
           pnpm --filter @stats-organization/github-readme-stats-core pack --dry-run
 
       - name: Publish core package to npm
-        run: pnpm --filter @stats-organization/github-readme-stats-core publish --provenance --access public
+        run: pnpm --filter @stats-organization/github-readme-stats-core publish --provenance --access public --no-git-checks
+
+  docker:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: metadata
+        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6.2.0
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=raw,value=latest
+            type=sha
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
+        with:
+          context: .
+          file: Dockerfile.vercel
+          push: true
+          load: true
+          tags: ${{ steps.metadata.outputs.tags }}
+          labels: ${{ steps.metadata.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Smoke test
+        run: |
+          docker run -d --name smoke-test -p 80:80 ghcr.io/${{ github.repository }}:latest
+          for i in $(seq 1 30); do
+            if curl -sf -o /dev/null http://localhost/; then
+              echo "Server is up"
+              break
+            fi
+            if [ "$i" -eq 30 ]; then
+              echo "Server failed to start"
+              docker logs smoke-test
+              exit 1
+            fi
+            sleep 1
+          done
+          BODY=$(curl -sL http://localhost/)
+          echo "Response body (first 500 chars):"
+          echo "$BODY" | head -c 500
+          echo "$BODY" | grep -qi "wizard" || {
+            echo "Expected content not found in response"
+            docker logs smoke-test
+            exit 1
+          }
+          docker stop smoke-test

.github/workflows/repeat-recent-requests.yml

@@ -10,22 +10,29 @@ on:
     #        │ │  │  │ │
     #        │ │  │  │ │
     #        * *  *  * *
-    - cron: "45 * * * *"
+    - cron: "15,45 * * * *"
   workflow_dispatch:
 
+permissions: {}
+
 jobs:
-  triggerRepeatRecent:
+  repeat-recent-requests:
+    if: github.repository == 'stats-organization/github-stats-extended'
     name: Trigger server to update cached data.
     runs-on: ubuntu-latest
     steps:
       - name: Make Request
-        id: myRequest
-        uses: fjogeleit/http-request-action@551353b829c3646756b2ec2b3694f819d7957495 # v2
-        with:
-          url: "https://github-stats-extended.vercel.app/api/repeat-recent"
-          method: "POST"
-          timeout: "300000"
-      - name: Show Response
         run: |
-          echo ${{ steps.myRequest.outputs.response }}
-          echo ${{ steps.myRequest.outputs.status }}
+          args=(
+            --silent --show-error            # no progress bar, but still report errors
+            --request POST                   # the only thing the endpoint checks
+            --location                       # a redirect would otherwise pass the status check
+            --max-redirs 5                   # bounded well below curl's default of 50
+            --speed-limit 1 --speed-time 600 # give up after 600s of no traffic
+            --output response.txt            # keep the body out of the status capture
+            --write-out "%{http_code}"       # status is all we capture on stdout
+          )
+          status=$(curl "${args[@]}" "https://github-stats-extended.vercel.app/api/repeat-recent")
+          cat response.txt
+          printf '\nstatus: %s\n' "$status"
+          test "$status" -lt 400

.github/workflows/test-docker.yml

@@ -0,0 +1,73 @@
+name: Test Docker build and push
+on:
+  workflow_dispatch:
+  push:
+    branches: [remove-isr]
+
+permissions: {}
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: metadata
+        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6.2.0
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=test
+            type=sha
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
+        with:
+          context: .
+          file: Dockerfile.vercel
+          push: true
+          load: true
+          tags: ${{ steps.metadata.outputs.tags }}
+          labels: ${{ steps.metadata.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Smoke test
+        run: |
+          docker run -d --name smoke-test -p 80:80 ghcr.io/${{ github.repository }}:test
+          for i in $(seq 1 30); do
+            if curl -sf -o /dev/null http://localhost/; then
+              echo "Server is up"
+              break
+            fi
+            if [ "$i" -eq 30 ]; then
+              echo "Server failed to start"
+              docker logs smoke-test
+              exit 1
+            fi
+            sleep 1
+          done
+          BODY=$(curl -sL http://localhost/)
+          echo "Response body (first 500 chars):"
+          echo "$BODY" | head -c 500
+          echo "$BODY" | grep -qi "wizard" || {
+            echo "Expected content not found in response"
+            docker logs smoke-test
+            exit 1
+          }
+          docker stop smoke-test

.github/workflows/update-tags.yml

@@ -14,5 +14,5 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: haya14busa/action-update-semver@7d2c558640ea49e798d46539536190aff8c18715 # v1.5.1

.gitignore

@@ -16,11 +16,12 @@ apps/backend/vercel_token
 apps/backend-copy
 
 apps/frontend/.env
+# Astro's generated types and content store
+apps/frontend/.astro
 
 
 .turbo
 build
-build-ts
 *.tsbuildinfo
 
 # IDE

.prettierignore

@@ -1,5 +1 @@
 pnpm-lock.yaml
-
-# https://github.com/stats-organization/github-stats-extended/pull/26#discussion_r2709033732
-# Avoid prettier format on md files to simplify merge on upstream repo
-*.md

.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
   "recommendations": [
     "yzhang.markdown-all-in-one",
-    "prettier.prettier-vscode",
+    "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
     "github.vscode-github-actions"
   ]

.vscode/settings.json

@@ -3,8 +3,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {
-    "editor.tabSize": 2,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "cSpell.words": ["Wakatime"]
+  "cSpell.words": ["retryer", "Wakatime"]
 }

Dockerfile.vercel

@@ -0,0 +1,37 @@
+# --- Build stage ---
+
+FROM node:24-slim AS build
+RUN corepack enable
+WORKDIR /app
+
+COPY pnpm-workspace.yaml pnpm-lock.yaml package.json ./
+COPY packages/core/package.json packages/core/
+COPY apps/backend/package.json apps/backend/
+COPY apps/frontend/package.json apps/frontend/
+
+RUN pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm run build:packages
+RUN pnpm run build:frontend
+
+# --- Production stage ---
+
+FROM node:24-slim
+RUN corepack enable
+WORKDIR /app
+
+COPY pnpm-workspace.yaml pnpm-lock.yaml package.json ./
+COPY packages/core/package.json packages/core/
+COPY apps/backend/package.json apps/backend/
+COPY apps/frontend/package.json apps/frontend/
+
+RUN pnpm install --frozen-lockfile --prod
+
+COPY --from=build /app/packages/core/build/ packages/core/build/
+COPY --from=build /app/apps/frontend/build/ apps/frontend/build/
+COPY apps/backend/ apps/backend/
+
+ENV PORT=80
+EXPOSE 80
+CMD ["node", "apps/backend/express.js"]

README.md

@@ -2,66 +2,119 @@
   <img src="docs/appIcon.svg" width="100px" alt="GitHub Stats Extended Logo" />
   <h1>GitHub Stats Extended</h1>
   <p>Dynamically generate GitHub stats for your READMEs.</p>
-<a href="https://github-stats-extended.vercel.app/api?username=anuraghazra"><img src="https://github-stats-extended.vercel.app/api?username=anuraghazra"></a>
+<a href="https://github-stats-extended.vercel.app/api?username=anuraghazra">
+  <picture>
+    <source
+      srcset="https://github-stats-extended.vercel.app/api?username=anuraghazra&theme=dark_github"
+      media="(prefers-color-scheme: dark)"
+    />
+    <img src="https://github-stats-extended.vercel.app/api?username=anuraghazra&theme=light_github" />
+  </picture>
+</a>
 </div>
 
-This project is an [extended version](docs/fork.md) of [github-readme-stats](https://github.com/anuraghazra/github-readme-stats). It generates [various stats cards](#card-types), e.g. about your GitHub contributions, your top languages, etc. You can [customize](#advanced-customization) the cards via multiple parameters.
+GitHub-Stats-Extended is the [extended, actively maintained successor](https://github-stats-extended.vercel.app/frontend/docs/fork/) of [github-readme-stats](https://github.com/anuraghazra/github-readme-stats). It generates [various stats cards](#card-types) about your GitHub contributions, your top languages and more. You can [customize](#documentation) the cards via multiple parameters.
+
+## Table of Contents
 
-# Table of Contents
 - [Quick Start](#quick-start)
+- [Migration from github-readme-stats](#migration-from-github-readme-stats)
 - [Card Types](#card-types)
-- [Advanced Customization](#advanced-customization)
-- [Self-Hosting](#self-hosting)
+- [Documentation](#documentation)
 - [Acknowledgements](#acknowledgements)
 - [Contributing](#contributing)
 
-# Quick Start
-- Copy and paste this into your markdown:
-  ```markdown
-  [![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra)](https://github.com/stats-organization/github-stats-extended)
-  ```
-- Change the `?username=` value to your GitHub username.
-- Done!
+## Quick Start
 
------------------------
+Copy and paste this into your markdown, then change the `?username=` value to your GitHub username:
 
-As more comfortable alternative, use the [GitHub-Stats-Extended Wizard](https://github-stats-extended.vercel.app/frontend) to create your custom stats card. Copy the generated markdown code and paste it into your [GitHub profile README](https://docs.github.com/en/account-and-profile/how-tos/profile-customization/managing-your-profile-readme#adding-a-profile-readme). Done!
+```md
+[![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra)](https://github.com/stats-organization/github-stats-extended)
+```
+
+As a more comfortable alternative, use the [card wizard](https://github-stats-extended.vercel.app/frontend) to configure your card visually. Then copy the generated markdown into your [GitHub profile README](https://docs.github.com/en/account-and-profile/how-tos/profile-customization/managing-your-profile-readme#adding-a-profile-readme).
+
+## Migration from github-readme-stats
+
+To migrate from [github-readme-stats](https://github.com/anuraghazra/github-readme-stats) you only need to change the domain from `github-readme-stats.vercel.app` to `github-stats-extended.vercel.app`:
+
+```diff
+- https://github-readme-stats.vercel.app/api?username=octocat&theme=radical
++ https://github-stats-extended.vercel.app/api?username=octocat&theme=radical
+```
+
+GitHub-Stats-Extended aims to be fully compatible with github-readme-stats. For details see [Compatibility Notes](https://github-stats-extended.vercel.app/frontend/docs/fork/#compatibility-notes).
+
+## Card Types
 
-# Card Types
 - Show your GitHub statistics:
 
-  ![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra)
+  <picture>
+    <source
+      srcset="https://github-stats-extended.vercel.app/api?username=anuraghazra&theme=dark_github"
+      media="(prefers-color-scheme: dark)"
+    />
+    <img src="https://github-stats-extended.vercel.app/api?username=anuraghazra&theme=light_github" alt="Anurag's GitHub stats" />
+  </picture>
 
 - ...your top languages...:
 
-  ![Top Langs](https://github-stats-extended.vercel.app/api/top-langs/?username=anuraghazra&langs_count=4)
+  <picture>
+    <source
+      srcset="https://github-stats-extended.vercel.app/api/top-langs/?username=anuraghazra&langs_count=4&theme=dark_github"
+      media="(prefers-color-scheme: dark)"
+    />
+    <img src="https://github-stats-extended.vercel.app/api/top-langs/?username=anuraghazra&langs_count=4&theme=light_github" alt="Top Langs" />
+  </picture>
 
 - ...and development time:
 
-  [![Alan's WakaTime stats](https://github-stats-extended.vercel.app/api/wakatime?username=alan&langs_count=6)](https://wakatime.com/@alan)
+  <a href="https://wakatime.com/@alan">
+    <picture>
+      <source
+        srcset="https://github-stats-extended.vercel.app/api/wakatime?username=alan&langs_count=6&theme=dark_github"
+        media="(prefers-color-scheme: dark)"
+      />
+      <img src="https://github-stats-extended.vercel.app/api/wakatime?username=alan&langs_count=6&theme=light_github" alt="Alan's WakaTime stats" />
+    </picture>
+  </a>
 
 - Pin more than 6 repos in your GitHub profile:
 
-  [![Readme Card](https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
+  <a href="https://github.com/anuraghazra/github-readme-stats">
+    <picture>
+      <source
+        srcset="https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&theme=dark_github_repocard"
+        media="(prefers-color-scheme: dark)"
+      />
+      <img src="https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&theme=light_github_repocard" alt="Readme Card" />
+    </picture>
+  </a>
 
 - Pin Gists in your GitHub profile:
 
-  [![Gist Card](https://github-stats-extended.vercel.app/api/gist?id=bbfce31e0217a3689c8d961a356cb10d)](https://gist.github.com/Yizack/bbfce31e0217a3689c8d961a356cb10d)
+  <a href="https://gist.github.com/Yizack/bbfce31e0217a3689c8d961a356cb10d">
+    <picture>
+      <source
+        srcset="https://github-stats-extended.vercel.app/api/gist?id=bbfce31e0217a3689c8d961a356cb10d&theme=dark_github_repocard"
+        media="(prefers-color-scheme: dark)"
+      />
+      <img src="https://github-stats-extended.vercel.app/api/gist?id=bbfce31e0217a3689c8d961a356cb10d&theme=light_github_repocard" alt="Gist Card" />
+    </picture>
+  </a>
 
 - Customize all the cards:
 
   [![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api/?username=anuraghazra&show_icons=true&theme=calm&rank_icon=github&include_all_commits=true&custom_title=Anurag's+Stats&disable_animations=true&number_format=long&show=prs_merged_percentage,prs_reviewed)](https://github-stats-extended.vercel.app/api/?username=anuraghazra&show_icons=true&theme=calm&rank_icon=github&include_all_commits=true&custom_title=Anurag's+Stats&disable_animations=true&number_format=long&show=prs_merged_percentage,prs_reviewed)
 
-# Advanced Customization
-The [GitHub-Stats-Extended Wizard](https://github-stats-extended.vercel.app/frontend) offers some essential customization options. For more advanced customization check out the [advanced documentation](docs/advanced_documentation.md).
+## Documentation
 
-# Acknowledgements
-This project is based on [github-readme-stats](https://github.com/anuraghazra/github-readme-stats). On top of their functionality I added several new features and improvements. See [Fork Information](docs/fork.md) for a list of changes. The frontend I added to the project is based on [GitHub Trends](https://github.com/avgupta456/github-trends). Big thanks to [@anuraghazra](https://github.com/anuraghazra), [@avgupta456](https://github.com/avgupta456), [@rickstaa](https://github.com/rickstaa), [@qwerty541](https://github.com/qwerty541) and everyone else who worked on these projects! ❤️
+The [card wizard](https://github-stats-extended.vercel.app/frontend) offers some essential customization options. For more advanced customization and other project info check out the [documentation](https://github-stats-extended.vercel.app/frontend/docs/cards/stats/).
 
-# Self-Hosting
-Since the GitHub API only allows a limited number of requests per hour, the public instance of GitHub-Stats-Extended at https://github-stats-extended.vercel.app/api could possibly hit the rate limiter. If you host your own instance you do not have to worry about anything. Also, if you don't want to give my GitHub-Stats-Extended instance access to your private contributions but still want to include these contributions in your stats, you can simply host your own instance.
+## Acknowledgements
 
-See [Deploy on your own](docs/deploy.md) for various deployment options.
+This project is based on [github-readme-stats](https://github.com/anuraghazra/github-readme-stats). The card wizard is based on [GitHub Trends](https://github.com/avgupta456/github-trends). Big thanks to [@anuraghazra](https://github.com/anuraghazra), [@avgupta456](https://github.com/avgupta456), [@rickstaa](https://github.com/rickstaa), [@qwerty541](https://github.com/qwerty541) and everyone else who worked on these projects! ❤️
 
-# Contributing
-Contributions are welcome!
+## Contributing
+
+Contributions are welcome!

apps/backend/.env

@@ -0,0 +1 @@
+PAT_1=<YOUR_PERSONAL_ACCESS_TOKEN>

apps/backend/.vercelignore

@@ -5,7 +5,5 @@ coverage
 scripts
 tests
 .env
-**/*.md
 **/*.svg
-.eslintrc.json
 codecov.yml

apps/backend/_dot_vercel_copy/output/config.json

@@ -1,3 +0,0 @@
-{
-  "version": 3
-}

apps/backend/_dot_vercel_copy/output/functions/api.func/.vc-config.json

@@ -1,5 +0,0 @@
-{
-  "runtime": "nodejs24.x",
-  "handler": "router.js",
-  "launcherType": "Nodejs"
-}

apps/backend/_dot_vercel_copy/output/functions/api.prerender-config.json

@@ -1,5 +0,0 @@
-{
-  "expiration": 39600,
-  "bypassToken": "r3fr3shT0k3n-r3fr3shT0k3n-r3fr3shT0k3n",
-  "passQuery": true
-}

apps/backend/_dot_vercel_copy/output/functions/api/authenticate.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/delete-user.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/downgrade.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/gist.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/gist.prerender-config.json

@@ -1,5 +0,0 @@
-{
-  "expiration": 39600,
-  "bypassToken": "r3fr3shT0k3n-r3fr3shT0k3n-r3fr3shT0k3n",
-  "passQuery": true
-}

apps/backend/_dot_vercel_copy/output/functions/api/pin.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/pin.prerender-config.json

@@ -1,5 +0,0 @@
-{
-  "expiration": 39600,
-  "bypassToken": "r3fr3shT0k3n-r3fr3shT0k3n-r3fr3shT0k3n",
-  "passQuery": true
-}

apps/backend/_dot_vercel_copy/output/functions/api/repeat-recent.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/status/pat-info.func

@@ -1 +0,0 @@
-../../api.func

apps/backend/_dot_vercel_copy/output/functions/api/status/up.func

@@ -1 +0,0 @@
-../../api.func

apps/backend/_dot_vercel_copy/output/functions/api/top-langs.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/top-langs.prerender-config.json

@@ -1,5 +0,0 @@
-{
-  "expiration": 39600,
-  "bypassToken": "r3fr3shT0k3n-r3fr3shT0k3n-r3fr3shT0k3n",
-  "passQuery": true
-}

apps/backend/_dot_vercel_copy/output/functions/api/user-access.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/wakatime-proxy.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/wakatime.func

@@ -1 +0,0 @@
-../api.func

apps/backend/_dot_vercel_copy/output/functions/api/wakatime.prerender-config.json

@@ -1,5 +0,0 @@
-{
-  "expiration": 39600,
-  "bypassToken": "r3fr3shT0k3n-r3fr3shT0k3n-r3fr3shT0k3n",
-  "passQuery": true
-}

apps/backend/api/authenticate.js

@@ -1,6 +1,6 @@
 import { logger } from "@stats-organization/github-readme-stats-core";
 
-import { authenticate } from "../src/users.js";
+import { authenticate } from "../src/users.ts";
 
 /**
  * @param {any} req The request.

apps/backend/app.js

@@ -0,0 +1,27 @@
+import path from "path";
+
+import express from "express";
+
+import router from "./router.js";
+
+export const app = express();
+
+app.get("/", (req, res) => {
+  res.redirect("/frontend/docs/");
+});
+
+app.use(
+  "/frontend",
+  express.static(path.join(import.meta.dirname, "../frontend/build"), {
+    maxAge: "3600000",
+  }),
+);
+
+app.use((req, res) => {
+  // drop trailing slash
+  const [pathname, query] = req.url.split("?", 2);
+  if (pathname !== "/" && pathname?.endsWith("/")) {
+    req.url = pathname.slice(0, -1) + (query === undefined ? "" : `?${query}`);
+  }
+  return router(req, res);
+});

apps/backend/express.js

@@ -1,10 +1,4 @@
-import express from "express";
-
-import router from "./router.js";
-
-const app = express();
-
-app.use(router);
+import { app } from "./app.js";
 
 const port = process.env.PORT || process.env.port || 9000;
 app.listen(port, "0.0.0.0", () => {

apps/backend/package.json

@@ -8,6 +8,7 @@
   "private": true,
   "main": "index.js",
   "scripts": {
+    "dev": "node --env-file-if-exists=.env express.js",
     "test": "vitest",
     "test:update:snapshot": "vitest -u",
     "test:e2e": "vitest --config vitest.config.e2e.ts",
@@ -17,13 +18,14 @@
   },
   "devDependencies": {
     "axios-mock-adapter": "2.1.0",
-    "express": "5.2.1",
-    "jsdom": "29.0.2",
+    "jsdom": "catalog:default",
+    "supertest": "^7.3.1",
     "vitest": "catalog:default"
   },
   "dependencies": {
-    "axios": "^1.15.2",
     "@stats-organization/github-readme-stats-core": "workspace:^",
-    "pg": "^8.20.0"
+    "axios": "catalog:default",
+    "express": "5.2.1",
+    "pg": "^8.23.0"
   }
 }

apps/backend/router.js

@@ -6,14 +6,14 @@ import {
   wakatime,
 } from "@stats-organization/github-readme-stats-core";
 
-import { default as authenticate } from "./api-renamed/authenticate.js";
-import { default as deleteUser } from "./api-renamed/delete-user.js";
-import { default as downgrade } from "./api-renamed/downgrade.js";
-import { default as repeatRecent } from "./api-renamed/repeat-recent.js";
-import { default as patInfo } from "./api-renamed/status/pat-info.js";
-import { default as statusUp } from "./api-renamed/status/up.js";
-import { default as userAccess } from "./api-renamed/user-access.js";
-import { default as wakatimeProxy } from "./api-renamed/wakatime-proxy.js";
+import { default as authenticate } from "./api/authenticate.js";
+import { default as deleteUser } from "./api/delete-user.js";
+import { default as downgrade } from "./api/downgrade.js";
+import { default as repeatRecent } from "./api/repeat-recent.js";
+import { default as patInfo } from "./api/status/pat-info.js";
+import { default as statusUp } from "./api/status/up.js";
+import { default as userAccess } from "./api/user-access.js";
+import { default as wakatimeProxy } from "./api/wakatime-proxy.js";
 import { guardAccess } from "./src/common/access.js";
 import {
   CACHE_TTL,
@@ -61,20 +61,6 @@ const getUserPat = async (username) => {
 
 export default async (req, res) => {
   const url = new URL(req.url, "https://localhost");
-  if (res.send === undefined) {
-    // remaining code expects express.js-like request and response objects
-    res.send = function (data) {
-      if (typeof data === "object") {
-        res.setHeader("Content-Type", "application/json");
-        res.end(JSON.stringify(data));
-      } else if (typeof data === "string") {
-        res.end(data);
-      } else {
-        res.end(String(data));
-      }
-    };
-    req.query = Object.fromEntries(url.searchParams.entries());
-  }
 
   let result;
 

apps/backend/src/repeatRequests.js

@@ -66,6 +66,6 @@ export async function repeatRecentRequests() {
   if (urls.length === 0) {
     console.log("No recent requests found.");
   } else {
-    await makeRequests(urls, 5);
+    await makeRequests(urls, 4);
   }
 }

apps/backend/src/users.ts

@@ -2,36 +2,52 @@ import axios from "axios";
 
 import { storeUser } from "./common/database.js";
 
+interface GitHubUserResponse {
+  login?: string;
+}
+
+interface GitHubAccessTokenResponse {
+  access_token?: string;
+  scope?: string;
+}
+
 /**
  * Given an access token, return the GitHub login (userId) or null if invalid
  *
- * @param {string} accessToken GitHub access token
- * @returns {Promise<string|null>} login name or null if invalid access_token
+ * @param accessToken GitHub access token
+ * @returns login name or null if invalid access_token
  */
-async function getUserFromToken(accessToken) {
-  const res = await axios.get("https://api.github.com/user", {
-    headers: {
-      Accept: "application/vnd.github.v3+json",
-      Authorization: `bearer ${accessToken}`,
+async function getUserFromToken(accessToken: string): Promise<string | null> {
+  const res = await axios.get<GitHubUserResponse>(
+    "https://api.github.com/user",
+    {
+      headers: {
+        Accept: "application/vnd.github.v3+json",
+        Authorization: `bearer ${accessToken}`,
+      },
     },
-  });
+  );
 
-  return res.data && res.data.login ? res.data.login : null;
+  return res.data.login || null;
 }
 
 /**
  * Exchanges OAuth code for access token and returns userId + accessToken
  *
- * @param {string} code GitHub authentication code from OAuth process
+ * @param code GitHub authentication code from OAuth process
  * @param privateAccess whether private access was requested
- * @returns {Promise<{userId: string, accessToken: string, needDowngrade: boolean}>} user_id and access_token of authenticated user, and whether downgrade is needed
+ * @returns user_id and access_token of authenticated user, and whether downgrade is needed
  */
-async function githubAuthenticate(code, privateAccess) {
-  if (
-    !process.env.OAUTH_CLIENT_ID ||
-    !process.env.OAUTH_CLIENT_SECRET ||
-    !process.env.OAUTH_REDIRECT_URI
-  ) {
+async function githubAuthenticate(
+  code: string,
+  privateAccess: boolean,
+): Promise<{ userId: string; accessToken: string; needDowngrade: boolean }> {
+  const {
+    OAUTH_CLIENT_ID: clientId,
+    OAUTH_CLIENT_SECRET: clientSecret,
+    OAUTH_REDIRECT_URI: redirectUri,
+  } = process.env;
+  if (!clientId || !clientSecret || !redirectUri) {
     throw new Error(
       "OAuth Error: One or more required environment variables (OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_REDIRECT_URI) are not set.",
     );
@@ -39,14 +55,14 @@ async function githubAuthenticate(code, privateAccess) {
 
   const start = Date.now();
   const params = new URLSearchParams({
-    client_id: process.env.OAUTH_CLIENT_ID,
-    client_secret: process.env.OAUTH_CLIENT_SECRET,
+    client_id: clientId,
+    client_secret: clientSecret,
     code,
-    redirect_uri: process.env.OAUTH_REDIRECT_URI,
+    redirect_uri: redirectUri,
   });
 
   try {
-    const res = await axios.post(
+    const res = await axios.post<GitHubAccessTokenResponse>(
       "https://github.com/login/oauth/access_token",
       params.toString(),
       {
@@ -58,7 +74,7 @@ async function githubAuthenticate(code, privateAccess) {
     );
 
     const body = res.data;
-    const accessToken = body && body.access_token ? body.access_token : null;
+    const accessToken = body.access_token || null;
 
     if (!accessToken) {
       throw new Error(
@@ -74,12 +90,12 @@ async function githubAuthenticate(code, privateAccess) {
     }
 
     // if user previously granted private access, then logged in via public flow
-    const needDowngrade = body.scope && !privateAccess;
+    const needDowngrade = !!body.scope && !privateAccess;
 
     console.log("GitHub Authentication", `${Date.now() - start} ms`);
     return { userId, accessToken, needDowngrade };
   } catch (err) {
-    if (err.response) {
+    if (axios.isAxiosError(err) && err.response) {
       // eslint-disable-next-line preserve-caught-error
       throw new Error(`OAuth Error: ${err.response.status}`);
     }
@@ -90,12 +106,16 @@ async function githubAuthenticate(code, privateAccess) {
 /**
  * Authenticate using the OAuth code and update DB with associated user info.
  *
- * @param {string} code GitHub authentication code from OAuth process
- * @param {boolean} privateAccess whether private access was requested
- * @param {string} userKey user key to associate with the user
- * @returns {Promise<{userId: string, needDowngrade: boolean}>} user_id of authenticated user and whether downgrade is needed
+ * @param code GitHub authentication code from OAuth process
+ * @param privateAccess whether private access was requested
+ * @param userKey user key to associate with the user
+ * @returns user_id of authenticated user and whether downgrade is needed
  */
-export async function authenticate(code, privateAccess, userKey) {
+export async function authenticate(
+  code: string,
+  privateAccess: boolean,
+  userKey: string,
+): Promise<{ userId: string; needDowngrade: boolean }> {
   const { userId, accessToken, needDowngrade } = await githubAuthenticate(
     code,
     privateAccess,

apps/backend/tests/api.test.js

@@ -1,9 +1,10 @@
 // @ts-check
 
 import { api, getConfig } from "@stats-organization/github-readme-stats-core";
+import supertest from "supertest";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import router from "../router.js";
+import { app } from "../app.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 import { getUserAccessByName, storeRequest } from "../src/common/database.js";
 
@@ -23,16 +24,6 @@ const getConfigMock = vi.mocked(getConfig);
 const storeRequestMock = vi.mocked(storeRequest);
 const getUserAccessByNameMock = vi.mocked(getUserAccessByName);
 
-const createRequest = (search = "") => ({
-  headers: {},
-  url: `/api?${search}`,
-});
-
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 const defaultCacheHeader =
   `max-age=${CACHE_TTL.STATS_CARD.DEFAULT}, ` +
   `s-maxage=${CACHE_TTL.STATS_CARD.DEFAULT}, ` +
@@ -60,12 +51,11 @@ describe("Test /api backend routing", () => {
       content: "mock-stats-svg",
     });
 
-    const req = createRequest(
-      "username=anuraghazra&theme=dark&hide=issues,prs,contribs",
-    );
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api?username=anuraghazra&theme=dark&hide=issues,prs,contribs")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(getUserAccessByNameMock).toHaveBeenCalledWith("anuraghazra");
     expect(apiMock).toHaveBeenCalledWith(
@@ -76,17 +66,8 @@ describe("Test /api backend routing", () => {
       },
       "user-pat",
     );
-    expect(req.query).toEqual({
-      username: "anuraghazra",
-      theme: "dark",
-      hide: "issues,prs,contribs",
-    });
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-stats-svg");
-    expect(storeRequestMock).toHaveBeenCalledExactlyOnceWith(req);
+    expect(res.body.toString()).toBe("mock-stats-svg");
+    expect(storeRequestMock).toHaveBeenCalledOnce();
   });
 
   it("should use the shorter error cache for temporary stats errors", async () => {
@@ -95,10 +76,11 @@ describe("Test /api backend routing", () => {
       content: "temporary-error-svg",
     });
 
-    const req = createRequest("username=anuraghazra");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api?username=anuraghazra")
+      .expect("Cache-Control", errorCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(getUserAccessByNameMock).toHaveBeenCalledWith("anuraghazra");
     expect(apiMock).toHaveBeenCalledWith(
@@ -107,12 +89,8 @@ describe("Test /api backend routing", () => {
       },
       null,
     );
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", errorCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("temporary-error-svg");
-    expect(storeRequestMock).toHaveBeenCalledExactlyOnceWith(req);
+    expect(res.body.toString()).toBe("temporary-error-svg");
+    expect(storeRequestMock).toHaveBeenCalledOnce();
   });
 
   it("should not persist permanent stats errors returned by core", async () => {
@@ -121,10 +99,11 @@ describe("Test /api backend routing", () => {
       content: "permanent-error-svg",
     });
 
-    const req = createRequest("username=anuraghazra");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api?username=anuraghazra")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(getUserAccessByNameMock).toHaveBeenCalledWith("anuraghazra");
     expect(apiMock).toHaveBeenCalledWith(
@@ -133,27 +112,20 @@ describe("Test /api backend routing", () => {
       },
       null,
     );
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("permanent-error-svg");
+    expect(res.body.toString()).toBe("permanent-error-svg");
     expect(storeRequestMock).not.toHaveBeenCalled();
   });
 
   it("should reject blacklisted usernames before calling core logic", async () => {
-    const req = createRequest("username=renovate-bot");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api?username=renovate-bot")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(apiMock).not.toHaveBeenCalled();
     expect(getUserAccessByNameMock).not.toHaveBeenCalled();
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith(
+    expect(res.body.toString()).toBe(
       "render-error:This username is blacklisted",
     );
     expect(storeRequestMock).not.toHaveBeenCalled();
@@ -162,18 +134,15 @@ describe("Test /api backend routing", () => {
   it("should reject non-whitelisted usernames before calling core logic", async () => {
     getConfigMock.mockReturnValue({ whitelist: ["allowed-user"] });
 
-    const req = createRequest("username=blocked-user");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api?username=blocked-user")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(apiMock).not.toHaveBeenCalled();
     expect(getUserAccessByNameMock).not.toHaveBeenCalled();
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith(
+    expect(res.body.toString()).toBe(
       "render-error:This username is not whitelisted",
     );
     expect(storeRequestMock).not.toHaveBeenCalled();

apps/backend/tests/bench/api.bench.js

@@ -2,15 +2,10 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { beforeAll, bench, describe, vi } from "vitest";
 
-import { data_stats } from "../utils.js";
+import { createRequestResponse, data_stats } from "../utils.js";
 
 const mock = new MockAdapter(axios);
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 let router;
 
 beforeAll(async () => {
@@ -28,12 +23,7 @@ describe("bench /api", () => {
   bench(
     "base",
     async () => {
-      const req = {
-        headers: {},
-        url: "/api?username=anuraghazra",
-      };
-      const res = createResponse();
-
+      const { req, res } = createRequestResponse("/api?username=anuraghazra");
       await router(req, res);
     },
     { warmupIterations: 50 },

apps/backend/tests/bench/gist.bench.js

@@ -2,15 +2,10 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { beforeAll, bench, describe, vi } from "vitest";
 
-import { happy_path_gist_data } from "../utils.js";
+import { createRequestResponse, happy_path_gist_data } from "../utils.js";
 
 const mock = new MockAdapter(axios);
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 let router;
 
 beforeAll(async () => {
@@ -30,12 +25,7 @@ describe("bench /api/gist", () => {
   bench(
     "base",
     async () => {
-      const req = {
-        headers: {},
-        url: "/api/gist?id=happy-gist-id",
-      };
-      const res = createResponse();
-
+      const { req, res } = createRequestResponse("/api/gist?id=happy-gist-id");
       await router(req, res);
     },
     { warmupIterations: 50 },

apps/backend/tests/bench/pin.bench.js

@@ -2,15 +2,10 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { beforeAll, bench, describe, vi } from "vitest";
 
-import { data_user } from "../utils.js";
+import { createRequestResponse, data_user } from "../utils.js";
 
 const mock = new MockAdapter(axios);
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 let router;
 
 beforeAll(async () => {
@@ -28,12 +23,9 @@ describe("bench /api/pin", () => {
   bench(
     "base",
     async () => {
-      const req = {
-        headers: {},
-        url: "/api/pin?username=anuraghazra&repo=convoychat",
-      };
-      const res = createResponse();
-
+      const { req, res } = createRequestResponse(
+        "/api/pin?username=anuraghazra&repo=convoychat",
+      );
       await router(req, res);
     },
     { warmupIterations: 50 },

apps/backend/tests/e2e/e2e.test.js

@@ -6,6 +6,8 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
 
+import { createRequestResponse } from "../utils.js";
+
 const REPO = "curly-fiesta";
 const USER = "catelinemnemosyne";
 const STATS_CARD_USER = "e2eninja";
@@ -29,7 +31,7 @@ const STATS_MOCK_RESPONSE = {
       followers: { totalCount: 0 },
       repositories: {
         totalCount: 1,
-        nodes: [{ name: REPO, stargazers: { totalCount: 1 } }],
+        nodes: [{ name: REPO, stargazerCount: 1 }],
         pageInfo: {
           hasNextPage: false,
           endCursor: "cursor",
@@ -110,9 +112,7 @@ const REPO_MOCK_RESPONSE = {
         isPrivate: false,
         isArchived: false,
         isTemplate: false,
-        stargazers: {
-          totalCount: 1,
-        },
+        stargazerCount: 1,
         description: "Simple cra test repo.",
         primaryLanguage: {
           color: "#f1e05a",
@@ -157,11 +157,6 @@ const CACHE_BURST_STRING = `v=${new Date().getTime()}`;
 
 const mock = new MockAdapter(axios, { onNoMatch: "passthrough" });
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 let router;
 
 /**
@@ -170,11 +165,7 @@ let router;
  * @returns {Promise<string>} Rendered SVG markup.
  */
 async function getLocalSvg(url) {
-  const req = {
-    headers: {},
-    url,
-  };
-  const res = createResponse();
+  const { req, res } = createRequestResponse(url);
 
   await router(req, res);
 
@@ -203,7 +194,7 @@ beforeAll(async () => {
       return [200, STATS_MOCK_RESPONSE];
     }
 
-    if (query.includes("query userInfo") && variables?.login === USER) {
+    if (query.includes("query topLanguages") && variables?.login === USER) {
       return [200, TOP_LANGS_MOCK_RESPONSE];
     }
 

apps/backend/tests/gist.test.js

@@ -1,9 +1,10 @@
 // @ts-check
 
 import { getConfig, gist } from "@stats-organization/github-readme-stats-core";
+import supertest from "supertest";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import router from "../router.js";
+import { app } from "../app.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 import { getUserAccessByName, storeRequest } from "../src/common/database.js";
 
@@ -23,16 +24,6 @@ const getConfigMock = vi.mocked(getConfig);
 const storeRequestMock = vi.mocked(storeRequest);
 const getUserAccessByNameMock = vi.mocked(getUserAccessByName);
 
-const createRequest = (search) => ({
-  headers: {},
-  url: `/api/gist?${search}`,
-});
-
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 const defaultCacheHeader =
   `max-age=${CACHE_TTL.GIST_CARD.DEFAULT}, ` +
   `s-maxage=${CACHE_TTL.GIST_CARD.DEFAULT}, ` +
@@ -59,26 +50,19 @@ describe("Test /api/gist backend routing", () => {
       content: "mock-gist-svg",
     });
 
-    const req = createRequest("id=bbfce31e0217a3689c8d961a356cb10d&theme=dark");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api/gist?id=bbfce31e0217a3689c8d961a356cb10d&theme=dark")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(gistMock).toHaveBeenCalledWith({
       id: "bbfce31e0217a3689c8d961a356cb10d",
       theme: "dark",
     });
     expect(getUserAccessByNameMock).not.toHaveBeenCalled();
-    expect(req.query).toEqual({
-      id: "bbfce31e0217a3689c8d961a356cb10d",
-      theme: "dark",
-    });
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-gist-svg");
-    expect(storeRequestMock).toHaveBeenCalledExactlyOnceWith(req);
+    expect(res.body.toString()).toBe("mock-gist-svg");
+    expect(storeRequestMock).toHaveBeenCalledOnce();
   });
 
   it("should use the shorter error cache for temporary gist errors", async () => {
@@ -87,21 +71,18 @@ describe("Test /api/gist backend routing", () => {
       content: "temporary-error-svg",
     });
 
-    const req = createRequest("id=bbfce31e0217a3689c8d961a356cb10d");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api/gist?id=bbfce31e0217a3689c8d961a356cb10d")
+      .expect("Cache-Control", errorCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(gistMock).toHaveBeenCalledWith({
       id: "bbfce31e0217a3689c8d961a356cb10d",
     });
     expect(getUserAccessByNameMock).not.toHaveBeenCalled();
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", errorCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("temporary-error-svg");
-    expect(storeRequestMock).toHaveBeenCalledExactlyOnceWith(req);
+    expect(res.body.toString()).toBe("temporary-error-svg");
+    expect(storeRequestMock).toHaveBeenCalledOnce();
   });
 
   it("should not persist permanent gist errors returned by core", async () => {
@@ -110,38 +91,32 @@ describe("Test /api/gist backend routing", () => {
       content: "permanent-error-svg",
     });
 
-    const req = createRequest("id=bbfce31e0217a3689c8d961a356cb10d");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api/gist?id=bbfce31e0217a3689c8d961a356cb10d")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(gistMock).toHaveBeenCalledWith({
       id: "bbfce31e0217a3689c8d961a356cb10d",
     });
     expect(getUserAccessByNameMock).not.toHaveBeenCalled();
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("permanent-error-svg");
+    expect(res.body.toString()).toBe("permanent-error-svg");
     expect(storeRequestMock).not.toHaveBeenCalled();
   });
 
   it("should reject non-whitelisted gist ids before calling core logic", async () => {
     getConfigMock.mockReturnValue({ gistWhitelist: ["allowed-gist-id"] });
 
-    const req = createRequest("id=blocked-gist-id");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api/gist?id=blocked-gist-id")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(gistMock).not.toHaveBeenCalled();
     expect(getUserAccessByNameMock).not.toHaveBeenCalled();
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith(
+    expect(res.body.toString()).toBe(
       "render-error:This gist ID is not whitelisted",
     );
     expect(storeRequestMock).not.toHaveBeenCalled();

apps/backend/tests/pat-info.test.js

@@ -54,7 +54,7 @@ const other_error = {
   errors: [
     {
       type: "SOME_ERROR",
-      message: "This is a error",
+      message: "This is an error",
     },
   ],
 };
@@ -77,7 +77,7 @@ beforeAll(async () => {
   vi.spyOn(logger, "error").mockImplementation(() => {});
 
   ({ RATE_LIMIT_SECONDS, default: patInfo } =
-    await import("../api-renamed/status/pat-info.js"));
+    await import("../api/status/pat-info.js"));
 });
 
 afterEach(() => {
@@ -167,7 +167,7 @@ describe("Test /api/status/pat-info", () => {
               status: "error",
               error: {
                 type: "SOME_ERROR",
-                message: "This is a error",
+                message: "This is an error",
               },
             },
             PAT_2: {

apps/backend/tests/pin.test.js

@@ -1,9 +1,10 @@
 // @ts-check
 
 import { pin } from "@stats-organization/github-readme-stats-core";
+import supertest from "supertest";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import router from "../router.js";
+import { app } from "../app.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 import { getUserAccessByName, storeRequest } from "../src/common/database.js";
 
@@ -22,16 +23,6 @@ const pinMock = vi.mocked(pin);
 const storeRequestMock = vi.mocked(storeRequest);
 const getUserAccessByNameMock = vi.mocked(getUserAccessByName);
 
-const createRequest = (search = "") => ({
-  headers: {},
-  url: `/api/pin?${search}`,
-});
-
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 const defaultCacheHeader =
   `max-age=${CACHE_TTL.PIN_CARD.DEFAULT}, ` +
   `s-maxage=${CACHE_TTL.PIN_CARD.DEFAULT}, ` +
@@ -53,12 +44,11 @@ describe("Test /api/pin backend routing", () => {
       content: "mock-pin-svg",
     });
 
-    const req = createRequest(
-      "username=anuraghazra&repo=convoychat&theme=dark",
-    );
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api/pin?username=anuraghazra&repo=convoychat&theme=dark")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(getUserAccessByNameMock).toHaveBeenCalledWith("anuraghazra");
     expect(pinMock).toHaveBeenCalledWith(
@@ -69,16 +59,7 @@ describe("Test /api/pin backend routing", () => {
       },
       "user-pat",
     );
-    expect(req.query).toEqual({
-      username: "anuraghazra",
-      repo: "convoychat",
-      theme: "dark",
-    });
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-pin-svg");
-    expect(storeRequestMock).toHaveBeenCalledExactlyOnceWith(req);
+    expect(res.body.toString()).toBe("mock-pin-svg");
+    expect(storeRequestMock).toHaveBeenCalledOnce();
   });
 });

apps/backend/tests/public-instance/__snapshots__/api.test.js.snap

@@ -1,5 +1,249 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Test /api contract > should match the gradient-background response snapshot 1`] = `
+{
+  "content": "<svg width="450" height="195" viewBox="0 0 450 195" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId">Anurag Hazra's GitHub Stats, Rank: A+</title>
+        <desc id="descId">Total Stars Earned: 14099, Total Commits  (last year) : 200, Total PRs: 4000, Total Issues: 340, Contributed to (last year): 51</desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #ffffff;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #ffffff;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-text {
+      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #ffffff;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-percentile-header {
+      font-size: 14px;
+    }
+    .rank-percentile-text {
+      font-size: 16px;
+    }
+    
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+    .icon {
+      fill: #ffffff;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #ffffff;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #ffffff;
+      stroke-dasharray: 250;
+      fill: none;
+      stroke-width: 6;
+      stroke-linecap: round;
+      opacity: 0.8;
+      transform-origin: -10px 8px;
+      transform: rotate(-90deg);
+      animation: rankAnimation 1s forwards ease-in-out;
+    }
+    
+    @keyframes rankAnimation {
+      from {
+        stroke-dashoffset: 251.32741228718345;
+      }
+      to {
+        stroke-dashoffset: 25.665014275610705;
+      }
+    }
+  
+  
+          
+          @media (prefers-color-scheme: dark) {
+            .header { fill: #2f80ed; }
+            .card-bg { fill: url(#gradient-dark); stroke: #e4e2e2; }
+            
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-text {
+      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-percentile-header {
+      font-size: 14px;
+    }
+    .rank-percentile-text {
+      font-size: 16px;
+    }
+    
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      stroke-dasharray: 250;
+      fill: none;
+      stroke-width: 6;
+      stroke-linecap: round;
+      opacity: 0.8;
+      transform-origin: -10px 8px;
+      transform: rotate(-90deg);
+      animation: rankAnimation 1s forwards ease-in-out;
+    }
+    
+    @keyframes rankAnimation {
+      from {
+        stroke-dashoffset: 251.32741228718345;
+      }
+      to {
+        stroke-dashoffset: 25.665014275610705;
+      }
+    }
+  
+  
+          }
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+        <defs>
+          
+          <linearGradient id="gradient" gradientTransform="rotate(35)" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stop-color="#4158d0"/>,<stop offset="50%" stop-color="#c850c0"/>,<stop offset="100%" stop-color="#ffcc70"/>
+          </linearGradient>
+          
+          <linearGradient id="gradient-dark" gradientTransform="rotate(45)" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stop-color="#60A5FA"/>,<stop offset="100%" stop-color="#4ADE80"/>
+          </linearGradient>
+        </defs>
+        
+
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="449" fill="url(#gradient)" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">Anurag Hazra's GitHub Stats</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <g data-testid="rank-circle" transform="translate(365, 47.5)">
+        <circle class="rank-circle-rim" cx="-10" cy="8" r="40"/>
+        <circle class="rank-circle" cx="-10" cy="8" r="40"/>
+        <g class="rank-text">
+          
+        <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="level-rank-icon">
+          A+
+        </text>
+      
+        </g>
+      </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Total Stars Earned:</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="stars">14.1k</text>
+    </g>
+  </g><g transform="translate(0, 25)">
+    <g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Total Commits (last year):</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="commits">200</text>
+    </g>
+  </g><g transform="translate(0, 50)">
+    <g class="stagger" style="animation-delay: 750ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Total PRs:</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="prs">4k</text>
+    </g>
+  </g><g transform="translate(0, 75)">
+    <g class="stagger" style="animation-delay: 900ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Total Issues:</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="issues">340</text>
+    </g>
+  </g><g transform="translate(0, 100)">
+    <g class="stagger" style="animation-delay: 1050ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Contributed to (last year):</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="contribs">51</text>
+    </g>
+  </g>
+    </svg>
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
 exports[`Test /api contract > should match the private missing-username response snapshot 1`] = `
 {
   "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
@@ -129,6 +373,7 @@ exports[`Test /api contract > should match the public happy-path response snapsh
     }
   
   
+          
 
           
       /* Animations */
@@ -153,8 +398,13 @@ exports[`Test /api contract > should match the public happy-path response snapsh
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="449" fill="#fffefe" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="449" fill="#fffefe" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -299,6 +549,7 @@ exports[`Test /api contract > should match the public many-params response snaps
     }
   
   
+          
 
           
       /* Animations */
@@ -323,8 +574,13 @@ exports[`Test /api contract > should match the public many-params response snaps
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="539" fill="#0f172a" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="539" fill="#0f172a" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -443,7 +699,7 @@ exports[`Test /api contract > should match the public many-params response snaps
   
         </g>
       </svg>",
-  "graphqlRequest": "{"query":"\\n  query userInfo($login: String!, $after: String, $includeMergedPullRequests: Boolean!, $includeDiscussions: Boolean!, $includeDiscussionsAnswers: Boolean!, $startTime: DateTime = null, $ownerAffiliations: [RepositoryAffiliation]) {\\n    user(login: $login) {\\n      name\\n      login\\n      commits: contributionsCollection (from: $startTime) {\\n        totalCommitContributions,\\n      }\\n      reviews: contributionsCollection {\\n        totalPullRequestReviewContributions\\n      }\\n      repositoriesContributedTo(first: 1, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {\\n        totalCount\\n      }\\n      pullRequests(first: 1) {\\n        totalCount\\n      }\\n      mergedPullRequests: pullRequests(states: MERGED) @include(if: $includeMergedPullRequests) {\\n        totalCount\\n      }\\n      openIssues: issues(states: OPEN) {\\n        totalCount\\n      }\\n      closedIssues: issues(states: CLOSED) {\\n        totalCount\\n      }\\n      followers {\\n        totalCount\\n      }\\n      repositoryDiscussions @include(if: $includeDiscussions) {\\n        totalCount\\n      }\\n      repositoryDiscussionComments(onlyAnswers: true) @include(if: $includeDiscussionsAnswers) {\\n        totalCount\\n      }\\n      \\n  repositories(first: 100, after: $after, ownerAffiliations: $ownerAffiliations, orderBy: {direction: DESC, field: STARGAZERS}) {\\n    totalCount\\n    nodes {\\n      name\\n      stargazers {\\n        totalCount\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n\\n    }\\n  }\\n","variables":{"login":"anuraghazra","first":100,"after":null,"includeMergedPullRequests":true,"includeDiscussions":true,"includeDiscussionsAnswers":true,"startTime":"2024-01-01T00:00:00Z","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
+  "graphqlRequest": "{"query":"\\nquery userInfo($login: String!, $after: String, $includeMergedPullRequests: Boolean!, $includeDiscussions: Boolean!, $includeDiscussionsAnswers: Boolean!, $startTime: DateTime = null, $ownerAffiliations: [RepositoryAffiliation], $includeUserRepositories: Boolean!) {\\n  user(login: $login) {\\n    name\\n    login\\n    commits: contributionsCollection(from: $startTime) {\\n      totalCommitContributions\\n    }\\n    reviews: contributionsCollection {\\n      totalPullRequestReviewContributions\\n    }\\n    repositoriesContributedTo(\\n      first: 1\\n      contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]\\n      includeUserRepositories: $includeUserRepositories\\n    ) {\\n      totalCount\\n    }\\n    pullRequests(first: 1) {\\n      totalCount\\n    }\\n    mergedPullRequests: pullRequests(states: MERGED) @include(if: $includeMergedPullRequests) {\\n      totalCount\\n    }\\n    openIssues: issues(states: OPEN) {\\n      totalCount\\n    }\\n    closedIssues: issues(states: CLOSED) {\\n      totalCount\\n    }\\n    followers {\\n      totalCount\\n    }\\n    repositoryDiscussions @include(if: $includeDiscussions) {\\n      totalCount\\n    }\\n    repositoryDiscussionComments(onlyAnswers: true) @include(if: $includeDiscussionsAnswers) {\\n      totalCount\\n    }\\n    contributionsCollection {\\n      contributionYears\\n    }\\n    ...RepoStars\\n  }\\n}\\nfragment RepoStars on User {\\n  repositories(\\n    first: 100\\n    after: $after\\n    ownerAffiliations: $ownerAffiliations\\n    orderBy: {direction: DESC, field: STARGAZERS}\\n  ) {\\n    totalCount\\n    nodes {\\n      ...RepoNode\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\\nfragment RepoNode on Repository {\\n  name\\n  stargazerCount\\n}","variables":{"login":"anuraghazra","after":null,"includeMergedPullRequests":true,"includeDiscussions":true,"includeDiscussionsAnswers":true,"startTime":"2024-01-01T00:00:00Z","ownerAffiliations":["OWNER","COLLABORATOR"],"includeUserRepositories":false}}",
   "headers": [
     [
       "Cache-Control",

apps/backend/tests/public-instance/__snapshots__/gist.test.js.snap

@@ -51,6 +51,7 @@ exports[`Test /api/gist contract > should match the public happy-path response s
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
     .icon { fill: #586069 }
   
+          
 
           
       /* Animations */
@@ -75,8 +76,13 @@ exports[`Test /api/gist contract > should match the public happy-path response s
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="399" fill="#fffefe" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="399" fill="#fffefe" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -145,12 +151,25 @@ exports[`Test /api/gist contract > should match the public many-params response
           }
           
     .description {
-      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #abcdef;
+      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #ffabcd;
       
     }
-    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #ffabcd }
     .icon { fill: #ff00aa }
   
+          
+          @media (prefers-color-scheme: dark) {
+            .header { fill: #123456; }
+            .card-bg { fill: #0f172a; stroke: #fedcba; }
+            
+      .description {
+        fill: #abcdef;
+        
+      }
+      .gray { fill: #abcdef }
+      .icon { fill: #aa00ff }
+    
+          }
 
           
       /* Animations */
@@ -171,12 +190,17 @@ exports[`Test /api/gist contract > should match the public many-params response
         }
       }
     
-          
+          * { animation-duration: 0s !important; animation-delay: 0s !important; }
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="399" fill="#0f172a" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="399" fill="#0f172a" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -215,7 +239,7 @@ exports[`Test /api/gist contract > should match the public many-params response
   
         </g>
       </svg>",
-  "graphqlRequest": "{"query":"\\nquery gistInfo($gistName: String!) {\\n    viewer {\\n        gist(name: $gistName) {\\n            description\\n            owner {\\n                login\\n            }\\n            stargazerCount\\n            forks {\\n                totalCount\\n            }\\n            files {\\n                name\\n                language {\\n                    name\\n                }\\n                size\\n            }\\n        }\\n    }\\n}\\n","variables":{"gistName":"happy-gist-id"}}",
+  "graphqlRequest": "{"query":"\\nquery gistInfo($gistName: String!) {\\n  viewer {\\n    gist(name: $gistName) {\\n      description\\n      owner {\\n        login\\n      }\\n      stargazerCount\\n      forks {\\n        totalCount\\n      }\\n      files {\\n        ...GistFileInfo\\n      }\\n    }\\n  }\\n}\\nfragment GistFileInfo on GistFile {\\n  name\\n  language {\\n    name\\n  }\\n  size\\n}","variables":{"gistName":"happy-gist-id"}}",
   "headers": [
     [
       "Cache-Control",

apps/backend/tests/public-instance/__snapshots__/pin.test.js.snap

@@ -56,6 +56,140 @@ exports[`Test /api/pin contract > should match the private non-whitelisted usern
 }
 `;
 
+exports[`Test /api/pin contract > should match the public archived-repo response snapshot 1`] = `
+{
+  "content": "<svg width="400" height="150" viewBox="0 0 400 150" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    .description {
+      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #434d58;
+      
+    }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+    .badge rect { opacity: 0.2; stroke: #434d58 }
+    .badge text { fill: #434d58 }
+
+    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+    .icon {
+      fill: #586069;
+      display: block;
+    }
+  
+          
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          * { animation-duration: 0s !important; animation-delay: 0s !important; }
+        </style>
+
+        
+        <defs>
+          
+          
+        </defs>
+        
+
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="399" fill="#fffefe" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <svg class="icon" x="0" y="-13" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>
+      </svg>
+    </g><g transform="translate(25, 0)">
+      <text x="0" y="0" class="header" data-testid="header">convoychat</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    
+    <g data-testid="badge" class="badge" transform="translate(320, -18)">
+      <rect stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"/>
+      <text x="23" y="-5" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">
+        Archived
+      </text>
+    </g>
+  
+
+    <text class="description" x="25" y="-5"> 
+      <tspan dy="1.2em" x="25">Help us take over the world with a deeply customizable</tspan><tspan dy="1.2em" x="25">React, TypeScript and GraphQL chat app that has enough</tspan><tspan dy="1.2em" x="25">text to wrap across multiple lines in the repository card.</tspan>
+    </text>
+
+    <g transform="translate(30, 75)">
+      <g transform="translate(0, 0)">
+    <g data-testid="primary-lang">
+      <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#2b7489"/>
+      <text data-testid="lang-name" class="gray" x="15">TypeScript</text>
+    </g>
+    </g><g transform="translate(80.53999967575072, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="stargazers" class="gray">38k</text></g></g><g transform="translate(140.4199994087219, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="forkcount" class="gray">100</text></g></g>
+    </g>
+    
+  <svg x="0" y="0"><g transform="translate(-3, 98)">
+      
+    </g></svg>
+    
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
 exports[`Test /api/pin contract > should match the public blacklisted-username response snapshot 1`] = `
 {
   "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
@@ -106,7 +240,8 @@ exports[`Test /api/pin contract > should match the public happy-path response sn
     }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
     .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
-    .badge rect { opacity: 0.2 }
+    .badge rect { opacity: 0.2; stroke: #434d58 }
+    .badge text { fill: #434d58 }
 
     .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
     .stagger {
@@ -120,6 +255,7 @@ exports[`Test /api/pin contract > should match the public happy-path response sn
       display: block;
     }
   
+          
 
           
       /* Animations */
@@ -144,8 +280,13 @@ exports[`Test /api/pin contract > should match the public happy-path response sn
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="399" fill="#fffefe" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="399" fill="#fffefe" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -221,14 +362,15 @@ exports[`Test /api/pin contract > should match the public many-params response s
           }
           
     .description {
-      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #abcdef;
+      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #a9fef7;
       
     }
-    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #a9fef7 }
     .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
-    .badge rect { opacity: 0.2 }
+    .badge rect { opacity: 0.2; stroke: #a9fef7 }
+    .badge text { fill: #a9fef7 }
 
-    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #a9fef7 }
     .stagger {
       opacity: 0;
       animation: fadeInAnimation 0.3s ease-in-out forwards;
@@ -236,10 +378,26 @@ exports[`Test /api/pin contract > should match the public many-params response s
     .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
     .icon {
-      fill: #ff00aa;
+      fill: #f8d847;
       display: block;
     }
   
+          
+          @media (prefers-color-scheme: dark) {
+            .header { fill: #123456; }
+            .card-bg { fill: #193549; stroke: #fedcba; }
+            
+      .description {
+        fill: #75eeb2;
+        
+      }
+      .gray { fill: #75eeb2 }
+      .badge rect { stroke: #75eeb2 }
+      .badge text { fill: #75eeb2 }
+      .stat { fill: #75eeb2 }
+      .icon { fill: #0480ef; }
+    
+          }
 
           
       /* Animations */
@@ -260,12 +418,17 @@ exports[`Test /api/pin contract > should match the public many-params response s
         }
       }
     
-          * { animation-duration: 0s !important; animation-delay: 0s !important; }
+          
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="559" fill="#0f172a" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="559" fill="#141321" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -341,7 +504,7 @@ exports[`Test /api/pin contract > should match the public many-params response s
   
         </g>
       </svg>",
-  "graphqlRequest": "{"query":"\\n      fragment RepoInfo on Repository {\\n        name\\n        nameWithOwner\\n        isPrivate\\n        isArchived\\n        isTemplate\\n        stargazers {\\n          totalCount\\n        }\\n        description\\n        primaryLanguage {\\n          color\\n          id\\n          name\\n        }\\n        forkCount\\n      }\\n      query getRepo($login: String!, $repo: String!) {\\n        user(login: $login) {\\n          repository(name: $repo) {\\n            ...RepoInfo\\n          }\\n        }\\n        organization(login: $login) {\\n          repository(name: $repo) {\\n            ...RepoInfo\\n          }\\n        }\\n      }\\n    ","variables":{"login":"anuraghazra","repo":"convoychat"}}",
+  "graphqlRequest": "{"query":"\\nquery getRepo($login: String!, $repo: String!) {\\n  user(login: $login) {\\n    repository(name: $repo) {\\n      ...RepoInfo\\n    }\\n  }\\n  organization(login: $login) {\\n    repository(name: $repo) {\\n      ...RepoInfo\\n    }\\n  }\\n}\\nfragment RepoInfo on Repository {\\n  name\\n  nameWithOwner\\n  isPrivate\\n  isArchived\\n  isTemplate\\n  stargazerCount\\n  description\\n  primaryLanguage {\\n    color\\n    id\\n    name\\n  }\\n  forkCount\\n}","variables":{"login":"anuraghazra","repo":"convoychat"}}",
   "headers": [
     [
       "Cache-Control",

apps/backend/tests/public-instance/__snapshots__/top-langs.test.js.snap

@@ -138,7 +138,9 @@ exports[`Test /api/top-langs contract > should match the public happy-path respo
     .lang-progress{
       animation: growWidthAnimation 0.6s ease-in-out forwards;
     }
+    .progress-background { fill: #ddd; }
     
+          
 
           
       /* Animations */
@@ -163,8 +165,13 @@ exports[`Test /api/top-langs contract > should match the public happy-path respo
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="299" fill="#fffefe" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="299" fill="#fffefe" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -183,7 +190,7 @@ exports[`Test /api/top-langs contract > should match the public happy-path respo
       <text x="215" y="34" class="lang-name">70.92%</text>
       
     <svg width="205" x="0" y="25">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8"/>
       <svg data-testid="lang-progress" width="70.92198581560284%">
         <rect height="8" fill="#dea584" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 750ms;"/>
       </svg>
@@ -196,7 +203,7 @@ exports[`Test /api/top-langs contract > should match the public happy-path respo
       <text x="215" y="34" class="lang-name">12.77%</text>
       
     <svg width="205" x="0" y="25">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8"/>
       <svg data-testid="lang-progress" width="12.76595744680851%">
         <rect height="8" fill="#0f0" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 900ms;"/>
       </svg>
@@ -209,7 +216,7 @@ exports[`Test /api/top-langs contract > should match the public happy-path respo
       <text x="215" y="34" class="lang-name">8.51%</text>
       
     <svg width="205" x="0" y="25">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8"/>
       <svg data-testid="lang-progress" width="8.51063829787234%">
         <rect height="8" fill="#0ff" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1050ms;"/>
       </svg>
@@ -222,7 +229,7 @@ exports[`Test /api/top-langs contract > should match the public happy-path respo
       <text x="215" y="34" class="lang-name">6.38%</text>
       
     <svg width="205" x="0" y="25">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8"/>
       <svg data-testid="lang-progress" width="6.382978723404255%">
         <rect height="8" fill="#3178c6" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1200ms;"/>
       </svg>
@@ -235,7 +242,7 @@ exports[`Test /api/top-langs contract > should match the public happy-path respo
       <text x="215" y="34" class="lang-name">1.42%</text>
       
     <svg width="205" x="0" y="25">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8"/>
       <svg data-testid="lang-progress" width="2%">
         <rect height="8" fill="#f00" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1350ms;"/>
       </svg>
@@ -314,7 +321,18 @@ exports[`Test /api/top-langs contract > should match the public many-params resp
     .lang-progress{
       animation: growWidthAnimation 0.6s ease-in-out forwards;
     }
+    .progress-background { fill: #ddd; }
     
+          
+          @media (prefers-color-scheme: dark) {
+            .header { fill: #123456; }
+            .card-bg { fill: #0f172a; stroke: #e4e2e2; }
+            
+      .stat { fill: #abcdef; }
+      .lang-name { fill: #abcdef; }
+      .progress-background { fill: #ddd; }
+    
+          }
 
           
       /* Animations */
@@ -339,8 +357,13 @@ exports[`Test /api/top-langs contract > should match the public many-params resp
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="419" fill="#0f172a" stroke-opacity="0"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="419" fill="#0f172a" stroke-opacity="0"/>
 
         
 
@@ -389,7 +412,7 @@ exports[`Test /api/top-langs contract > should match the public many-params resp
   
         </g>
       </svg>",
-  "graphqlRequest": "{"query":"\\n      query userInfo($login: String!, $ownerAffiliations: [RepositoryAffiliation]) {\\n        user(login: $login) {\\n          # do not fetch forks\\n          repositories(ownerAffiliations: $ownerAffiliations, isFork: false, first: 100) {\\n            nodes {\\n              name\\n              languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {\\n                edges {\\n                  size\\n                  node {\\n                    color\\n                    name\\n                  }\\n                }\\n              }\\n            }\\n          }\\n        }\\n      }\\n      ","variables":{"login":"anuraghazra","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
+  "graphqlRequest": "{"query":"\\nquery topLanguages($login: String!, $ownerAffiliations: [RepositoryAffiliation]) {\\n  user(login: $login) {\\n    repositories(ownerAffiliations: $ownerAffiliations, isFork: false, first: 100) {\\n      nodes {\\n        ...TopLanguagesRepository\\n      }\\n    }\\n  }\\n}\\nfragment TopLanguagesRepository on Repository {\\n  name\\n  languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {\\n    edges {\\n      ...TopLanguage\\n    }\\n  }\\n}\\nfragment TopLanguage on LanguageEdge {\\n  size\\n  node {\\n    color\\n    name\\n  }\\n}","variables":{"login":"anuraghazra","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
   "headers": [
     [
       "Cache-Control",

apps/backend/tests/public-instance/__snapshots__/wakatime.test.js.snap

@@ -109,8 +109,11 @@ exports[`Test /api/wakatime contract > should match the public happy-path respon
     }
     .lang-progress{
       animation: growWidthAnimation 0.6s ease-in-out forwards;
+      fill: #2f80ed;
     }
+    .progress-background { fill: #434d58; }
     
+          
 
           
       /* Animations */
@@ -135,8 +138,13 @@ exports[`Test /api/wakatime contract > should match the public happy-path respon
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="494" fill="#fffefe" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="494" fill="#fffefe" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -155,9 +163,9 @@ exports[`Test /api/wakatime contract > should match the public happy-path respon
       <text class="stat" x="350" y="12.5">12 hrs</text>
       
     <svg width="220" x="110" y="4">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8"/>
       <svg data-testid="lang-progress" width="52%">
-        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 750ms;"/>
+        <rect height="8" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 750ms;"/>
       </svg>
     </svg>
   
@@ -168,9 +176,9 @@ exports[`Test /api/wakatime contract > should match the public happy-path respon
       <text class="stat" x="350" y="12.5">6 hrs 30 mins</text>
       
     <svg width="220" x="110" y="4">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8"/>
       <svg data-testid="lang-progress" width="28%">
-        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 900ms;"/>
+        <rect height="8" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 900ms;"/>
       </svg>
     </svg>
   
@@ -181,9 +189,9 @@ exports[`Test /api/wakatime contract > should match the public happy-path respon
       <text class="stat" x="350" y="12.5">3 hrs</text>
       
     <svg width="220" x="110" y="4">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8"/>
       <svg data-testid="lang-progress" width="13%">
-        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1050ms;"/>
+        <rect height="8" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1050ms;"/>
       </svg>
     </svg>
   
@@ -194,9 +202,9 @@ exports[`Test /api/wakatime contract > should match the public happy-path respon
       <text class="stat" x="350" y="12.5">1 hr</text>
       
     <svg width="220" x="110" y="4">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8"/>
       <svg data-testid="lang-progress" width="4%">
-        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1200ms;"/>
+        <rect height="8" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1200ms;"/>
       </svg>
     </svg>
   
@@ -207,9 +215,9 @@ exports[`Test /api/wakatime contract > should match the public happy-path respon
       <text class="stat" x="350" y="12.5">30 mins</text>
       
     <svg width="220" x="110" y="4">
-      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <rect data-testid="progress-background" class="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8"/>
       <svg data-testid="lang-progress" width="3%">
-        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1350ms;"/>
+        <rect height="8" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1350ms;"/>
       </svg>
     </svg>
   
@@ -285,8 +293,11 @@ exports[`Test /api/wakatime contract > should match the public inaccessible-prof
     }
     .lang-progress{
       animation: growWidthAnimation 0.6s ease-in-out forwards;
+      fill: #2f80ed;
     }
+    .progress-background { fill: #434d58; }
     
+          
 
           
       /* Animations */
@@ -311,8 +322,13 @@ exports[`Test /api/wakatime contract > should match the public inaccessible-prof
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="494" fill="#fffefe" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="494" fill="#fffefe" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">
@@ -326,7 +342,7 @@ exports[`Test /api/wakatime contract > should match the public inaccessible-prof
           
     <svg x="0" y="0" width="100%">
       <g transform="translate(0, 0)">
-    <text x="25" y="11" class="stat bold" fill="#434d58">WakaTime user profile not public</text>
+    <text x="25" y="11" class="stat bold">WakaTime user profile not public</text>
   </g>
     </svg>
   
@@ -353,7 +369,7 @@ exports[`Test /api/wakatime contract > should match the public many-params respo
         <style>
           .header {
             font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
-            fill: #123456;
+            fill: #ff3456;
             animation: fadeInAnimation 0.8s ease-in-out forwards;
           }
           @supports(-moz-appearance: auto) {
@@ -398,8 +414,35 @@ exports[`Test /api/wakatime contract > should match the public many-params respo
     }
     .lang-progress{
       animation: growWidthAnimation 0.6s ease-in-out forwards;
+      fill: #ff3456;
     }
+    .progress-background { fill: #abcdef; }
     
+          
+          @media (prefers-color-scheme: dark) {
+            .header { fill: #ff6543; }
+            .card-bg { fill: #193549; stroke: #fedcba; }
+            
+      
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #abcdef;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  
+      .lang-name { fill: #abcdef }
+      .lang-progress { fill: #ff6543; }
+      .progress-background { fill: #abcdef; }
+    
+          }
 
           
       /* Animations */
@@ -424,8 +467,13 @@ exports[`Test /api/wakatime contract > should match the public many-params respo
         </style>
 
         
+        <defs>
+          
+          
+        </defs>
+        
 
-        <rect data-testid="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="619" fill="#0f172a" stroke-opacity="1"/>
+        <rect data-testid="card-bg" class="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="619" fill="#141321" stroke-opacity="1"/>
 
         
       <g data-testid="card-title" transform="translate(25, 35)">

apps/backend/tests/public-instance/api.test.js

@@ -14,15 +14,10 @@ import {
   vi,
 } from "vitest";
 
-import { data_stats, normalizeSvg } from "../utils.js";
+import { createRequestResponse, data_stats, normalizeSvg } from "../utils.js";
 
 const mock = new MockAdapter(axios);
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 beforeEach(() => {
   vi.stubEnv("CACHE_SECONDS", "");
   vi.stubEnv("GIST_WHITELIST", "");
@@ -52,11 +47,7 @@ describe("Test /api contract", () => {
   it("should match the public happy-path response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api?username=anuraghazra",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api?username=anuraghazra");
 
     await router(req, res);
 
@@ -99,11 +90,7 @@ describe("Test /api contract", () => {
       show: "reviews,prs_merged,prs_merged_percentage,discussions_started,discussions_answered",
     });
 
-    const req = {
-      headers: {},
-      url: `/api?${params.toString()}`,
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(`/api?${params.toString()}`);
 
     await router(req, res);
 
@@ -116,14 +103,31 @@ describe("Test /api contract", () => {
     }).toMatchSnapshot();
   });
 
+  it("should match the gradient-background response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const params = new URLSearchParams({
+      username: "anuraghazra",
+      theme_light: "ambient_gradient",
+      bg_color_dark: "45,60A5FA,4ADE80",
+    });
+
+    const { req, res } = createRequestResponse(`/api?${params.toString()}`);
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
   it("should match the public missing-username response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api");
 
     await router(req, res);
 
@@ -138,11 +142,7 @@ describe("Test /api contract", () => {
   it("should render error card in same theme as requested card", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api?theme=merko",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api?theme=merko");
 
     await router(req, res);
 
@@ -157,11 +157,7 @@ describe("Test /api contract", () => {
   it("should match the public blacklisted-username response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api?username=renovate-bot",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api?username=renovate-bot");
 
     await router(req, res);
 
@@ -178,11 +174,7 @@ describe("Test /api contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api");
 
     await router(req, res);
 

apps/backend/tests/public-instance/gist.test.js

@@ -14,15 +14,14 @@ import {
   vi,
 } from "vitest";
 
-import { happy_path_gist_data, normalizeSvg } from "../utils.js";
+import {
+  createRequestResponse,
+  happy_path_gist_data,
+  normalizeSvg,
+} from "../utils.js";
 
 const mock = new MockAdapter(axios);
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 beforeEach(() => {
   vi.stubEnv("CACHE_SECONDS", "");
   vi.stubEnv("GIST_WHITELIST", "");
@@ -54,11 +53,7 @@ describe("Test /api/gist contract", () => {
   it("should match the public happy-path response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/gist?id=happy-gist-id",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/gist?id=happy-gist-id");
 
     await router(req, res);
 
@@ -76,19 +71,20 @@ describe("Test /api/gist contract", () => {
     const params = new URLSearchParams({
       id: "happy-gist-id",
       title_color: "123456",
-      icon_color: "ff00aa",
-      text_color: "abcdef",
+      icon_color_light: "ff00aa",
+      icon_color_dark: "aa00ff",
+      text_color_light: "ffabcd",
+      text_color_dark: "abcdef",
       bg_color: "0f172a",
       border_radius: "12",
       border_color: "fedcba",
       show_owner: "true",
+      disable_animations: "true",
     });
 
-    const req = {
-      headers: {},
-      url: `/api/gist?${params.toString()}`,
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      `/api/gist?${params.toString()}`,
+    );
 
     await router(req, res);
 
@@ -104,11 +100,7 @@ describe("Test /api/gist contract", () => {
   it("should match the public missing-id response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/gist",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/gist");
 
     await router(req, res);
 
@@ -125,11 +117,7 @@ describe("Test /api/gist contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/gist",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/gist");
 
     await router(req, res);
 

apps/backend/tests/public-instance/pin.test.js

@@ -14,15 +14,10 @@ import {
   vi,
 } from "vitest";
 
-import { data_user, normalizeSvg } from "../utils.js";
+import { createRequestResponse, data_user, normalizeSvg } from "../utils.js";
 
 const mock = new MockAdapter(axios);
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 beforeEach(() => {
   vi.stubEnv("CACHE_SECONDS", "");
   vi.stubEnv("GIST_WHITELIST", "");
@@ -52,11 +47,33 @@ describe("Test /api/pin contract", () => {
   it("should match the public happy-path response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/pin?username=anuraghazra&repo=convoychat",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      "/api/pin?username=anuraghazra&repo=convoychat",
+    );
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public archived-repo response snapshot", async () => {
+    let archived_data_user = structuredClone(data_user);
+    archived_data_user.data.user.repository.isArchived = true;
+
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, archived_data_user);
+
+    const { default: router } = await import("../../router.js");
+
+    const { req, res } = createRequestResponse(
+      "/api/pin?username=anuraghazra&repo=convoychat",
+    );
 
     await router(req, res);
 
@@ -102,9 +119,8 @@ describe("Test /api/pin contract", () => {
       username: "anuraghazra",
       repo: "convoychat",
       title_color: "123456",
-      icon_color: "ff00aa",
-      text_color: "abcdef",
-      bg_color: "0f172a",
+      theme_light: "radical",
+      theme_dark: "cobalt",
       card_width: "560",
       show_owner: "true",
       show: "prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented",
@@ -115,13 +131,10 @@ describe("Test /api/pin contract", () => {
       border_radius: "12",
       border_color: "fedcba",
       description_lines_count: "1",
+      disable_animations: "false",
     });
 
-    const req = {
-      headers: {},
-      url: `/api/pin?${params.toString()}`,
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(`/api/pin?${params.toString()}`);
 
     await router(req, res);
 
@@ -137,11 +150,7 @@ describe("Test /api/pin contract", () => {
   it("should match the public missing-params response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/pin",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/pin");
 
     await router(req, res);
 
@@ -156,11 +165,7 @@ describe("Test /api/pin contract", () => {
   it("should render error card in same theme as requested card", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/pin?theme=merko",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/pin?theme=merko");
 
     await router(req, res);
 
@@ -175,11 +180,9 @@ describe("Test /api/pin contract", () => {
   it("should match the public blacklisted-username response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/pin?username=renovate-bot&repo=convoychat",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      "/api/pin?username=renovate-bot&repo=convoychat",
+    );
 
     await router(req, res);
 
@@ -196,11 +199,7 @@ describe("Test /api/pin contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/pin?username=martin-mfg",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/pin?username=martin-mfg");
 
     await router(req, res);
 
@@ -217,11 +216,7 @@ describe("Test /api/pin contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/pin",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/pin");
 
     await router(req, res);
 

apps/backend/tests/public-instance/top-langs.test.js

@@ -14,15 +14,10 @@ import {
   vi,
 } from "vitest";
 
-import { data_langs, normalizeSvg } from "../utils.js";
+import { createRequestResponse, data_langs, normalizeSvg } from "../utils.js";
 
 const mock = new MockAdapter(axios);
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 beforeEach(() => {
   vi.stubEnv("CACHE_SECONDS", "");
   vi.stubEnv("GIST_WHITELIST", "");
@@ -52,11 +47,9 @@ describe("Test /api/top-langs contract", () => {
   it("should match the public happy-path response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/top-langs?username=anuraghazra",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      "/api/top-langs?username=anuraghazra",
+    );
 
     await router(req, res);
 
@@ -82,6 +75,7 @@ describe("Test /api/top-langs contract", () => {
       title_color: "123456",
       text_color: "abcdef",
       bg_color: "0f172a",
+      theme_dark: "cobalt",
       layout: "compact",
       langs_count: "3",
       exclude_repo: "repo-hidden",
@@ -92,11 +86,9 @@ describe("Test /api/top-langs contract", () => {
       stats_format: "bytes",
     });
 
-    const req = {
-      headers: {},
-      url: `/api/top-langs?${params.toString()}`,
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      `/api/top-langs?${params.toString()}`,
+    );
 
     await router(req, res);
 
@@ -112,11 +104,7 @@ describe("Test /api/top-langs contract", () => {
   it("should match the public missing-username response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/top-langs",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/top-langs");
 
     await router(req, res);
 
@@ -131,11 +119,7 @@ describe("Test /api/top-langs contract", () => {
   it("should render error card in same theme as requested card", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/top-langs?theme=merko",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/top-langs?theme=merko");
 
     await router(req, res);
 
@@ -150,11 +134,9 @@ describe("Test /api/top-langs contract", () => {
   it("should match the public blacklisted-username response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/top-langs?username=renovate-bot",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      "/api/top-langs?username=renovate-bot",
+    );
 
     await router(req, res);
 
@@ -171,11 +153,9 @@ describe("Test /api/top-langs contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/top-langs?username=martin-mfg",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      "/api/top-langs?username=martin-mfg",
+    );
 
     await router(req, res);
 
@@ -192,11 +172,7 @@ describe("Test /api/top-langs contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/top-langs",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/top-langs");
 
     await router(req, res);
 

apps/backend/tests/public-instance/wakatime.test.js

@@ -14,7 +14,7 @@ import {
   vi,
 } from "vitest";
 
-import { normalizeSvg, wakaTimeData } from "../utils.js";
+import { createRequestResponse, normalizeSvg, wakaTimeData } from "../utils.js";
 
 const mock = new MockAdapter(axios);
 
@@ -26,11 +26,6 @@ const wakaTimeProfileNotPublicData = {
   },
 };
 
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 beforeEach(() => {
   vi.stubEnv("CACHE_SECONDS", "");
   vi.stubEnv("GIST_WHITELIST", "");
@@ -64,11 +59,9 @@ describe("Test /api/wakatime contract", () => {
   it("should match the public happy-path response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/wakatime?username=anuraghazra",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      "/api/wakatime?username=anuraghazra",
+    );
 
     await router(req, res);
 
@@ -92,9 +85,13 @@ describe("Test /api/wakatime contract", () => {
 
     const params = new URLSearchParams({
       username: "anuraghazra",
+      theme: "vue",
+      theme_light: "radical",
+      theme_dark: "cobalt",
       title_color: "123456",
+      title_color_light: "ff3456",
+      title_color_dark: "ff6543",
       text_color: "abcdef",
-      bg_color: "0f172a",
       card_width: "620",
       custom_title: "a custom title",
       layout: "compact",
@@ -107,11 +104,9 @@ describe("Test /api/wakatime contract", () => {
       disable_animations: "true",
     });
 
-    const req = {
-      headers: {},
-      url: `/api/wakatime?${params.toString()}`,
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      `/api/wakatime?${params.toString()}`,
+    );
 
     await router(req, res);
 
@@ -126,11 +121,7 @@ describe("Test /api/wakatime contract", () => {
   it("should match the public missing-username response snapshot", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/wakatime",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/wakatime");
 
     await router(req, res);
 
@@ -145,11 +136,7 @@ describe("Test /api/wakatime contract", () => {
   it("should render error card in same theme as requested card", async () => {
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/wakatime?theme=merko",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/wakatime?theme=merko");
 
     await router(req, res);
 
@@ -171,11 +158,9 @@ describe("Test /api/wakatime contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/wakatime?username=anuraghazra",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      "/api/wakatime?username=anuraghazra",
+    );
 
     await router(req, res);
 
@@ -192,11 +177,9 @@ describe("Test /api/wakatime contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/wakatime?username=martin-mfg",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse(
+      "/api/wakatime?username=martin-mfg",
+    );
 
     await router(req, res);
 
@@ -213,11 +196,7 @@ describe("Test /api/wakatime contract", () => {
 
     const { default: router } = await import("../../router.js");
 
-    const req = {
-      headers: {},
-      url: "/api/wakatime",
-    };
-    const res = createResponse();
+    const { req, res } = createRequestResponse("/api/wakatime");
 
     await router(req, res);
 

apps/backend/tests/status.up.test.js

@@ -15,7 +15,7 @@ import {
   vi,
 } from "vitest";
 
-import up, { RATE_LIMIT_SECONDS } from "../api-renamed/status/up.js";
+import up, { RATE_LIMIT_SECONDS } from "../api/status/up.js";
 
 const mock = new MockAdapter(axios);
 
@@ -206,16 +206,24 @@ describe("Test /api/status/up", () => {
   });
 
   it("should throw an error if the request fails", async () => {
-    mock.onPost("https://api.github.com/graphql").networkError();
+    vi.useFakeTimers();
+    try {
+      mock.onPost("https://api.github.com/graphql").networkError();
 
-    const { req, res } = faker({}, {});
-    await up(req, res);
+      const { req, res } = faker({}, {});
+      const result = up(req, res);
 
-    expect(res.setHeader).toHaveBeenCalledWith(
-      "Content-Type",
-      "application/json",
-    );
-    expect(res.send).toHaveBeenCalledWith(false);
+      await vi.runAllTimersAsync();
+      await result;
+
+      expect(res.setHeader).toHaveBeenCalledWith(
+        "Content-Type",
+        "application/json",
+      );
+      expect(res.send).toHaveBeenCalledWith(false);
+    } finally {
+      vi.useRealTimers();
+    }
   });
 
   it("should have proper cache when no error is thrown", async () => {
@@ -231,14 +239,22 @@ describe("Test /api/status/up", () => {
   });
 
   it("should have proper cache when error is thrown", async () => {
-    mock.onPost("https://api.github.com/graphql").networkError();
+    vi.useFakeTimers();
+    try {
+      mock.onPost("https://api.github.com/graphql").networkError();
 
-    const { req, res } = faker({}, {});
-    await up(req, res);
+      const { req, res } = faker({}, {});
+      const result = up(req, res);
 
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Content-Type", "application/json"],
-      ["Cache-Control", "no-store"],
-    ]);
+      await vi.runAllTimersAsync();
+      await result;
+
+      expect(res.setHeader.mock.calls).toEqual([
+        ["Content-Type", "application/json"],
+        ["Cache-Control", "no-store"],
+      ]);
+    } finally {
+      vi.useRealTimers();
+    }
   });
 });

apps/backend/tests/top-langs.test.js

@@ -1,9 +1,10 @@
 // @ts-check
 
 import { topLangs } from "@stats-organization/github-readme-stats-core";
+import supertest from "supertest";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import router from "../router.js";
+import { app } from "../app.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 import { getUserAccessByName, storeRequest } from "../src/common/database.js";
 
@@ -22,16 +23,6 @@ const topLangsMock = vi.mocked(topLangs);
 const storeRequestMock = vi.mocked(storeRequest);
 const getUserAccessByNameMock = vi.mocked(getUserAccessByName);
 
-const createRequest = (search = "") => ({
-  headers: {},
-  url: `/api/top-langs?${search}`,
-});
-
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 const defaultCacheHeader =
   `max-age=${CACHE_TTL.TOP_LANGS_CARD.DEFAULT}, ` +
   `s-maxage=${CACHE_TTL.TOP_LANGS_CARD.DEFAULT}, ` +
@@ -53,12 +44,11 @@ describe("Test /api/top-langs backend routing", () => {
       content: "mock-top-langs-svg",
     });
 
-    const req = createRequest(
-      "username=anuraghazra&layout=compact&langs_count=5",
-    );
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api/top-langs?username=anuraghazra&layout=compact&langs_count=5")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(getUserAccessByNameMock).toHaveBeenCalledWith("anuraghazra");
     expect(topLangsMock).toHaveBeenCalledWith(
@@ -69,16 +59,7 @@ describe("Test /api/top-langs backend routing", () => {
       },
       "user-pat",
     );
-    expect(req.query).toEqual({
-      username: "anuraghazra",
-      layout: "compact",
-      langs_count: "5",
-    });
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-top-langs-svg");
-    expect(storeRequestMock).toHaveBeenCalledExactlyOnceWith(req);
+    expect(res.body.toString()).toBe("mock-top-langs-svg");
+    expect(storeRequestMock).toHaveBeenCalledOnce();
   });
 });

apps/backend/tests/utils.js

@@ -8,6 +8,9 @@ export const data_stats = {
       name: "Anurag Hazra",
       login: "anuraghazra",
       repositoriesContributedTo: { totalCount: 51 },
+      contributionsCollection: {
+        contributionYears: [2022, 2024],
+      },
       commits: {
         totalCommitContributions: 200,
       },
@@ -26,9 +29,9 @@ export const data_stats = {
       repositories: {
         totalCount: 3,
         nodes: [
-          { name: "repo-keep-1", stargazers: { totalCount: 1500 } },
-          { name: "repo-exclude-me", stargazers: { totalCount: 9999 } },
-          { name: "repo-keep-2", stargazers: { totalCount: 2600 } },
+          { name: "repo-keep-1", stargazerCount: 1500 },
+          { name: "repo-exclude-me", stargazerCount: 9999 },
+          { name: "repo-keep-2", stargazerCount: 2600 },
         ],
         pageInfo: {
           hasNextPage: false,
@@ -73,9 +76,7 @@ export const data_user = {
         username: "anuraghazra",
         name: "convoychat",
         nameWithOwner: "anuraghazra/convoychat",
-        stargazers: {
-          totalCount: 38000,
-        },
+        stargazerCount: 38000,
         description:
           "Help us take over the world with a deeply customizable React, TypeScript and GraphQL chat app that has enough text to wrap across multiple lines in the repository card.",
         primaryLanguage: {
@@ -259,6 +260,18 @@ export const wakaTimeData = {
   },
 };
 
+export const createRequestResponse = (url) => ({
+  req: {
+    headers: {},
+    url,
+    query: Object.fromEntries(new URL(url, "http://localhost").searchParams),
+  },
+  res: {
+    end: vi.fn(),
+    setHeader: vi.fn(),
+  },
+});
+
 /** @typedef {import('@stats-organization/github-readme-stats-core')} CoreModule */
 
 /**

apps/backend/tests/wakatime.test.js

@@ -1,9 +1,10 @@
 // @ts-check
 
 import { wakatime } from "@stats-organization/github-readme-stats-core";
+import supertest from "supertest";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import router from "../router.js";
+import { app } from "../app.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 import { getUserAccessByName, storeRequest } from "../src/common/database.js";
 
@@ -22,16 +23,6 @@ const wakatimeMock = vi.mocked(wakatime);
 const storeRequestMock = vi.mocked(storeRequest);
 const getUserAccessByNameMock = vi.mocked(getUserAccessByName);
 
-const createRequest = (search = "") => ({
-  headers: {},
-  url: `/api/wakatime?${search}`,
-});
-
-const createResponse = () => ({
-  end: vi.fn(),
-  setHeader: vi.fn(),
-});
-
 const defaultCacheHeader =
   `max-age=${CACHE_TTL.WAKATIME_CARD.DEFAULT}, ` +
   `s-maxage=${CACHE_TTL.WAKATIME_CARD.DEFAULT}, ` +
@@ -52,10 +43,11 @@ describe("Test /api/wakatime backend routing", () => {
       content: "mock-wakatime-svg",
     });
 
-    const req = createRequest("username=anuraghazra&theme=dark&layout=compact");
-    const res = createResponse();
-
-    await router(req, res);
+    const res = await supertest(app)
+      .get("/api/wakatime?username=anuraghazra&theme=dark&layout=compact")
+      .expect("Cache-Control", defaultCacheHeader)
+      .expect("Content-Type", "image/svg+xml")
+      .expect(200);
 
     expect(wakatimeMock).toHaveBeenCalledWith({
       username: "anuraghazra",
@@ -63,16 +55,7 @@ describe("Test /api/wakatime backend routing", () => {
       layout: "compact",
     });
     expect(getUserAccessByNameMock).not.toHaveBeenCalled();
-    expect(req.query).toEqual({
-      username: "anuraghazra",
-      theme: "dark",
-      layout: "compact",
-    });
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Cache-Control", defaultCacheHeader],
-      ["Content-Type", "image/svg+xml"],
-    ]);
-    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-wakatime-svg");
-    expect(storeRequestMock).toHaveBeenCalledExactlyOnceWith(req);
+    expect(res.body.toString()).toBe("mock-wakatime-svg");
+    expect(storeRequestMock).toHaveBeenCalledOnce();
   });
 });

apps/backend/tsconfig.json

@@ -1,14 +1,16 @@
 {
   "extends": ["../../tsconfig.base.json"],
   "include": [
-    "src",
+    "src/**/*.ts",
     "vitest.config.ts",
     "vitest.config.bench.ts",
     "vitest.config.e2e.ts"
   ],
   "compilerOptions": {
-    "composite": true,
     "module": "nodenext",
-    "moduleResolution": "nodenext"
+    "moduleResolution": "nodenext",
+    // Allow TS files to import the remaining JS files
+    "allowJs": true,
+    "erasableSyntaxOnly": true
   }
 }

apps/backend/tsconfig.typecheck.json

@@ -1,7 +1,6 @@
 {
   "extends": ["./tsconfig.json"],
   "compilerOptions": {
-    "noEmit": true,
     "customConditions": []
   }
 }

apps/backend/vercel.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "https://openapi.vercel.sh/vercel.json",
-  "buildCommand": "cd ../../ && git clean ./apps -fx && pnpm run build:packages && pnpm --filter ./apps/backend/ --legacy --prod deploy ./apps/deployment/ && mv ./apps/deployment/node_modules/ ./apps/backend/node_modules/ && ./vercel-preparation.sh",
-  "redirects": [
-    {
-      "source": "/",
-      "destination": "https://github.com/stats-organization/github-stats-extended"
-    }
-  ]
-}

apps/frontend/astro.config.ts

@@ -0,0 +1,151 @@
+import path from "node:path";
+
+import { unified } from "@astrojs/markdown-remark";
+import react from "@astrojs/react";
+import starlight from "@astrojs/starlight";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig, passthroughImageService } from "astro/config";
+import starlightLinksValidator from "starlight-links-validator";
+
+import { rehypeCardImages } from "./src/plugins/rehypeCardImages.js";
+
+const base = "/frontend";
+
+// `pnpm dev:backend` serves the card endpoints; override to point at another instance.
+const BACKEND_ORIGIN = process.env.BACKEND_ORIGIN ?? "http://localhost:9000";
+
+/*
+ * One app: Starlight serves the docs under `/frontend/docs`, and the card
+ * wizard is a page of the same site at `/frontend`.
+ */
+export default defineConfig({
+  site: "https://github-stats-extended.vercel.app",
+  base,
+  outDir: "./build",
+  // One screenshot; not worth a native image dependency.
+  image: { service: passthroughImageService() },
+  markdown: {
+    // Starlight appends its own plugins to whatever processor is configured here.
+    processor: unified({
+      rehypePlugins: [rehypeCardImages],
+    }),
+  },
+  // Astro prefixes `base` onto the source but not the destination, hence it spelled out here.
+  redirects: {
+    // Sidebar group labels are not routes, so send them to the group's first page.
+    "/docs/cards": `${base}/docs/cards/stats/`,
+    "/docs/customization": `${base}/docs/customization/common-options/`,
+  },
+  integrations: [
+    react(),
+    starlight({
+      title: "GitHub Stats Extended",
+      description: "Dynamically generate GitHub stats for your READMEs.",
+      logo: { src: "./src/assets/appLogo64.png", alt: "" },
+      // Starlight defaults to a favicon.svg this project does not ship.
+      favicon: "/favicon.ico",
+      head: [
+        {
+          tag: "link",
+          attrs: { rel: "apple-touch-icon", href: `${base}/logo192.png` },
+        },
+        {
+          tag: "link",
+          attrs: { rel: "manifest", href: `${base}/manifest.json` },
+        },
+        { tag: "meta", attrs: { name: "theme-color", content: "#000000" } },
+      ],
+      social: [
+        {
+          icon: "github",
+          label: "GitHub",
+          href: "https://github.com/stats-organization/github-stats-extended",
+        },
+      ],
+      plugins: [
+        starlightLinksValidator({
+          // The docs link to each other by site path, so a rename must fail the build.
+          // `/api` and `/frontend` are not part of the docs, so they don't have matching pages.
+          exclude: ["/api/**", "/frontend"],
+        }),
+      ],
+      customCss: ["./src/styles/starlight-theme.css"],
+      components: { SiteTitle: "./src/components/SiteTitle.astro" },
+      sidebar: [
+        { label: "Overview", slug: "docs" },
+        {
+          label: "Cards",
+          items: [
+            { label: "Stats Card", slug: "docs/cards/stats" },
+            { label: "Top Languages Card", slug: "docs/cards/top-languages" },
+            { label: "Repo Pin Card", slug: "docs/cards/repo-pin" },
+            { label: "Gist Pin Card", slug: "docs/cards/gist-pin" },
+            { label: "WakaTime Card", slug: "docs/cards/wakatime" },
+          ],
+        },
+        {
+          label: "Customization",
+          items: [
+            {
+              label: "Common Options",
+              slug: "docs/customization/common-options",
+            },
+            { label: "Theming", slug: "docs/customization/theming" },
+            // Generated by scripts/generate-theme-readme.ts.
+            { label: "Available Themes", slug: "docs/customization/themes" },
+            { label: "Locales", slug: "docs/customization/locales" },
+            {
+              label: "Aligning Cards",
+              slug: "docs/customization/aligning-cards",
+            },
+          ],
+        },
+        { label: "Demo Gallery", slug: "docs/demos" },
+        { label: "Run It Yourself", slug: "docs/deploy" },
+        { label: "Fork Information", slug: "docs/fork" },
+      ],
+    }),
+  ],
+  vite: {
+    plugins: [
+      tailwindcss(),
+
+      // The e2e run sets `STUB_CARD_API`: answer the card endpoints here rather than
+      // proxy them to a `pnpm dev:backend` that is not running.
+      !!process.env.STUB_CARD_API && {
+        name: "stub-card-api",
+        // In `configureServer`'s body, so it runs ahead of Vite's proxy middleware.
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            const pathname = req.url?.split("?")[0] ?? "";
+            if (pathname !== "/api" && !pathname.startsWith("/api/")) {
+              next();
+              return;
+            }
+            res.setHeader("Content-Type", "image/svg+xml");
+            res.end(
+              '<svg xmlns="http://www.w3.org/2000/svg" width="495" height="195"></svg>',
+            );
+          });
+        },
+      },
+    ],
+    /*
+     * On Vercel the same deployment serves `/api` and `/frontend`, so the docs can reference cards by root-relative path.
+     * Locally the two are separate servers, so forward `/api` to `pnpm dev:backend` to keep those paths working.
+     */
+    server: { proxy: { "/api": BACKEND_ORIGIN } },
+    resolve: {
+      conditions: ["@stats/source"],
+      alias: [
+        {
+          find: "../fetchers/wakatime.js",
+          replacement: path.resolve(
+            import.meta.dirname,
+            "src/wakatime-override.ts",
+          ),
+        },
+      ],
+    },
+  },
+});

apps/frontend/deploy/Dockerfile

@@ -1,12 +0,0 @@
-FROM node:16-alpine
-
-WORKDIR /frontend
-
-ENV PATH /frontend/node_modules/.bin:$PATH
-
-COPY ../package.json ../yarn.lock /frontend/
-RUN yarn install --network-timeout 100000
-
-COPY ../ /frontend
-
-CMD ["yarn", "start"]

apps/frontend/e2e/app.spec.ts

@@ -1,25 +1,29 @@
 import { expect, test } from "@playwright/test";
 
+const REPO_URL = "https://github.com/stats-organization/github-stats-extended";
+
 test("load initial page correctly", async ({ page }) => {
   await page.goto("");
 
   // Expect a title "to contain" a substring.
   await expect(page).toHaveTitle(/GitHub Stats Extended/);
 
-  // Page title / header branding
-  await expect(page.getByText("GitHub Stats Extended")).toBeVisible();
+  // Header branding, with the logo beside the wordmark.
+  const siteTitle = page.getByRole("link", { name: "GitHub Stats Extended" });
+  await expect(siteTitle).toBeVisible();
+  await expect(siteTitle.locator("img")).toBeVisible();
 
-  // Logo exists
-  await expect(page.locator('img[alt="logo"]')).toBeVisible();
+  // The two halves of the site, with this one marked as current.
+  await expect(
+    page.getByRole("link", { name: "Wizard", exact: true }),
+  ).toHaveAttribute("aria-current", "page");
+  await expect(
+    page.getByRole("link", { name: "Docs", exact: true }),
+  ).toHaveAttribute("href", "/frontend/docs/");
 
-  // Star on GitHub button
-  const starButton = page.getByRole("button", { name: /star on/i });
-  await expect(starButton).toBeVisible();
-
-  const githubLink = page.locator(
-    'a[href*="github.com/stats-organization/github-stats-extended"]',
-  );
-  await expect(githubLink).toHaveAttribute("target", "_blank");
+  await expect(
+    page.getByRole("link", { name: "GitHub", exact: true }),
+  ).toHaveAttribute("href", REPO_URL);
 
   // Login buttons
   const publicAccessBtn = page.getByRole("button", {
@@ -39,33 +43,53 @@ test("load initial page correctly", async ({ page }) => {
   await expect(guestBtn).toBeEnabled();
 });
 
+test("theme selection applies, persists and reaches the wizard", async ({
+  page,
+}) => {
+  await page.goto("");
+
+  const html = page.locator("html");
+  const themeSelect = page.getByRole("combobox", { name: "Select theme" });
+
+  // The site's own control owns `data-theme`, which is also what daisyUI reads.
+  await themeSelect.selectOption("dark");
+  await expect(html).toHaveAttribute("data-theme", "dark");
+  await expect(
+    page.evaluate(() => localStorage.getItem("starlight-theme")),
+  ).resolves.toBe("dark");
+
+  // The choice survives a reload.
+  await page.reload();
+  await expect(html).toHaveAttribute("data-theme", "dark");
+  await expect(themeSelect).toHaveValue("dark");
+
+  // Switching back works too.
+  await themeSelect.selectOption("light");
+  await expect(html).toHaveAttribute("data-theme", "light");
+});
+
 test("navigates between steps", async ({ page }) => {
   await page.goto("");
 
+  // Scoped to the page content: Astro's dev toolbar has headings of its own.
+  const heading = page.locator("main").getByRole("heading", { level: 1 });
+
   // We are at stage 1
-  await expect(page.getByRole("heading", { level: 1 })).toContainText("Login");
+  await expect(heading).toContainText("Login");
 
   // Go to stage 2
   await page.getByRole("button", { name: "Select card" }).click();
-  await expect(page.getByRole("heading", { level: 1 })).toContainText(
-    "Select a Card",
-  );
+  await expect(heading).toContainText("Select a Card");
 
   // Go to stage 3
   await page.getByRole("button", { name: "Modify parameters" }).click();
-  await expect(page.getByRole("heading", { level: 1 })).toContainText(
-    "Modify Card Parameters",
-  );
+  await expect(heading).toContainText("Modify Card Parameters");
 
   // Go to stage 4
   await page.getByRole("button", { name: "Select theme" }).click();
-  await expect(page.getByRole("heading", { level: 1 })).toContainText(
-    "Choose a Theme",
-  );
+  await expect(heading).toContainText("Choose a Theme");
 
   // Go to stage 5
   await page.getByRole("button", { name: "Display card" }).click();
-  await expect(page.getByRole("heading", { level: 1 })).toContainText(
-    "Display your Card",
-  );
+  await expect(heading).toContainText("Display your Card");
 });

apps/frontend/e2e/docs-card-previews.spec.ts

@@ -0,0 +1,136 @@
+import { expect, test } from "@playwright/test";
+import type { Page } from "@playwright/test";
+
+/*
+ * `rehypeCardImages` assembles the previews at build time,
+ * so the markdown names neither the themes nor the classes asserted on here.
+ */
+const cardImage = (page: Page, alt: string, variant: "light" | "dark") =>
+  page.locator(`main img[alt="${alt}"].card-preview-${variant}`);
+
+test("a preview that names no theme renders one image per site theme", async ({
+  page,
+}) => {
+  await page.goto("docs/");
+
+  await expect(cardImage(page, "Top Langs", "light")).toHaveAttribute(
+    "src",
+    "/api/top-langs?username=anuraghazra&langs_count=4&theme=light_github",
+  );
+  await expect(cardImage(page, "Top Langs", "dark")).toHaveAttribute(
+    "src",
+    "/api/top-langs?username=anuraghazra&langs_count=4&theme=dark_github",
+  );
+});
+
+test("the pin and gist previews use the repocard themes", async ({ page }) => {
+  await page.goto("docs/");
+
+  for (const alt of ["Readme Card", "Gist Card"]) {
+    await expect(cardImage(page, alt, "light")).toHaveAttribute(
+      "src",
+      /theme=light_github_repocard$/,
+    );
+    await expect(cardImage(page, alt, "dark")).toHaveAttribute(
+      "src",
+      /theme=dark_github_repocard$/,
+    );
+  }
+});
+
+test("a preview links to itself, unless the markdown links it elsewhere", async ({
+  page,
+}) => {
+  await page.goto("docs/");
+
+  // Opening a preview shows its query string, so each copy links to its own theme.
+  await expect(
+    page.locator('main a.card-preview-light:has(img[alt="Top Langs"])'),
+  ).toHaveAttribute(
+    "href",
+    "/api/top-langs?username=anuraghazra&langs_count=4&theme=light_github",
+  );
+
+  // The repo card already points at the repo it describes, which is more useful.
+  await expect(
+    page.locator('main a:has(img[alt="Readme Card"])'),
+  ).toHaveAttribute(
+    "href",
+    "https://github.com/anuraghazra/github-readme-stats",
+  );
+});
+
+test("a preview that names a theme stays a single image", async ({ page }) => {
+  await page.goto("docs/customization/theming/");
+
+  await expect(page.locator('main img[src*="theme=transparent"]')).toHaveCount(
+    1,
+  );
+});
+
+test("every sample on the themes page is deferred and links to itself", async ({
+  page,
+}) => {
+  await page.goto("docs/customization/themes/");
+
+  const samples = page.locator('main img[src^="/api"]');
+  await expect(samples).not.toHaveCount(0);
+  await expect(
+    page.locator('main a[href^="/api"] > img[src^="/api"]'),
+  ).toHaveCount(await samples.count());
+  await expect(
+    page.locator('main img[src^="/api"]:not([loading="lazy"])'),
+  ).toHaveCount(0);
+});
+
+test("cards laid out as HTML are deferred, not split", async ({ page }) => {
+  await page.goto("docs/customization/aligning-cards/");
+
+  // The rows are hand-written HTML, so only the plugin's raw branch reaches them.
+  await expect(
+    page.locator('main .card-row img:not([loading="lazy"])'),
+  ).toHaveCount(0);
+
+  // Each already names a theme, so the pairs stay as the markdown wrote them.
+  await expect(page.locator('main .card-row img[src^="/api"]')).toHaveCount(8);
+  await expect(
+    page.locator("main .card-row img.card-preview-light"),
+  ).toHaveCount(4);
+  await expect(
+    page.locator("main .card-row img.card-preview-dark"),
+  ).toHaveCount(4);
+});
+
+// Starlight server-renders its theme onto `<html>`, which `prefers-color-scheme` cannot see.
+test.describe("in a browser set to dark", () => {
+  test.use({ colorScheme: "dark" });
+
+  test("the visible preview follows the site theme, not the browser", async ({
+    page,
+  }) => {
+    const requested: Array<string> = [];
+    page.on("request", (request) => requested.push(request.url()));
+
+    await page.goto("docs/");
+    await expect(cardImage(page, "Top Langs", "dark")).toBeVisible();
+    await expect(cardImage(page, "Top Langs", "light")).toBeHidden();
+
+    /*
+     * A hidden copy has no layout box, so lazy loading never requests it.
+     * The pin and gist pair is the fair comparison:
+     * both sit below the fold, where the dev server's late CSS cannot briefly reveal one.
+     */
+    await expect
+      .poll(() => requested.some((url) => url.includes("dark_github_repocard")))
+      .toBe(true);
+    expect(
+      requested.filter((url) => url.includes("light_github_repocard")),
+    ).toEqual([]);
+
+    const themeSelect = page.locator("header").getByRole("combobox");
+    await themeSelect.selectOption({ label: "Light" });
+
+    await expect(cardImage(page, "Top Langs", "light")).toBeVisible();
+    await expect(cardImage(page, "Top Langs", "dark")).toBeHidden();
+  });
+});

apps/frontend/e2e/docs-redirects.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from "@playwright/test";
+
+// Nothing links to a redirect, so the build's link validator cannot catch a broken one.
+const redirects = [
+  {
+    from: "docs/cards",
+    to: "/frontend/docs/cards/stats/",
+    heading: "Stats Card",
+  },
+  {
+    from: "docs/customization",
+    to: "/frontend/docs/customization/common-options/",
+    heading: "Common Options",
+  },
+];
+
+for (const { from, to, heading } of redirects) {
+  test(`/${from} redirects to ${to}`, async ({ page }) => {
+    for (const url of [from, `${from}/`]) {
+      await page.goto(url);
+
+      await expect(page).toHaveURL(to);
+      // Scoped to the page content: Astro's dev toolbar has headings of its own.
+      await expect(
+        page.locator("main").getByRole("heading", { level: 1 }),
+      ).toHaveText(heading);
+    }
+  });
+}

apps/frontend/e2e/stats-rank.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from "@playwright/test";
+
+test("selecting 'None' progress style hides the rank circle", async ({
+  page,
+}) => {
+  await page.goto("");
+
+  // Stage 0 -> 2: go to customization
+  await page.getByRole("button", { name: "Modify Parameters" }).click();
+  // Scoped to the page content: Astro's dev toolbar has headings of its own.
+  await expect(
+    page.locator("main").getByRole("heading", { level: 1 }),
+  ).toContainText("Modify Card Parameters");
+
+  const preview = page.locator("#svg-wrapper");
+  const rankCircle = preview.locator('[data-testid="rank-circle"]');
+
+  // Default "Rank" progress style renders the rank circle.
+  await expect(preview).toBeAttached();
+  await expect(rankCircle).toHaveCount(1);
+
+  // Scoped: the site header has a theme combobox of its own.
+  await page
+    .locator("main")
+    .getByRole("combobox")
+    .selectOption({ label: "None" });
+
+  await expect(rankCircle).toHaveCount(0);
+});

apps/frontend/e2e/wizard-auth.spec.ts

@@ -0,0 +1,62 @@
+import { expect, test } from "@playwright/test";
+import type { Page } from "@playwright/test";
+
+/**
+ * Puts the SPA into an authenticated state without contacting GitHub by
+ * stubbing the OAuth code exchange and the follow-up user-access lookup:
+ * `authenticate` returns a userId (which flips `isAuthenticated` to true), and
+ * `user-access` returns metadata so the wizard does not immediately log back out.
+ * @param page - The Playwright page to install the route handlers on.
+ */
+async function mockAuthEndpoints(page: Page): Promise<void> {
+  await page.route("**/api/authenticate**", (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ userId: "octocat", needDowngrade: false }),
+    }),
+  );
+  await page.route("**/api/user-access**", (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ token: "test-token", privateAccess: "false" }),
+    }),
+  );
+}
+
+test.describe("the wizard auth-driven stage transition", () => {
+  test("auto-advances from Login to Select a Card once authenticated", async ({
+    page,
+  }) => {
+    await mockAuthEndpoints(page);
+
+    // Land on the app as GitHub does after the OAuth redirect (URL carries `code`).
+    await page.goto("?code=test-oauth-code");
+
+    // the wizard starts unauthenticated on stage 0 ("Login"). When the code
+    // exchange flips `isAuthenticated` false -> true, the render-phase
+    // transition must advance the stepper to stage 1 ("Select a Card").
+    // Scoped to the page content: Astro's dev toolbar has headings of its own.
+    await expect(
+      page.locator("main").getByRole("heading", { level: 1 }),
+    ).toContainText("Select a Card");
+  });
+
+  test("keeps a manually selected earlier step instead of re-forcing it", async ({
+    page,
+  }) => {
+    await mockAuthEndpoints(page);
+    await page.goto("?code=test-oauth-code");
+
+    const heading = page.locator("main").getByRole("heading", { level: 1 });
+    await expect(heading).toContainText("Select a Card");
+
+    // Going back to "Login" while still authenticated must stick: the transition
+    // fires only on an auth *change*, so a later render must not snap the user
+    // forward again. A bug that dropped the previous-value guard would bounce
+    // the heading straight back to "Select a Card" here.
+    await page.getByRole("button", { name: "Login" }).click();
+    await expect(heading).toContainText("Login");
+  });
+});

apps/frontend/index.html

@@ -1,44 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="title" content="GitHub Stats Extended" />
-    <meta
-      name="description"
-      content="Dynamically generate GitHub stats for your READMEs."
-    />
-
-    <meta property="og:type" content="website" />
-    <meta
-      property="og:url"
-      content="https://github-stats-extended.vercel.app/frontend"
-    />
-    <meta property="og:title" content="GitHub Stats Extended" />
-    <meta
-      property="og:description"
-      content="Dynamically generate GitHub stats for your READMEs."
-    />
-
-    <!-- 
-      https://vite.dev/guide/assets#the-public-directory
-    -->
-
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="/manifest.json" />
-
-    <title>GitHub Stats Extended</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>

apps/frontend/package.json

@@ -4,40 +4,39 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
     "test": "vitest",
     "test:e2e": "playwright test",
-    "lint": "eslint",
-    "typecheck": "tsc -p tsconfig.typecheck.json"
-  },
-  "dependencies": {
-    "@reduxjs/toolkit": "^2.11.2",
-    "@tailwindcss/vite": "^4.2.2",
-    "axios": "^1",
-    "axios-cache-interceptor": "^1",
-    "daisyui": "^5.5.19",
-    "@stats-organization/github-readme-stats-backend": "workspace:^",
-    "@stats-organization/github-readme-stats-core": "workspace:^",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-icons": "^5.6.0",
-    "react-loading-skeleton": "^3.3.1",
-    "react-redux": "^9.2.0",
-    "react-spinners": "^0.17.0",
-    "react-toastify": "^11.1.0",
-    "redux": "^5.0.1",
-    "save-svg-as-png": "^1.4.17",
-    "uuid": "^14.0.0"
+    "lint": "astro sync && eslint",
+    "typecheck": "astro sync && tsc -p tsconfig.typecheck.json"
   },
   "devDependencies": {
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "6.0.1",
+    "@astrojs/markdown-remark": "7.2.4",
+    "@astrojs/react": "^6.0.5",
+    "@astrojs/starlight": "^0.41.11",
+    "@reduxjs/toolkit": "^2.12.0",
+    "@stats-organization/github-readme-stats-core": "workspace:^",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "astro": "^7.2.3",
+    "axios": "catalog:default",
+    "axios-cache-interceptor": "^1.12.1",
     "clsx": "2.1.1",
-    "tailwindcss": "4.2.2",
-    "vite": "catalog:default",
+    "daisyui": "^5.7.37",
+    "jsdom": "catalog:default",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-icons": "^5.7.0",
+    "react-redux": "^9.3.0",
+    "react-spinners": "^0.17.1",
+    "react-toastify": "^11.1.0",
+    "redux": "^5.0.1",
+    "starlight-links-validator": "0.25.3",
+    "tailwindcss": "4.3.3",
+    "uuid": "^14.0.2",
     "vitest": "catalog:default"
   },
   "browserslist": {

apps/frontend/playwright.config.ts

@@ -8,7 +8,7 @@ import { defineConfig, devices } from "@playwright/test";
 // import path from 'path';
 // dotenv.config({ path: path.resolve(__dirname, '.env') });
 
-const baseURL = "http://localhost:5173/frontend/";
+const baseURL = "http://localhost:4321/frontend/";
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -25,6 +25,8 @@ export default defineConfig({
   workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: "html",
+  // The wizard is a client-only island; on a cold dev server its bundle takes a while.
+  expect: { timeout: 15_000 },
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('')`. */
@@ -77,5 +79,12 @@ export default defineConfig({
     command: "pnpm run dev",
     url: baseURL,
     reuseExistingServer: !process.env["CI"],
+    env: {
+      // `astro dev` detaches itself in an AI-agent shell, which reads as exiting early.
+      ASTRO_DEV_BACKGROUND: "1",
+      // `STUB_CARD_API` has the dev server answer `/api` itself, instead of proxying
+      // the card endpoints to a backend that is not running here.
+      STUB_CARD_API: "1",
+    },
   },
 });

apps/frontend/src/axios-override.ts

@@ -8,17 +8,19 @@ import {
   DEMO_WAKATIME_USER,
   HOST,
 } from "./constants";
-import additionalUserStars from "./mockData/additional_user_stars.json" with { type: "json" };
-import commentedIssues from "./mockData/commented_issues.json" with { type: "json" };
-import commentedPrs from "./mockData/commented_prs.json" with { type: "json" };
-import commits from "./mockData/commits.json" with { type: "json" };
-import gist_graphql from "./mockData/gist-graphql.json" with { type: "json" };
-import gist_rest from "./mockData/gist-rest.json" with { type: "json" };
-import repository from "./mockData/repository.json" with { type: "json" };
-import reviewedPrs from "./mockData/reviewed_prs.json" with { type: "json" };
-import topLanguages from "./mockData/top_languages.json" with { type: "json" };
-import userStats from "./mockData/user_stats.json" with { type: "json" };
-import wakatimeProxy from "./mockData/wakatime_proxy.json" with { type: "json" };
+import additionalUserStars from "./wizard/mockData/additional_user_stars.json" with { type: "json" };
+import commentedIssues from "./wizard/mockData/commented_issues.json" with { type: "json" };
+import commentedPrs from "./wizard/mockData/commented_prs.json" with { type: "json" };
+import commits from "./wizard/mockData/commits.json" with { type: "json" };
+import contributions from "./wizard/mockData/contributions.json" with { type: "json" };
+import gist_graphql from "./wizard/mockData/gist-graphql.json" with { type: "json" };
+import gist_rest from "./wizard/mockData/gist-rest.json" with { type: "json" };
+import reposContributedTo from "./wizard/mockData/repos_contributed_to.json" with { type: "json" };
+import repository from "./wizard/mockData/repository.json" with { type: "json" };
+import reviewedPrs from "./wizard/mockData/reviewed_prs.json" with { type: "json" };
+import topLanguages from "./wizard/mockData/top_languages.json" with { type: "json" };
+import userStats from "./wizard/mockData/user_stats.json" with { type: "json" };
+import wakatimeProxy from "./wizard/mockData/wakatime_proxy.json" with { type: "json" };
 
 const cachedAxios = setupCache(axios, {
   // Cache for 30 minutes
@@ -88,9 +90,7 @@ axios.defaults.adapter = async (config) => {
 
   if (
     config.url === "https://api.github.com/graphql" &&
-    params.query?.includes(
-      "query userInfo($login: String!, $after: String, $includeMergedPullRequests:",
-    ) &&
+    params.query?.includes("query userInfo(") &&
     params.variables?.login === DEMO_USER
   ) {
     return createMockResponse(userStats, config);
@@ -98,9 +98,7 @@ axios.defaults.adapter = async (config) => {
 
   if (
     config.url === "https://api.github.com/graphql" &&
-    params.query?.includes(
-      "query userInfo($login: String!, $after: String, $ownerAffiliations:",
-    ) &&
+    params.query?.includes("query userRepos(") &&
     params.variables?.login === DEMO_USER
   ) {
     return createMockResponse(additionalUserStars, config);
@@ -108,9 +106,23 @@ axios.defaults.adapter = async (config) => {
 
   if (
     config.url === "https://api.github.com/graphql" &&
-    params.query?.includes(
-      "query userInfo($login: String!, $ownerAffiliations:",
-    ) &&
+    params.query?.includes("query userContributions(") &&
+    params.variables?.login === DEMO_USER
+  ) {
+    return createMockResponse(contributions, config);
+  }
+
+  if (
+    config.url === "https://api.github.com/graphql" &&
+    params.query?.includes("query userReposContributedTo(") &&
+    params.variables?.login === DEMO_USER
+  ) {
+    return createMockResponse(reposContributedTo, config);
+  }
+
+  if (
+    config.url === "https://api.github.com/graphql" &&
+    params.query?.includes("query topLanguages(") &&
     params.variables?.login === DEMO_USER
   ) {
     return createMockResponse(topLanguages, config);
@@ -118,7 +130,7 @@ axios.defaults.adapter = async (config) => {
 
   if (
     config.url === "https://api.github.com/graphql" &&
-    params.query?.includes("fragment RepoInfo on Repository {") &&
+    params.query?.includes("query getRepo(") &&
     params.variables &&
     params.variables.login === DEMO_REPO.split("/")[0] &&
     params.variables.repo === DEMO_REPO.split("/")[1]

apps/frontend/src/components/Card/Card.tsx

@@ -1,43 +0,0 @@
-import { clsx } from "clsx";
-import type { JSX } from "react";
-
-import { CardImage } from "./CardImage";
-
-interface CardProps {
-  title: string;
-  description: string;
-  imageSrc: string;
-  stage: number;
-  selected?: boolean;
-  compact?: boolean;
-  fixedSize?: boolean;
-}
-
-export const Card = ({
-  title,
-  description,
-  imageSrc,
-  stage,
-  selected = false,
-  compact = false,
-  fixedSize = false,
-}: CardProps): JSX.Element => {
-  return (
-    <div
-      className={clsx("p-6 rounded border-2", {
-        "h-[370px] w-[510px]": fixedSize,
-        "border-blue-500 bg-blue-50": selected,
-        "border-gray-200 bg-white hover:bg-gray-50": !selected,
-      })}
-    >
-      <h2 className="text-xl font-medium title-font text-gray-900">{title}</h2>
-      <p className="text-base leading-relaxed mt-2 mb-4">{description}</p>
-      <CardImage
-        imageSrc={imageSrc}
-        compact={compact}
-        className={clsx({ "flex justify-center": fixedSize })}
-        stage={stage}
-      />
-    </div>
-  );
-};

apps/frontend/src/components/Generic/Button.tsx

@@ -1,22 +0,0 @@
-import { clsx } from "clsx";
-import type { HTMLProps, JSX, ReactNode } from "react";
-
-interface ButtonProps extends HTMLProps<HTMLButtonElement> {
-  children: ReactNode;
-}
-
-export function Button(props: ButtonProps): JSX.Element {
-  const { className, children, ...rest } = props;
-  return (
-    <button
-      {...rest}
-      type="button"
-      className={clsx(
-        "border-0 py-2 px-6 inline-flex focus:outline-none rounded-[0.25rem] text-lg",
-        className,
-      )}
-    >
-      {children}
-    </button>
-  );
-}

apps/frontend/src/components/Home/NumericSection.tsx

@@ -1,77 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import type { JSX, ReactNode } from "react";
-
-import { Section } from "./Section";
-
-interface NumericSectionProps {
-  title: string;
-  description: ReactNode;
-  value?: number | undefined;
-  onValueChange: (value: number | undefined) => void;
-  min: number;
-  max: number;
-  step?: number;
-  disabled?: boolean;
-  placeholder?: string;
-}
-
-export function NumericSection({
-  title,
-  description,
-  value,
-  onValueChange,
-  min,
-  max,
-  step = 1,
-  disabled = false,
-  placeholder,
-}: NumericSectionProps): JSX.Element {
-  const [internalValue, setInternalValue] = useState(() => value?.toString());
-  const debounceTimeout = useRef<number | null>(null);
-
-  useEffect(() => {
-    // Debounce onValueChange
-    if (debounceTimeout.current) {
-      clearTimeout(debounceTimeout.current);
-    }
-    if (internalValue === value) {
-      return undefined;
-    }
-
-    debounceTimeout.current = window.setTimeout(() => {
-      const maybeNumber = internalValue && parseInt(internalValue, 10);
-      if (typeof maybeNumber !== "number" || Number.isNaN(maybeNumber)) {
-        onValueChange(undefined);
-      } else {
-        onValueChange(maybeNumber);
-      }
-    }, 700);
-
-    return () => {
-      clearTimeout(debounceTimeout.current as number);
-    };
-  }, [internalValue, onValueChange, value]);
-
-  useEffect(() => {
-    setInternalValue(value?.toString());
-  }, [value]);
-
-  return (
-    <Section title={title}>
-      <p>{description}</p>
-      <input
-        type="number"
-        className="border border-gray-300 bg-white rounded px-2 py-1 mt-2 w-1/4"
-        value={internalValue ?? ""}
-        onChange={(e) => {
-          setInternalValue(e.target.value);
-        }}
-        min={min}
-        max={max}
-        step={step}
-        disabled={disabled}
-        placeholder={placeholder}
-      />
-    </Section>
-  );
-}

apps/frontend/src/components/Home/Progress.tsx

@@ -1,99 +0,0 @@
-import { clsx } from "clsx";
-import type { JSX, MouseEventHandler } from "react";
-import {
-  FaArrowLeft as LeftArrowIcon,
-  FaArrowRight as RightArrowIcon,
-} from "react-icons/fa";
-
-interface ProgressSectionProps {
-  num: number;
-  item: string;
-  passed: boolean;
-  isActive: boolean;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-}
-
-function ProgressSection({
-  num,
-  item,
-  passed,
-  isActive,
-  onClick,
-}: ProgressSectionProps): JSX.Element {
-  return (
-    <button
-      className={clsx(
-        "w-1/4 flex flex-col mx-2 p-2 cursor-pointer",
-        passed ? "border-blue-500" : "border-gray-500",
-        isActive ? "border-t-[14px] -mt-[5px]" : "border-t-4",
-      )}
-      type="button"
-      onClick={onClick}
-    >
-      <div
-        className={clsx("text-lg font-bold", {
-          "text-blue-500": passed,
-          "text-gray-500": !passed,
-          "-mt-[4px]": isActive,
-        })}
-      >
-        {`Step ${num + 1}`}
-      </div>
-      <div className={passed ? "text-gray-700" : "text-gray-500"}>{item}</div>
-    </button>
-  );
-}
-
-interface ProgressBarProps {
-  items: Array<string>;
-  currItemIndex: number;
-  onItemClick: (itemIndex: number) => void;
-}
-
-export function ProgressBar({
-  items,
-  currItemIndex,
-  onItemClick,
-}: ProgressBarProps): JSX.Element {
-  const leftDisabled = currItemIndex === 0;
-  const rightDisabled = currItemIndex === items.length - 1;
-
-  return (
-    <div className="w-full flex items-center sticky top-0 bg-gray-200 z-50 pt-3 pb-1 px-1 md:px-20 shadow-md">
-      <LeftArrowIcon
-        className={clsx("w-8 h-8", {
-          "text-gray-400 cursor-not-allowed": leftDisabled,
-          "text-gray-700 cursor-pointer": !leftDisabled,
-        })}
-        onClick={() => {
-          onItemClick(Math.max(currItemIndex - 1, 0));
-        }}
-      />
-      <div className="px-2 flex-grow flex flex-row">
-        {items.map((item, index) => {
-          return (
-            <ProgressSection
-              num={index}
-              key={item} // each step should have a unique name
-              item={item}
-              passed={currItemIndex >= index}
-              isActive={currItemIndex === index}
-              onClick={() => {
-                onItemClick(index);
-              }}
-            />
-          );
-        })}
-      </div>
-      <RightArrowIcon
-        className={clsx("w-8 h-8", {
-          "text-gray-400 cursor-not-allowed": rightDisabled,
-          "text-gray-700 cursor-pointer": !rightDisabled,
-        })}
-        onClick={() => {
-          onItemClick(Math.min(currItemIndex + 1, items.length - 1));
-        }}
-      />
-    </div>
-  );
-}

apps/frontend/src/components/Home/Section.tsx

@@ -1,27 +0,0 @@
-import type { JSX, ReactNode } from "react";
-import { HiOutlineLightningBolt as LightningIcon } from "react-icons/hi";
-
-interface SectionProps {
-  title: string;
-  children: ReactNode;
-}
-
-export function Section({ title, children }: SectionProps): JSX.Element {
-  return (
-    <div className="flex relative pb-12">
-      <div className="h-full w-10 absolute inset-0 flex items-center justify-center">
-        <div className="h-full w-1 bg-gray-200 pointer-events-none" />
-      </div>
-      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 inline-flex items-center justify-center text-white relative z-10">
-        <LightningIcon className="w-5 h-5" />
-      </div>
-
-      <div className="flex-grow pl-4">
-        <h2 className="font-medium title-font text-sm text-gray-900 mb-1 tracking-wider">
-          {title}
-        </h2>
-        {children}
-      </div>
-    </div>
-  );
-}

apps/frontend/src/components/Home/TextSection.tsx

@@ -1,71 +0,0 @@
-import { clsx } from "clsx";
-import { useEffect, useRef, useState } from "react";
-import type { ClipboardEventHandler, JSX, ReactNode } from "react";
-
-import { Section } from "./Section";
-
-interface TextSectionProps {
-  title: string;
-  description: ReactNode;
-  value: string;
-  onValueChange: (value: string) => void;
-
-  disabled?: boolean;
-  placeholder?: string;
-
-  onPaste?: ClipboardEventHandler<HTMLInputElement>;
-}
-
-export function TextSection({
-  title,
-  description,
-  value,
-  onValueChange,
-  disabled = false,
-  placeholder,
-  onPaste,
-}: TextSectionProps): JSX.Element {
-  const [internalValue, setInternalValue] = useState(value);
-  const debounceTimeout = useRef<number | null>(null);
-
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
-  useEffect(() => {
-    // Debounce onValueChange
-    if (debounceTimeout.current) {
-      window.clearTimeout(debounceTimeout.current);
-    }
-    if (internalValue === value) {
-      return undefined;
-    }
-    debounceTimeout.current = window.setTimeout(() => {
-      onValueChange(internalValue);
-    }, 700);
-    // return cleanup function:
-    return () => {
-      window.clearTimeout(debounceTimeout.current as number);
-    };
-  }, [internalValue, onValueChange, value]);
-
-  return (
-    <Section title={title}>
-      <p>{description}</p>
-      <input
-        type="text"
-        className={clsx(
-          "border border-gray-300 rounded px-2 py-1 mt-2 w-3/4 min-w-48 max-w-xl",
-          { "cursor-not-allowed bg-gray-100": disabled, "bg-white": !disabled },
-        )}
-        value={internalValue}
-        onChange={(e) => {
-          setInternalValue(e.target.value);
-        }}
-        disabled={disabled}
-        placeholder={placeholder}
-        onPaste={onPaste}
-      />
-    </Section>
-  );
-}

apps/frontend/src/components/SiteTitle.astro

@@ -0,0 +1,56 @@
+---
+// Starlight has no nav slot, so the two top-level destinations sit beside the title.
+import Default from "@astrojs/starlight/components/SiteTitle.astro";
+
+const base = import.meta.env.BASE_URL.replace(/\/$/, "");
+const path = Astro.url.pathname;
+const links = [
+  { href: `${base}/`, label: "Wizard", current: !path.startsWith(`${base}/docs`) },
+  { href: `${base}/docs/`, label: "Docs", current: path.startsWith(`${base}/docs`) },
+];
+---
+
+<Default><slot /></Default>
+
+<nav class="app-nav">
+  {
+    links.map(({ href, label, current }) => (
+      <a href={href} aria-current={current ? "page" : undefined}>
+        {label}
+      </a>
+    ))
+  }
+</nav>
+
+<style>
+  .app-nav {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    /* The title wrapper clips its overflow, so the links sit outside it. */
+    margin-inline-start: 1rem;
+  }
+
+  .app-nav a {
+    color: var(--sl-color-white);
+    font-size: var(--sl-text-base);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .app-nav a:hover {
+    color: var(--sl-color-text-accent);
+  }
+
+  .app-nav a[aria-current="page"] {
+    color: var(--sl-color-text-accent);
+    font-weight: 600;
+  }
+
+  /* The header gets cramped before the search box collapses. */
+  @media (max-width: 50rem) {
+    .app-nav {
+      display: none;
+    }
+  }
+</style>

apps/frontend/src/constants.ts

@@ -1,6 +1,6 @@
 export const USE_LOGGER = true as boolean;
 
-export const CLIENT_ID = "Ov23liZSweT9LJrck9i8";
+export const CLIENT_ID = "Ov23lilAc5biyyRY0K1u";
 
 export const HOST = window.location.host;
 

apps/frontend/src/content.config.ts

@@ -0,0 +1,13 @@
+import { defineCollection } from "astro:content";
+
+import { docsLoader } from "@astrojs/starlight/loaders";
+import { docsSchema } from "@astrojs/starlight/schema";
+
+/*
+ * Starlight fixes this collection at `src/content/docs/` and maps it to the site root,
+ * which the wizard owns — hence the pages sitting one level down, in `docs/`.
+ * https://starlight.astro.build/guides/pages/#pages-from-markdown
+ */
+export const collections = {
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};