feat: add sponsor barre

docs/astro.config.mjs

@@ -106,7 +106,8 @@ export default defineConfig({
       TableOfContents: './src/components/TableOfContents.astro',
       PageTitle: './src/components/PageTitle.astro',
       MobileMenuFooter: './src/components/MobileMenuFooter.astro',
-      SiteTitle: './src/components/SiteTitle.astro'
+      SiteTitle: './src/components/SiteTitle.astro',
+      Hero: './src/components/Hero.astro'
     },
     defaultLocale: 'root',
     locales

docs/src/components/ActionButtonFooter.astro

@@ -9,7 +9,7 @@ const { data } = await getEntry('i18n', lang);
 
 ---
 
-<div class="action-footer">
+<div class="action-footer button-hover">
   <a class="action-button" href="/subscription">
     <div>{data['buttons.email']}</div>
     <Icon name="email"  />

docs/src/components/Hero.astro

@@ -0,0 +1,78 @@
+---
+import Default from '@astrojs/starlight/components/Hero.astro';
+import { Icon } from '@astrojs/starlight/components';
+import MyIcon from './MyIcon.astro';
+
+const sponsors = ['ddotx'];
+---
+
+<div class="sponsor-header button-hover">
+    <p>Big thanks to the people supporting this project:
+    {sponsors.map((sponsor: string) => (
+      <a href=`https://github.com/${sponsor}`>
+        <img
+          loading="lazy"
+          src={`https://github.com/${sponsor}.png?size=80`}
+          width="40"
+          height="40"
+          alt={sponsor}
+          class="avatar"
+        />
+      </a>
+    ))}
+    </p>
+  <a class="action-button" href="https://github.com/sponsors/tomalaforge">
+    <div>Join the list</div>
+    <MyIcon name="heart" fill="none" stroke="currentColor" color="white" />
+  </a>
+</div>
+
+<Default {...Astro.props}>
+  <slot />
+</Default>
+
+
+<style>
+  .sponsor-header {
+    border: 1px solid var(--sl-color-gray-5);
+    margin-bottom: -2rem;
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+
+  .sponsor-header p {
+    font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
+    margin-right: 0.5rem;
+  }
+
+  .sponsor-line a {
+    display: inline-block;
+  }
+
+  .avatar {
+    border-radius: 50%;
+    width: 30px;
+    height: auto;
+    vertical-align: middle;
+    margin-right: 0.5rem;
+  }
+
+  .action-button {
+    display: flex !important;
+    justify-content: center;
+    gap: 0.5em;
+    align-items: center;
+    border-radius: 999rem;
+    color: var(--sl-color-white) !important;
+    line-height: 1.1875;
+    text-decoration: none;
+    font-size: var(--sl-text-sm) !important;
+    border: 1px solid;
+    padding: 0.4rem 0.8rem;
+    width: fit-content;
+  }
+</style>

docs/src/styles/custom-css.css

@@ -60,7 +60,7 @@ html {
 a.action,
 .button-star,
 .article-footer > a,
-.action-footer > a.action-button {
+.button-hover > a.action-button {
   transition: var(--button-transition);
 
   &:hover {