Offer a way to say thanks, in the footer and on the repo

.github/FUNDING.yml

@@ -0,0 +1,5 @@
+# Puts the Sponsor button on this repository, alongside the two links in the site's own footer.
+# Both keys are GitHub's own platform names rather than `custom` URLs, so each renders with the
+# service it belongs to rather than as an anonymous link.
+github: [protobuf-net]
+buy_me_a_coffee: marcgravell

web/index.html

@@ -165,10 +165,42 @@
 
     <footer class="app-footer">
       <span id="engine-version">loading engine…</span>
-      <span>
+      <span class="footer-note">
         C#, VB.NET and payload decoding run in your browser via WebAssembly and are never uploaded.
         protoc's own languages are compiled with <code>protoc</code> on a server.
       </span>
+      <!-- icons are inline so they cost no request and take their colour from the text around
+           them; they stay muted until hovered, which is about the right volume for asking -->
+      <span class="footer-sponsor">
+        <a href="https://github.com/sponsors/protobuf-net" rel="noopener" class="sponsor-heart">
+          <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false">
+            <path
+              fill="currentColor"
+              d="M8 14.25C8 14.25 1 9.9 1 5.5C1 3.15 2.9 1.5 5 1.5C6.4 1.5 7.5 2.35 8 3.35C8.5 2.35 9.6 1.5 11 1.5C13.1 1.5 15 3.15 15 5.5C15 9.9 8 14.25 8 14.25Z"
+            />
+          </svg>
+          Sponsor
+        </a>
+        <a href="https://www.buymeacoffee.com/marcgravell" rel="noopener" class="sponsor-coffee">
+          <svg
+            viewBox="0 0 16 16"
+            width="13"
+            height="13"
+            aria-hidden="true"
+            focusable="false"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M2.5 7h8v3.5a2.5 2.5 0 0 1-2.5 2.5H5a2.5 2.5 0 0 1-2.5-2.5z" />
+            <path d="M10.5 8h1.75a1.75 1.75 0 0 1 0 3.5H10.5" />
+            <path d="M5 5.25c-.8-.9.8-1.5 0-2.4M8 5.25c-.8-.9.8-1.5 0-2.4" />
+          </svg>
+          Coffee
+        </a>
+      </span>
     </footer>
 
     <div class="boot-overlay" id="boot-overlay">

web/src/styles.css

@@ -768,18 +768,54 @@ details[open] > summary .twisty:not(.empty) {
 .app-footer {
   flex: none;
   display: flex;
-  gap: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 16px;
   padding: 8px 16px;
   border-top: 1px solid var(--border);
   background: var(--bg-raised);
   font-size: 12px;
   color: var(--text-dim);
 }
 
-.app-footer span:last-child {
+/* the note takes the slack, so the version stays left and the sponsor links stay right */
+.app-footer .footer-note {
   margin-left: auto;
 }
 
+.footer-sponsor {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.footer-sponsor a {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-dim);
+  text-decoration: none;
+}
+
+.footer-sponsor a:hover {
+  text-decoration: underline;
+}
+
+/* colour on hover only: enough to be findable, quiet enough not to nag */
+.footer-sponsor .sponsor-heart:hover {
+  color: #db61a2;
+}
+
+.footer-sponsor .sponsor-coffee:hover {
+  color: #b8860b;
+}
+
+@media (prefers-color-scheme: dark) {
+  .footer-sponsor .sponsor-coffee:hover {
+    color: #e0b558;
+  }
+}
+
 /* ------------------------------ boot overlay ---------------------------- */
 
 .boot-overlay {