Added the feedback mechanism

assets/styles/main.css

@@ -15655,12 +15655,12 @@ body {
   min-height: 100%;
 }
 
-.link, .link-hi {
+.link, .link-hi-force-dark, .link-hi {
   color: inherit;
   text-decoration: none;
   transition: 0.3s ease;
 }
-.link:hover, .link-hi:hover {
+.link:hover, .link-hi-force-dark:hover, .link-hi:hover {
   color: cornflowerblue;
 }
 .link-hi {
@@ -15669,6 +15669,12 @@ body {
 .link-hi:hover {
   color: royalblue;
 }
+.link-hi-force-dark {
+  color: cornflowerblue;
+}
+.link-hi-force-dark:hover {
+  color: royalblue;
+}
 
 .radial-gradient {
   background: radial-gradient(circle at left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
@@ -15701,7 +15707,7 @@ body {
   background-color: var(--scrollbar);
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   body {
     color: black;
   }
@@ -15718,7 +15724,7 @@ body {
   .background {
     background-color: rgba(255, 255, 255, 0.8);
   }
-  .link:hover, .link-hi:hover {
+  .link:hover, .link-hi:hover, .link-hi-force-dark:hover {
     color: royalblue;
   }
   .link-hi {
@@ -15753,17 +15759,11 @@ body {
     display: block;
   }
   .animate__animated-sm {
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-duration: var(--animate-duration);
     animation-duration: var(--animate-duration);
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
   .animate__delay-1-5s {
-    -webkit-animation-delay: 1s;
-    animation-delay: 1s;
-    -webkit-animation-delay: calc(var(--animate-delay) * 1.5);
     animation-delay: calc(var(--animate-delay) * 1.5);
   }
 }

assets/styles/main.scss

@@ -109,6 +109,16 @@ body {
     &:hover {
       color: royalblue;
     }
+
+    &-force-dark {
+      @extend .link;
+
+      color: cornflowerblue;
+
+      &:hover {
+        color: royalblue;
+      }
+    }
   }
 }
 
@@ -155,7 +165,7 @@ body {
   }
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   body {
     color: black;
   }
@@ -231,18 +241,12 @@ body {
   }
 
   .animate__animated-sm {
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-duration: var(--animate-duration);
     animation-duration: var(--animate-duration);
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
 
   .animate__delay-1-5s {
-    -webkit-animation-delay: 1s;
-    animation-delay: 1s;
-    -webkit-animation-delay: calc(var(--animate-delay) * 1.5);
     animation-delay: calc(var(--animate-delay) * 1.5);
   }
 }

components/EMail.vue

@@ -24,7 +24,7 @@ const props = defineProps({
 
 const href =
   `mailto:${props.address}` +
-  (props.body ? `&body=${props.body}` : '') +
+  (props.body ? `?body=${props.body}` : '') +
   (props.subject ? `${props.body ? '&' : '?'}subject=${props.subject}` : '') +
   (props.cc ? `${props.body || props.subject ? '&' : '?'}cc=${props.cc}` : '') +
   (props.bcc
@@ -33,7 +33,7 @@ const href =
 </script>
 
 <template>
-  <a class="link-hi" target="_blank" rel="noopener" :href="href">
+  <a target="_blank" rel="noopener" :href="href">
     <slot>
       {{ props.address }}
     </slot>

components/Footer.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+
+const config = useRuntimeConfig()
 const currentYear = new Date().getFullYear()
+
+const mailTemplate = `I've just found a bug on https://enderman.ch and would like to report it.%0D%0A%0D%0AWebsite version: ${
+  config.public.version
+}%0D%0ABuild date: ${
+  config.public.buildDate
+}%0D%0ATimestamp: ${new Date().toISOString()}%0D%0A%0D%0A%0D%0ASteps to reproduce:%0D%0A{ Explain in detail what happened here, or attach a video/screenshot }%0D%0A%0D%0AAdditional information:%0D%0A{ Helpful information, such as developer console output / Leave empty if none }%0D%0A%0D%0A%0D%0A// Keep in mind that it's just a template, you can change it as you wish! :)`
 </script>
 
 <template>
@@ -7,8 +16,23 @@ const currentYear = new Date().getFullYear()
     class="float user-select-none mb-2 animate__animated animate__delay-1s animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
   >
     <span class="transpaque font-small text-shadow">
-      © 2018-{{ currentYear }}, <a href="https://enderman.ch">Enderman</a>. All
-      rights reserved. • v1.1
+      © 2018-{{ currentYear }},
+      <a class="link-hi-force-dark" href="https://enderman.ch">Enderman</a>. All
+      rights reserved. •
+      <EMail
+        class="link-hi-force-dark"
+        address="contact@enderman.ch"
+        cc="admin@enderman.ch"
+        subject="Bug report: enderman.ch"
+        :body="mailTemplate"
+      >
+        <strong>Report a bug</strong>
+      </EMail>
+      <sub>
+        β{{ config.public.version ? config.public.version : '0.0.0' }} ({{
+          config.public.buildDate ? config.public.buildDate : '1970-01-01'
+        }})
+      </sub>
     </span>
   </footer>
 </template>

nuxt.config.ts

@@ -58,9 +58,10 @@ export default defineNuxtConfig({
   typescript: {
     typeCheck: true,
   },
-  vite: {
-    define: {
-      'import.meta.env.PACKAGE_VERSION': JSON.stringify(packageJSON.version),
+  runtimeConfig: {
+    public: {
+      version: JSON.stringify(packageJSON.version).slice(1, -1),
+      buildDate: new Date().toISOString().split('T')[0],
     },
   },
 })

pages/social.vue

@@ -100,9 +100,13 @@ useHead({
     <h3 class="alex">Contact me</h3>
     <p>
       Fanmail:
-      <EMail address="contact@enderman.ch" subject="Hey Enderman!" /><br />
-      Manager: <EMail address="manager@enderman.ch" /><br />
-      Abuse: <EMail address="abuse@enderman.ch" />
+      <EMail
+        class="link-hi"
+        address="contact@enderman.ch"
+        subject="Hey Enderman!"
+      /><br />
+      Manager: <EMail class="link-hi" address="manager@enderman.ch" /><br />
+      Abuse: <EMail class="link-hi" address="abuse@enderman.ch" />
     </p>
   </div>
 </template>