From 12a10b007d1135ab4af34f3eb6345e1cbd3e61c5 Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Thu, 24 Oct 2024 14:00:02 +0200
Subject: [PATCH 01/15] Finally get some badges rendering

---
 .../[projectUrl]/badge/+page.server.ts        | 212 ++++++++++++++++++
 .../project/[projectUrl]/badge/+page.svelte   |  15 ++
 .../embed/project/[projectUrl]/badge/badge.ts |   6 +
 .../[projectUrl]/badge/drips-badge.svelte     |  68 ++++++
 .../[projectUrl]/badge/github-badge.svelte    |  12 +
 5 files changed, 313 insertions(+)
 create mode 100644 src/routes/embed/project/[projectUrl]/badge/+page.server.ts
 create mode 100644 src/routes/embed/project/[projectUrl]/badge/+page.svelte
 create mode 100644 src/routes/embed/project/[projectUrl]/badge/badge.ts
 create mode 100644 src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
 create mode 100644 src/routes/embed/project/[projectUrl]/badge/github-badge.svelte

diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
new file mode 100644
index 000000000..6d0a5daa7
--- /dev/null
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
@@ -0,0 +1,212 @@
+// import type { RequestHandler } from './$types';
+// import DripsBadge from './drips-badge';
+// import GithubBadge from './github-badge';
+
+
+// import assert from '$lib/utils/assert';
+// import { error } from '@sveltejs/kit';
+// import loadImage from '../../loadImage';
+// import getContrastColor from '$lib/utils/get-contrast-text-color';
+// import satori from 'satori';
+// import { html as toReactElement } from 'satori-html';
+// import loadFonts from '../../loadFonts';
+// import { Resvg } from '@resvg/resvg-js';
+// import getBackgroundImage from '../../getBackgroundImage';
+// import { gql } from 'graphql-request';
+// import query from '$lib/graphql/dripsQL';
+// import isClaimed from '$lib/utils/project/is-claimed';
+// import type { ProjectQuery, ProjectQueryVariables } from './__generated__/gql.generated';
+// import sanitize from 'sanitize-html';
+// import twemoji from '$lib/utils/twemoji';
+// import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
+// import network from '$lib/stores/wallet/network';
+
+
+export async function load({ params }) {
+	return { params }
+}
+
+// export const GET: RequestHandler = async ({ url, fetch, params }) => {
+//   const renderedComponent = DripsBadge.render({
+//     background: 'cool',
+//     text: 'mcdonalds',
+//     stat: 'micro!'
+//   })
+
+//   const element = toReactElement(renderedComponent.html)
+
+//   const svg = await satori(element, {
+//     height: 32,
+//     width: 172,
+//     fonts: await loadFonts(fetch),
+//   })
+
+//   const resvg = new Resvg(svg, {
+//     fitTo: {
+//       mode: 'width',
+//       value: 1200,
+//     },
+//   });
+
+//   const image = resvg.render().asPng();
+
+//   return new Response(image, {
+//     headers: {
+//       'content-type': 'image/png',
+//       'cache-control': 'public, max-age=86400', // 24 hours
+//     },
+//   });
+// }
+
+// embeds/project/whatever.com?background=light&buttonText=me&style=drips&stat=dependencies
+
+// export const GET: RequestHandler = async ({ url, fetch, params }) => {
+//   const { projectUrl } = params;
+//   assert(projectUrl, 'Missing projectUrl param');
+
+//   const projectQuery = gql`
+//     query Project($url: String!, $chains: [SupportedChain!]) {
+//       projectByUrl(url: $url, chains: $chains) {
+//         source {
+//           ownerName
+//           repoName
+//         }
+//         chainData {
+//           ... on UnClaimedProjectData {
+//             chain
+//           }
+//           ... on ClaimedProjectData {
+//             chain
+//             avatar {
+//               ... on ImageAvatar {
+//                 cid
+//               }
+//               ... on EmojiAvatar {
+//                 emoji
+//               }
+//             }
+//             color
+//             splits {
+//               dependencies {
+//                 __typename
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   `;
+
+//   const res = await query<ProjectQuery, ProjectQueryVariables>(
+//     projectQuery,
+//     { url: projectUrl, chains: [network.gqlName] },
+//     fetch,
+//   );
+//   const { projectByUrl: project } = res;
+//   try {
+//     assert(project);
+//   } catch {
+//     error(404);
+//   }
+
+//   const projectName = `${project.source.ownerName}/${project.source.repoName}`;
+
+//   const projectData = filterCurrentChainData(project.chainData);
+
+//   const emoji =
+//     isClaimed(projectData) && projectData.avatar.__typename === 'EmojiAvatar'
+//       ? sanitize(projectData.avatar.emoji, {
+//           allowedTags: [],
+//           allowedAttributes: {},
+//         })
+//       : 'none';
+
+//   const cid =
+//     isClaimed(projectData) && projectData.avatar.__typename === 'ImageAvatar'
+//       ? projectData.avatar.cid
+//       : 'none';
+
+//   const dependenciesCount = isClaimed(projectData)
+//     ? projectData.splits.dependencies.length.toString()
+//     : '0';
+
+//   const color = isClaimed(projectData) ? projectData.color : 'none';
+//   const target = url.searchParams.get('target');
+
+//   try {
+//     assert(target === 'twitter' || target === 'og');
+//   } catch {
+//     error(400, 'Invalid or missing query params');
+//   }
+
+//   const height = target === 'twitter' ? 600 : 675;
+
+//   const bgColor = color === 'none' ? '#5555FF' : color;
+//   const contrastColor = getContrastColor(bgColor);
+
+//   const bgTheme = contrastColor === 'black' ? 'dark' : 'light';
+//   const boxIconDataURI = await loadImage(`/assets/share/box-${bgTheme}.png`, fetch);
+
+//   const textColor = contrastColor === 'black' ? '#333333' : '#FFFFFF';
+
+//   const dependenciesString = dependenciesCount === '1' ? 'Dependency' : 'Dependencies';
+
+//   const twemojiElem = (emoji !== 'none' && twemoji(emoji)) ?? undefined;
+//   const twemojiSrc = (twemojiElem && /src\s*=\s*"(.+?)"/g.exec(twemojiElem)?.[1]) ?? undefined;
+
+//   const twemojiImg = twemojiSrc && (await (await fetch(twemojiSrc)).text());
+
+//   const resizedTwemojImg =
+//     typeof twemojiImg === 'string'
+//       ? twemojiImg.replace('<svg', '<svg height="60%" width="60%"')
+//       : '';
+
+//   const avatarHtml =
+//     isClaimed(projectData) && projectData.avatar.__typename === 'ImageAvatar'
+//       ? `<div style="display: flex; align-items: center; justify-content: center; height: 128px; width: 128px; border-radius: 64px; background-color: white; ">
+//         <img height="100%" width="100%" src="https://drips.network/api/custom-avatars/${cid}" style="border-radius: 50%; border: 1px solid black" />
+//       </div>`
+//       : `<div style="display: flex; align-items: center; justify-content: center; height: 128px; width: 128px; border-radius: 64px; background-color: white;">
+//           ${resizedTwemojImg}
+//         </div>`;
+
+//   const svg = await satori(
+//     toReactElement(`<div style="display: flex; background-color: ${bgColor}">
+//       ${getBackgroundImage(bgColor, textColor, target)}
+//       <div style="position: absolute; bottom: 40px; left: 40px; right: 200px; display: flex; flex-direction: column; color: ${textColor}; gap: 24px;">
+//         <span style="font-family: Inter; font-size: 40px">Project</span>
+//         <div style="display: flex; gap: 32px;">
+//         ${avatarHtml}
+//           <span style="font-family: Redaction; width: 1000px; font-size: 90px; display: block; line-clamp: 2;">${projectName}</span>
+//         </div>
+//         <div style="display: flex; gap: 24px; align-items: center; opacity: ${
+//           dependenciesCount === '0' ? '0' : '1'
+//         }">
+//           <img src="${boxIconDataURI}" height="64px" width="64px" />
+//           <span style="font-family: Inter; font-size: 40px">${dependenciesCount} ${dependenciesString}</span>
+//         </div>
+//       </div>
+//     </div>`),
+//     {
+//       width: 1200,
+//       height: height,
+//       fonts: await loadFonts(fetch),
+//     },
+//   );
+
+//   const resvg = new Resvg(svg, {
+//     fitTo: {
+//       mode: 'width',
+//       value: 1200,
+//     },
+//   });
+
+//   const image = resvg.render();
+
+//   return new Response(image.asPng(), {
+//     headers: {
+//       'content-type': 'image/png',
+//       'cache-control': 'public, max-age=86400', // 24 hours
+//     },
+//   });
+// };
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.svelte b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
new file mode 100644
index 000000000..9b766e8cd
--- /dev/null
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
@@ -0,0 +1,15 @@
+<script>
+  import DripsBadge from './drips-badge.svelte'
+  import GithubBadge from './github-badge.svelte'
+
+  export let data;
+</script>
+
+<div data-theme='none'>
+  Hello World {data}
+  <DripsBadge/>
+  <GithubBadge/>
+</div>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.ts b/src/routes/embed/project/[projectUrl]/badge/badge.ts
new file mode 100644
index 000000000..b9180a9dd
--- /dev/null
+++ b/src/routes/embed/project/[projectUrl]/badge/badge.ts
@@ -0,0 +1,6 @@
+export type BadgeData = {
+  support?: number;
+  dependencies?: number;
+  projectName?: string;
+  projectImageUrl?: string;
+}
diff --git a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
new file mode 100644
index 000000000..aa9de5518
--- /dev/null
+++ b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import Drip from "$lib/components/illustrations/drip.svelte";
+  import { type BadgeData } from "./badge";
+
+  export let text: 'project' | 'me' | 'us' = 'me';
+  export let background: 'dark' | 'light' | 'blue' = 'light';
+  export let stat: 'support' | 'dependencies' | 'none' = 'none';
+  export let data: BadgeData;
+
+  $: dripFill = background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)'
+  $: dependencies = data?.dependencies || 0
+  $: dependenciesString = dependencies && dependencies === 1 ?
+    `Splitting to ${dependencies} Dependency` :
+    `Splitting to ${dependencies} Dependencies`
+</script>
+
+<div
+  class={`embed-badge embed-badge--drips embed-badge--${background} embed-badge--${text} embed-badge--${stat}`}
+  >
+  <span class="embed-badge__icon">
+    <Drip fill={dripFill}/>
+  </span>
+
+  <span class="embed-badge__text">
+  {#if text === 'me'}
+    Drip to me
+  {:else if text === 'us'}
+    Support on Drips
+  {:else if text === 'project'}
+    Support on <img src={data.projectImageUrl} alt="{data.projectName} avatar"/><em>{data.projectName}</em> on Drips
+  {/if}
+  </span>
+
+  {#if stat === 'support'}
+    <span class="embed-badge__support">{data.support}</span>
+  {:else if stat === 'dependencies'}
+    <span class="embed-badge__dependencies">{dependenciesString}</span>
+  {/if}
+</div>
+
+<style>
+  .embed-badge--drips {
+    border: 1px solid var(--color-foreground);
+    padding: 0 10px;
+    border-radius: 1rem 0 1rem 1rem;
+    display: inline-flex;
+    gap: 7px;
+    align-items: center;
+    height: 32px;
+    background: var(--color-background);
+  }
+
+  .embed-badge__icon {
+    width: 12px;
+    display: flex;
+    align-items: center;
+  }
+
+  .embed-badge--drips.embed-badge--dark {
+    background: var(--color-foreground);
+    color: var(--color-background);
+  }
+
+  .embed-badge--drips.embed-badge--blue {
+    background: var(--color-primary);
+    color: var(--color-background);
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
new file mode 100644
index 000000000..92203b06a
--- /dev/null
+++ b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
@@ -0,0 +1,12 @@
+<script>
+</script>
+
+<div class="embed-badge embed-badge--github">
+  Github
+</div>
+
+<style>
+  .embed-badge--github {
+
+  }
+</style>
\ No newline at end of file

From d36f2f923987a8cbfa02df64a3ee9e47b819240a Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Thu, 24 Oct 2024 16:04:43 +0200
Subject: [PATCH 02/15] Move to encompasing badge component

---
 .../[projectUrl]/badge/+page.server.ts        | 23 ++++++++++++--
 .../project/[projectUrl]/badge/+page.svelte   | 11 ++-----
 .../project/[projectUrl]/badge/badge.svelte   | 16 ++++++++++
 .../embed/project/[projectUrl]/badge/badge.ts | 30 +++++++++++++++++++
 .../[projectUrl]/badge/drips-badge.svelte     | 20 ++++++-------
 .../[projectUrl]/badge/github-badge.svelte    |  6 +++-
 6 files changed, 83 insertions(+), 23 deletions(-)
 create mode 100644 src/routes/embed/project/[projectUrl]/badge/badge.svelte

diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
index 6d0a5daa7..96ac6764f 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
@@ -2,6 +2,8 @@
 // import DripsBadge from './drips-badge';
 // import GithubBadge from './github-badge';
 
+import { BadgeBackground, BadgeStat, BadgeStyle, BadgeText, type BadgeData, type BadgeOptions } from "./badge.js"
+
 
 // import assert from '$lib/utils/assert';
 // import { error } from '@sveltejs/kit';
@@ -21,9 +23,24 @@
 // import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
 // import network from '$lib/stores/wallet/network';
 
-
-export async function load({ params }) {
-	return { params }
+export async function load({ params }): Promise<{
+	badgeData: BadgeData,
+	badgeOptions: BadgeOptions
+}> {
+	return {
+		badgeData: {
+			support: 12456,
+			dependencies: 15,
+			projectName: 'cached_resource',
+			projectImageUrl: 'http://localhost:5173/api/blockies/0xe2E9b9B5d0757c26aB477A754788B19b60f2ed83'
+		},
+		badgeOptions: {
+			style: BadgeStyle.drips,
+			text: BadgeText.me,
+			background: BadgeBackground.light,
+			stat: BadgeStat.none
+		}
+	}
 }
 
 // export const GET: RequestHandler = async ({ url, fetch, params }) => {
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.svelte b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
index 9b766e8cd..c0d4fb032 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
@@ -1,15 +1,10 @@
 <script>
-  import DripsBadge from './drips-badge.svelte'
-  import GithubBadge from './github-badge.svelte'
+  import Badge from './badge.svelte'
 
   export let data;
 </script>
 
-<div data-theme='none'>
+<div>
   Hello World {data}
-  <DripsBadge/>
-  <GithubBadge/>
+  <Badge data={data.badgeData} options={data.badgeOptions}/>
 </div>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.svelte b/src/routes/embed/project/[projectUrl]/badge/badge.svelte
new file mode 100644
index 000000000..e2c305ae9
--- /dev/null
+++ b/src/routes/embed/project/[projectUrl]/badge/badge.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { BadgeData, BadgeOptions } from './badge';
+  import DripsBadge from './drips-badge.svelte'
+  import GithubBadge from './github-badge.svelte'
+
+  export let data: BadgeData;
+  export let options: BadgeOptions;
+</script>
+
+<div data-theme='none'>
+  <DripsBadge {data} {options}/>
+  <GithubBadge {data} {options}/>
+</div>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.ts b/src/routes/embed/project/[projectUrl]/badge/badge.ts
index b9180a9dd..c204a360e 100644
--- a/src/routes/embed/project/[projectUrl]/badge/badge.ts
+++ b/src/routes/embed/project/[projectUrl]/badge/badge.ts
@@ -1,3 +1,33 @@
+export enum BadgeStyle {
+  github = 'github',
+  drips = 'drips',
+}
+
+export enum BadgeText {
+  project = 'project',
+  me = 'me',
+  us = 'us',
+}
+
+export enum BadgeBackground {
+  dark = 'dark',
+  light = 'light',
+  blue = 'blue',
+}
+
+export enum BadgeStat {
+  support = 'support',
+  dependencies = 'dependencies',
+  none = 'none',
+}
+
+export type BadgeOptions = {
+  style: BadgeStyle
+  text: BadgeText
+  background: BadgeBackground
+  stat: BadgeStat
+}
+
 export type BadgeData = {
   support?: number;
   dependencies?: number;
diff --git a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
index aa9de5518..23e2de734 100644
--- a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
   import Drip from "$lib/components/illustrations/drip.svelte";
-  import { type BadgeData } from "./badge";
+  import { BadgeStat, BadgeText, type BadgeData, type BadgeOptions } from "./badge";
 
-  export let text: 'project' | 'me' | 'us' = 'me';
-  export let background: 'dark' | 'light' | 'blue' = 'light';
-  export let stat: 'support' | 'dependencies' | 'none' = 'none';
+  export let options: BadgeOptions;
   export let data: BadgeData;
 
-  $: dripFill = background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)'
+  $: dripFill = options.background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)'
   $: dependencies = data?.dependencies || 0
   $: dependenciesString = dependencies && dependencies === 1 ?
     `Splitting to ${dependencies} Dependency` :
@@ -15,25 +13,25 @@
 </script>
 
 <div
-  class={`embed-badge embed-badge--drips embed-badge--${background} embed-badge--${text} embed-badge--${stat}`}
+  class={`embed-badge embed-badge--drips embed-badge--${options.background} embed-badge--${options.text} embed-badge--${options.stat}`}
   >
   <span class="embed-badge__icon">
     <Drip fill={dripFill}/>
   </span>
 
   <span class="embed-badge__text">
-  {#if text === 'me'}
+  {#if options.text === BadgeText.me}
     Drip to me
-  {:else if text === 'us'}
+  {:else if options.text === BadgeText.us}
     Support on Drips
-  {:else if text === 'project'}
+  {:else if options.text === BadgeText.project}
     Support on <img src={data.projectImageUrl} alt="{data.projectName} avatar"/><em>{data.projectName}</em> on Drips
   {/if}
   </span>
 
-  {#if stat === 'support'}
+  {#if options.stat === BadgeStat.support}
     <span class="embed-badge__support">{data.support}</span>
-  {:else if stat === 'dependencies'}
+  {:else if options.stat === BadgeStat.dependencies}
     <span class="embed-badge__dependencies">{dependenciesString}</span>
   {/if}
 </div>
diff --git a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
index 92203b06a..4b049e735 100644
--- a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
@@ -1,4 +1,8 @@
-<script>
+<script lang="ts">
+  import { type BadgeData, type BadgeOptions } from "./badge";
+
+  export let options: BadgeOptions;
+  export let data: BadgeData;
 </script>
 
 <div class="embed-badge embed-badge--github">

From 3a1505f898e6a8a2b796be605b50159b70875d9a Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Thu, 24 Oct 2024 17:07:58 +0200
Subject: [PATCH 03/15] Nail down overall styling for badges

---
 src/lib/components/illustrations/drip.svelte  |  8 +-
 .../[projectUrl]/badge/+page.server.ts        |  4 +-
 .../project/[projectUrl]/badge/+page.svelte   |  5 +-
 .../[projectUrl]/badge/drips-badge.svelte     | 41 +++++++--
 .../[projectUrl]/badge/github-badge.svelte    | 83 ++++++++++++++++++-
 5 files changed, 124 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/illustrations/drip.svelte b/src/lib/components/illustrations/drip.svelte
index 66d5e385c..a15dd7e4e 100644
--- a/src/lib/components/illustrations/drip.svelte
+++ b/src/lib/components/illustrations/drip.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
   export let height = '38px';
   export let fill = 'var(--color-primary)';
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: string | undefined = undefined;
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 38" {height}
   >{@html `
-  <path fill=${fill} d="M.531 25.456c0-2.569 1.146-5.624 3.244-9.67 1.405-2.71 3.211-5.818 5.338-9.478.915-1.576 1.89-3.254 2.918-5.046 1.028 1.792 2.003 3.47 2.918 5.046 2.127 3.66 3.934 6.769 5.338 9.478 2.098 4.046 3.244 7.101 3.244 9.67 0 5.74-5.192 11.5-11.5 11.5s-11.5-5.76-11.5-11.5Z"/>
+  <path
+    ${stroke ? `stroke="${stroke}" ` : ''}
+    ${strokeWidth ? `stroke-width="${strokeWidth}" ` : ''}
+    fill=${fill}
+    d="M.531 25.456c0-2.569 1.146-5.624 3.244-9.67 1.405-2.71 3.211-5.818 5.338-9.478.915-1.576 1.89-3.254 2.918-5.046 1.028 1.792 2.003 3.47 2.918 5.046 2.127 3.66 3.934 6.769 5.338 9.478 2.098 4.046 3.244 7.101 3.244 9.67 0 5.74-5.192 11.5-11.5 11.5s-11.5-5.76-11.5-11.5Z"/>
 `}</svg
 >
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
index 96ac6764f..1e9c1d786 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
@@ -36,9 +36,9 @@ export async function load({ params }): Promise<{
 		},
 		badgeOptions: {
 			style: BadgeStyle.drips,
-			text: BadgeText.me,
+			text: BadgeText.project,
 			background: BadgeBackground.light,
-			stat: BadgeStat.none
+			stat: BadgeStat.support,
 		}
 	}
 }
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.svelte b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
index c0d4fb032..1b4616ae7 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
@@ -4,7 +4,4 @@
   export let data;
 </script>
 
-<div>
-  Hello World {data}
-  <Badge data={data.badgeData} options={data.badgeOptions}/>
-</div>
+<Badge data={data.badgeData} options={data.badgeOptions}/>
diff --git a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
index 23e2de734..f408d08c3 100644
--- a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
@@ -23,9 +23,9 @@
   {#if options.text === BadgeText.me}
     Drip to me
   {:else if options.text === BadgeText.us}
-    Support on Drips
+    Support us on Drips
   {:else if options.text === BadgeText.project}
-    Support on <img src={data.projectImageUrl} alt="{data.projectName} avatar"/><em>{data.projectName}</em> on Drips
+    Support <img class="embed-badge__avatar" src={data.projectImageUrl} alt="{data.projectName} avatar"/><strong>{data.projectName}</strong> on Drips
   {/if}
   </span>
 
@@ -37,6 +37,10 @@
 </div>
 
 <style>
+  .embed-badge strong {
+    font-weight: 600;
+  }
+
   .embed-badge--drips {
     border: 1px solid var(--color-foreground);
     padding: 0 10px;
@@ -48,19 +52,42 @@
     background: var(--color-background);
   }
 
+  .embed-badge--drips.embed-badge--dark {
+    background: var(--color-foreground);
+    color: var(--color-background);
+  }
+
+  .embed-badge--drips.embed-badge--blue {
+    background: var(--color-primary);
+    color: var(--color-background);
+  }
+
   .embed-badge__icon {
     width: 12px;
     display: flex;
     align-items: center;
   }
 
-  .embed-badge--drips.embed-badge--dark {
-    background: var(--color-foreground);
-    color: var(--color-background);
+  .embed-badge__text {
+    display: flex;
+    gap: 7px;
+    align-items: center;
   }
 
-  .embed-badge--drips.embed-badge--blue {
-    background: var(--color-primary);
+  .embed-badge__avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+  }
+
+  .embed-badge__dependencies,
+  .embed-badge__support {
     color: var(--color-background);
+    font-weight: 600;
+  }
+
+  .embed-badge--drips.embed-badge--light .embed-badge__dependencies,
+  .embed-badge--drips.embed-badge--light .embed-badge__support {
+    color: var(--color-primary);
   }
 </style>
\ No newline at end of file
diff --git a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
index 4b049e735..e0a32620d 100644
--- a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
@@ -1,16 +1,93 @@
 <script lang="ts">
-  import { type BadgeData, type BadgeOptions } from "./badge";
+  import Drip from "$lib/components/illustrations/drip.svelte";
+  import { BadgeStat, BadgeText, type BadgeData, type BadgeOptions } from "./badge";
 
   export let options: BadgeOptions;
   export let data: BadgeData;
+
+  $: dripFill = options.background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)'
+  $: dripStroke = options.background === 'blue' ? 'var(--color-primary)' : 'white'
+  $: dependencies = data?.dependencies || 0
+  $: dependenciesString = dependencies && dependencies === 1 ?
+    `Splitting to ${dependencies} Dependency` :
+    `Splitting to ${dependencies} Dependencies`
 </script>
 
-<div class="embed-badge embed-badge--github">
-  Github
+<div
+  class={`embed-badge embed-badge--github embed-badge--${options.background} embed-badge--${options.text} embed-badge--${options.stat}`}
+  >
+  <span class="embed-badge__icon">
+    <Drip
+      fill={dripFill}
+      stroke={dripStroke}
+      strokeWidth="4px"/>
+  </span>
+
+  <span class="embed-badge__text">
+  {#if options.text === BadgeText.me}
+    Drip to me
+  {:else if options.text === BadgeText.us}
+    Support us on Drips
+  {:else if options.text === BadgeText.project}
+    Support <img class="embed-badge__avatar" src={data.projectImageUrl} alt="{data.projectName} avatar"/><strong>{data.projectName}</strong> on Drips
+  {/if}
+  </span>
+
+  {#if options.stat === BadgeStat.support}
+    <span class="embed-badge__support">{data.support}</span>
+  {:else if options.stat === BadgeStat.dependencies}
+    <span class="embed-badge__dependencies">{dependenciesString}</span>
+  {/if}
 </div>
 
 <style>
+  .embed-badge strong {
+    font-weight: 600;
+  }
+
   .embed-badge--github {
+    display: inline-flex;
+    align-items: center;
+    font-size: 11px;
+    font-family: Verdana, sans-serif;
+    gap: 3px;
+    background: linear-gradient(0deg, #425160 0%, #5A6B7C 100%);
+    height: 20px;
+    padding: 0 4px;
+    color: white;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .embed-badge__icon {
+    width: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  .embed-badge__text {
+    display: flex;
+    gap: 3px;
+    align-items: center;
+  }
+
+  .embed-badge__avatar {
+    width: 9px;
+    height: 9px;
+    border-radius: 100%;
+  }
+
+  .embed-badge--github.embed-badge--dependencies,
+  .embed-badge--github.embed-badge--support {
+    padding-right: 0;
+  }
 
+  .embed-badge__support,
+  .embed-badge__dependencies {
+    background: var(--color-primary);
+    height: 20px;
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
   }
 </style>
\ No newline at end of file

From 6e705c0c479ff39163b3907d1a8c5258412630e7 Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Thu, 24 Oct 2024 18:48:19 +0200
Subject: [PATCH 04/15] Use project avatar to render project avatar in badge

---
 .../project-avatar/project-avatar.svelte      |   3 +-
 .../[projectUrl]/badge/+page.server.ts        | 210 ++++++++++--------
 .../project/[projectUrl]/badge/+page.svelte   |   4 +-
 .../project/[projectUrl]/badge/badge.svelte   |  12 +-
 .../embed/project/[projectUrl]/badge/badge.ts |  18 +-
 .../[projectUrl]/badge/drips-badge.svelte     |  38 ++--
 .../[projectUrl]/badge/github-badge.svelte    |  51 ++---
 7 files changed, 187 insertions(+), 149 deletions(-)

diff --git a/src/lib/components/project-avatar/project-avatar.svelte b/src/lib/components/project-avatar/project-avatar.svelte
index de0bb217d..c62495441 100644
--- a/src/lib/components/project-avatar/project-avatar.svelte
+++ b/src/lib/components/project-avatar/project-avatar.svelte
@@ -34,11 +34,12 @@
 
   export let pendingAvatar = false;
 
-  type Size = 'tiny' | 'small' | 'medium' | 'large' | 'huge';
+  type Size = 'micro' | 'tiny' | 'small' | 'medium' | 'large' | 'huge';
   export let size: Size = 'small';
   export let outline = project.__typename === 'ClaimedProjectData';
 
   const CONTAINER_SIZES: Record<Size, string> = {
+    micro: '0.8rem',
     tiny: '1.5rem',
     small: '2rem',
     medium: '3rem',
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
index 1e9c1d786..b8a5dadc3 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
@@ -2,11 +2,17 @@
 // import DripsBadge from './drips-badge';
 // import GithubBadge from './github-badge';
 
-import { BadgeBackground, BadgeStat, BadgeStyle, BadgeText, type BadgeData, type BadgeOptions } from "./badge.js"
-
-
-// import assert from '$lib/utils/assert';
-// import { error } from '@sveltejs/kit';
+import {
+  BadgeBackground,
+  BadgeStat,
+  BadgeStyle,
+  BadgeText,
+  type BadgeData,
+  type BadgeOptions,
+} from './badge.js';
+
+import assert from '$lib/utils/assert';
+import { error } from '@sveltejs/kit';
 // import loadImage from '../../loadImage';
 // import getContrastColor from '$lib/utils/get-contrast-text-color';
 // import satori from 'satori';
@@ -14,105 +20,135 @@ import { BadgeBackground, BadgeStat, BadgeStyle, BadgeText, type BadgeData, type
 // import loadFonts from '../../loadFonts';
 // import { Resvg } from '@resvg/resvg-js';
 // import getBackgroundImage from '../../getBackgroundImage';
-// import { gql } from 'graphql-request';
-// import query from '$lib/graphql/dripsQL';
-// import isClaimed from '$lib/utils/project/is-claimed';
-// import type { ProjectQuery, ProjectQueryVariables } from './__generated__/gql.generated';
+import { gql } from 'graphql-request';
+import query from '$lib/graphql/dripsQL';
+import isClaimed from '$lib/utils/project/is-claimed';
+import type { ProjectQuery, ProjectQueryVariables } from './__generated__/gql.generated';
 // import sanitize from 'sanitize-html';
 // import twemoji from '$lib/utils/twemoji';
-// import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
-// import network from '$lib/stores/wallet/network';
+import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
+import network from '$lib/stores/wallet/network';
 
 export async function load({ params }): Promise<{
-	badgeData: BadgeData,
-	badgeOptions: BadgeOptions
+  badgeData: BadgeData;
+  badgeOptions: BadgeOptions;
 }> {
-	return {
-		badgeData: {
-			support: 12456,
-			dependencies: 15,
-			projectName: 'cached_resource',
-			projectImageUrl: 'http://localhost:5173/api/blockies/0xe2E9b9B5d0757c26aB477A754788B19b60f2ed83'
-		},
-		badgeOptions: {
-			style: BadgeStyle.drips,
-			text: BadgeText.project,
-			background: BadgeBackground.light,
-			stat: BadgeStat.support,
-		}
-	}
+  const { projectUrl } = params;
+  assert(projectUrl, 'Missing projectUrl param');
+
+  // TODO: same as PROJECT_AVATAR_FRAGMENT from project-avatar.svelte
+  const projectQuery = gql`
+    query Project($url: String!, $chains: [SupportedChain!]) {
+      projectByUrl(url: $url, chains: $chains) {
+        source {
+          ownerName
+          repoName
+        }
+        chainData {
+          ... on UnClaimedProjectData {
+            chain
+          }
+          ... on ClaimedProjectData {
+            chain
+            color
+            avatar {
+              ... on ImageAvatar {
+                cid
+              }
+              ... on EmojiAvatar {
+                emoji
+              }
+            }
+            splits {
+              dependencies {
+                __typename
+              }
+            }
+            totalEarned {
+              amount
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  const res = await query<ProjectQuery, ProjectQueryVariables>(
+    projectQuery,
+    { url: projectUrl, chains: [network.gqlName] },
+    fetch,
+  );
+  const { projectByUrl: project } = res;
+  try {
+    assert(project);
+  } catch {
+    error(404);
+  }
+
+  const projectName = `${project.source.repoName}`;
+
+  const projectData = filterCurrentChainData(project.chainData);
+
+  const dependencies = isClaimed(projectData)
+    ? projectData.splits.dependencies.length.toString()
+    : '0';
+
+  console.log(projectName, projectData);
+
+  return {
+    badgeData: {
+      support: 12456,
+      dependencies,
+      projectName,
+      projectAvatar: projectData,
+    },
+    badgeOptions: {
+      style: BadgeStyle.drips,
+      text: BadgeText.project,
+      background: BadgeBackground.light,
+      stat: BadgeStat.support,
+    },
+  };
 }
 
-// export const GET: RequestHandler = async ({ url, fetch, params }) => {
-//   const renderedComponent = DripsBadge.render({
-//     background: 'cool',
-//     text: 'mcdonalds',
-//     stat: 'micro!'
-//   })
-
-//   const element = toReactElement(renderedComponent.html)
-
-//   const svg = await satori(element, {
-//     height: 32,
-//     width: 172,
-//     fonts: await loadFonts(fetch),
-//   })
-
-//   const resvg = new Resvg(svg, {
-//     fitTo: {
-//       mode: 'width',
-//       value: 1200,
-//     },
-//   });
-
-//   const image = resvg.render().asPng();
-
-//   return new Response(image, {
-//     headers: {
-//       'content-type': 'image/png',
-//       'cache-control': 'public, max-age=86400', // 24 hours
-//     },
-//   });
-// }
-
 // embeds/project/whatever.com?background=light&buttonText=me&style=drips&stat=dependencies
 
 // export const GET: RequestHandler = async ({ url, fetch, params }) => {
-//   const { projectUrl } = params;
-//   assert(projectUrl, 'Missing projectUrl param');
-
-//   const projectQuery = gql`
-//     query Project($url: String!, $chains: [SupportedChain!]) {
-//       projectByUrl(url: $url, chains: $chains) {
-//         source {
-//           ownerName
-//           repoName
+// const { projectUrl } = params;
+// assert(projectUrl, 'Missing projectUrl param');
+
+// const projectQuery = gql`
+//   query Project($url: String!, $chains: [SupportedChain!]) {
+//     projectByUrl(url: $url, chains: $chains) {
+//       source {
+//         ownerName
+//         repoName
+//       }
+//       chainData {
+//         ... on UnClaimedProjectData {
+//           chain
 //         }
-//         chainData {
-//           ... on UnClaimedProjectData {
-//             chain
-//           }
-//           ... on ClaimedProjectData {
-//             chain
-//             avatar {
-//               ... on ImageAvatar {
-//                 cid
-//               }
-//               ... on EmojiAvatar {
-//                 emoji
-//               }
+//         ... on ClaimedProjectData {
+//           chain
+//           avatar {
+//             ... on ImageAvatar {
+//               cid
 //             }
-//             color
-//             splits {
-//               dependencies {
-//                 __typename
-//               }
+//             ... on EmojiAvatar {
+//               emoji
+//             }
+//           }
+//           color
+//           splits {
+//             dependencies {
+//               __typename
 //             }
 //           }
 //         }
 //       }
 //     }
-//   `;
+//   }
+// `;
 
 //   const res = await query<ProjectQuery, ProjectQueryVariables>(
 //     projectQuery,
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.svelte b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
index 1b4616ae7..24ba3a130 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Badge from './badge.svelte'
+  import Badge from './badge.svelte';
 
   export let data;
 </script>
 
-<Badge data={data.badgeData} options={data.badgeOptions}/>
+<Badge data={data.badgeData} options={data.badgeOptions} />
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.svelte b/src/routes/embed/project/[projectUrl]/badge/badge.svelte
index e2c305ae9..d59175520 100644
--- a/src/routes/embed/project/[projectUrl]/badge/badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/badge.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import type { BadgeData, BadgeOptions } from './badge';
-  import DripsBadge from './drips-badge.svelte'
-  import GithubBadge from './github-badge.svelte'
+  import DripsBadge from './drips-badge.svelte';
+  import GithubBadge from './github-badge.svelte';
 
   export let data: BadgeData;
   export let options: BadgeOptions;
 </script>
 
-<div data-theme='none'>
-  <DripsBadge {data} {options}/>
-  <GithubBadge {data} {options}/>
+<div data-theme="none">
+  <DripsBadge {data} {options} />
+  <GithubBadge {data} {options} />
 </div>
 
 <style>
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.ts b/src/routes/embed/project/[projectUrl]/badge/badge.ts
index c204a360e..085232b03 100644
--- a/src/routes/embed/project/[projectUrl]/badge/badge.ts
+++ b/src/routes/embed/project/[projectUrl]/badge/badge.ts
@@ -1,3 +1,5 @@
+import type { ProjectAvatarFragment } from '$lib/components/project-avatar/__generated__/gql.generated';
+
 export enum BadgeStyle {
   github = 'github',
   drips = 'drips',
@@ -22,15 +24,15 @@ export enum BadgeStat {
 }
 
 export type BadgeOptions = {
-  style: BadgeStyle
-  text: BadgeText
-  background: BadgeBackground
-  stat: BadgeStat
-}
+  style: BadgeStyle;
+  text: BadgeText;
+  background: BadgeBackground;
+  stat: BadgeStat;
+};
 
 export type BadgeData = {
   support?: number;
-  dependencies?: number;
+  dependencies?: string;
   projectName?: string;
-  projectImageUrl?: string;
-}
+  projectAvatar: ProjectAvatarFragment;
+};
diff --git a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
index f408d08c3..277322dc8 100644
--- a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
@@ -1,32 +1,36 @@
 <script lang="ts">
-  import Drip from "$lib/components/illustrations/drip.svelte";
-  import { BadgeStat, BadgeText, type BadgeData, type BadgeOptions } from "./badge";
+  import Drip from '$lib/components/illustrations/drip.svelte';
+  import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
+  import { BadgeStat, BadgeText, type BadgeData, type BadgeOptions } from './badge';
 
   export let options: BadgeOptions;
   export let data: BadgeData;
 
-  $: dripFill = options.background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)'
-  $: dependencies = data?.dependencies || 0
-  $: dependenciesString = dependencies && dependencies === 1 ?
-    `Splitting to ${dependencies} Dependency` :
-    `Splitting to ${dependencies} Dependencies`
+  $: dripFill = options.background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)';
+  $: dependencies = data?.dependencies || 0;
+  $: dependenciesString =
+    dependencies && dependencies === 1
+      ? `Splitting to ${dependencies} Dependency`
+      : `Splitting to ${dependencies} Dependencies`;
 </script>
 
 <div
   class={`embed-badge embed-badge--drips embed-badge--${options.background} embed-badge--${options.text} embed-badge--${options.stat}`}
-  >
+>
   <span class="embed-badge__icon">
-    <Drip fill={dripFill}/>
+    <Drip fill={dripFill} />
   </span>
 
   <span class="embed-badge__text">
-  {#if options.text === BadgeText.me}
-    Drip to me
-  {:else if options.text === BadgeText.us}
-    Support us on Drips
-  {:else if options.text === BadgeText.project}
-    Support <img class="embed-badge__avatar" src={data.projectImageUrl} alt="{data.projectName} avatar"/><strong>{data.projectName}</strong> on Drips
-  {/if}
+    {#if options.text === BadgeText.me}
+      Drip to me
+    {:else if options.text === BadgeText.us}
+      Support us on Drips
+    {:else if options.text === BadgeText.project}
+      Support <ProjectAvatar project={data.projectAvatar} size="tiny" /><strong
+        >{data.projectName}</strong
+      > on Drips
+    {/if}
   </span>
 
   {#if options.stat === BadgeStat.support}
@@ -90,4 +94,4 @@
   .embed-badge--drips.embed-badge--light .embed-badge__support {
     color: var(--color-primary);
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
index e0a32620d..3d8559139 100644
--- a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
@@ -1,36 +1,37 @@
 <script lang="ts">
-  import Drip from "$lib/components/illustrations/drip.svelte";
-  import { BadgeStat, BadgeText, type BadgeData, type BadgeOptions } from "./badge";
+  import Drip from '$lib/components/illustrations/drip.svelte';
+  import { BadgeStat, BadgeText, type BadgeData, type BadgeOptions } from './badge';
+  import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
 
   export let options: BadgeOptions;
   export let data: BadgeData;
 
-  $: dripFill = options.background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)'
-  $: dripStroke = options.background === 'blue' ? 'var(--color-primary)' : 'white'
-  $: dependencies = data?.dependencies || 0
-  $: dependenciesString = dependencies && dependencies === 1 ?
-    `Splitting to ${dependencies} Dependency` :
-    `Splitting to ${dependencies} Dependencies`
+  $: dripFill = options.background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)';
+  $: dripStroke = options.background === 'blue' ? 'var(--color-primary)' : 'white';
+  $: dependencies = data?.dependencies || 0;
+  $: dependenciesString =
+    dependencies && dependencies === 1
+      ? `Splitting to ${dependencies} Dependency`
+      : `Splitting to ${dependencies} Dependencies`;
 </script>
 
 <div
   class={`embed-badge embed-badge--github embed-badge--${options.background} embed-badge--${options.text} embed-badge--${options.stat}`}
-  >
+>
   <span class="embed-badge__icon">
-    <Drip
-      fill={dripFill}
-      stroke={dripStroke}
-      strokeWidth="4px"/>
+    <Drip fill={dripFill} stroke={dripStroke} strokeWidth="4px" />
   </span>
 
   <span class="embed-badge__text">
-  {#if options.text === BadgeText.me}
-    Drip to me
-  {:else if options.text === BadgeText.us}
-    Support us on Drips
-  {:else if options.text === BadgeText.project}
-    Support <img class="embed-badge__avatar" src={data.projectImageUrl} alt="{data.projectName} avatar"/><strong>{data.projectName}</strong> on Drips
-  {/if}
+    {#if options.text === BadgeText.me}
+      Drip to me
+    {:else if options.text === BadgeText.us}
+      Support us on Drips
+    {:else if options.text === BadgeText.project}
+      Support <ProjectAvatar project={data.projectAvatar} size="micro" /><strong
+        >{data.projectName}</strong
+      > on Drips
+    {/if}
   </span>
 
   {#if options.stat === BadgeStat.support}
@@ -51,7 +52,7 @@
     font-size: 11px;
     font-family: Verdana, sans-serif;
     gap: 3px;
-    background: linear-gradient(0deg, #425160 0%, #5A6B7C 100%);
+    background: linear-gradient(0deg, #425160 0%, #5a6b7c 100%);
     height: 20px;
     padding: 0 4px;
     color: white;
@@ -71,12 +72,6 @@
     align-items: center;
   }
 
-  .embed-badge__avatar {
-    width: 9px;
-    height: 9px;
-    border-radius: 100%;
-  }
-
   .embed-badge--github.embed-badge--dependencies,
   .embed-badge--github.embed-badge--support {
     padding-right: 0;
@@ -90,4 +85,4 @@
     display: flex;
     align-items: center;
   }
-</style>
\ No newline at end of file
+</style>

From 0a59ab2b84cef1c416bb4d9d5f4ec76eda96cfa7 Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Thu, 24 Oct 2024 19:39:00 +0200
Subject: [PATCH 05/15] Ingest embed options from query params

---
 .../[projectUrl]/badge/+page.server.ts        | 27 ++++++++++++++-----
 .../embed/project/[projectUrl]/badge/badge.ts |  4 +++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
index b8a5dadc3..d45be3a5d 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
@@ -29,7 +29,23 @@ import type { ProjectQuery, ProjectQueryVariables } from './__generated__/gql.ge
 import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
 import network from '$lib/stores/wallet/network';
 
-export async function load({ params }): Promise<{
+// const DEFAULT_BADGE_OPTIONS: BadgeOptions = {
+// 	style: BadgeStyle.drips,
+// 	text: BadgeText.me,
+// 	background: BadgeBackground.light,
+// 	stat: BadgeStat.none,
+// } as const
+
+const getBadgeOptions = (url: URL): BadgeOptions => {
+	return {
+		style: BadgeStyle[url.searchParams.get('style') as BadgeStyle] || BadgeStyle.default,
+		text: BadgeText[url.searchParams.get('text') as BadgeText] || BadgeText.default,
+		background: BadgeBackground[url.searchParams.get('background') as BadgeBackground] || BadgeBackground.default,
+		stat: BadgeStat[url.searchParams.get('stat') as BadgeStat] || BadgeStat.default,
+	}
+}
+
+export async function load({ url, params }): Promise<{
   badgeData: BadgeData;
   badgeOptions: BadgeOptions;
 }> {
@@ -95,6 +111,8 @@ export async function load({ params }): Promise<{
 
   console.log(projectName, projectData);
 
+	const badgeOptions = getBadgeOptions(url)
+
   return {
     badgeData: {
       support: 12456,
@@ -102,12 +120,7 @@ export async function load({ params }): Promise<{
       projectName,
       projectAvatar: projectData,
     },
-    badgeOptions: {
-      style: BadgeStyle.drips,
-      text: BadgeText.project,
-      background: BadgeBackground.light,
-      stat: BadgeStat.support,
-    },
+    badgeOptions,
   };
 }
 
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.ts b/src/routes/embed/project/[projectUrl]/badge/badge.ts
index 085232b03..e440c3a32 100644
--- a/src/routes/embed/project/[projectUrl]/badge/badge.ts
+++ b/src/routes/embed/project/[projectUrl]/badge/badge.ts
@@ -3,24 +3,28 @@ import type { ProjectAvatarFragment } from '$lib/components/project-avatar/__gen
 export enum BadgeStyle {
   github = 'github',
   drips = 'drips',
+  default = drips
 }
 
 export enum BadgeText {
   project = 'project',
   me = 'me',
   us = 'us',
+  default = me
 }
 
 export enum BadgeBackground {
   dark = 'dark',
   light = 'light',
   blue = 'blue',
+  default = light
 }
 
 export enum BadgeStat {
   support = 'support',
   dependencies = 'dependencies',
   none = 'none',
+  default = none
 }
 
 export type BadgeOptions = {

From 63df158374618e9d8febe196a633ba55b8ad0687 Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 12:59:36 +0200
Subject: [PATCH 06/15] Badge knows how to render badges conditionally

---
 src/routes/embed/project/[projectUrl]/badge/badge.svelte | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.svelte b/src/routes/embed/project/[projectUrl]/badge/badge.svelte
index d59175520..b34d49be4 100644
--- a/src/routes/embed/project/[projectUrl]/badge/badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/badge.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { BadgeData, BadgeOptions } from './badge';
+  import { BadgeStyle, type BadgeData, type BadgeOptions } from './badge';
   import DripsBadge from './drips-badge.svelte';
   import GithubBadge from './github-badge.svelte';
 
@@ -8,8 +8,11 @@
 </script>
 
 <div data-theme="none">
-  <DripsBadge {data} {options} />
-  <GithubBadge {data} {options} />
+  {#if options.style === BadgeStyle.github}
+    <GithubBadge {data} {options} />
+  {:else}
+    <DripsBadge {data} {options} />
+  {/if}
 </div>
 
 <style>

From 994a3ee3cc0b2743adba0d35b249c84b551f7793 Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 14:40:26 +0200
Subject: [PATCH 07/15] We be creating png badges!; add puppeteer, create wait
 util

---
 package-lock.json                             | 693 +++++++++++++++++-
 package.json                                  |   1 +
 .../stepper/__test__/stepper.unit.test.ts     |   3 +-
 src/lib/utils/wait.ts                         |   3 +
 .../project/[projectUrl]/badge.png/+server.ts |  33 +
 .../project/[projectUrl]/badge/+page.svelte   |  25 +-
 .../project/[projectUrl]/badge/badge.svelte   |   2 +-
 .../[projectUrl]/badge/drips-badge.svelte     |  17 +-
 .../[projectUrl]/badge/github-badge.svelte    |   2 +-
 9 files changed, 727 insertions(+), 52 deletions(-)
 create mode 100644 src/lib/utils/wait.ts
 create mode 100644 src/routes/embed/project/[projectUrl]/badge.png/+server.ts

diff --git a/package-lock.json b/package-lock.json
index 78c3814d7..0c62b550b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "isomorphic-fetch": "^3.0.0",
         "jimp": "^0.22.12",
         "lodash": "^4.17.21",
+        "puppeteer": "^23.6.0",
         "redis": "^4.6.14",
         "sanitize-html": "^2.13.0",
         "satori": "^0.10.13",
@@ -4565,6 +4566,40 @@
         "@opentelemetry/sdk-trace-base": "^1.22"
       }
     },
+    "node_modules/@puppeteer/browsers": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.4.0.tgz",
+      "integrity": "sha512-x8J1csfIygOwf6D6qUAZ0ASk3z63zPb7wkNeHRerCMh82qWKUrOgkuP005AJC8lDL6/evtXETGEJVcwykKT4/g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "debug": "^4.3.6",
+        "extract-zip": "^2.0.1",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.4.0",
+        "semver": "^7.6.3",
+        "tar-fs": "^3.0.6",
+        "unbzip2-stream": "^1.4.3",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "browsers": "lib/cjs/main-cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@redis/bloom": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.2.0.tgz",
@@ -6323,6 +6358,12 @@
       "integrity": "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==",
       "license": "MIT"
     },
+    "node_modules/@tootallnate/quickjs-emscripten": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
+      "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==",
+      "license": "MIT"
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -6506,6 +6547,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.7.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.7.0.tgz",
@@ -7592,7 +7643,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
       "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
-      "dev": true,
       "dependencies": {
         "debug": "^4.3.4"
       },
@@ -7723,8 +7773,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-query": {
       "version": "5.3.0",
@@ -7918,6 +7967,12 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
+      "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/babel-plugin-syntax-trailing-function-commas": {
       "version": "7.0.0-beta.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
@@ -7977,6 +8032,52 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/bare-events": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.0.tgz",
+      "integrity": "sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==",
+      "license": "Apache-2.0",
+      "optional": true
+    },
+    "node_modules/bare-fs": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.5.tgz",
+      "integrity": "sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-events": "^2.0.0",
+        "bare-path": "^2.0.0",
+        "bare-stream": "^2.0.0"
+      }
+    },
+    "node_modules/bare-os": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.4.tgz",
+      "integrity": "sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==",
+      "license": "Apache-2.0",
+      "optional": true
+    },
+    "node_modules/bare-path": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
+      "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-os": "^2.1.0"
+      }
+    },
+    "node_modules/bare-stream": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.3.2.tgz",
+      "integrity": "sha512-EFZHSIBkDgSHIwj2l2QZfP4U5OcD4xFAOwhSb/vlr9PIqyGJGvB/nfClJbcnh3EY4jtPE4zsb5ztae96bVF79A==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "streamx": "^2.20.0"
+      }
+    },
     "node_modules/base-x": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
@@ -8004,6 +8105,15 @@
         }
       ]
     },
+    "node_modules/basic-ftp": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz",
+      "integrity": "sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/before-after-hook": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
@@ -8287,7 +8397,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -8470,6 +8579,26 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/chromium-bidi": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.8.0.tgz",
+      "integrity": "sha512-uJydbGdTw0DEUjhoogGveneJVWX/9YuqkWePzMmkBYwtdAqo5d3J/ovNKFr+/2hWXYmYCr6it8mSSTIj6SS6Ug==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "mitt": "3.0.1",
+        "urlpattern-polyfill": "10.0.0",
+        "zod": "3.23.8"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/chromium-bidi/node_modules/urlpattern-polyfill": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
+      "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==",
+      "license": "MIT"
+    },
     "node_modules/cids": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/cids/-/cids-0.7.5.tgz",
@@ -8609,7 +8738,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
       "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dev": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.1",
@@ -8623,7 +8751,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -8635,7 +8762,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -9060,11 +9186,12 @@
       "dev": true
     },
     "node_modules/debug": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -9214,6 +9341,32 @@
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
     },
+    "node_modules/degenerator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+      "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.13.4",
+        "escodegen": "^2.1.0",
+        "esprima": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/degenerator/node_modules/ast-types": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -9298,6 +9451,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1354347",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1354347.tgz",
+      "integrity": "sha512-BlmkSqV0V84E2WnEnoPnwyix57rQxAM5SKJjf4TbYOCGLAWtz8CDH8RIaGOjPgPCXo2Mce3kxSY497OySidY3Q==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -9520,11 +9679,19 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -9644,6 +9811,27 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
     "node_modules/eslint": {
       "version": "9.5.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.5.0.tgz",
@@ -9974,7 +10162,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -9992,7 +10179,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -10243,6 +10429,41 @@
         "url": "https://github.com/sponsors/jaydenseric"
       }
     },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extract-zip/node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/fast-decode-uri-component": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz",
@@ -10255,6 +10476,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -10349,6 +10576,15 @@
       "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==",
       "dev": true
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/fetch-blob": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
@@ -10570,6 +10806,29 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/fs-extra/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -10679,6 +10938,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-uri": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.3.tgz",
+      "integrity": "sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==",
+      "license": "MIT",
+      "dependencies": {
+        "basic-ftp": "^5.0.2",
+        "data-uri-to-buffer": "^6.0.2",
+        "debug": "^4.3.4",
+        "fs-extra": "^11.2.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/get-uri/node_modules/data-uri-to-buffer": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
+      "integrity": "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/gifwrap": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/gifwrap/-/gifwrap-0.10.1.tgz",
@@ -11158,7 +11441,6 @@
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
-      "dev": true,
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -11177,10 +11459,10 @@
       }
     },
     "node_modules/https-proxy-agent": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
-      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
-      "dev": true,
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+      "license": "MIT",
       "dependencies": {
         "agent-base": "^7.0.2",
         "debug": "4"
@@ -11300,7 +11582,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -11316,7 +11597,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -11460,6 +11740,19 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/ip-address": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
+      "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ip-regex": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
@@ -11536,8 +11829,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-bigint": {
       "version": "1.0.4",
@@ -12237,7 +12529,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -12245,6 +12536,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
+      "license": "MIT"
+    },
     "node_modules/jsdom": {
       "version": "24.1.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.0.tgz",
@@ -12320,8 +12617,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -12360,6 +12656,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonfile/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/keccak": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/keccak/-/keccak-3.0.4.tgz",
@@ -12533,8 +12850,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/listhen": {
       "version": "1.7.2",
@@ -13094,6 +13410,12 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -13152,9 +13474,10 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
     },
     "node_modules/multiaddr": {
       "version": "7.5.0",
@@ -13326,6 +13649,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/netmask": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+      "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
@@ -13816,6 +14148,38 @@
         "node": ">=6"
       }
     },
+    "node_modules/pac-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/quickjs-emscripten": "^0.23.0",
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "get-uri": "^6.0.1",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.5",
+        "pac-resolver": "^7.0.1",
+        "socks-proxy-agent": "^8.0.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-resolver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz",
+      "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==",
+      "license": "MIT",
+      "dependencies": {
+        "degenerator": "^5.0.0",
+        "netmask": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
@@ -13840,7 +14204,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -13903,7 +14266,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -14102,6 +14464,12 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "license": "MIT"
+    },
     "node_modules/periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -14693,6 +15061,34 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/proxy-agent": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.4.0.tgz",
+      "integrity": "sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "http-proxy-agent": "^7.0.1",
+        "https-proxy-agent": "^7.0.3",
+        "lru-cache": "^7.14.1",
+        "pac-proxy-agent": "^7.0.1",
+        "proxy-from-env": "^1.1.0",
+        "socks-proxy-agent": "^8.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/proxy-compare": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.5.1.tgz",
@@ -14710,12 +15106,107 @@
       "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
       "dev": true
     },
+    "node_modules/pump": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
       "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
       "dev": true
     },
+    "node_modules/puppeteer": {
+      "version": "23.6.0",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-23.6.0.tgz",
+      "integrity": "sha512-l+Fgo8SVFSd51STtq2crz8t1Y3VXowsuR4zfR64qDOn6oggz7YIZauWiNR4IJjczQ6nvFs3S4cgng55/nesxTQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "2.4.0",
+        "chromium-bidi": "0.8.0",
+        "cosmiconfig": "^9.0.0",
+        "devtools-protocol": "0.0.1354347",
+        "puppeteer-core": "23.6.0",
+        "typed-query-selector": "^2.12.0"
+      },
+      "bin": {
+        "puppeteer": "lib/cjs/puppeteer/node/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/puppeteer-core": {
+      "version": "23.6.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.6.0.tgz",
+      "integrity": "sha512-se1bhgUpR9C529SgHGr/eyT92mYyQPAhA2S9pGtGrVG2xob9qE6Pbp7TlqiSPlnnY1lINqhn6/67EwkdzOmKqQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "2.4.0",
+        "chromium-bidi": "0.8.0",
+        "debug": "^4.3.7",
+        "devtools-protocol": "0.0.1354347",
+        "typed-query-selector": "^2.12.0",
+        "ws": "^8.18.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/puppeteer/node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pvtsutils": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.5.tgz",
@@ -14926,6 +15417,12 @@
         }
       ]
     },
