docs(docs): add sponsor link and star

docs/astro.config.mjs

@@ -16,11 +16,7 @@ export default defineConfig({
         linkedin: 'https://www.linkedin.com/in/thomas-laforge-2b05a945/',
         twitter: 'https://twitter.com/laforge_toma',
       },
-      customCss: [
-        '@fontsource/ibm-plex-serif/400.css',
-        '@fontsource/ibm-plex-serif/600.css',
-        './src/styles/custom-css.css',
-      ],
+      customCss: ['./src/styles/custom-css.css'],
       sidebar: [
         {
           label: 'Guides',
@@ -31,16 +27,6 @@ export default defineConfig({
           autogenerate: { directory: 'challenges' },
         },
       ],
-      head: [
-        {
-          tag: 'script',
-          attrs: {
-            src: 'https://buttons.github.io/buttons.js',
-            defer: true,
-            async: true,
-          },
-        },
-      ],
     }),
   ],
 });

docs/src/content/docs/guides/contribute.md

@@ -8,13 +8,3 @@ sidebar:
 :::note
 WIP:
 :::
-
-<a
-  class="github-button"
-  href="https://github.com/tomalaforge/angular-challenges"
-  data-color-scheme="no-preference: dark; light: light; dark: dark;"
-  data-size="large"
-  data-show-count="true"
-  aria-label="Star tomalaforgee/angular-challenges on GitHub">
-Star
-</a>

docs/src/content/docs/index.mdx

@@ -14,6 +14,10 @@ hero:
     - text: Start your first challenge immediatly
       link: /challenges/angular/1-projection/
       icon: rocket
+    - text: Give a star
+      link: https://github.com/tomalaforge/angular-challenges
+      icon: github
+      variant: secondary
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
@@ -21,7 +25,7 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 <CardGrid>
 <Card title="35 Challenges">
     This repository gathers 35 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>Ngrx</b>, <b>RxJS</b>, and <b>Ngrx</b>. 
-    These challenges revolve around real-life issues or specific features to elevate your skills.
+    These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>
 
 <Card title="Become an OSS Maintainer">
@@ -48,3 +52,17 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
     Completing these challenges will prepare you for any technical challenges you may encounter in a frontend role during interviews.
 </Card>
 </CardGrid>
+
+---
+
+<div class="article-footer">
+  <a href="https://github.com/sponsors/tomalaforge" alt="Sponsor link">
+    🤍 Sponsor the Project
+  </a>
+</div>
+
+<div class="main-page-footer">
+  Created by{' '}
+  <a href="https://github.com/tomalaforge?tab=repositories">Thomas Laforge</a> -
+  Powered by 🌟 <a href="https://starlight.astro.build/">Starlight</a>
+</div>

docs/src/styles/custom-css.css

@@ -9,6 +9,11 @@
   /* --sl-color-text-invert: #212121; */
   --cardBgColor: #242526;
   /* --sl-font: 'IBM Plex Serif', serif; */
+
+  --sl-hue-purple: 41;
+  --sl-color-purple-low: hsl(var(--sl-hue-orange), 39%, 22%);
+  --sl-color-purple: hsl(var(--sl-hue-orange), 82%, 63%);
+  --sl-color-purple-high: hsl(var(--sl-hue-orange), 82%, 87%);
 }
 
 .github-success-btn {
@@ -51,7 +56,7 @@
 }
 .article-footer > a {
   border: 1px solid var(--sl-color-accent-high);
-  border-radius: 0.5rem;
+  border-radius: 999rem;
   padding: 1rem;
   text-decoration: none;
   color: var(--sl-color-gray-2);
@@ -74,3 +79,16 @@ a.primary {
 b {
   color: var(--sl-color-accent-high);
 }
+
+.main-page-footer {
+  margin-top: 2rem !important;
+  font-size: var(--sl-text-sm);
+  text-align: center;
+}
+
+@media (max-width: 799px) {
+  .main-page-footer {
+    margin-top: 2rem !important;
+    font-size: var(--sl-text-xs);
+  }
+}