From b5db8f319298a5c82b58d207e4bb2f363fe042fe Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Sat, 16 May 2026 21:14:06 +0800
Subject: [PATCH] docs: restructure README sponsor section and add pink fund
 button to docs

Fold the sponsor call-to-action into the Contributing section as a
natural bullet point instead of a standalone heavy section. Remove
the large badge buttons. Keep star history chart under Contributing.

Add a pink "Fund Development" button component to the docs site nav
bar (left of Star on GitHub), matching the landing page style.
Remove the plain-text nav link that replaced the heart icon.
---
 README.md                                   | 18 +--------
 apps/docs/.vitepress/config.mts             |  4 --
 apps/docs/.vitepress/theme/FundButton.vue   | 14 +++++++
 apps/docs/.vitepress/theme/Layout.vue       |  2 +
 apps/docs/.vitepress/theme/github-stars.css | 44 ++++++++++++++++++++-
 5 files changed, 59 insertions(+), 23 deletions(-)
 create mode 100644 apps/docs/.vitepress/theme/FundButton.vue

diff --git a/README.md b/README.md
index 6d62045f..e82e7b97 100644
--- a/README.md
+++ b/README.md
@@ -82,23 +82,7 @@ We welcome bug reports, feature ideas, and pull requests. See [CONTRIBUTING.md](
 - [Open an issue](https://github.com/snapotter-hq/snapotter/issues)
 - [Submit a PR](CONTRIBUTING.md#code-requires-cla)
 - [Join Discord](https://discord.gg/hr3s7HPUsr) for help and discussion
-
-## Support SnapOtter
-
-<p align="center">
-  If SnapOtter saves you time, money, or both, consider starring the repo or sponsoring the project.<br>
-  Stars help others discover SnapOtter. Sponsorships fund development and keep it free for everyone.
-</p>
-
-<p align="center">
-  <a href="https://github.com/snapotter-hq/SnapOtter/stargazers">
-    <img src="https://img.shields.io/github/stars/snapotter-hq/SnapOtter?style=for-the-badge&logo=github&color=yellow" alt="Star SnapOtter">
-  </a>
-  &nbsp;
-  <a href="https://github.com/sponsors/snapotter-hq">
-    <img src="https://img.shields.io/badge/Sponsor-pink?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor SnapOtter">
-  </a>
-</p>
+- [Fund development](https://github.com/sponsors/snapotter-hq) to keep SnapOtter free for everyone
 
 <p align="center">
   <a href="https://star-history.com/#snapotter-hq/SnapOtter&Date">
diff --git a/apps/docs/.vitepress/config.mts b/apps/docs/.vitepress/config.mts
index 7e9258ee..4db0d7b2 100644
--- a/apps/docs/.vitepress/config.mts
+++ b/apps/docs/.vitepress/config.mts
@@ -78,10 +78,6 @@ export default defineConfig({
       { text: "Home", link: "/" },
       { text: "Guide", link: "/guide/getting-started" },
       { text: "API Reference", link: "/api/rest" },
-      {
-        text: "Fund Development",
-        link: "https://github.com/sponsors/snapotter-hq",
-      },
       {
         text: `v${pkg.version}`,
         link: "https://github.com/snapotter-hq/snapotter/releases",
diff --git a/apps/docs/.vitepress/theme/FundButton.vue b/apps/docs/.vitepress/theme/FundButton.vue
new file mode 100644
index 00000000..405cf3df
--- /dev/null
+++ b/apps/docs/.vitepress/theme/FundButton.vue
@@ -0,0 +1,14 @@
+<template>
+  <a
+    href="https://github.com/sponsors/snapotter-hq"
+    target="_blank"
+    rel="noopener"
+    class="fund-btn"
+    title="Fund Development"
+  >
+    <svg class="fund-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+    </svg>
+    <span>Fund Development</span>
+  </a>
+</template>
diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
index cad1dc24..9976dce3 100644
--- a/apps/docs/.vitepress/theme/Layout.vue
+++ b/apps/docs/.vitepress/theme/Layout.vue
@@ -1,6 +1,7 @@
 <script setup>
 import VPSwitchAppearance from "vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue";
 import DefaultTheme from "vitepress/theme";
+import FundButton from "./FundButton.vue";
 import GitHubStars from "./GitHubStars.vue";
 
 const { Layout } = DefaultTheme;
@@ -11,6 +12,7 @@ const { Layout } = DefaultTheme;
     <template #nav-bar-content-after>
       <div class="nav-bar-right">
         <VPSwitchAppearance />
+        <FundButton />
         <GitHubStars />
       </div>
     </template>
diff --git a/apps/docs/.vitepress/theme/github-stars.css b/apps/docs/.vitepress/theme/github-stars.css
index e1acdf1c..67afc40e 100644
--- a/apps/docs/.vitepress/theme/github-stars.css
+++ b/apps/docs/.vitepress/theme/github-stars.css
@@ -111,9 +111,49 @@
   border-radius: 6px 0 0 6px;
 }
 
-/* Hide stars on small screens, keep toggle */
+/* Fund Development button */
+.fund-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  height: 30px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 30px;
+  color: #db2777;
+  background: rgba(219, 39, 119, 0.08);
+  border: 1px solid rgba(219, 39, 119, 0.3);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: border-color 0.25s, background 0.25s;
+  white-space: nowrap;
+}
+
+.fund-btn:hover {
+  background: rgba(219, 39, 119, 0.15);
+  border-color: rgba(219, 39, 119, 0.5);
+}
+
+.fund-icon {
+  flex-shrink: 0;
+}
+
+.dark .fund-btn {
+  color: #f472b6;
+  background: rgba(244, 114, 182, 0.08);
+  border-color: rgba(244, 114, 182, 0.25);
+}
+
+.dark .fund-btn:hover {
+  background: rgba(244, 114, 182, 0.15);
+  border-color: rgba(244, 114, 182, 0.4);
+}
+
+/* Hide stars and fund button on small screens, keep toggle */
 @media (max-width: 640px) {
-  .github-btn-wrapper {
+  .github-btn-wrapper,
+  .fund-btn {
     display: none;
   }
 }