From 6f53d403e57e926cbb3c227d87209fe983e09d24 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Thu, 1 Aug 2024 23:36:33 +0300
Subject: [PATCH] feat: add option to have a custom button for the helpful
 layout

---
 CHANGELOG.md            |  3 +++
 README.md               |  2 +-
 src/layouts/Helpful.vue | 21 +++++++++++++--------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0043d17..9d3e34d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@
 
   - Customize your website with plugins that enhance its functionality and appearance. Aplós offers a variety of plugins that you can easily integrate into your project. Let's explore the available plugins and how you can use them to improve your website.
 
+
+- Add option to have a custom button for the helpful layout
+
 - Make comments in articles optional
 
 - Reading time for articles
diff --git a/README.md b/README.md
index d1e78de..ff90c02 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <div align="center">
 <h1>Aplós</h1>
-  
+
 A sleek, contemporary, and purposefully designed VitePress theme
 
 </div>
diff --git a/src/layouts/Helpful.vue b/src/layouts/Helpful.vue
index 8d2adf6..b505847 100644
--- a/src/layouts/Helpful.vue
+++ b/src/layouts/Helpful.vue
@@ -2,12 +2,17 @@
   <section id="simple-layout">
     <p class="dialog-buttons">
       <a href="#top" target="_top">↑ Go to top</a>
-      <a
-        v-if="theme.nav.git"
-        id="file-an-issue"
-        :href="theme.nav.git + '/issues/new'"
-        >File an issue</a
-      >
+      <template v-if="theme.nav.git || frontmatter.footlink">
+        <a
+          class="extra-link"
+          :href="theme.nav.git + '/issues/new'"
+          v-if="theme.nav.git && !frontmatter.footlink"
+          >File an issue</a
+        >
+        <a id="extra-link" :href="frontmatter.footlink.url" v-else>{{
+          frontmatter.footlink.text
+        }}</a>
+      </template>
     </p>
   </section>
 </template>
@@ -15,7 +20,7 @@
 <script setup lang="ts">
 import { useData } from "vitepress";
 
-const { theme } = useData();
+const { theme, frontmatter } = useData();
 </script>
 
 <style lang="scss">
@@ -49,7 +54,7 @@ const { theme } = useData();
   }
 }
 
-#file-an-issue {
+#extra-link {
   background-color: transparent;
   color: var(--color-accent);