From 9e637ce0dbbd1fb0a5d615953e3523f9cbf1837c Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 15 Jul 2022 09:35:59 -0400
Subject: [PATCH] add shameless plug

---
 docs/assets/plugins/metadata/metadata.js | 23 ++++++++++++++++++++++-
 docs/assets/styles/docs.css              | 14 ++++++++++++++
 docs/getting-started/overview.md         |  2 +-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 370457789..10a1a5d88 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -332,7 +332,7 @@
           <sl-icon slot="prefix" name="heart"></sl-icon> Sponsor
         </sl-button>
         <sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
-          <sl-icon slot="prefix" name="github"></sl-icon> <span class="github-star-count">Star</span>
+          <sl-icon slot="prefix" name="github"></sl-icon> Star
         </sl-button>
         <sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
           <sl-icon slot="prefix" name="twitter"></sl-icon> Follow
@@ -456,6 +456,27 @@
             \`\`\`
             </sl-tab-panel>
             </sl-tab-group>
+
+            <div class="sponsor-callout">
+              <p>
+                Shoelace is designed, developed, and maintained by <a href="https://twitter.com/claviska" target="_blank">Cory LaViska</a>.
+                Please sponsor my work on GitHub! Your support will keep this project alive and growing!
+              </p>
+
+              <p>
+                <sl-button class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" target="_blank">
+                  <sl-icon slot="prefix" name="heart"></sl-icon> Sponsor <span class="sponsor-callout__secondary-label">Development</span>
+                </sl-button>
+
+                <sl-button class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
+                  <sl-icon slot="prefix" name="github"></sl-icon> Star <span class="sponsor-callout__secondary-label">on GitHub</span>
+                </sl-button>
+
+                <sl-button class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
+                  <sl-icon slot="prefix" name="twitter"></sl-icon> Follow <span class="sponsor-callout__secondary-label">on Twitter</span>
+                </sl-button>
+              </p>
+            </div>
           `;
         }
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index f2e6ef049..e4172300c 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -490,6 +490,20 @@ kbd,
   background-color: var(--sl-color-neutral-100);
 }
 
+/* Sponsorship callouts */
+.sponsor-callout {
+  background: var(--sl-color-warning-100);
+  border-left: solid 3px var(--sl-color-warning-300);
+  border-radius: var(--sl-border-radius-medium);
+  padding: 0.5rem 1.5rem;
+}
+
+@media screen and (max-width: 950px) {
+  .sponsor-callout__secondary-label {
+    display: none;
+  }
+}
+
 /* Component headers */
 .component-header {
   border-bottom: solid 1px var(--sl-color-neutral-200);
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 99bfe4739..b7b57ad44 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -106,7 +106,7 @@ Designing, developing, and supporting this library requires a lot of time, effor
 </sl-button>
 
 <sl-button class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
-  <sl-icon slot="prefix" name="github"></sl-icon> <span class="github-star-count">Star</span>
+  <sl-icon slot="prefix" name="github"></sl-icon> Star
 </sl-button>
 
 <sl-button class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">