From 2ec957ff762aa721a11eb1b8e4271e710805059a Mon Sep 17 00:00:00 2001
From: Brian Talbot <hi.talbs@gmail.com>
Date: Wed, 1 Oct 2025 12:04:32 -0400
Subject: [PATCH] Docs: Update + Show Social Media Links (#1531)

* adding mastodon social link to docs/index.md
* adding social links to sidebar's colophon
* updating community.md with latest social network details
---
 .../webawesome/docs/_includes/sidebar.njk     | 37 +++++++++++++++----
 .../webawesome/docs/assets/styles/docs.css    | 14 +++++++
 .../docs/docs/resources/community.md          | 28 ++++++++++----
 packages/webawesome/docs/index.md             | 11 +++++-
 4 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk
index a09fac59f..12c91cfc3 100644
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -399,13 +399,34 @@
 
 <wa-divider style="--spacing: var(--wa-space-xl);"></wa-divider>
 
-<div class="wa-stack wa-gap-xs" id="colophon">
-  {% include "logo-simple.njk" %}
-  <div class="wa-cluster wa-gap-xs">
-    <h2 class="wa-heading-xs">Web Awesome</h2>
-    <wa-badge id="version-beta-badge" variant="orange" appearance="filled" style="font-size: var(--wa-font-size-2xs);">Beta</wa-badge>
-    <wa-tooltip for="version-beta-badge" distance="2" style="font-size: var(--wa-font-size-xs);">Here be freshly made Awesome&hellip; and possible dragons</wa-tooltip>
+<div class="wa-stack wa-gap-xl" id="colophon">
+  <div class="wa-stack wa-gap-xs">
+    {% include "logo-simple.njk" %}
+    <div class="wa-cluster wa-gap-xs">
+      <h2 class="wa-heading-xs">Web Awesome</h2>
+      <wa-badge id="version-beta-badge" variant="orange" appearance="filled" style="font-size: var(--wa-font-size-2xs);">Beta</wa-badge>
+      <wa-tooltip for="version-beta-badge" distance="2" style="font-size: var(--wa-font-size-xs);">Here be freshly made Awesome&hellip; and possible dragons</wa-tooltip>
+    </div>
+    <p class="wa-caption-s">Version {{ package.version }}</p>
+    <p class="wa-caption-s">&copy; Fonticons, Inc.</p>
+  </div>
+
+  <div class="wa-cluster wa-gap-0 wa-caption-s the-socials">
+    <h2 class="wa-visually-hidden">Web Awesome Elsewhere</h2>
+    <a href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
+    </a>
+    <a href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="bluesky" label="Bluesky"></wa-icon>
+    </a>
+    <a href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="mastodon" label="Mastodon"></wa-icon>
+    </a>
+    <a href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="x-twitter" label="Twitter (X)"></wa-icon>
+    </a>
+    <a href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="threads" label="Threads"></wa-icon>
+    </a>
   </div>
-  <p class="wa-caption-s">Version {{ package.version }}</p>
-  <p class="wa-caption-s">&copy; Fonticons, Inc.</p>
 </div>
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index 153246083..0a5a7a161 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -185,6 +185,20 @@ wa-page > header {
     --show-duration: 0;
     --hide-duration: 0;
   }
+
+  .the-socials {
+    /* nudge those linkies left */
+    margin-inline-start: calc(var(--wa-space-xs) * -1);
+
+    a[target='_blank'] {
+      color: var(--wa-color-text-quiet);
+      padding-inline: var(--wa-space-xs);
+
+      &:hover {
+        color: var(--wa-color-text-normal);
+      }
+    }
+  }
 }
 
 wa-button.delete {
diff --git a/packages/webawesome/docs/docs/resources/community.md b/packages/webawesome/docs/docs/resources/community.md
index e323a9ec0..d0f1c2d01 100644
--- a/packages/webawesome/docs/docs/resources/community.md
+++ b/packages/webawesome/docs/docs/resources/community.md
@@ -36,13 +36,27 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
   Join the Chat
 </wa-button>
 
-## Twitter
+## Social Networks
 
-Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general updates and announcements about Web Awesome. This is a great place to say "hi" or to share something you're working on.
+Follow Web Awesome on [Bluesky](https://bsky.app/profile/webawesome.com), [X (Twitter)](https://x.com/webawesomer), [Mastodon](https://mastodon.social/@webawesome), or [Threads](https://www.threads.com/@web.awesome) for general updates and announcements. This is a great place to say "hi" or to share something you're working on.
 
-**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/webawesome/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
+**Please avoid using Social Networks for support questions.** The [discussion forum](https://github.com/shoelace-style/webawesome/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
-<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
-  <wa-icon name="twitter" family="brands" slot="start"></wa-icon>
-  Follow on Twitter
-</wa-button>
+<div class="wa-cluster wa-gap-l">
+  <wa-button variant="brand" href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank">
+    <wa-icon name="bluesky" family="brands" slot="start"></wa-icon>
+    Bluesky
+  </wa-button>
+  <wa-button variant="brand" href="https://twitter.com/webawesomer" rel="noopener noreferrer" target="_blank">
+    <wa-icon name="x-twitter" family="brands" slot="start"></wa-icon>
+    X (Twitter)
+  </wa-button>
+  <wa-button variant="brand" href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank">
+    <wa-icon name="mastodon" family="brands" slot="start"></wa-icon>
+    Mastodon
+  </wa-button>
+  <wa-button variant="brand" href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank">
+    <wa-icon name="threads" family="brands" slot="start"></wa-icon>
+    Threads
+  </wa-button>
+</div>
diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md
index 49188f8fd..baf06b778 100644
--- a/packages/webawesome/docs/index.md
+++ b/packages/webawesome/docs/index.md
@@ -385,7 +385,7 @@ layout: page
       <wa-icon name="hashtag" style="color: var(--wa-brand-orange);"></wa-icon>
       <span>Stay in the know</span>
     </h2>
-    <div class="wa-grid">
+    <div class="wa-grid" style="--min-column-size: 30ch;">
       <wa-button href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
         <div class="wa-split">
           <div class="wa-cluster icon-heading">
@@ -395,6 +395,15 @@ layout: page
           <wa-icon name="arrow-up-right"></wa-icon>
         </div>
       </wa-button>
+      <wa-button href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
+        <div class="wa-split">
+          <div class="wa-cluster icon-heading">
+            <wa-icon family="brands" name="mastodon"></wa-icon>
+            <h3>Mastodon</h3>
+          </div>
+          <wa-icon name="arrow-up-right"></wa-icon>
+        </div>
+      </wa-button>
       <wa-button href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
         <div class="wa-split">
           <div class="wa-cluster icon-heading">