From 5ce34677edd6f62d3b018b690a764474d077ea9e Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 3 Jul 2025 11:26:35 -0400
Subject: [PATCH] Add GitHub repository links (#1128)

* add repository links

* fix mobile navigation drawer
---
 packages/webawesome/docs/_includes/base.njk   |  24 ++-
 .../docs/_includes/color-scheme-selector.njk  |   2 +-
 .../webawesome/docs/_includes/sidebar.njk     |   7 +
 .../docs/_includes/theme-selector.njk         |   2 +-
 .../webawesome/docs/assets/styles/docs.css    |  60 +++++--
 packages/webawesome/docs/index.md             | 168 ++++++++++++------
 6 files changed, 184 insertions(+), 79 deletions(-)

diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk
index dfe7b9c69..ca2cb3c61 100644
--- a/packages/webawesome/docs/_includes/base.njk
+++ b/packages/webawesome/docs/_includes/base.njk
@@ -61,19 +61,27 @@
           <wa-badge variant="brand" appearance="filled" class="wa-desktop-only">Beta</wa-badge>
         </div>
 
-        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
+        <div id="docs-toolbar" class="wa-cluster">
           {# Desktop selectors #}
           <div class="wa-desktop-only wa-cluster wa-gap-xs">
             {% include "theme-selector.njk" %}
             {% include "color-scheme-selector.njk" %}
           </div>
 
-          {# Search #}
-          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
-            <wa-icon slot="start" name="magnifying-glass"></wa-icon>
-            Search
-            <kbd slot="end" class="wa-desktop-only">/</kbd>
-          </wa-button>
+          <wa-divider orientation="vertical" class="wa-desktop-only"></wa-divider>
+
+          <div id="github-buttons" class="wa-cluster wa-gap-xs">
+            <wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
+              <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
+            </wa-button>
+            <wa-tooltip for="github-repo-button" distance="2">GitHub</wa-tooltip>
+            <wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
+              <wa-icon name="star" variant="regular" label="Star this repository"></wa-icon>
+            </wa-button>
+            <wa-tooltip for="github-star-button" distance="2">Star this repository</wa-tooltip>
+          </div>
+
+          <wa-divider orientation="vertical"></wa-divider>
 
           {# Login #}
           {% server "loginOrAvatar" %}
@@ -84,7 +92,7 @@
       {% if hasSidebar %}
         {# Mobile selectors #}
         <div class="wa-mobile-only" slot="navigation-header">
-          <div class="wa-cluster wa-gap-xs">
+          <div class="wa-cluster wa-gap-xs" style="flex-wrap: nowrap;">
             {% include "theme-selector.njk" %}
             {% include "color-scheme-selector.njk" %}
           </div>
diff --git a/packages/webawesome/docs/_includes/color-scheme-selector.njk b/packages/webawesome/docs/_includes/color-scheme-selector.njk
index d2c156218..cd19d849c 100644
--- a/packages/webawesome/docs/_includes/color-scheme-selector.njk
+++ b/packages/webawesome/docs/_includes/color-scheme-selector.njk
@@ -1,4 +1,4 @@
-<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
+<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" title="Press \ to toggle">
   <wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
   <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
   <wa-option value="light">
diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk
index 85ec1d6ed..38f70fa68 100644
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -1,3 +1,10 @@
+{# Search #}
+<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
+  <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+  Search
+  <kbd slot="end" class="wa-desktop-only">/</kbd>
+</wa-button>
+
 {# Getting started #}
 <h2>Getting Started</h2>
 <ul>
diff --git a/packages/webawesome/docs/_includes/theme-selector.njk b/packages/webawesome/docs/_includes/theme-selector.njk
index 164058297..304c2e9ef 100644
--- a/packages/webawesome/docs/_includes/theme-selector.njk
+++ b/packages/webawesome/docs/_includes/theme-selector.njk
@@ -1,4 +1,4 @@
-<wa-select appearance="filled" size="small" value="default" pill class="theme-selector">
+<wa-select appearance="filled" size="small" value="default" class="theme-selector">
   <wa-icon slot="start" name="paintbrush" variant="regular"></wa-icon>
 
   {# Free themes #}
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index d45359646..4daa4b299 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -73,7 +73,33 @@ wa-page > header {
   #docs-toolbar {
     display: flex;
     align-items: center;
-    gap: var(--wa-space-xs);
+    gap: var(--wa-space-s);
+
+    .color-scheme-selector,
+    .theme-selector {
+      max-inline-size: 20ch;
+    }
+
+    wa-divider:last-child {
+      display: none;
+    }
+  }
+
+  #github-buttons {
+    > wa-button {
+      &::part(base) {
+        color: var(--wa-color-on-quiet);
+        background-color: var(--wa-color-fill-quiet);
+      }
+      > wa-icon {
+        font-size: round(1.25em, 1px);
+      }
+    }
+
+    > wa-tooltip {
+      --wa-tooltip-arrow-size: 0;
+      font-size: var(--wa-font-size-xs);
+    }
   }
 
   #version-number {
@@ -86,14 +112,6 @@ wa-page > header {
     font-size: var(--wa-font-size-2xs);
     text-transform: uppercase;
   }
-  wa-button#search-trigger {
-    --background-color: var(--wa-form-control-background-color);
-    --border-color: var(--wa-form-control-border-color);
-  }
-  #search-trigger kbd {
-    font-size: var(--wa-font-size-2xs);
-    line-height: var(--wa-form-control-value-line-height);
-  }
 }
 
 #sidebar,
@@ -242,6 +260,12 @@ wa-button.delete {
   }
 }
 
+[slot='navigation-header'] {
+  wa-select::part(listbox) {
+    font-weight: var(--wa-font-weight-normal);
+  }
+}
+
 #sidebar-close-button {
   display: none;
 }
@@ -379,6 +403,22 @@ h1.title {
   }
 }
 
+/* Search trigger */
+wa-button#search-trigger {
+  &::part(base) {
+    background-color: var(--wa-form-control-background-color);
+    border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
+    box-shadow: none;
+  }
+  &::part(label) {
+    width: 100%;
+  }
+}
+#search-trigger kbd {
+  font-size: var(--wa-font-size-2xs);
+  line-height: var(--wa-form-control-value-line-height);
+}
+
 /* Search list pages */
 wa-page > main:has(> .search-list) {
   max-width: 120ch;
@@ -630,7 +670,7 @@ wa-scroller:has(.component-table) {
 }
 
 /** desktop */
-@media screen and not (max-width: 768px) {
+@media screen and not (max-width: 1180px) {
   /* Navigation sidebar */
   wa-page::part(navigation) {
     border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md
index 1f66a6c28..960edbaba 100644
--- a/packages/webawesome/docs/index.md
+++ b/packages/webawesome/docs/index.md
@@ -136,35 +136,21 @@ layout: page
       margin-block-start: 1rem;
     }
   }
-  .link-panel {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-radius: 0.75rem;
-    padding: 1.25rem;
-    & h3 {
-      font-size: 1rem;
-    }
-    & .icon-heading wa-icon {
-      background-color: var(--wa-color-neutral-fill-loud);
-      color: var(--wa-color-neutral-on-loud);
-    }
-    & p {
-      font-size: 0.875rem;
-    }
-  }
   .icon-heading {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-block-end: 1rem;
-    & wa-icon {
+    > wa-icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: var(--wa-brand-orange);
-      color: white;
+      background-color: var(--wa-color-neutral-fill-loud);
+      color: var(--wa-color-neutral-on-loud);
       border-radius: 0.25rem;
       aspect-ratio: 1;
       padding: 0.5em;
+
+      &.brand-orange {
+        background-color: var(--wa-brand-orange);
+        color: white;
+      }
     }
     & h3 {
       font-size: 1rem;
@@ -224,8 +210,8 @@ layout: page
     text-align: left;
     white-space: wrap;
   }
-  wa-button.tile::part(end) {
-    display: none;
+  wa-button.tile::part(label) {
+    width: 100%;
   }
   wa-button.tile {
     width: 100%;
@@ -285,23 +271,27 @@ layout: page
   <div class="beta-notice">
     <div>
       <wa-callout variant="brand">
-        <div class="icon-heading">
-          <wa-icon name="sparkles" variant="regular" fixed-width></wa-icon>
-          <h3>Rise and shine, backers!</h3>
+        <div class="wa-stack">
+          <div class="wa-cluster icon-heading">
+            <wa-icon name="sparkles" variant="regular" fixed-width></wa-icon>
+            <h3>Bigger and beta than ever</h3>
+          </div>
+          <p>This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
         </div>
-        <p>Dig in to your exclusive Web Awesome Beta access. This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
       </wa-callout>
     </div>
     <div>
       <wa-button href="/docs/" appearance="outlined" class="tile">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: 1rem;">
-          <div class="icon-heading" style="margin-block-end: 0;">
-            <wa-icon name="pen-ruler" fixed-width></wa-icon>
-            <h3>Get started</h3>
+        <div class="wa-stack">
+          <div class="wa-split">
+            <div class="wa-cluster icon-heading">
+              <wa-icon name="pen-ruler" fixed-width class="brand-orange"></wa-icon>
+              <h3>Get started</h3>
+            </div>
+            <wa-icon name="arrow-right" fixed-width></wa-icon>
           </div>
-          <wa-icon name="arrow-right" fixed-width></wa-icon>
+          <p>Check out our installation guide to start building with Web Awesome.</p>
         </div>
-        <p>Check out our installation guide to start building with Web Awesome.</p>
       </wa-button>
     </div>
   </div>
@@ -310,30 +300,30 @@ layout: page
     <h2 class="brand-font">What's <span class="emphasis">Web</span> Awesome?</h2>
     <p>Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.</p>
     <div class="grid">
-      <div>
-        <div class="icon-heading">
-          <wa-icon name="code" fixed-width></wa-icon>
+      <div class="wa-stack">
+        <div class="wa-cluster icon-heading">
+          <wa-icon name="code" fixed-width class="brand-orange"></wa-icon>
           <h3>Entirely native</h3>
         </div>
         <p>Built on web standards to last for years to come. No excess tooling. No third-party bloat.</p>
       </div>
-      <div>
-        <div class="icon-heading">
-          <wa-icon name="palette" fixed-width></wa-icon>
+      <div class="wa-stack">
+        <div class="wa-cluster icon-heading">
+          <wa-icon name="palette" fixed-width class="brand-orange"></wa-icon>
           <h3>Fully customizable</h3>
         </div>
         <p>Show off your own style with components that consistently adapt to your theme.</p>
       </div>
-      <div>
-        <div class="icon-heading">
-          <wa-icon name="wheelchair-move" fixed-width></wa-icon>
+      <div class="wa-stack">
+        <div class="wa-cluster icon-heading">
+          <wa-icon name="wheelchair-move" fixed-width class="brand-orange"></wa-icon>
           <h3>Accessibility forward</h3>
         </div>
         <p>Build a website that everyone can use. Designed to be inclusive and usable by everyone.</p>
       </div>
-      <div>
-        <div class="icon-heading">
-          <wa-icon name="handshake-simple" fixed-width></wa-icon>
+      <div class="wa-stack">
+        <div class="wa-cluster icon-heading">
+          <wa-icon name="handshake-simple" fixed-width class="brand-orange"></wa-icon>
           <h3>Proudly open source</h3>
         </div>
         <p>Use Web Awesome Free however you like. Always free, always open source.</p>
@@ -348,20 +338,80 @@ layout: page
       <p>Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.</p>
     </div>
     <div>
-      <div class="link-panel">
-        <div class="icon-heading">
-          <wa-icon name="envelope-open" fixed-width></wa-icon>
-          <h3>Get in touch</h3>
+      <wa-button href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
+        <div class="wa-stack">
+          <div class="wa-split">
+            <div class="wa-cluster icon-heading">
+              <wa-icon family="brands" name="github" fixed-width></wa-icon>
+              <h3>GitHub</h3>
+            </div>
+            <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+          </div>
+          <p>Get involved by opening issues, contributing to discussions, or creating PRs.</p>
         </div>
-        <p>Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at <a href="mailto:hello@webawesome.com">hello@webawesome.com</a>.</p>
-      </div>
-      <div class="link-panel">
-        <div class="icon-heading">
-          <wa-icon name="hashtag" fixed-width></wa-icon>
-          <h3>Follow us</h3>
+      </wa-button>
+      <wa-button href="https://discord.gg/a74U7eYH" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
+        <div class="wa-stack">
+          <div class="wa-split">
+            <div class="wa-cluster icon-heading">
+              <wa-icon family="brands" name="discord" fixed-width></wa-icon>
+              <h3>Discord</h3>
+            </div>
+            <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+          </div>
+          <p>Share your work, ask questions, and explore ideas with other Web Awesome builders.</p>
         </div>
-        <p>Keep up with Web Awesome through updates, announcements, and polls. Find us on <a href="https://bsky.app/profile/webawesome.com">Bluesky</a>, <a href="https://x.com/webawesomer">Twitter (X)</a>, and <a href="https://www.threads.com/@web.awesome">Threads</a>.</p>
-      </div>
+      </wa-button>
+      <wa-button href="mailto:hello@webawesome.com" appearance="filled" class="tile">
+        <div class="wa-split">
+          <div class="wa-cluster icon-heading">
+            <wa-icon name="envelope-open" fixed-width></wa-icon>
+            <h3 class="wa-cluster wa-gap-xs">
+              <span>hello@webawesome.com</span>
+              <wa-icon name="hand-wave" variant="regular"></wa-icon>
+            </h3>
+          </div>
+          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+        </div>
+      </wa-button>
+    </div>
+  </div>
+
+  <wa-divider></wa-divider>
+
+  <div class="wa-stack wa-gap-xl">
+    <h2 class="wa-cluster brand-font">
+      <wa-icon name="hashtag" style="color: var(--wa-brand-orange);"></wa-icon>
+      <span>Stay in the know</span>
+    </h2>
+    <div class="wa-grid">
+      <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">
+            <wa-icon family="brands" name="bluesky" fixed-width></wa-icon>
+            <h3>Bluesky</h3>
+          </div>
+          <wa-icon name="arrow-up-right" fixed-width></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">
+            <wa-icon family="brands" name="x-twitter" fixed-width></wa-icon>
+            <h3>Twitter (X)</h3>
+          </div>
+          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+        </div>
+      </wa-button>
+      <wa-button href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
+        <div class="wa-split">
+          <div class="wa-cluster icon-heading">
+            <wa-icon family="brands" name="threads" fixed-width></wa-icon>
+            <h3>Threads</h3>
+          </div>
+          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+        </div>
+      </wa-button>
     </div>
   </div>
 
@@ -379,9 +429,9 @@ layout: page
       <div class="attribution">
         <span>Special thanks</span>
         <div class="button-list">
+          <wa-button appearance="filled" pill href="https://www.11ty.dev/">11ty</wa-button>
           <wa-button appearance="filled" pill href="https://lit.dev/">Lit</wa-button>
           <wa-button appearance="filled" pill href="https://github.com/open-wc/custom-elements-manifest">Custom Elements Manifest</wa-button>
-          <wa-button appearance="filled" pill href="https://www.11ty.dev/">11ty</wa-button>
           <wa-button appearance="filled" pill href="https://floating-ui.com/">Floating UI</wa-button>
           <wa-button appearance="filled" pill href="https://animate.style/">animate.css</wa-button>
           <wa-button appearance="filled" pill href="https://lunrjs.com/">Lunr</wa-button>