Further style alignment around project support button

drips-network · Oct 25, 2024 · 178c1bc · 178c1bc
1 parent 5cfe5d1
commit 178c1bc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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}