Remove v-if prop anti-pattern, clean up, add reader mode

components/blocks/Flooter.vue

@@ -4,14 +4,7 @@ const props = defineProps({
 })
 
 const config = useAppConfig()
-const fqdn = config.url.split('//')[1]
-
 const currentYear = new Date().getFullYear()
-const mailTemplate = `I've just found a bug on ${config.url} and would like to report it.%0D%0A%0D%0AWebsite version: ${
-  config.build.version
-}%0D%0ABuild date: ${
-  config.build.date
-}%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>
@@ -25,19 +18,6 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
         'text-shadow': !props.opaque,
       }"
     >
-      <EMail
-        :class="{
-          'link-hi-force-dark': !props.opaque,
-          'link-hi': props.opaque,
-        }"
-        :address="`contact@${fqdn}`"
-        :cc="`admin@${fqdn}`"
-        :subject="`Bug report: ${fqdn}`"
-        :body="mailTemplate"
-      >
-        <strong>Report a bug</strong>
-      </EMail>
-      <br />
       © 2018-{{ currentYear }},
       <a
         :class="{

components/blocks/Logo.vue

@@ -43,7 +43,7 @@ const props = defineProps({
       />
       <div>
         <h1 class="alex mb-0">{{ props.title }}</h1>
-        <Separator />
+        <Separator class="m-0" />
         <p class="mb-0">{{ props.description }}</p>
       </div>
     </NuxtLink>

components/blocks/Options.vue

@@ -3,6 +3,14 @@ import cogIcon from '~/assets/images/icons/cog.png'
 import pearlIcon from '~/assets/images/icons/pearl.gif'
 
 const theme = useVThemeSSR()
+const config = useAppConfig()
+const fqdn = config.url.split('//')[1]
+
+const mailTemplate = `I've just found a bug on ${config.url} and would like to report it.%0D%0A%0D%0AWebsite version: ${
+  config.build.version
+}%0D%0ABuild date: ${
+  config.build.date
+}%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>
@@ -48,7 +56,15 @@ const theme = useVThemeSSR()
               </div>
             </div>
           </div>
-          Report a bug
+          <EMail
+            class="link-hi"
+            :address="`contact@${fqdn}`"
+            :cc="`admin@${fqdn}`"
+            :subject="`Bug report: ${fqdn}`"
+            :body="mailTemplate"
+          >
+            <strong>Report a bug</strong>
+          </EMail>
         </VCardText>
         <VCardActions>
           <VSpacer></VSpacer>

components/blocks/Separator.vue

@@ -13,7 +13,7 @@ const props = defineProps({
 
 <template>
   <hr
-    class="radial-gradient m-0 border-0 w-100"
+    class="separator radial-gradient border-0"
     :style="{ height: props.height + 'px' }"
   />
 </template>

components/blocks/SwipeControls.vue

@@ -8,7 +8,9 @@ const { pages } = storeToRefs(pageStore)
 const route = useRoute()
 const state = computed(() => {
   const i = pages.value.indexOf(
-    pages.value.find((page) => page.path === route.fullPath)!,
+    pages.value.find(
+      (page) => page.path === '/' + route.fullPath.split('/')[1],
+    )!,
   )
 
   return {