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

components/TransitionY.vue

@@ -1,73 +0,0 @@
-<script setup>
-console.log('Transition started')
-function enter(el, done) {
-  const width = getComputedStyle(el).width
-  console.log('@enter')
-  el.style.width = width
-  el.style.position = 'absolute'
-  el.style.visibility = 'hidden'
-  el.style.height = 'auto'
-
-  const height = getComputedStyle(el).height
-
-  el.style.width = ''
-  el.style.position = ''
-  el.style.visibility = ''
-  el.style.height = '0'
-
-  // Force repaint to make sure the
-  // animation is triggered correctly.
-  getComputedStyle(el).height
-
-  // Trigger the animation.
-  // We use `requestAnimationFrame` because we need
-  // to make sure the browser has finished
-  // painting after setting the `height`
-  // to `0` in the line above.
-  requestAnimationFrame(() => {
-    el.style.height = height
-  })
-
-  done()
-}
-
-function afterEnter(element) {
-  console.log('@after-enter')
-  element.style.height = 'auto'
-}
-
-function leave(element) {
-  console.log('@leave')
-  const height = getComputedStyle(element).height
-
-  element.style.height = height
-
-  // Force repaint to make sure the
-  // animation is triggered correctly.
-  getComputedStyle(element).height
-
-  requestAnimationFrame(() => {
-    element.style.height = '0'
-  })
-}
-</script>
-
-<template>
-  <Transition
-    name="expand"
-    @enter="enter"
-    @after-enter="afterEnter"
-    @leave="leave"
-  >
-    <slot />
-  </Transition>
-</template>
-
-<style scoped lang="scss">
-* {
-  will-change: height;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-</style>

components/animations/AClientOnly.vue

@@ -2,35 +2,12 @@
 import type { PropType } from 'vue'
 
 type ModeOptions = 'in-out' | 'out-in' | 'default' | undefined
-type RenderOptions =
-  | 'never'
-  | 'always'
-  | 'xs'
-  | 'sm'
-  | 'sm-down'
-  | 'sm-up'
-  | 'md'
-  | 'md-down'
-  | 'md-up'
-  | 'lg'
-  | 'lg-down'
-  | 'lg-up'
-  | 'xl'
-  | 'xl-down'
-  | 'xl-up'
-  | 'xxl'
-  | undefined
 
-const vdisp = ref(useVDisplay())
 const props = defineProps({
   fallback: {
     type: String,
     default: '',
   },
-  render: {
-    type: String as PropType<RenderOptions>,
-    default: 'always',
-  },
   appear: {
     type: Boolean,
     default: false,
@@ -48,45 +25,6 @@ const props = defineProps({
     default: 'animate__fadeOut',
   },
 })
-
-const render = computed(() => {
-  switch (props.render) {
-    case 'never':
-      return false
-    case 'always':
-      return true
-    case 'xs':
-      return vdisp.value.xs
-    case 'sm':
-      return vdisp.value.sm
-    case 'sm-down':
-      return vdisp.value.smAndDown
-    case 'sm-up':
-      return vdisp.value.smAndUp
-    case 'md':
-      return vdisp.value.md
-    case 'md-down':
-      return vdisp.value.mdAndDown
-    case 'md-up':
-      return vdisp.value.mdAndUp
-    case 'lg':
-      return vdisp.value.lg
-    case 'lg-down':
-      return vdisp.value.lgAndDown
-    case 'lg-up':
-      return vdisp.value.lgAndUp
-    case 'xl':
-      return vdisp.value.xl
-    case 'xl-down':
-      return vdisp.value.xlAndDown
-    case 'xl-up':
-      return vdisp.value.xlAndUp
-    case 'xxl':
-      return vdisp.value.xxl
-    default:
-      return false
-  }
-})
 </script>
 
 <template>
@@ -99,7 +37,7 @@ const render = computed(() => {
       :enter-active-class="`animate__animated ${props.enter}`"
       :leave-active-class="`animate__animated ${props.leave}`"
     >
-      <slot v-if="render" />
+      <slot />
     </Transition>
   </ClientOnly>
 </template>

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 {

components/global/icon-github.vue

@@ -1 +0,0 @@
-<template></template>

components/global/icon-steam.vue

@@ -1 +0,0 @@
-<template></template>

components/global/icon-twitch.vue

@@ -1 +0,0 @@
-<template></template>