+    "node_modules/queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
+      "license": "MIT"
+    },
     "node_modules/quick-format-unescaped": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
@@ -15829,6 +16326,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/smol-toml": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.3.0.tgz",
@@ -15852,6 +16359,34 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/socks": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
+      "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^9.0.5",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+      "integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.1",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/sonic-boom": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-2.8.0.tgz",
@@ -15927,6 +16462,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -15964,6 +16505,20 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/streamx": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.20.1.tgz",
+      "integrity": "sha512-uTa0mU6WUC65iUvzKH4X9hEdvSW7rbPxPtwfWiLMSj3qTdQbAiUboZTxauKfpFuGIGa1C2BYijZ7wgdUXICJhA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-fifo": "^1.3.2",
+        "queue-tick": "^1.0.1",
+        "text-decoder": "^1.1.0"
+      },
+      "optionalDependencies": {
+        "bare-events": "^2.2.0"
+      }
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -17010,6 +17565,37 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+      "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^2.1.1",
+        "bare-path": "^2.1.0"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+      "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
+    "node_modules/text-decoder": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.1.tgz",
+      "integrity": "sha512-x9v3H/lTKIJKQQe7RPQkLfKAnc9lUTkWDypIQgTzPJAq+5/GCDHonmshfvlsNSj58yyshbIJJDLmU15qNERrXQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -17049,8 +17635,7 @@
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "dev": true
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
     "node_modules/timers-ext": {
       "version": "0.1.8",
@@ -17394,6 +17979,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
+      "integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==",
+      "license": "MIT"
+    },
     "node_modules/typescript": {
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
@@ -17472,6 +18063,16 @@
       "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.3.tgz",
       "integrity": "sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg=="
     },
