Replace Ko-fi buttons with GitHub Sponsors

README.md

@@ -12,6 +12,7 @@ Spoolman is a self-hosted web service designed to help you efficiently manage yo
 
 [![Static Badge](https://img.shields.io/badge/Spoolman%20Wiki-blue?link=https%3A%2F%2Fgithub.com%2FDonkie%2FSpoolman%2Fwiki)](https://github.com/Donkie/Spoolman/wiki)
 [![GitHub Release](https://img.shields.io/github/v/release/Donkie/Spoolman)](https://github.com/Donkie/Spoolman/releases)
+[![GitHub Sponsors](https://img.shields.io/github/sponsors/Donkie?logo=githubsponsors&logoColor=EA4AAA&color=EA4AAA)](https://github.com/sponsors/Donkie)
 
 ### Features
 * **Filament Management**: Keep comprehensive records of filament types, manufacturers, and individual spools.

client/public/locales/en/common.json

@@ -46,7 +46,7 @@
         "saveSuccessful": "Save successful!",
         "validationError": "Validation error: {{error}}"
     },
-    "kofi": "Tip me on Ko-fi",
+    "sponsor": "Sponsor me on GitHub",
     "loading": "Loading",
     "version": "Version",
     "unknown": "Unknown",

client/src/components/layout.tsx

@@ -3,10 +3,15 @@ import { useTranslate } from "@refinedev/core";
 import { Button } from "antd";
 import { Footer } from "antd/es/layout/layout";
 import Logo from "../icon.svg?react";
-import { getBasePath } from "../utils/url";
 import { Header } from "./header";
 import { Version } from "./version";
 
+const SponsorHeart = () => (
+  <svg viewBox="0 0 16 16" width="1.2em" height="1.2em" fill="#db61a2" aria-hidden="true">
+    <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002Z" />
+  </svg>
+);
+
 const SpoolmanFooter = () => {
   const t = useTranslate();
 
@@ -26,19 +31,13 @@ const SpoolmanFooter = () => {
         </div>
         <div>
           <Button
-            icon={
-              <img
-                src={getBasePath() + "/kofi_s_logo_nolabel.png"}
-                style={{
-                  height: "1.6em",
-                }}
-              />
-            }
+            icon={<SponsorHeart />}
             type="text"
-            href="https://ko-fi.com/donkie"
+            href="https://github.com/sponsors/Donkie"
             target="_blank"
+            rel="noopener noreferrer"
           >
-            {t("kofi")}
+            {t("sponsor")}
           </Button>
         </div>
       </div>

client_v2/locales/en/common.json

@@ -226,7 +226,6 @@
     "inspector.used": "used",
     "inspector.vendorSub_one": "{{count}} filament",
     "inspector.vendorSub_other": "{{count}} filaments",
-    "kofi": "Tip me on Ko-fi",
     "labels.addHead": "Add",
     "labels.addQr": "QR code",
     "labels.addRect": "Rectangle",
@@ -522,6 +521,7 @@
     "settings.scanner.unpair": "Use any reader",
     "settings.scanner.use": "Use this one",
     "settings.scanner.waiting": "Tap any tag on the reader you want...",
+    "sponsor": "Sponsor me on GitHub",
     "spool.fields.archived": "Archived",
     "spool.fields.comment": "Comment",
     "spool.fields.filament": "Filament",

client_v2/src/app.css

@@ -273,7 +273,7 @@ input[type='number'] {
 	.seg-btn,
 	.tab,
 	.logo,
-	.kofi,
+	.sponsor,
 	.crumb,
 	.arch-toggle,
 	.spool-row,
@@ -289,9 +289,9 @@ input[type='number'] {
 	.grabber {
 		align-items: center;
 	}
-	/* The Ko-fi button collapses to an icon-only square under 560px; keep it a
+	/* The sponsor button collapses to an icon-only square under 560px; keep it a
 	   full tap target in both dimensions. */
-	.kofi {
+	.sponsor {
 		min-width: 44px;
 	}
 }

client_v2/src/lib/components/Footer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { asset } from '$app/paths';
 	import { getInfo, type Info } from '$lib/api/info';
 	import * as m from '$lib/paraglide/messages';
 
@@ -24,9 +23,14 @@
 		<a href="https://github.com/Donkie/Spoolman/issues">{m['footer.reportIssue']()}</a>
 	</div>
 
-	<a class="kofi" href="https://ko-fi.com/donkie" target="_blank" rel="noopener noreferrer">
-		<img src={asset('/kofi_s_logo_nolabel.png')} alt="" />
-		{m.kofi()}
+	<a class="sponsor" href="https://github.com/sponsors/Donkie" target="_blank" rel="noopener noreferrer">
+		<!-- Octicon heart-fill, inlined so the footer needs no request to github.com. -->
+		<svg viewBox="0 0 16 16" aria-hidden="true">
+			<path
+				d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002Z"
+			/>
+		</svg>
+		{m.sponsor()}
 	</a>
 </footer>
 
@@ -52,7 +56,7 @@
 	.commit {
 		color: var(--text-faint);
 	}
-	.kofi {
+	.sponsor {
 		flex: none;
 		display: inline-flex;
 		align-items: center;
@@ -67,25 +71,27 @@
 		text-decoration: none;
 		transition: border-color 0.12s;
 	}
-	.kofi:hover {
+	.sponsor:hover {
 		border-color: var(--accent);
 	}
-	.kofi img {
+	.sponsor svg {
 		height: 16px;
-		width: auto;
+		width: 16px;
+		fill: #db61a2;
 	}
 
 	@media (max-width: 560px) {
 		.footer {
 			padding: 6px 12px;
 		}
-		.kofi {
+		.sponsor {
 			font-size: 0;
 			gap: 0;
 			padding: 5px 8px;
 		}
-		.kofi img {
+		.sponsor svg {
 			height: 18px;
+			width: 18px;
 		}
 	}
 </style>