feat: incorporate other footer links into the main footer links

And slighly darker background color for dark mode

Docs:
- Make heading better and nicer looking

CHANGELOG.md

@@ -5,13 +5,16 @@
 - Add screenshot support for images via the URL (if the image's URL has an "screenshot" in it, it will be displayed as a screenshot)
 
 - Add footer links
+  - And icorporate the "Source Code" and "Made by" links into the footer links
 
 - Add styles for check boxes
 
 - Add `markdown-it` plugins support for better markdown parsing
 
 ### Cleanup(s)
 
+- Slighly darker background color for dark mode
+
 - Make a more destinctive style for descriptions in the article's header
 
 - Other minor changes to elements

docs/.vitepress/config.mts

@@ -35,16 +35,11 @@ export default defineConfig({
       git: "https://github.com/aplosdev/aplos",
     },
     footer: {
-      links: [
-        { link: "https://github.com/aplosdev/aplos", text: "Source Code" },
-        { link: "https://gxbs.me/", text: "Made with ❤️ by Gabs" },
-      ],
-
       copyright: true,
       poweredBy: true,
 
       madeby: {
-        show: false,
+        show: true,
         name: "Gabs",
         link: "https://gxbs.me/",
       },
@@ -56,7 +51,7 @@ export default defineConfig({
       },
 
       sourcecode: {
-        show: false,
+        show: true,
         link: "https://github.com/aplosdev/aplos",
       },
     },

docs/guide/index.md

@@ -209,7 +209,7 @@ To deploy your website, you can refer to the [Guide made by VitePress](https://v
 
 In the case of you wanting to host your website on Codeberg, it's actually not that hard:
 
-##### **Workflow**
+##### Workflow
 
 If you have access to [Codeberg CI](https://codeberg.org/Codeberg-e.V./requests/#woodpecker-ci) take advantage of the straightforward workflow I've created. This workflow automates the process of building your website whenever you make a push, deploying the deployment of your changes:
 
@@ -254,7 +254,7 @@ To seamlessly integrate with your CI process, simply configure two essential sec
 1. `mail`: This secret should contain the email associated with your account.
 2. `codeberg_token`: This secret should store a token from your account, equipped with read and write access for your repositories.
 
-#### **Using an package**
+#### Using an package
 
 If you want to optout from using a workflow or don't want to make a request: There is actually a really simple and nice NPM package that helps you deploy your project to Codeberg. The package is called `codeberg-pages` you can install by running:
 

src/components/Footer.vue

@@ -5,25 +5,22 @@ const { theme } = useData();
 
 <template>
   <footer id="footer">
-    <nav v-if="theme.footer.links">
+    <nav v-if="theme.footer.links || theme.footer.madeby.show || theme.footer.sourcecode?.show">
       <ul>
         <li v-for="link in theme.footer.links" :key="link.link">
           <a :href="link.link">{{ link.text }}</a>
         </li>
+        <li v-if="theme.footer.sourcecode?.show">
+          <a :href="theme.footer.sourcecode.link">Source Code</a>
+        </li>
+        <li v-if="theme.footer.madeby.show">
+          <a :href="theme.footer.madeby.link"
+            >Made with ❤️ by
+            <b id="author">{{ theme.footer.madeby.name }}</b></a
+          >
+        </li>
       </ul>
     </nav>
-    <a
-      v-if="theme.footer.sourcecode?.show"
-      style="margin: 1rem; display: block"
-      :href="theme.footer.sourcecode.link"
-      ><mark>Source Code</mark></a
-    >
-    <p v-if="theme.footer.madeby.show">
-      Made with ❤️ by
-      <a id="author" :href="theme.footer.madeby.link"
-        ><mark>{{ theme.footer.madeby.name }}</mark></a
-      >
-    </p>
     <p
       v-if="theme.footer.copyright"
       id="copyright"

src/styles/_color.scss

@@ -13,7 +13,7 @@ $bg-color-l: color.scale(
 
 $bg-color-d: color.scale(
   $color-accent,
-  $lightness: -85%,
+  $lightness: -87%,
   $saturation: -80%
 ) !default;