+    "node_modules/unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
     "node_modules/unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
@@ -18948,7 +19549,6 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -18980,7 +19580,6 @@
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
       "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "dev": true,
       "dependencies": {
         "cliui": "^8.0.1",
         "escalade": "^3.1.1",
@@ -18998,11 +19597,29 @@
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
       "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/yauzl/node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 5aef29e77..8319e02f3 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
     "isomorphic-fetch": "^3.0.0",
     "jimp": "^0.22.12",
     "lodash": "^4.17.21",
+    "puppeteer": "^23.6.0",
     "redis": "^4.6.14",
     "sanitize-html": "^2.13.0",
     "satori": "^0.10.13",
diff --git a/src/lib/components/stepper/__test__/stepper.unit.test.ts b/src/lib/components/stepper/__test__/stepper.unit.test.ts
index 20594a1e5..3a00a4e88 100644
--- a/src/lib/components/stepper/__test__/stepper.unit.test.ts
+++ b/src/lib/components/stepper/__test__/stepper.unit.test.ts
@@ -5,13 +5,12 @@ import OnlyText from './test-steps/only-text.svelte';
 import userEvent from '@testing-library/user-event';
 import { tick } from 'svelte';
 import TriggerAwaitEvent from './test-steps/trigger-await-event.svelte';
+import wait from '$lib/utils/wait';
 
 vi.mock('$app/environment', () => ({
   browser: true,
 }));
 
-const wait = (millis: number) => new Promise((resolve) => setTimeout(resolve, millis));
-
 class ResizeObserver {
   observe() {
     return undefined;
diff --git a/src/lib/utils/wait.ts b/src/lib/utils/wait.ts
new file mode 100644
index 000000000..49a9a381a
--- /dev/null
+++ b/src/lib/utils/wait.ts
@@ -0,0 +1,3 @@
+export default function wait(millis: number) {
+  return new Promise((resolve) => setTimeout(resolve, millis));
+}
diff --git a/src/routes/embed/project/[projectUrl]/badge.png/+server.ts b/src/routes/embed/project/[projectUrl]/badge.png/+server.ts
new file mode 100644
index 000000000..af80e98cf
--- /dev/null
+++ b/src/routes/embed/project/[projectUrl]/badge.png/+server.ts
@@ -0,0 +1,33 @@
+import type { RequestHandler } from './$types';
+import { error } from '@sveltejs/kit';
+import puppeteer from 'puppeteer';
+
+const REPLACE_PNG_REGEX = /(\.png\/?)(\?.*|$)/;
+
+export const GET: RequestHandler = async ({ url }) => {
+  // drips.network/embed/project.png/badge.png
+  // drips.network/embed/project.png/badge.png?background=dark
+  // drips.network/embed/project.png/badge.png/?background=dark
+  // ==> drips.network/embed/project.png/badge
+  const imageUrl = url.href.replace(REPLACE_PNG_REGEX, '$2');
+  // TODO: handle invalid href
+
+  const browser = await puppeteer.launch({ headless: true });
+  const page = await browser.newPage();
+
+  await page.goto(imageUrl);
+  const selector = '.embed-badge';
+  await page.waitForSelector(selector);
+  const element = await page.$(selector);
+  // if there's no element for any reason, that's
+  // very unexpected and we're toast
+  if (!element) {
+    return error(500);
+  }
+  const imageBuffer = await element.screenshot({ omitBackground: true });
+
+  return new Response(imageBuffer, {
+    status: 200,
+    headers: new Headers({ 'Content-Type': 'image/png' }),
+  });
+};
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.svelte b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
index 24ba3a130..8b45217cd 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
@@ -1,7 +1,28 @@
-<script>
+<script lang="ts">
+  import { onMount } from 'svelte';
   import Badge from './badge.svelte';
+  import wait from '$lib/utils/wait';
 
   export let data;
+
+  let ready = false;
+
+  // TODO: these elements all have transitions on their backgrounds
+  // so we need to wait until that transition to transparent takes place
+  // before taking a screenshot.
+  onMount(async () => {
+    document.documentElement.style.background = 'transparent';
+    document.body.style.background = 'transparent';
+    const main = document.querySelector('.main') as HTMLElement;
+    if (main) {
+      main.style.background = 'transparent';
+    }
+
+    await wait(200);
+    ready = true;
+  });
 </script>
 
-<Badge data={data.badgeData} options={data.badgeOptions} />
+{#if ready}
+  <Badge data={data.badgeData} options={data.badgeOptions} />
+{/if}
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.svelte b/src/routes/embed/project/[projectUrl]/badge/badge.svelte
index b34d49be4..358de6cfc 100644
--- a/src/routes/embed/project/[projectUrl]/badge/badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/badge.svelte
@@ -7,7 +7,7 @@
   export let options: BadgeOptions;
 </script>
 
-<div data-theme="none">
+<div>
   {#if options.style === BadgeStyle.github}
     <GithubBadge {data} {options} />
   {:else}
diff --git a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
index 277322dc8..2fe6a87d2 100644
--- a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
@@ -46,24 +46,25 @@
   }
 
   .embed-badge--drips {
-    border: 1px solid var(--color-foreground);
+    border: 1px solid #28333d;
     padding: 0 10px;
     border-radius: 1rem 0 1rem 1rem;
     display: inline-flex;
     gap: 7px;
     align-items: center;
     height: 32px;
-    background: var(--color-background);
+    background-color: #ffffff;
+    color: #28333d;
   }
 
   .embed-badge--drips.embed-badge--dark {
-    background: var(--color-foreground);
-    color: var(--color-background);
+    background-color: #28333d;
+    color: #ffffff;
   }
 
   .embed-badge--drips.embed-badge--blue {
-    background: var(--color-primary);
-    color: var(--color-background);
+    background-color: #5555ff;
+    color: #ffffff;
   }
 
   .embed-badge__icon {
@@ -86,12 +87,12 @@
 
   .embed-badge__dependencies,
   .embed-badge__support {
-    color: var(--color-background);
+    color: #ffffff;
     font-weight: 600;
   }
 
   .embed-badge--drips.embed-badge--light .embed-badge__dependencies,
   .embed-badge--drips.embed-badge--light .embed-badge__support {
-    color: var(--color-primary);
+    color: #5555ff;
   }
 </style>
diff --git a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
index 3d8559139..dd545f168 100644
--- a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
@@ -79,7 +79,7 @@
 
   .embed-badge__support,
   .embed-badge__dependencies {
-    background: var(--color-primary);
+    background: #5555ff;
     height: 20px;
     padding: 0 4px;
     display: flex;

From 89aeddc090759ddf0bc8e0487a0569bd1e67289a Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 14:51:18 +0200
Subject: [PATCH 08/15] Move to components, rename to support button

---
 .../drips-style-button.svelte}                |  7 +++++-
 .../github-style-button.svelte}               |  7 +++++-
 .../project-support-button.svelte}            |  6 ++---
 .../project-support-button.ts}                |  8 +++----
 .../[projectUrl]/badge/+page.server.ts        | 22 +++++++++----------
 .../project/[projectUrl]/badge/+page.svelte   |  2 +-
 6 files changed, 31 insertions(+), 21 deletions(-)
 rename src/{routes/embed/project/[projectUrl]/badge/drips-badge.svelte => lib/components/project-support-button/drips-style-button.svelte} (95%)
 rename src/{routes/embed/project/[projectUrl]/badge/github-badge.svelte => lib/components/project-support-button/github-style-button.svelte} (95%)
 rename src/{routes/embed/project/[projectUrl]/badge/badge.svelte => lib/components/project-support-button/project-support-button.svelte} (69%)
 rename src/{routes/embed/project/[projectUrl]/badge/badge.ts => lib/components/project-support-button/project-support-button.ts} (90%)

diff --git a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte b/src/lib/components/project-support-button/drips-style-button.svelte
similarity index 95%
rename from src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
rename to src/lib/components/project-support-button/drips-style-button.svelte
index 2fe6a87d2..97be169ce 100644
--- a/src/routes/embed/project/[projectUrl]/badge/drips-badge.svelte
+++ b/src/lib/components/project-support-button/drips-style-button.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
   import Drip from '$lib/components/illustrations/drip.svelte';
   import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
-  import { BadgeStat, BadgeText, type BadgeData, type BadgeOptions } from './badge';
+  import {
+    BadgeStat,
+    BadgeText,
+    type BadgeData,
+    type BadgeOptions,
+  } from './project-support-button';
 
   export let options: BadgeOptions;
   export let data: BadgeData;
diff --git a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte b/src/lib/components/project-support-button/github-style-button.svelte
similarity index 95%
rename from src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
rename to src/lib/components/project-support-button/github-style-button.svelte
index dd545f168..50ad6b559 100644
--- a/src/routes/embed/project/[projectUrl]/badge/github-badge.svelte
+++ b/src/lib/components/project-support-button/github-style-button.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import Drip from '$lib/components/illustrations/drip.svelte';
-  import { BadgeStat, BadgeText, type BadgeData, type BadgeOptions } from './badge';
+  import {
+    BadgeStat,
+    BadgeText,
+    type BadgeData,
+    type BadgeOptions,
+  } from './project-support-button';
   import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
 
   export let options: BadgeOptions;
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.svelte b/src/lib/components/project-support-button/project-support-button.svelte
similarity index 69%
rename from src/routes/embed/project/[projectUrl]/badge/badge.svelte
rename to src/lib/components/project-support-button/project-support-button.svelte
index 358de6cfc..9beb8b5d5 100644
--- a/src/routes/embed/project/[projectUrl]/badge/badge.svelte
+++ b/src/lib/components/project-support-button/project-support-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { BadgeStyle, type BadgeData, type BadgeOptions } from './badge';
-  import DripsBadge from './drips-badge.svelte';
-  import GithubBadge from './github-badge.svelte';
+  import { BadgeStyle, type BadgeData, type BadgeOptions } from './project-support-button';
+  import DripsBadge from './drips-style-button.svelte';
+  import GithubBadge from './github-style-button.svelte';
 
   export let data: BadgeData;
   export let options: BadgeOptions;
diff --git a/src/routes/embed/project/[projectUrl]/badge/badge.ts b/src/lib/components/project-support-button/project-support-button.ts
similarity index 90%
rename from src/routes/embed/project/[projectUrl]/badge/badge.ts
rename to src/lib/components/project-support-button/project-support-button.ts
index e440c3a32..e5adb0d02 100644
--- a/src/routes/embed/project/[projectUrl]/badge/badge.ts
+++ b/src/lib/components/project-support-button/project-support-button.ts
@@ -3,28 +3,28 @@ import type { ProjectAvatarFragment } from '$lib/components/project-avatar/__gen
 export enum BadgeStyle {
   github = 'github',
   drips = 'drips',
-  default = drips
+  default = drips,
 }
 
 export enum BadgeText {
   project = 'project',
   me = 'me',
   us = 'us',
-  default = me
+  default = me,
 }
 
 export enum BadgeBackground {
   dark = 'dark',
   light = 'light',
   blue = 'blue',
-  default = light
+  default = light,
 }
 
 export enum BadgeStat {
   support = 'support',
   dependencies = 'dependencies',
   none = 'none',
-  default = none
+  default = none,
 }
 
 export type BadgeOptions = {
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
index d45be3a5d..aecff8dd2 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
@@ -9,7 +9,7 @@ import {
   BadgeText,
   type BadgeData,
   type BadgeOptions,
-} from './badge.js';
+} from '$lib/components/project-support-button/project-support-button';
 
 import assert from '$lib/utils/assert';
 import { error } from '@sveltejs/kit';
@@ -37,13 +37,15 @@ import network from '$lib/stores/wallet/network';
 // } as const
 
 const getBadgeOptions = (url: URL): BadgeOptions => {
-	return {
-		style: BadgeStyle[url.searchParams.get('style') as BadgeStyle] || BadgeStyle.default,
-		text: BadgeText[url.searchParams.get('text') as BadgeText] || BadgeText.default,
-		background: BadgeBackground[url.searchParams.get('background') as BadgeBackground] || BadgeBackground.default,
-		stat: BadgeStat[url.searchParams.get('stat') as BadgeStat] || BadgeStat.default,
-	}
-}
+  return {
+    style: BadgeStyle[url.searchParams.get('style') as BadgeStyle] || BadgeStyle.default,
+    text: BadgeText[url.searchParams.get('text') as BadgeText] || BadgeText.default,
+    background:
+      BadgeBackground[url.searchParams.get('background') as BadgeBackground] ||
+      BadgeBackground.default,
+    stat: BadgeStat[url.searchParams.get('stat') as BadgeStat] || BadgeStat.default,
+  };
+};
 
 export async function load({ url, params }): Promise<{
   badgeData: BadgeData;
@@ -109,9 +111,7 @@ export async function load({ url, params }): Promise<{
     ? projectData.splits.dependencies.length.toString()
     : '0';
 
-  console.log(projectName, projectData);
-
-	const badgeOptions = getBadgeOptions(url)
+  const badgeOptions = getBadgeOptions(url);
 
   return {
     badgeData: {
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.svelte b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
index 8b45217cd..d6e9155fa 100644
--- a/src/routes/embed/project/[projectUrl]/badge/+page.svelte
+++ b/src/routes/embed/project/[projectUrl]/badge/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Badge from './badge.svelte';
+  import Badge from '$lib/components/project-support-button/project-support-button.svelte';
   import wait from '$lib/utils/wait';
 
   export let data;

From b0a26e20bdf4c873e14742bab5d1a48c9d47b45c Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 14:58:39 +0200
Subject: [PATCH 09/15] Rename badge to support, clean up comments

---
 .../[projectUrl]/badge/+page.server.ts        | 278 ------------------
 .../{badge.png => support.png}/+server.ts     |   0
 .../[projectUrl]/support/+page.server.ts      | 105 +++++++
 .../{badge => support}/+page.svelte           |   0
 4 files changed, 105 insertions(+), 278 deletions(-)
 delete mode 100644 src/routes/embed/project/[projectUrl]/badge/+page.server.ts
 rename src/routes/embed/project/[projectUrl]/{badge.png => support.png}/+server.ts (100%)
 create mode 100644 src/routes/embed/project/[projectUrl]/support/+page.server.ts
 rename src/routes/embed/project/[projectUrl]/{badge => support}/+page.svelte (100%)

diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts b/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
deleted file mode 100644
index aecff8dd2..000000000
--- a/src/routes/embed/project/[projectUrl]/badge/+page.server.ts
+++ /dev/null
@@ -1,278 +0,0 @@
-// import type { RequestHandler } from './$types';
-// import DripsBadge from './drips-badge';
-// import GithubBadge from './github-badge';
-
-import {
-  BadgeBackground,
-  BadgeStat,
-  BadgeStyle,
-  BadgeText,
-  type BadgeData,
-  type BadgeOptions,
-} from '$lib/components/project-support-button/project-support-button';
-
-import assert from '$lib/utils/assert';
-import { error } from '@sveltejs/kit';
-// import loadImage from '../../loadImage';
-// import getContrastColor from '$lib/utils/get-contrast-text-color';
-// import satori from 'satori';
-// import { html as toReactElement } from 'satori-html';
-// import loadFonts from '../../loadFonts';
-// import { Resvg } from '@resvg/resvg-js';
-// import getBackgroundImage from '../../getBackgroundImage';
-import { gql } from 'graphql-request';
-import query from '$lib/graphql/dripsQL';
-import isClaimed from '$lib/utils/project/is-claimed';
-import type { ProjectQuery, ProjectQueryVariables } from './__generated__/gql.generated';
-// import sanitize from 'sanitize-html';
-// import twemoji from '$lib/utils/twemoji';
-import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
-import network from '$lib/stores/wallet/network';
-
-// const DEFAULT_BADGE_OPTIONS: BadgeOptions = {
-// 	style: BadgeStyle.drips,
-// 	text: BadgeText.me,
-// 	background: BadgeBackground.light,
-// 	stat: BadgeStat.none,
-// } as const
-
-const getBadgeOptions = (url: URL): BadgeOptions => {
-  return {
-    style: BadgeStyle[url.searchParams.get('style') as BadgeStyle] || BadgeStyle.default,
-    text: BadgeText[url.searchParams.get('text') as BadgeText] || BadgeText.default,
-    background:
-      BadgeBackground[url.searchParams.get('background') as BadgeBackground] ||
-      BadgeBackground.default,
-    stat: BadgeStat[url.searchParams.get('stat') as BadgeStat] || BadgeStat.default,
-  };
-};
-
-export async function load({ url, params }): Promise<{
-  badgeData: BadgeData;
-  badgeOptions: BadgeOptions;
-}> {
-  const { projectUrl } = params;
-  assert(projectUrl, 'Missing projectUrl param');
-
-  // TODO: same as PROJECT_AVATAR_FRAGMENT from project-avatar.svelte
-  const projectQuery = gql`
-    query Project($url: String!, $chains: [SupportedChain!]) {
-      projectByUrl(url: $url, chains: $chains) {
-        source {
-          ownerName
-          repoName
-        }
-        chainData {
-          ... on UnClaimedProjectData {
-            chain
-          }
-          ... on ClaimedProjectData {
-            chain
-            color
-            avatar {
-              ... on ImageAvatar {
-                cid
-              }
-              ... on EmojiAvatar {
-                emoji
-              }
-            }
-            splits {
-              dependencies {
-                __typename
-              }
-            }
-            totalEarned {
-              amount
-            }
-          }
-        }
-      }
-    }
-  `;
-
-  const res = await query<ProjectQuery, ProjectQueryVariables>(
-    projectQuery,
-    { url: projectUrl, chains: [network.gqlName] },
-    fetch,
-  );
-  const { projectByUrl: project } = res;
-  try {
-    assert(project);
-  } catch {
-    error(404);
-  }
-
-  const projectName = `${project.source.repoName}`;
-
-  const projectData = filterCurrentChainData(project.chainData);
-
-  const dependencies = isClaimed(projectData)
-    ? projectData.splits.dependencies.length.toString()
-    : '0';
-
-  const badgeOptions = getBadgeOptions(url);
-
-  return {
-    badgeData: {
-      support: 12456,
-      dependencies,
-      projectName,
-      projectAvatar: projectData,
-    },
-    badgeOptions,
-  };
-}
-
-// embeds/project/whatever.com?background=light&buttonText=me&style=drips&stat=dependencies
-
-// export const GET: RequestHandler = async ({ url, fetch, params }) => {
-// const { projectUrl } = params;
-// assert(projectUrl, 'Missing projectUrl param');
-
-// const projectQuery = gql`
-//   query Project($url: String!, $chains: [SupportedChain!]) {
-//     projectByUrl(url: $url, chains: $chains) {
-//       source {
-//         ownerName
-//         repoName
-//       }
-//       chainData {
-//         ... on UnClaimedProjectData {
-//           chain
-//         }
-//         ... on ClaimedProjectData {
-//           chain
-//           avatar {
-//             ... on ImageAvatar {
-//               cid
-//             }
-//             ... on EmojiAvatar {
-//               emoji
-//             }
-//           }
-//           color
-//           splits {
-//             dependencies {
-//               __typename
-//             }
-//           }
-//         }
-//       }
-//     }
-//   }
-// `;
-
-//   const res = await query<ProjectQuery, ProjectQueryVariables>(
-//     projectQuery,
-//     { url: projectUrl, chains: [network.gqlName] },
-//     fetch,
-//   );
-//   const { projectByUrl: project } = res;
-//   try {
-//     assert(project);
-//   } catch {
-//     error(404);
-//   }
-
-//   const projectName = `${project.source.ownerName}/${project.source.repoName}`;
-
-//   const projectData = filterCurrentChainData(project.chainData);
-
-//   const emoji =
-//     isClaimed(projectData) && projectData.avatar.__typename === 'EmojiAvatar'
-//       ? sanitize(projectData.avatar.emoji, {
-//           allowedTags: [],
-//           allowedAttributes: {},
-//         })
-//       : 'none';
-
-//   const cid =
-//     isClaimed(projectData) && projectData.avatar.__typename === 'ImageAvatar'
-//       ? projectData.avatar.cid
-//       : 'none';
-
-//   const dependenciesCount = isClaimed(projectData)
-//     ? projectData.splits.dependencies.length.toString()
-//     : '0';
-
-//   const color = isClaimed(projectData) ? projectData.color : 'none';
-//   const target = url.searchParams.get('target');
-
-//   try {
-//     assert(target === 'twitter' || target === 'og');
-//   } catch {
-//     error(400, 'Invalid or missing query params');
-//   }
-
-//   const height = target === 'twitter' ? 600 : 675;
-
-//   const bgColor = color === 'none' ? '#5555FF' : color;
-//   const contrastColor = getContrastColor(bgColor);
-
-//   const bgTheme = contrastColor === 'black' ? 'dark' : 'light';
-//   const boxIconDataURI = await loadImage(`/assets/share/box-${bgTheme}.png`, fetch);
-
-//   const textColor = contrastColor === 'black' ? '#333333' : '#FFFFFF';
-
-//   const dependenciesString = dependenciesCount === '1' ? 'Dependency' : 'Dependencies';
-
-//   const twemojiElem = (emoji !== 'none' && twemoji(emoji)) ?? undefined;
-//   const twemojiSrc = (twemojiElem && /src\s*=\s*"(.+?)"/g.exec(twemojiElem)?.[1]) ?? undefined;
-
-//   const twemojiImg = twemojiSrc && (await (await fetch(twemojiSrc)).text());
-
-//   const resizedTwemojImg =
-//     typeof twemojiImg === 'string'
-//       ? twemojiImg.replace('<svg', '<svg height="60%" width="60%"')
-//       : '';
-
-//   const avatarHtml =
-//     isClaimed(projectData) && projectData.avatar.__typename === 'ImageAvatar'
-//       ? `<div style="display: flex; align-items: center; justify-content: center; height: 128px; width: 128px; border-radius: 64px; background-color: white; ">
-//         <img height="100%" width="100%" src="https://drips.network/api/custom-avatars/${cid}" style="border-radius: 50%; border: 1px solid black" />
-//       </div>`
-//       : `<div style="display: flex; align-items: center; justify-content: center; height: 128px; width: 128px; border-radius: 64px; background-color: white;">
-//           ${resizedTwemojImg}
-//         </div>`;
-
-//   const svg = await satori(
-//     toReactElement(`<div style="display: flex; background-color: ${bgColor}">
-//       ${getBackgroundImage(bgColor, textColor, target)}
-//       <div style="position: absolute; bottom: 40px; left: 40px; right: 200px; display: flex; flex-direction: column; color: ${textColor}; gap: 24px;">
-//         <span style="font-family: Inter; font-size: 40px">Project</span>
-//         <div style="display: flex; gap: 32px;">
-//         ${avatarHtml}
-//           <span style="font-family: Redaction; width: 1000px; font-size: 90px; display: block; line-clamp: 2;">${projectName}</span>
-//         </div>
-//         <div style="display: flex; gap: 24px; align-items: center; opacity: ${
-//           dependenciesCount === '0' ? '0' : '1'
-//         }">
-//           <img src="${boxIconDataURI}" height="64px" width="64px" />
-//           <span style="font-family: Inter; font-size: 40px">${dependenciesCount} ${dependenciesString}</span>
-//         </div>
-//       </div>
-//     </div>`),
-//     {
-//       width: 1200,
-//       height: height,
-//       fonts: await loadFonts(fetch),
-//     },
-//   );
-
-//   const resvg = new Resvg(svg, {
-//     fitTo: {
-//       mode: 'width',
-//       value: 1200,
-//     },
-//   });
-
-//   const image = resvg.render();
-
-//   return new Response(image.asPng(), {
-//     headers: {
-//       'content-type': 'image/png',
-//       'cache-control': 'public, max-age=86400', // 24 hours
-//     },
-//   });
-// };
diff --git a/src/routes/embed/project/[projectUrl]/badge.png/+server.ts b/src/routes/embed/project/[projectUrl]/support.png/+server.ts
similarity index 100%
rename from src/routes/embed/project/[projectUrl]/badge.png/+server.ts
rename to src/routes/embed/project/[projectUrl]/support.png/+server.ts
diff --git a/src/routes/embed/project/[projectUrl]/support/+page.server.ts b/src/routes/embed/project/[projectUrl]/support/+page.server.ts
new file mode 100644
index 000000000..9c84cbd79
--- /dev/null
+++ b/src/routes/embed/project/[projectUrl]/support/+page.server.ts
@@ -0,0 +1,105 @@
+import {
+  BadgeBackground,
+  BadgeStat,
+  BadgeStyle,
+  BadgeText,
+  type BadgeData,
+  type BadgeOptions,
+} from '$lib/components/project-support-button/project-support-button';
+
+import assert from '$lib/utils/assert';
+import { error } from '@sveltejs/kit';
+import { gql } from 'graphql-request';
+import query from '$lib/graphql/dripsQL';
+import isClaimed from '$lib/utils/project/is-claimed';
+import type { ProjectQuery, ProjectQueryVariables } from './__generated__/gql.generated';
+import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
+import network from '$lib/stores/wallet/network';
+
+const getBadgeOptions = (url: URL): BadgeOptions => {
+  return {
+    style: BadgeStyle[url.searchParams.get('style') as BadgeStyle] || BadgeStyle.default,
+    text: BadgeText[url.searchParams.get('text') as BadgeText] || BadgeText.default,
+    background:
+      BadgeBackground[url.searchParams.get('background') as BadgeBackground] ||
+      BadgeBackground.default,
+    stat: BadgeStat[url.searchParams.get('stat') as BadgeStat] || BadgeStat.default,
+  };
+};
+
+export async function load({ url, params }): Promise<{
+  badgeData: BadgeData;
+  badgeOptions: BadgeOptions;
+}> {
+  const { projectUrl } = params;
+  assert(projectUrl, 'Missing projectUrl param');
+
+  // TODO: same as PROJECT_AVATAR_FRAGMENT from project-avatar.svelte
+  const projectQuery = gql`
+    query Project($url: String!, $chains: [SupportedChain!]) {
+      projectByUrl(url: $url, chains: $chains) {
+        source {
+          ownerName
+          repoName
+        }
+        chainData {
+          ... on UnClaimedProjectData {
+            chain
+          }
+          ... on ClaimedProjectData {
+            chain
+            color
+            avatar {
+              ... on ImageAvatar {
+                cid
+              }
+              ... on EmojiAvatar {
+                emoji
+              }
+            }
+            splits {
+              dependencies {
+                __typename
+              }
+            }
+            totalEarned {
+              amount
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  const res = await query<ProjectQuery, ProjectQueryVariables>(
+    projectQuery,
+    { url: projectUrl, chains: [network.gqlName] },
+    fetch,
+  );
+  const { projectByUrl: project } = res;
+  try {
+    assert(project);
+  } catch {
+    error(404);
+  }
+
+  const projectName = `${project.source.repoName}`;
+
+  const projectData = filterCurrentChainData(project.chainData);
+
+  const dependencies = isClaimed(projectData)
+    ? projectData.splits.dependencies.length.toString()
+    : '0';
+
+  const badgeOptions = getBadgeOptions(url);
+
+  return {
+    badgeData: {
+      support: 12456,
+      dependencies,
+      projectName,
+      projectAvatar: projectData,
+    },
+    badgeOptions,
+  };
+}
diff --git a/src/routes/embed/project/[projectUrl]/badge/+page.svelte b/src/routes/embed/project/[projectUrl]/support/+page.svelte
similarity index 100%
rename from src/routes/embed/project/[projectUrl]/badge/+page.svelte
rename to src/routes/embed/project/[projectUrl]/support/+page.svelte

From 5cfe5d198a65b634da2ed7329b06165d429c866f Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 15:04:41 +0200
Subject: [PATCH 10/15] Further alignment around support button naming

---
 .../drips-style-button.svelte                 | 22 +++++-----
 .../github-style-button.svelte                | 22 +++++-----
 .../project-support-button.svelte             | 20 ++++++----
 .../project-support-button.ts                 | 20 +++++-----
 .../[projectUrl]/support/+page.server.ts      | 40 +++++++++++--------
 .../project/[projectUrl]/support/+page.svelte |  2 +-
 6 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/src/lib/components/project-support-button/drips-style-button.svelte b/src/lib/components/project-support-button/drips-style-button.svelte
index 97be169ce..050f1d8b8 100644
--- a/src/lib/components/project-support-button/drips-style-button.svelte
+++ b/src/lib/components/project-support-button/drips-style-button.svelte
@@ -2,14 +2,14 @@
   import Drip from '$lib/components/illustrations/drip.svelte';
   import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
   import {
-    BadgeStat,
-    BadgeText,
-    type BadgeData,
-    type BadgeOptions,
+    SupportButtonStat,
+    SupportButtonText,
+    type SupportButtonData,
+    type SupportButtonOptions,
   } from './project-support-button';
 
-  export let options: BadgeOptions;
-  export let data: BadgeData;
+  export let options: SupportButtonOptions;
+  export let data: SupportButtonData;
 
   $: dripFill = options.background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)';
   $: dependencies = data?.dependencies || 0;
@@ -27,20 +27,20 @@
   </span>
 
   <span class="embed-badge__text">
-    {#if options.text === BadgeText.me}
+    {#if options.text === SupportButtonText.me}
       Drip to me
-    {:else if options.text === BadgeText.us}
+    {:else if options.text === SupportButtonText.us}
       Support us on Drips
-    {:else if options.text === BadgeText.project}
+    {:else if options.text === SupportButtonText.project}
       Support <ProjectAvatar project={data.projectAvatar} size="tiny" /><strong
         >{data.projectName}</strong
       > on Drips
     {/if}
   </span>
 
-  {#if options.stat === BadgeStat.support}
+  {#if options.stat === SupportButtonStat.support}
     <span class="embed-badge__support">{data.support}</span>
-  {:else if options.stat === BadgeStat.dependencies}
+  {:else if options.stat === SupportButtonStat.dependencies}
     <span class="embed-badge__dependencies">{dependenciesString}</span>
   {/if}
 </div>
diff --git a/src/lib/components/project-support-button/github-style-button.svelte b/src/lib/components/project-support-button/github-style-button.svelte
index 50ad6b559..a78659683 100644
--- a/src/lib/components/project-support-button/github-style-button.svelte
+++ b/src/lib/components/project-support-button/github-style-button.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import Drip from '$lib/components/illustrations/drip.svelte';
   import {
-    BadgeStat,
-    BadgeText,
-    type BadgeData,
-    type BadgeOptions,
+    SupportButtonStat,
+    SupportButtonText,
+    type SupportButtonData,
+    type SupportButtonOptions,
   } from './project-support-button';
   import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
 
-  export let options: BadgeOptions;
-  export let data: BadgeData;
+  export let options: SupportButtonOptions;
+  export let data: SupportButtonData;
 
   $: dripFill = options.background === 'blue' ? 'var(--color-background)' : 'var(--color-primary)';
   $: dripStroke = options.background === 'blue' ? 'var(--color-primary)' : 'white';
@@ -28,20 +28,20 @@
   </span>
 
   <span class="embed-badge__text">
-    {#if options.text === BadgeText.me}
+    {#if options.text === SupportButtonText.me}
       Drip to me
-    {:else if options.text === BadgeText.us}
+    {:else if options.text === SupportButtonText.us}
       Support us on Drips
-    {:else if options.text === BadgeText.project}
+    {:else if options.text === SupportButtonText.project}
       Support <ProjectAvatar project={data.projectAvatar} size="micro" /><strong
         >{data.projectName}</strong
       > on Drips
     {/if}
   </span>
 
-  {#if options.stat === BadgeStat.support}
+  {#if options.stat === SupportButtonStat.support}
     <span class="embed-badge__support">{data.support}</span>
-  {:else if options.stat === BadgeStat.dependencies}
+  {:else if options.stat === SupportButtonStat.dependencies}
     <span class="embed-badge__dependencies">{dependenciesString}</span>
   {/if}
 </div>
diff --git a/src/lib/components/project-support-button/project-support-button.svelte b/src/lib/components/project-support-button/project-support-button.svelte
index 9beb8b5d5..4caab0e83 100644
--- a/src/lib/components/project-support-button/project-support-button.svelte
+++ b/src/lib/components/project-support-button/project-support-button.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
-  import { BadgeStyle, type BadgeData, type BadgeOptions } from './project-support-button';
-  import DripsBadge from './drips-style-button.svelte';
-  import GithubBadge from './github-style-button.svelte';
+  import {
+    SupportButtonStyle,
+    type SupportButtonData,
+    type SupportButtonOptions,
+  } from './project-support-button';
+  import DripsSupportButton from './drips-style-button.svelte';
+  import GithubSupportButton from './github-style-button.svelte';
 
-  export let data: BadgeData;
-  export let options: BadgeOptions;
+  export let data: SupportButtonData;
+  export let options: SupportButtonOptions;
 </script>
 
 <div>
-  {#if options.style === BadgeStyle.github}
-    <GithubBadge {data} {options} />
+  {#if options.style === SupportButtonStyle.github}
+    <GithubSupportButton {data} {options} />
   {:else}
-    <DripsBadge {data} {options} />
+    <DripsSupportButton {data} {options} />
   {/if}
 </div>
 
diff --git a/src/lib/components/project-support-button/project-support-button.ts b/src/lib/components/project-support-button/project-support-button.ts
index e5adb0d02..5ffdd0a47 100644
--- a/src/lib/components/project-support-button/project-support-button.ts
+++ b/src/lib/components/project-support-button/project-support-button.ts
@@ -1,40 +1,40 @@
 import type { ProjectAvatarFragment } from '$lib/components/project-avatar/__generated__/gql.generated';
 
-export enum BadgeStyle {
+export enum SupportButtonStyle {
   github = 'github',
   drips = 'drips',
   default = drips,
 }
 
-export enum BadgeText {
+export enum SupportButtonText {
   project = 'project',
   me = 'me',
   us = 'us',
   default = me,
 }
 
-export enum BadgeBackground {
+export enum SupportButtonBackground {
   dark = 'dark',
   light = 'light',
   blue = 'blue',
   default = light,
 }
 
-export enum BadgeStat {
+export enum SupportButtonStat {
   support = 'support',
   dependencies = 'dependencies',
   none = 'none',
   default = none,
 }
 
-export type BadgeOptions = {
-  style: BadgeStyle;
-  text: BadgeText;
-  background: BadgeBackground;
-  stat: BadgeStat;
+export type SupportButtonOptions = {
+  style: SupportButtonStyle;
+  text: SupportButtonText;
+  background: SupportButtonBackground;
+  stat: SupportButtonStat;
 };
 
-export type BadgeData = {
+export type SupportButtonData = {
   support?: number;
   dependencies?: string;
   projectName?: string;
diff --git a/src/routes/embed/project/[projectUrl]/support/+page.server.ts b/src/routes/embed/project/[projectUrl]/support/+page.server.ts
index 9c84cbd79..253c5cb69 100644
--- a/src/routes/embed/project/[projectUrl]/support/+page.server.ts
+++ b/src/routes/embed/project/[projectUrl]/support/+page.server.ts
@@ -1,10 +1,10 @@
 import {
-  BadgeBackground,
-  BadgeStat,
-  BadgeStyle,
-  BadgeText,
-  type BadgeData,
-  type BadgeOptions,
+  SupportButtonBackground,
+  SupportButtonStat,
+  SupportButtonStyle,
+  SupportButtonText,
+  type SupportButtonData,
+  type SupportButtonOptions,
 } from '$lib/components/project-support-button/project-support-button';
 
 import assert from '$lib/utils/assert';
@@ -16,20 +16,26 @@ import type { ProjectQuery, ProjectQueryVariables } from './__generated__/gql.ge
 import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
 import network from '$lib/stores/wallet/network';
 
-const getBadgeOptions = (url: URL): BadgeOptions => {
+const getSupportButtonOptions = (url: URL): SupportButtonOptions => {
   return {
-    style: BadgeStyle[url.searchParams.get('style') as BadgeStyle] || BadgeStyle.default,
-    text: BadgeText[url.searchParams.get('text') as BadgeText] || BadgeText.default,
+    style:
+      SupportButtonStyle[url.searchParams.get('style') as SupportButtonStyle] ||
+      SupportButtonStyle.default,
+    text:
+      SupportButtonText[url.searchParams.get('text') as SupportButtonText] ||
+      SupportButtonText.default,
     background:
-      BadgeBackground[url.searchParams.get('background') as BadgeBackground] ||
-      BadgeBackground.default,
-    stat: BadgeStat[url.searchParams.get('stat') as BadgeStat] || BadgeStat.default,
+      SupportButtonBackground[url.searchParams.get('background') as SupportButtonBackground] ||
+      SupportButtonBackground.default,
+    stat:
+      SupportButtonStat[url.searchParams.get('stat') as SupportButtonStat] ||
+      SupportButtonStat.default,
   };
 };
 
 export async function load({ url, params }): Promise<{
-  badgeData: BadgeData;
-  badgeOptions: BadgeOptions;
+  supportButtonData: SupportButtonData;
+  supportButtonOptions: SupportButtonOptions;
 }> {
   const { projectUrl } = params;
   assert(projectUrl, 'Missing projectUrl param');
@@ -91,15 +97,15 @@ export async function load({ url, params }): Promise<{
     ? projectData.splits.dependencies.length.toString()
     : '0';
 
-  const badgeOptions = getBadgeOptions(url);
+  const supportButtonOptions = getSupportButtonOptions(url);
 
   return {
-    badgeData: {
+    supportButtonData: {
       support: 12456,
       dependencies,
       projectName,
       projectAvatar: projectData,
     },
-    badgeOptions,
+    supportButtonOptions,
   };
 }
diff --git a/src/routes/embed/project/[projectUrl]/support/+page.svelte b/src/routes/embed/project/[projectUrl]/support/+page.svelte
index d6e9155fa..ea3f1d8e3 100644
--- a/src/routes/embed/project/[projectUrl]/support/+page.svelte
+++ b/src/routes/embed/project/[projectUrl]/support/+page.svelte
@@ -24,5 +24,5 @@
 </script>
 
 {#if ready}
-  <Badge data={data.badgeData} options={data.badgeOptions} />
+  <Badge data={data.supportButtonData} options={data.supportButtonOptions} />
 {/if}

From 178c1bc2a1ffafdfe0e16d55fd3e3712de37499d Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 15:10:56 +0200
Subject: [PATCH 11/15] Further style alignment around project support button

---
 .../drips-style-button.svelte                 | 32 +++++++++----------
 .../github-style-button.svelte                | 26 +++++++--------
 .../[projectUrl]/support.png/+server.ts       |  6 ++--
 .../project/[projectUrl]/support/+page.svelte |  4 +--
 4 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/project-support-button/drips-style-button.svelte b/src/lib/components/project-support-button/drips-style-button.svelte
index 050f1d8b8..39aec4498 100644
--- a/src/lib/components/project-support-button/drips-style-button.svelte
+++ b/src/lib/components/project-support-button/drips-style-button.svelte
@@ -20,13 +20,13 @@
 </script>
 
 <div
-  class={`embed-badge embed-badge--drips embed-badge--${options.background} embed-badge--${options.text} embed-badge--${options.stat}`}
+  class={`support-button support-button--drips support-button--${options.background} support-button--${options.text} support-button--${options.stat}`}
 >
-  <span class="embed-badge__icon">
+  <span class="support-button__icon">
     <Drip fill={dripFill} />
   </span>
 
-  <span class="embed-badge__text">
+  <span class="support-button__text">
     {#if options.text === SupportButtonText.me}
       Drip to me
     {:else if options.text === SupportButtonText.us}
@@ -39,18 +39,18 @@
   </span>
 
   {#if options.stat === SupportButtonStat.support}
-    <span class="embed-badge__support">{data.support}</span>
+    <span class="support-button__support">{data.support}</span>
   {:else if options.stat === SupportButtonStat.dependencies}
-    <span class="embed-badge__dependencies">{dependenciesString}</span>
+    <span class="support-button__dependencies">{dependenciesString}</span>
   {/if}
 </div>
 
 <style>
-  .embed-badge strong {
+  .support-button strong {
     font-weight: 600;
   }
 
-  .embed-badge--drips {
+  .support-button--drips {
     border: 1px solid #28333d;
     padding: 0 10px;
     border-radius: 1rem 0 1rem 1rem;
@@ -62,42 +62,42 @@
     color: #28333d;
   }
 
-  .embed-badge--drips.embed-badge--dark {
+  .support-button--drips.support-button--dark {
     background-color: #28333d;
     color: #ffffff;
   }
 
-  .embed-badge--drips.embed-badge--blue {
+  .support-button--drips.support-button--blue {
     background-color: #5555ff;
     color: #ffffff;
   }
 
-  .embed-badge__icon {
+  .support-button__icon {
     width: 12px;
     display: flex;
     align-items: center;
   }
 
-  .embed-badge__text {
+  .support-button__text {
     display: flex;
     gap: 7px;
     align-items: center;
   }
 
-  .embed-badge__avatar {
+  .support-button__avatar {
     width: 24px;
     height: 24px;
     border-radius: 100%;
   }
 
-  .embed-badge__dependencies,
-  .embed-badge__support {
+  .support-button__dependencies,
+  .support-button__support {
     color: #ffffff;
     font-weight: 600;
   }
 
-  .embed-badge--drips.embed-badge--light .embed-badge__dependencies,
-  .embed-badge--drips.embed-badge--light .embed-badge__support {
+  .support-button--drips.support-button--light .support-button__dependencies,
+  .support-button--drips.support-button--light .support-button__support {
     color: #5555ff;
   }
 </style>
diff --git a/src/lib/components/project-support-button/github-style-button.svelte b/src/lib/components/project-support-button/github-style-button.svelte
index a78659683..21abf0d54 100644
--- a/src/lib/components/project-support-button/github-style-button.svelte
+++ b/src/lib/components/project-support-button/github-style-button.svelte
@@ -21,13 +21,13 @@
 </script>
 
 <div
-  class={`embed-badge embed-badge--github embed-badge--${options.background} embed-badge--${options.text} embed-badge--${options.stat}`}
+  class={`support-button support-button--github support-button--${options.background} support-button--${options.text} support-button--${options.stat}`}
 >
-  <span class="embed-badge__icon">
+  <span class="support-button__icon">
     <Drip fill={dripFill} stroke={dripStroke} strokeWidth="4px" />
   </span>
 
-  <span class="embed-badge__text">
+  <span class="support-button__text">
     {#if options.text === SupportButtonText.me}
       Drip to me
     {:else if options.text === SupportButtonText.us}
@@ -40,18 +40,18 @@
   </span>
 
   {#if options.stat === SupportButtonStat.support}
-    <span class="embed-badge__support">{data.support}</span>
+    <span class="support-button__support">{data.support}</span>
   {:else if options.stat === SupportButtonStat.dependencies}
-    <span class="embed-badge__dependencies">{dependenciesString}</span>
+    <span class="support-button__dependencies">{dependenciesString}</span>
   {/if}
 </div>
 
 <style>
-  .embed-badge strong {
+  .support-button strong {
     font-weight: 600;
   }
 
-  .embed-badge--github {
+  .support-button--github {
     display: inline-flex;
     align-items: center;
     font-size: 11px;
@@ -65,25 +65,25 @@
     overflow: hidden;
   }
 
-  .embed-badge__icon {
+  .support-button__icon {
     width: 6px;
     display: flex;
     align-items: center;
   }
 
-  .embed-badge__text {
+  .support-button__text {
     display: flex;
     gap: 3px;
     align-items: center;
   }
 
-  .embed-badge--github.embed-badge--dependencies,
-  .embed-badge--github.embed-badge--support {
+  .support-button--github.support-button--dependencies,
+  .support-button--github.support-button--support {
     padding-right: 0;
   }
 
-  .embed-badge__support,
-  .embed-badge__dependencies {
+  .support-button__support,
+  .support-button__dependencies {
     background: #5555ff;
     height: 20px;
     padding: 0 4px;
diff --git a/src/routes/embed/project/[projectUrl]/support.png/+server.ts b/src/routes/embed/project/[projectUrl]/support.png/+server.ts
index af80e98cf..7de6938aa 100644
--- a/src/routes/embed/project/[projectUrl]/support.png/+server.ts
+++ b/src/routes/embed/project/[projectUrl]/support.png/+server.ts
@@ -5,10 +5,8 @@ import puppeteer from 'puppeteer';
 const REPLACE_PNG_REGEX = /(\.png\/?)(\?.*|$)/;
 
 export const GET: RequestHandler = async ({ url }) => {
-  // drips.network/embed/project.png/badge.png
-  // drips.network/embed/project.png/badge.png?background=dark
-  // drips.network/embed/project.png/badge.png/?background=dark
-  // ==> drips.network/embed/project.png/badge
+  // drips.network/embed/project.png/support.png/?background=dark
+  // ==> drips.network/embed/project.png/support?background=dark
   const imageUrl = url.href.replace(REPLACE_PNG_REGEX, '$2');
   // TODO: handle invalid href
 
diff --git a/src/routes/embed/project/[projectUrl]/support/+page.svelte b/src/routes/embed/project/[projectUrl]/support/+page.svelte
index ea3f1d8e3..adb42e416 100644
--- a/src/routes/embed/project/[projectUrl]/support/+page.svelte
+++ b/src/routes/embed/project/[projectUrl]/support/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Badge from '$lib/components/project-support-button/project-support-button.svelte';
+  import ProjectSupportButton from '$lib/components/project-support-button/project-support-button.svelte';
   import wait from '$lib/utils/wait';
 
   export let data;
@@ -24,5 +24,5 @@
 </script>
 
 {#if ready}
-  <Badge data={data.supportButtonData} options={data.supportButtonOptions} />
+  <ProjectSupportButton data={data.supportButtonData} options={data.supportButtonOptions} />
 {/if}

From be4463a77099e0ed4067f1cf523f9f0417704ad1 Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 19:10:20 +0200
Subject: [PATCH 12/15] Just use the AggregateFiatEstimate component; settile
 on a type finally

---
 .../drips-style-button.svelte                  | 18 +++++++++++-------
 .../github-style-button.svelte                 | 10 +++++++---
 .../project-support-button.svelte              |  6 ++++++
 .../project-support-button.ts                  |  5 ++++-
 .../[projectUrl]/support/+page.server.ts       | 15 +++++++++++++--
 5 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/project-support-button/drips-style-button.svelte b/src/lib/components/project-support-button/drips-style-button.svelte
index 39aec4498..96378a17d 100644
--- a/src/lib/components/project-support-button/drips-style-button.svelte
+++ b/src/lib/components/project-support-button/drips-style-button.svelte
@@ -7,6 +7,7 @@
     type SupportButtonData,
     type SupportButtonOptions,
   } from './project-support-button';
+  import AggregateFiatEstimate from '$lib/components/aggregate-fiat-estimate/aggregate-fiat-estimate.svelte';
 
   export let options: SupportButtonOptions;
   export let data: SupportButtonData;
@@ -19,7 +20,8 @@
       : `Splitting to ${dependencies} Dependencies`;
 </script>
 
-<div
+<a
+  href={data.projectUrl}
   class={`support-button support-button--drips support-button--${options.background} support-button--${options.text} support-button--${options.stat}`}
 >
   <span class="support-button__icon">
@@ -39,17 +41,15 @@
   </span>
 
   {#if options.stat === SupportButtonStat.support}
-    <span class="support-button__support">{data.support}</span>
+    <span class="support-button__support"
+      ><AggregateFiatEstimate amounts={data.projectAvatar.totalEarned} /></span
+    >
   {:else if options.stat === SupportButtonStat.dependencies}
     <span class="support-button__dependencies">{dependenciesString}</span>
   {/if}
-</div>
+</a>
 
 <style>
-  .support-button strong {
-    font-weight: 600;
-  }
-
   .support-button--drips {
     border: 1px solid #28333d;
     padding: 0 10px;
@@ -100,4 +100,8 @@
   .support-button--drips.support-button--light .support-button__support {
     color: #5555ff;
   }
+
+  .support-button strong {
+    font-weight: 600;
+  }
 </style>
diff --git a/src/lib/components/project-support-button/github-style-button.svelte b/src/lib/components/project-support-button/github-style-button.svelte
index 21abf0d54..a5c2afe24 100644
--- a/src/lib/components/project-support-button/github-style-button.svelte
+++ b/src/lib/components/project-support-button/github-style-button.svelte
@@ -7,6 +7,7 @@
     type SupportButtonOptions,
   } from './project-support-button';
   import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
+  import AggregateFiatEstimate from '$lib/components/aggregate-fiat-estimate/aggregate-fiat-estimate.svelte';
 
   export let options: SupportButtonOptions;
   export let data: SupportButtonData;
@@ -20,7 +21,8 @@
       : `Splitting to ${dependencies} Dependencies`;
 </script>
 
-<div
+<a
+  href={data.projectUrl}
   class={`support-button support-button--github support-button--${options.background} support-button--${options.text} support-button--${options.stat}`}
 >
   <span class="support-button__icon">
@@ -40,11 +42,13 @@
   </span>
 
   {#if options.stat === SupportButtonStat.support}
-    <span class="support-button__support">{data.support}</span>
+    <span class="support-button__support"
+      ><AggregateFiatEstimate amounts={data.projectAvatar.totalEarned} /></span
+    >
   {:else if options.stat === SupportButtonStat.dependencies}
     <span class="support-button__dependencies">{dependenciesString}</span>
   {/if}
-</div>
+</a>
 
 <style>
   .support-button strong {
diff --git a/src/lib/components/project-support-button/project-support-button.svelte b/src/lib/components/project-support-button/project-support-button.svelte
index 4caab0e83..e2ddc3a77 100644
--- a/src/lib/components/project-support-button/project-support-button.svelte
+++ b/src/lib/components/project-support-button/project-support-button.svelte
@@ -6,9 +6,15 @@
   } from './project-support-button';
   import DripsSupportButton from './drips-style-button.svelte';
   import GithubSupportButton from './github-style-button.svelte';
+  import fiatEstimates from '$lib/utils/fiat-estimates/fiat-estimates';
+  import { onMount } from 'svelte';
 
   export let data: SupportButtonData;
   export let options: SupportButtonOptions;
+
+  onMount(() => {
+    fiatEstimates.start();
+  });
 </script>
 
 <div>
diff --git a/src/lib/components/project-support-button/project-support-button.ts b/src/lib/components/project-support-button/project-support-button.ts
index 5ffdd0a47..43d2a912b 100644
--- a/src/lib/components/project-support-button/project-support-button.ts
+++ b/src/lib/components/project-support-button/project-support-button.ts
@@ -1,4 +1,5 @@
 import type { ProjectAvatarFragment } from '$lib/components/project-avatar/__generated__/gql.generated';
+import type { Amount } from '../aggregate-fiat-estimate/aggregate-fiat-estimate';
 
 export enum SupportButtonStyle {
   github = 'github',
@@ -38,5 +39,7 @@ export type SupportButtonData = {
   support?: number;
   dependencies?: string;
   projectName?: string;
-  projectAvatar: ProjectAvatarFragment;
+  projectUrl?: string;
+  // TODO: a more appropriate type
+  projectAvatar: ProjectAvatarFragment & { totalEarned?: Amount[] };
 };
diff --git a/src/routes/embed/project/[projectUrl]/support/+page.server.ts b/src/routes/embed/project/[projectUrl]/support/+page.server.ts
index 253c5cb69..a772de827 100644
--- a/src/routes/embed/project/[projectUrl]/support/+page.server.ts
+++ b/src/routes/embed/project/[projectUrl]/support/+page.server.ts
@@ -15,6 +15,7 @@ import isClaimed from '$lib/utils/project/is-claimed';
 import type { ProjectQuery, ProjectQueryVariables } from './__generated__/gql.generated';
 import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
 import network from '$lib/stores/wallet/network';
+import buildProjectUrl from '$lib/utils/build-project-url';
 
 const getSupportButtonOptions = (url: URL): SupportButtonOptions => {
   return {
@@ -47,6 +48,7 @@ export async function load({ url, params }): Promise<{
         source {
           ownerName
           repoName
+          forge
         }
         chainData {
           ... on UnClaimedProjectData {
@@ -69,6 +71,7 @@ export async function load({ url, params }): Promise<{
               }
             }
             totalEarned {
+              tokenAddress
               amount
             }
           }
@@ -89,8 +92,10 @@ export async function load({ url, params }): Promise<{
     error(404);
   }
 
-  const projectName = `${project.source.repoName}`;
+  const { forge, ownerName, repoName } = project.source;
+  const appProjectUrl = `${url.origin}${buildProjectUrl(forge, ownerName, repoName)}`;
 
+  const projectName = `${project.source.repoName}`;
   const projectData = filterCurrentChainData(project.chainData);
 
   const dependencies = isClaimed(projectData)
@@ -99,11 +104,17 @@ export async function load({ url, params }): Promise<{
 
   const supportButtonOptions = getSupportButtonOptions(url);
 
+  // const tokenAddresses = projectData.totalEarned?.map((a) => a.tokenAddress);
+  // await fiatEstimates.start(url.origin)
+  // const priceStore = fiatEstimates.price(tokenAddresses)
+  // const result = aggregateFiatEstimate(priceStore, projectData.totalEarned);
+  // console.log(projectData);
+
   return {
     supportButtonData: {
-      support: 12456,
       dependencies,
       projectName,
+      projectUrl: appProjectUrl,
       projectAvatar: projectData,
     },
     supportButtonOptions,

From 73d1891bd4807ab89cf6d67d283f32395bb54b99 Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 19:20:30 +0200
Subject: [PATCH 13/15] Try the nixpacks puppeteer for fun

---
 nixpacks.toml | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 nixpacks.toml

diff --git a/nixpacks.toml b/nixpacks.toml
new file mode 100644
index 000000000..88b30eb8d
--- /dev/null
+++ b/nixpacks.toml
@@ -0,0 +1,22 @@
+[phases.setup]
+  aptPkgs = [
+    'fonts-liberation',
+    'libappindicator3-1',
+    'libasound2',
+    'libatk-bridge2.0-0',
+    'libatk1.0-0',
+    'libgbm1',
+    'libgtk-3-0',
+    'libnspr4',
+    'libnss3',
+    'libx11-xcb1',
+    'libxcomposite1',
+    'libxcursor1',
+    'libxdamage1',
+    'libxfixes3',
+    'libxi6',
+    'libxrandr2',
+    'libxss1',
+    'libxtst6',
+    'xdg-utils'
+    ]

From deb736ab3ac9a24b2d361a85591e8d36dfd8ee7f Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 19:29:04 +0200
Subject: [PATCH 14/15] Try another nixpacks solution

---
 nixpacks.toml | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/nixpacks.toml b/nixpacks.toml
index 88b30eb8d..f578c9524 100644
--- a/nixpacks.toml
+++ b/nixpacks.toml
@@ -1,22 +1,2 @@
 [phases.setup]
-  aptPkgs = [
-    'fonts-liberation',
-    'libappindicator3-1',
-    'libasound2',
-    'libatk-bridge2.0-0',
-    'libatk1.0-0',
-    'libgbm1',
-    'libgtk-3-0',
-    'libnspr4',
-    'libnss3',
-    'libx11-xcb1',
-    'libxcomposite1',
-    'libxcursor1',
-    'libxdamage1',
-    'libxfixes3',
-    'libxi6',
-    'libxrandr2',
-    'libxss1',
-    'libxtst6',
-    'xdg-utils'
-    ]
+aptPkgs = ["libglib2.0-dev"]

From 26f3b924871dc635b3a16ed803048d74d128fffc Mon Sep 17 00:00:00 2001
From: Morgan Brown <git@email.mhgbrown.is>
Date: Fri, 25 Oct 2024 19:35:08 +0200
Subject: [PATCH 15/15] End experiment with nixpacks.toml

---
 nixpacks.toml | 2 --
 1 file changed, 2 deletions(-)
 delete mode 100644 nixpacks.toml

diff --git a/nixpacks.toml b/nixpacks.toml
deleted file mode 100644
index f578c9524..000000000
--- a/nixpacks.toml
+++ /dev/null
@@ -1,2 +0,0 @@
-[phases.setup]
-aptPkgs = ["libglib2.0-dev"]