Integrate feedback form

.vitepress/config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from "vitepress";
 import baseConfig from "@eox/pages-theme-esa/config";
+import feedbackSchema from "../public/configs/feedback_schema.json";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -23,6 +24,12 @@ export default defineConfig({
     },
   },
   themeConfig: {
+    feedback: {
+      endpoint:
+        "https://git-issue-creator.eodashboard.hub-otc.eox.at/create-issue?repo=github.com/ESA-eodashboards/issues",
+      schema: feedbackSchema,
+      position: "bottom-right",
+    },
     logo: "/assets/RACE_Logo.png",
     nav: [
       { text: "Dashboard", link: "/explore" },

.vitepress/theme/Layout.vue

@@ -22,8 +22,14 @@ onMounted(() => {
         :enable-login="theme.login"
         style="--header-transform: translateY(0); --header-background: #001923; display: block; height: var(--vp-nav-height);"
       ></esa-navbar>
+        <eox-feedback-button
+          v-if="theme.feedback && frontmatter?.feedback !== false"
+          :endpoint="theme.feedback?.endpoint"
+          .schema="theme.feedback?.schema"
+          :position="theme.feedback?.position"
+        />
     </ClientOnly>
     <Content></Content>
   </div>
   <Layout v-else></Layout>
-</template>
+</template>

.vitepress/theme/style.css

@@ -29,3 +29,7 @@ esa-cover {
         padding: 80px 100px;
     }
 }
+/* Ensure the feedback button is above the storytelling content */
+:root {
+  --vp-z-index-footer: 50;
+}

explore/index.md

@@ -1,5 +1,6 @@
 ---
 layout: eodash
+feedback: false
 ---
 
 <script setup>
@@ -35,4 +36,16 @@ layout: eodash
     const cacheBuster = `?t=${new Date().getTime()}`; // Add a timestamp for cache busting
 </script>
 
-<eo-dash style="display: block; height: calc(100dvh - 80px)" :config="withBase(`/configs/race-config.js${cacheBuster}`)"/>
+<eo-dash :config="withBase(`/configs/race-config.js${cacheBuster}`)"/>
+
+<style>
+eo-dash {
+  display: block;
+  height: calc(100dvh - var(--vp-nav-height));
+  width: 100%;
+}
+.VPPage:has(eo-dash) {
+  padding: 0;
+  max-width: unset;
+}
+</style>