docs: refactor docs

docs/astro.config.mjs

@@ -50,6 +50,7 @@ export default defineConfig({
         MarkdownContent: './src/components/Content.astro',
         TableOfContents: './src/components/TableOfContents.astro',
         PageTitle: './src/components/PageTitle.astro',
+        MobileMenuFooter: './src/components/MobileMenuFooter.astro',
       },
     }),
   ],

docs/src/components/ActionButtonFooter.astro

@@ -0,0 +1,48 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import MyIcon from './MyIcon.astro';
+
+---
+
+<div class="action-footer">
+    <a class="action-button" href='https://github.com/tomalaforge/angular-challenges'>
+        <div>Give a star</div>
+        <Icon name='github' size="1rem" />
+    </a>
+    
+    <a class="action-button button-sponsor" href='https://github.com/sponsors/tomalaforge'>
+        <div>Sponsor</div>
+        <MyIcon name='heart' size="1rem" color="white" />
+    </a>
+</div>
+
+<style>
+    .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;
+        font-size: var(--sl-text-base);
+        padding: 0.4rem 0.8rem;
+    }
+
+    .action-footer {
+        display: flex;
+        flex-direction: column;
+        gap: 0.7rem;
+         margin-bottom: 10px;
+    }
+
+    .button-sponsor {
+        background-color: red;
+        border-color: red;
+        color: write;
+    }
+
+</style>

docs/src/components/MobileMenuFooter.astro

@@ -0,0 +1,9 @@
+---
+import Default from '@astrojs/starlight/components/MobileMenuFooter.astro';
+import ActionButtonFooter from './ActionButtonFooter.astro';
+
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<ActionButtonFooter />

docs/src/components/TableOfContents.astro

@@ -1,45 +1,9 @@
 ---
-import { Icon } from '@astrojs/starlight/components';
 import Default from '@astrojs/starlight/components/TableOfContents.astro';
-import MyIcon from './MyIcon.astro';
+import ActionButtonFooter from './ActionButtonFooter.astro';
 
 ---
 
 <Default {...Astro.props}><slot /></Default>
 
-
-<div class="action-footer">
-    <a class="action-button" href='https://github.com/tomalaforge/angular-challenges'>
-        <div>Give a star</div>
-        <Icon name='github' size="1rem" />
-    </a>
-    
-    <a class="action-button" href='https://github.com/sponsors/tomalaforge'>
-        <div>Sponsor</div>
-        <MyIcon name='heart' size="1rem" color="white" />
-    </a>
-</div>
-
-<style>
-    .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;
-        font-size: var(--sl-text-base);
-        padding: 0.4rem 0.8rem;
-    }
-
-    .action-footer {
-        display: flex;
-        flex-direction: column;
-        gap: 0.7rem;
-    }
-
-</style>
+<ActionButtonFooter />

docs/src/content/docs/guides/resolve-challenge.md

@@ -80,7 +80,9 @@ In the description section, you can add questions, troubles you encountered, or
 
 You can now click on <span class="github-success-btn">Create pull request</span>.
 
-I will read and comment on it when I have some free time.
+I will read and comment on it <b>when I have some free time.</b>
+
+<p class="important-block">Don't worry if your answer is not reviewed immediatly. I'm doing it for <b>free</b> and during my <b>free time</b>. If you want to support me, you can do so by <a href="https://github.com/sponsors/tomalaforge">sponsoring me on github</a>. It will validate that my work is of great help for you or your team.</p>
 
 :::note
 Everyone is welcome to comment and read other PRs.

docs/src/content/docs/index.mdx

@@ -3,6 +3,8 @@ title: Welcome to Angular Challenges
 description: Get started by resolving those challenges and becoming a better Angular FrontEnd engineer.
 template: splash
 noCommentSection: true
+banner:
+  content: I will have less free time in the next two months, so don't worry if your pull requests take some time to be reviewed.
 hero:
   tagline: Start now and become an Angular Expert!
   image:
@@ -51,7 +53,12 @@ import MyIcon from '../../components/MyIcon.astro';
 </Card>
 
 <Card title="Prepare Yourself for Interviews">
-    Completing these challenges will prepare you for any technical challenges you may encounter in a frontend role during interviews.
+  Completing these challenges will prepare you for any technical challenges you
+  may encounter in a frontend role during interviews.
+</Card>
+
+<Card title="Sponsoring">
+    This project is free and aims to remain so for as long as possible. However, everything is accomplished during my free time, including creating challenges and reviewing pull requests (PRs). <b>Sponsorship can support me and contribute to the growth of the project</b>.
 </Card>
 </CardGrid>
 

docs/src/styles/custom-css.css

@@ -84,7 +84,7 @@ a.primary > svg {
 }
 
 b {
-  color: var(--sl-color-accent-high);
+  color: var(--sl-color-accent-high) !important;
 }
 
 .starlight-aside--tip b {
@@ -124,3 +124,31 @@ starlight-menu-button svg {
   flex-direction: column;
   justify-content: space-between;
 }
+
+.important-block {
+  border: solid 1px red;
+  padding: 16px;
+  background-color: #f100002e;
+}
+
+.starlight-aside--note,
+.starlight-aside--tip {
+  background-color: transparent;
+  border: solid 1px gray;
+  color: var(--sl-color-text);
+}
+
+.starlight-aside--note .starlight-aside__title,
+.starlight-aside--tip .starlight-aside__title {
+  color: white;
+}
+
+.starlight-aside--danger {
+  background-color: #f100002e;
+  border: solid 1px red;
+  color: var(--sl-color-text);
+}
+
+.starlight-aside--danger .starlight-aside__title {
+  color: red;
+}