fix: Add the Packagist link beside GitHub and pad the promise list. (#1)

Author: gustavofreze

src/components/SiteBar.astro

@@ -1,7 +1,7 @@
 ---
 /**
- * The bar on top of every page: the brand that leads home, the way to search, the organization on GitHub
- * and the theme control.
+ * The bar on top of every page: the brand that leads home, the way to search, the organization on GitHub and
+ * on Packagist, and the theme control.
  */
 import { SITE, TEXT } from '../content/site'
 import BrandMark from './BrandMark.astro'
@@ -29,6 +29,16 @@ import ThemeToggle from './ThemeToggle.astro'
         >
           <Icon name="github" size={18} />
         </a>
+        <a
+          href={SITE.packagist}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="tb-bar__tool"
+          aria-label={TEXT.nav.packagist}
+          title={TEXT.nav.packagist}
+        >
+          <Icon name="packagist" size={18} />
+        </a>
       </div>
       <ThemeToggle theme={TEXT.theme} />
     </div>

src/components/SiteFooter.astro

@@ -9,11 +9,21 @@ import Icon from './Icon.astro'
       href={SITE.github}
       target="_blank"
       rel="noopener noreferrer"
-      class="tb-footer__github"
+      class="tb-footer__link"
       aria-label={TEXT.nav.source}
       title={TEXT.nav.source}
     >
       <Icon name="github" size={20} />
     </a>
+    <a
+      href={SITE.packagist}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="tb-footer__link"
+      aria-label={TEXT.nav.packagist}
+      title={TEXT.nav.packagist}
+    >
+      <Icon name="packagist" size={20} />
+    </a>
   </div>
 </footer>

src/components/icons.ts

@@ -10,6 +10,7 @@ export const ICONS = {
   external: '<path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/>',
   github:
     '<path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/>',
+  packagist: '<path d="M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Z"/><path d="M4 7.5 12 12l8-4.5M12 12v9"/>',
 } as const
 
 export type IconName = keyof typeof ICONS

src/content/site.ts

@@ -7,6 +7,7 @@ import { ORGANIZATION } from './catalog'
 export const SITE = {
   name: 'Tiny Blocks',
   github: `https://github.com/${ORGANIZATION}`,
+  packagist: `https://packagist.org/packages/${ORGANIZATION}/`,
   meta: {
     title: 'Tiny Blocks · Small, focused PHP libraries',
     description:
@@ -26,6 +27,7 @@ export const TEXT = {
     libraries: 'Libraries',
     toTop: 'Back to top',
     source: 'Tiny Blocks on GitHub',
+    packagist: 'Tiny Blocks on Packagist',
   },
   home: {
     lede: 'Small, focused PHP libraries. Each one solves a single problem and can be adopted on its own, without pulling in the rest.',

src/styles/theme.css

@@ -477,17 +477,18 @@ code {
 .tb-footer__inner {
   display: flex;
   justify-content: center;
+  gap: 0.5rem;
   padding-block: 1.25rem;
 }
-.tb-footer__github {
+.tb-footer__link {
   display: grid;
   place-items: center;
   width: 2.75rem;
   height: 2.75rem;
   border-radius: var(--radius-pill);
   color: var(--color-ink-muted);
 }
-.tb-footer__github:hover {
+.tb-footer__link:hover {
   background: var(--color-surface-strong);
   color: var(--color-ink);
 }
@@ -1195,7 +1196,6 @@ a.tb-chip:hover {
   padding: 1.5rem;
   border-radius: var(--radius-lg);
   border: 1px dashed var(--color-tb-brand);
-  padding: 0;
   list-style: none;
 }
 .tb-promise li {