Update site header and footer to match Récivi

docs/astro.config.mjs

@@ -101,6 +101,10 @@ export default defineConfig({
         "./src/styles/terminal.css",
         "./src/styles/typography.css",
       ],
+      components: {
+        Footer: "./src/components/Footer.astro",
+        SocialIcons: "./src/components/SocialIcons.astro",
+      },
       editLink: {
         baseUrl: "https://github.com/pls-rs/pls/edit/main/docs/",
       },

docs/src/components/Footer.astro

@@ -1,20 +1,47 @@
 ---
-import Pls from "@/components/Pls.astro";
-import Stat from "@/components/Stat.astro";
----
+import type { Props } from '@astrojs/starlight/props'
 
-<footer class="footer">
-  <p>
-    <Pls /> is free and open-source software. If you find it useful, please
-    <a href="/guides/contribute/">contribute</a>.
-  </p>
+import EditLink from '@astrojs/starlight/components/EditLink.astro';
+import Pagination from '@astrojs/starlight/components/Pagination.astro'
+---
 
-  <Stat />
+<footer class="sl-flex">
+  <div class="meta sl-flex">
+    <a
+      href="https://creativecommons.org/licenses/by/4.0/"
+      target="_blank"
+      rel="noopener">
+      <span>CC BY 4.0 International</span>
+    </a>
+    <EditLink {...Astro.props} />
+  </div>
+  <Pagination {...Astro.props} />
 </footer>
 
 <style>
-footer.footer {
-  padding-block-start: 5rem;
-  text-align: center;
-}
+  /* Copied from the `Footer` component. */
+  footer {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  .meta {
+    gap: 0.75rem 3rem;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 3rem;
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-gray-3);
+  }
+  .meta > :global(p:only-child) {
+    margin-inline-start: auto;
+  }
+
+  /* Copied from the `EditLink` component. */
+  a {
+    text-decoration: none;
+    color: var(--sl-color-gray-3);
+  }
+  a:hover {
+    color: var(--sl-color-white);
+  }
 </style>

docs/src/components/SocialIcons.astro

@@ -0,0 +1,10 @@
+---
+import type { Props } from '@astrojs/starlight/props'
+
+import Default from '@astrojs/starlight/components/SocialIcons.astro'
+
+import Stars from '@/components/Stars.astro'
+---
+
+<Default {...Astro.props}><slot /></Default>
+<Stars owner="pls-rs" repo="pls" />

docs/src/components/Stars.astro

@@ -1,42 +1,71 @@
 ---
-const { owner, repo } = Astro.props;
+import { Icon } from '@astrojs/starlight/components'
+
+const { owner, repo } = Astro.props
 ---
 
-<pls-stars data-owner={owner} data-repo={repo}>
-  <span id="star-count">many</span>
-</pls-stars>
+<a
+  href={`https://github.com/${owner}/${repo}`}
+  class="sl-flex stars">
+  <Icon name="star" />
+  <gh-stars
+    data-owner={owner}
+    data-repo={repo}>
+    <span id="star-count">many</span>
+  </gh-stars>
+</a>
+
+<style>
+  .stars {
+    align-items: center;
+    gap: 0.25rem;
+    text-decoration: none;
+  }
+
+  /* Copied from the `SocialIcons` component. */
+  a {
+    color: var(--sl-color-text-accent);
+    padding: 0.5em;
+    margin: -0.5em;
+  }
+  a:hover {
+    opacity: 0.66;
+  }
+</style>
 
 <script>
-  class PlsStars extends HTMLElement {
+  class GhStars extends HTMLElement {
     constructor() {
-      super();
+      super()
 
-      const approximate = (count) => {
+      const approximate = (count: number) => {
         if (count >= 1000) {
           // Show numbers over 1000 as x.yk. So 1234 becomes 1.2k.
-          const mag = Math.trunc(count / 100) / 10;
-          return `${mag}k+`;
+          const mag = Math.trunc(count / 100) / 10
+          return `${mag}k+`
         } else {
           // Show numbers below 1000 as xy0+. So 789 becomes 780.
-          const mag = Math.trunc(count / 10) * 10;
-          return `${mag}+`;
+          const mag = Math.trunc(count / 10) * 10
+          return `${mag}+`
         }
       }
 
-      const {owner, repo} = this.dataset;
+      const { owner, repo } = this.dataset
       fetch(`https://api.github.com/repos/${owner}/${repo}`)
-        .then(res => {
+        .then((res) => {
           if (res.ok) {
-            return res.json();
+            return res.json()
           } else {
-            throw new Error('Network response was not OK.');
+            throw new Error('Network response was not OK.')
           }
         })
-        .then(data => {
-          this.querySelector('#star-count').textContent = approximate(data.stargazers_count);
-        }).catch(() => {});
+        .then((data) => {
+          const elem = this.querySelector('#star-count')
+          if (elem) elem.textContent = approximate(data.stargazers_count)
+        })
+        .catch((err) => void err)
     }
   }
 
-  customElements.define('pls-stars', PlsStars)
+  customElements.define('gh-stars', GhStars)
 </script>