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
This commit is contained in:
Brian Talbot
2025-10-01 12:04:32 -04:00
committed by GitHub
parent 1fd68dfb3c
commit 2ec957ff76
4 changed files with 74 additions and 16 deletions

View File

@@ -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>

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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">