Update docs

docs/assets/images/twitter.svg

@@ -0,0 +1 @@
+<svg id="Logo_FIXED" data-name="Logo — FIXED" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1{fill:none;}.cls-2{fill:#1da1f2;}</style></defs><title>Twitter_Logo_Blue</title><rect class="cls-1" width="400" height="400"/><path class="cls-2" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"/></svg>

docs/assets/plugins/metadata/metadata.js

@@ -226,19 +226,29 @@
   window.$docsify.plugins.push((hook, vm) => {
     hook.mounted(function () {
       getMetadata().then(metadata => {
-        // Add a div showing the current version
         const target = document.querySelector('.app-name');
-        const div = document.createElement('div');
-        div.classList.add('sidebar-buttons');
-        div.innerHTML = `
-          <a class="repo-button repo-button--version" href="https://github.com/claviska/shoelace" rel="noopener" target="_blank">
-          <sl-icon name="tag"></sl-icon> ${metadata.version}
-          </a>
+
+        // Add version
+        const version = document.createElement('div');
+        version.classList.add('sidebar-version');
+        version.textContent = metadata.version;
+        target.appendChild(version);
+
+        // Add repo buttons
+        const buttons = document.createElement('div');
+        buttons.classList.add('sidebar-buttons');
+        buttons.innerHTML = `
           <a class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
             <sl-icon name="heart"></sl-icon> Sponsor
           </a>
+          <a class="repo-button" href="https://github.com/claviska/shoelace" rel="noopener" target="_blank">
+            <sl-icon name="star"></sl-icon> Star
+          </a>
+          <a class="repo-button" href="https://twitter.com/shoelaceui" rel="noopener" target="_blank">
+            <sl-icon src="/assets/images/twitter.svg" style="transform: scale(1.5);"></sl-icon> Follow
+          </a>
         `;
-        target.appendChild(div);
+        target.appendChild(buttons);
       });
     });
 

docs/assets/styles/docs.css

@@ -16,7 +16,7 @@
   --link-color-hover: var(--sl-color-primary-50);
   --link-color: var(--sl-color-primary-50);
 
-  --sidebar-width: 18rem;
+  --sidebar-width: 20rem;
   --sidebar-background: var(--sl-color-white);
   --sidebar-border-color: var(--sl-color-gray-90);
   --sidebar-nav-link-before-content: '';
@@ -77,6 +77,15 @@
   margin-left: -1px;
 }
 
+.sidebar-version {
+  font-size: var(--sl-font-size-x-small);
+  font-weight: var(--sl-font-weight-normal);
+  color: var(--sl-color-gray-60);
+  text-align: right;
+  padding: 0 var(--sl-spacing-small);
+  margin: -1.25rem 0 .5rem 0;
+}
+
 .sidebar-buttons {
   text-align: center;
   margin-top: 0;
@@ -210,7 +219,7 @@ html .repo-button:focus {
 }
 
 html .repo-button:not(:last-of-type) {
-  margin-right: 0.25rem;
+  margin-right: .125rem;
 }
 
 html .repo-button {
@@ -224,6 +233,10 @@ html .repo-button sl-icon {
   margin-right: 0.125rem;
 }
 
+html .repo-button sl-icon[name="star"] {
+  top: -2px;
+}
+
 html .repo-button--sponsor sl-icon {
   color: #ea4aaa;
 }

docs/getting-started/overview.md

@@ -3,10 +3,12 @@
 A forward-thinking library of web components. 🥾
 
 - 🧩 Works with any framework
-- 🚚 Works with CDNs
+- 🚛 Works with CDNs
 - 🎨 Fully customizable with CSS
 - 😸 Open source
 
+Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+
 ## Quick Start
 
 Add the following code to your page.
@@ -54,20 +56,20 @@ If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Al
 
 Shoelace was designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the MIT license.
 
-If you enjoy using this software, [please sponsor me](https://github.com/sponsors/claviska) so I can continue working on it! 🏆
-
 <a class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
   <sl-icon name="heart"></sl-icon> Become a sponsor
 </a>
 
-<a class="repo-button" href="https://github.com/claviska/shoelace/stargazers" rel="noopener" target="_blank">
+<a class="repo-button" href="https://github.com/claviska/shoelace" rel="noopener" target="_blank">
   <sl-icon name="star"></sl-icon> Star
 </a>
 
-<a class="repo-button" href="https://twitter.com/claviska" rel="noopener" target="_blank">
-  <sl-icon name="chat"></sl-icon> Follow
+<a class="repo-button" href="https://twitter.com/shoelaceui" rel="noopener" target="_blank">
+  <sl-icon src="/assets/images/twitter.svg" style="transform: scale(1.5);"></sl-icon> Follow
 </a>
 
+?> If you enjoy using this software, [please sponsor me](https://github.com/sponsors/claviska) so I can continue working on it!
+
 Special thanks to the following projects and individuals that helped make Shoelace possible.
 
 - Components are compiled by [Stencil](https://stenciljs.com/)