Added options, preparing for Quasar rewrite

.eslintrc.cjs

@@ -12,7 +12,7 @@ module.exports = {
   plugins: [],
   rules: {
     lintOnStart: 0,
-    indent: ['error', 2],
+    indent: ['error', 2, { SwitchCase: 1 }],
     quotes: [2, 'single', { avoidEscape: true }],
     'no-console': 'off',
     'vue/no-multiple-template-root': 'off',

.stylelintcache

@@ -1 +1 @@
-[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Logo.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\LinkButton.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\TransitionY.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Navigation.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Separator.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Flooter.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Portal.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"15"},{"size":165,"mtime":1700688268778,"hashOfConfig":"16"},{"size":1113,"mtime":1700251498711,"hashOfConfig":"16"},{"size":986,"mtime":1700324714794,"hashOfConfig":"16"},{"size":1513,"mtime":1700430002840,"hashOfConfig":"16"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"16"},{"size":804,"mtime":1700688952880,"hashOfConfig":"16"},{"size":1252,"mtime":1700694015567,"hashOfConfig":"16"},{"size":300,"mtime":1700689033070,"hashOfConfig":"16"},{"size":2055,"mtime":1701085637656,"hashOfConfig":"16"},{"size":16907,"mtime":1700919582401,"hashOfConfig":"16"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"16"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"16"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"16"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"16"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"16"},"5tgxr3"]
+[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\TransitionY.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Dialog.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"16"},{"size":165,"mtime":1700688268778,"hashOfConfig":"17"},{"size":1513,"mtime":1700430002840,"hashOfConfig":"17"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"17"},{"size":804,"mtime":1700688952880,"hashOfConfig":"17"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"17"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"17"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"17"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"17"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"17"},{"size":1150,"mtime":1706039004185,"hashOfConfig":"17"},{"size":2119,"mtime":1706017145787,"hashOfConfig":"17"},{"size":1345,"mtime":1706015856048,"hashOfConfig":"17"},{"size":1135,"mtime":1706030243608,"hashOfConfig":"17"},{"size":979,"mtime":1706003786966,"hashOfConfig":"17"},{"size":1519,"mtime":1706031675155,"hashOfConfig":"17"},{"size":16911,"mtime":1706027251875,"hashOfConfig":"17"},"5tgxr3"]

app.vue

@@ -5,6 +5,8 @@ import { useRuntimeConfig } from '#imports'
 const config = useRuntimeConfig()
 const quasar = useQuasar()
 
+quasar.dark.set('auto')
+
 useHead({
   titleTemplate: (chunk) => {
     return !chunk || chunk === config.public.websiteName
@@ -15,33 +17,28 @@ useHead({
 </script>
 
 <template>
-  <NuxtLoadingIndicator color="purple" />
-
   <div
     id="ender-layout"
     class="d-flex flex-column align-items-center pt-sm-5 h-100"
   >
+    <AClientOnly appear render="xs" mode="out-in">
+      <SwipeControls />
+    </AClientOnly>
+
     <NuxtLayout
       name="card"
       class="animate__animated-sm animate__delay-1-5s animate__fadeInDown"
     >
       <template #footer>
-        <ClientOnly>
-          <template #fallback> </template>
-          <Transition
+        <AClientOnly
           appear
-            enter-active-class="animate__animated animate__delay-1s animate__fadeIn"
-            leave-active-class="animate__animated animate__fadeOut"
-            mode="out-in"
+          render="xs"
+          mode="in-out"
+          enter="animate__animated animate__delay-1s animate__fadeIn"
+          leave="animate__animated animate__fadeOut"
         >
-            <Flooter
-              v-if="
-                quasar.screen.width && quasar.screen.height && quasar.screen.xs
-              "
-              opaque
-            />
-          </Transition>
-        </ClientOnly>
+          <Flooter opaque />
+        </AClientOnly>
       </template>
     </NuxtLayout>
   </div>
@@ -51,15 +48,13 @@ useHead({
     <Portal layout="#ender-layout" animate randomize fade />
   </ClientOnly>
 
-  <Transition
+  <AClientOnly
     appear
-    enter-active-class="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
-    leave-active-class="animate__animated animate__fadeOutDown"
+    render="sm-up"
     mode="out-in"
+    enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
+    leave="animate__animated animate__fadeOutDown"
   >
-    <Flooter
-      v-if="quasar.screen.width && quasar.screen.height && !quasar.screen.xs"
-      class="floaty mb-2 px-2"
-    />
-  </Transition>
+    <Flooter class="floaty mb-2 px-2" />
+  </AClientOnly>
 </template>

assets/styles/main.scss

@@ -36,7 +36,7 @@ body {
   position: sticky;
 
   background-color: rgb(6 25 28);
-  background-image: url('~/assets/images/sky.png');
+  background-image: url('~/assets/images/textures/sky.png');
   background-attachment: fixed;
   background-blend-mode: multiply;
   background-size: cover;
@@ -61,6 +61,26 @@ body {
 }
 
 // Helper classes that don't exist in Bootstrap.
+.nobr {
+  white-space: nowrap;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.overlay {
+  grid-area: 1 / 1;
+}
+
+.pass-through {
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
 .no-decoration {
   text-decoration: none;
   color: inherit;
@@ -78,7 +98,7 @@ body {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.display-xs-none {
+.display-sm {
   display: none;
 }
 
@@ -87,10 +107,6 @@ body {
   font-weight: 700;
 }
 
-.smooth-glide {
-    transition: height 0.4s linear;
-}
-
 // Query-overridable classes.
 .background {
   background-color: rgb(0 0 0 / 50%);
@@ -101,6 +117,42 @@ body {
   min-height: 100%;
 }
 
+.dialog {
+  display: grid;
+
+  min-width: 240px;
+  max-width: 640px;
+
+  background-color: rgb(25 20 40 / 95%);
+  box-shadow: rgb(81 75 89 / 50%) 7px 7px 2em;
+  border-radius: 16px !important;
+
+  > div.background {
+    background-image: url('~/assets/images/textures/aero.png');
+    background-attachment: scroll;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-blend-mode: lighten;
+
+    width: 100%;
+    height: 100%;
+
+    opacity: 0.2;
+
+    box-shadow: azure 0 0 20rem;
+    filter: blur(5px);
+  }
+
+  > div.content > img.icon-badge {
+    position: fixed;
+    margin-top: -20px;
+    margin-left: -20px;
+    transform: rotate(-25deg);
+    width: 60px;
+    height: 60px;
+  }
+}
+
 %link {
   color: inherit;
   text-decoration: none;
@@ -164,7 +216,7 @@ body {
   }
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   body {
     color: black;
   }
@@ -240,11 +292,11 @@ body {
     mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
   }
 
-  .rounded-1 {
+  .rounded-1-sm {
     border-radius: 1em;
   }
 
-  .display-xs-none {
+  .display-sm {
     display: block;
   }
 
@@ -264,7 +316,7 @@ body {
 
 @include bootstrap.media-breakpoint-up(lg) {
   .dimensions {
-    width: 60%;
+    width: 70%;
   }
 }
 

components/animations/AClientOnly.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+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'
+  | undefined
+
+const quasar = useQuasar()
+const props = defineProps({
+  fallback: {
+    type: String,
+    default: '',
+  },
+  render: {
+    type: String as PropType<RenderOptions>,
+    default: 'always',
+  },
+  appear: {
+    type: Boolean,
+    default: false,
+  },
+  mode: {
+    type: String as PropType<ModeOptions>,
+    default: 'out-in',
+  },
+  enter: {
+    type: String,
+    default: 'animate__fadeIn',
+  },
+  leave: {
+    type: String,
+    default: 'animate__fadeOut',
+  },
+})
+
+const render = computed(() => {
+  switch (props.render) {
+    case 'never':
+      return false
+    case 'always':
+      return true
+    case 'xs':
+      return quasar.screen.xs
+    case 'sm':
+      return quasar.screen.sm
+    case 'sm-down':
+      return quasar.screen.xs || quasar.screen.sm
+    case 'sm-up':
+      return !quasar.screen.xs
+    case 'md':
+      return quasar.screen.md
+    case 'md-down':
+      return !quasar.screen.lg && !quasar.screen.xl
+    case 'md-up':
+      return !quasar.screen.xs && !quasar.screen.sm
+    case 'lg':
+      return quasar.screen.lg
+    case 'lg-down':
+      return !quasar.screen.xl
+    case 'lg-up':
+      return quasar.screen.lg || quasar.screen.xl
+    case 'xl':
+      return quasar.screen.xl
+    default:
+      return false
+  }
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <template #fallback>{{ props.fallback }}</template>
+
+    <Transition
+      :appear="props.appear"
+      :mode="props.mode"
+      :enter-active-class="`animate__animated ${props.enter}`"
+      :leave-active-class="`animate__animated ${props.leave}`"
+    >
+      <slot v-if="(quasar.screen.width || quasar.screen.height) && render" />
+    </Transition>
+  </ClientOnly>
+</template>

components/animations/Portal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import sky from '~/assets/images/portal/sky.png'
-import particles from '~/assets/images/portal/particles.png'
+import sky from '~/assets/images/textures/sky.png'
+import particles from '~/assets/images/textures/particles.png'
 
 const resources: string[] = [sky, particles]
 

components/blocks/Flooter.vue

@@ -21,7 +21,10 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
   <footer class="user-select-none text-align-center line-height-1-5">
     <span
       class="font-small"
-      :class="{ transpaque: !props.opaque, 'text-shadow': !props.opaque }"
+      :class="{
+        'footer-transparent': !props.opaque,
+        'text-shadow': !props.opaque,
+      }"
     >
       <EMail
         :class="{
@@ -45,7 +48,8 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
         href="https://enderman.ch"
         >Enderman</a
       >. All rights reserved.
-      <sub>
+      <wbr />
+      <sub class="nobr">
         β{{ version ? version : '?.?.?' }} ({{
           buildDate ? buildDate : '1970-01-01'
         }})
@@ -55,15 +59,15 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
 </template>
 
 <style scoped lang="scss">
-.transpaque {
+.footer-transparent {
   color: white;
 
   opacity: 0.25;
   transition: ease 0.3s;
-}
 
-.transpaque:hover {
+  &:hover {
     opacity: 1;
+  }
 }
 
 .line-height-1-5 {

components/blocks/Logo.vue

@@ -28,9 +28,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <NuxtLink class="no-decoration user-select-none" to="/">
-    <div
-      class="logo d-flex flex-row align-items-center justify-content-sm-center"
+  <div class="d-flex flex-row justify-content-sm-center">
+    <NuxtLink
+      class="no-decoration logo d-flex flex-row align-items-center user-select-none"
+      to="/"
     >
       <img
         class="logo-image"
@@ -45,8 +46,8 @@ const props = defineProps({
         <Separator />
         <p class="mb-0">{{ props.description }}</p>
       </div>
-    </div>
     </NuxtLink>
+  </div>
 </template>
 
 <style scoped lang="scss">

components/blocks/Navigation.vue

@@ -3,28 +3,11 @@ import { storeToRefs } from 'pinia'
 import { usePageStore } from '~/stores/pages'
 
 import logo from '~/assets/images/logo.gif'
-import aboutIcon from '~/assets/images/icons/info.png'
-import projectIcon from '~/assets/images/icons/defrag.png'
-import socialIcon from '~/assets/images/icons/user.png'
 
 const pageStore = usePageStore()
 const { pages } = storeToRefs(pageStore)
 
 const links = toRaw(pages.value).filter((page) => page.path !== '/')
-const icons = [
-  {
-    src: aboutIcon,
-    alt: 'Information',
-  },
-  {
-    src: projectIcon,
-    alt: 'Blocks',
-  },
-  {
-    src: socialIcon,
-    alt: 'Users',
-  },
-]
 </script>
 
 <template>
@@ -41,11 +24,11 @@ const icons = [
       class="navbar-nav flex-row align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
     >
       <li v-for="(page, index) in links" :key="index" class="nav-item">
-        <LinkButton
+        <Route
           :path="page.path"
           :name="page.name"
-          :icon="icons[index].src"
-          :alt="icons[index].alt"
+          :icon="page.icon!.src"
+          :alt="page.icon!.alt"
         />
       </li>
     </ul>

components/blocks/Options.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+
+import Dialog from '~/components/ui/Dialog.vue'
+import cogIcon from '~/assets/images/icons/cog.png'
+import pearlIcon from '~/assets/images/icons/pearl.gif'
+
+const quasar = useQuasar()
+
+function optionsMenu() {
+  quasar
+    .dialog({
+      component: Dialog,
+      componentProps: {
+        icon: pearlIcon,
+        alt: 'Pearl',
+      },
+    })
+    .onOk(() => {
+      console.log('OK')
+    })
+    .onCancel(() => {
+      console.log('Cancel')
+    })
+    .onDismiss(() => {
+      console.log('OK or Cancel (Dialog Dismissed)')
+    })
+}
+</script>
+
+<template>
+  <div class="options-layout pass-through">
+    <div class="options clickable" @click="optionsMenu()">
+      <img
+        class="logo user-select-none"
+        draggable="false"
+        :src="cogIcon"
+        alt="Options"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.options {
+  display: flex;
+  flex-direction: row;
+
+  justify-content: center;
+  align-items: center;
+
+  padding: 10px;
+
+  &-layout {
+    position: fixed;
+
+    top: 0;
+    right: 0;
+  }
+}
+
+.logo {
+  width: 16px;
+  height: 16px;
+}
+</style>

components/blocks/Route.vue

@@ -33,7 +33,7 @@ const props = defineProps({
       :src="props.icon"
       :alt="props.alt"
     />
-    <span class="display-xs-none">
+    <span class="display-sm">
       <strong>
         {{ props.name }}
       </strong>
@@ -48,8 +48,8 @@ const props = defineProps({
   }
 
   &-image {
-    width: 1.5em;
-    height: 1.5em;
+    width: 32px;
+    height: 32px;
   }
 }
 </style>

components/blocks/SwipeControls.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '~/stores/pages'
+
+const pageStore = usePageStore()
+const { pages } = storeToRefs(pageStore)
+
+const route = useRoute()
+const state = computed(() => {
+  const i = pages.value.indexOf(
+    pages.value.find((page) => page.path === route.fullPath)!,
+  )
+
+  return {
+    current: route.fullPath,
+    index: i,
+    next: toRaw(pages.value)[(i + 1) % pages.value.length].path,
+    prev: toRaw(pages.value)[i - 1 < 0 ? pages.value.length - (i + 1) : i - 1]
+      .path,
+  }
+})
+</script>
+
+<template>
+  <div class="control-layout pass-through">
+    <NuxtLink class="control-icon no-decoration" :to="state.prev">
+      <FontAwesomeIcon icon="fa-solid fa-angle-left" fixed-width />
+    </NuxtLink>
+
+    <NuxtLink class="control-icon no-decoration" :to="state.next">
+      <FontAwesomeIcon icon="fa-solid fa-angle-right" fixed-width />
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.control {
+  &-layout {
+    display: flex;
+    flex-direction: row;
+
+    justify-content: space-between;
+    align-items: center;
+
+    position: fixed;
+
+    width: 100%;
+    height: 100%;
+  }
+
+  &-icon {
+    opacity: 0.25;
+    transition: 0.15s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+</style>

components/ui/Dialog.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar'
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent()
+
+defineEmits({
+  ...useDialogPluginComponent.emitsObject,
+})
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: 'Icon',
+  },
+})
+
+const theme = ref(false)
+const animation = ref(true)
+</script>
+
+<template>
+  <QDialog ref="dialogRef" @hide="onDialogHide">
+    <QCard class="dialog">
+      <div class="overlay background"></div>
+      <div class="overlay content">
+        <img
+          class="icon-badge user-select-none"
+          draggable="false"
+          :src="props.icon"
+          :alt="props.alt"
+        />
+        <QCardSection>
+          <h3 class="alex text-align-center">Site options</h3>
+          <div class="row">
+            <div class="col-12 col-sm-6">
+              <p>
+                <strong>Theme</strong><br />
+                Available in all flavors, vanilla and chocolate.
+              </p>
+              <QToggle
+                v-model="theme"
+                class="px-5"
+                color="black"
+                dense
+                size="xl"
+                :unchecked-icon="mdiWhiteBalanceSunny"
+                :checked-icon="mdiWeatherNight"
+                icon-color="primary"
+                @change="theme = !theme"
+              />
+              <QCheckbox v-model="theme" />
+            </div>
+            <div class="col-12 col-sm-6">
+              <p>
+                <strong>Animation</strong><br />
+                Some computers may have issues rendering that gorgeous
+                background animation. Enabling it substantially increases power
+                consumption.
+              </p>
+              <QToggle
+                v-model="animation"
+                color="purple"
+                dense
+                size="xl"
+                :unchecked-icon="mdiStop"
+                :checked-icon="mdiPlay"
+                @change="theme = !theme"
+              />
+            </div>
+          </div>
+          Report a bug
+          <QCardActions>
+            <QBtn label="OK" @click="onDialogOK" />
+          </QCardActions>
+        </QCardSection>
+      </div>
+    </QCard>
+  </QDialog>
+</template>

layouts/Card.vue

@@ -10,7 +10,6 @@ const card = ref<HTMLElement | null>(null)
 
 const pageStore = usePageStore()
 const { pages } = storeToRefs(pageStore)
-
 const swipe = useSwipe(card, {
   passive: true,
   onSwipeEnd: (_touch: TouchEvent, _direction: UseSwipeDirection) => {
@@ -42,8 +41,9 @@ const swipe = useSwipe(card, {
 <template>
   <main
     ref="card"
-    class="dimensions background rounded-1 overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
+    class="dimensions background rounded-1-sm overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
   >
+    <Options />
     <Navigation />
     <slot name="header" />
     <NuxtPage

nuxt.config.ts

@@ -1,5 +1,4 @@
 import packageJSON from './package.json'
-
 const websiteName = "Enderman's Website"
 const websiteURL = 'https://enderman.ch'
 
@@ -59,6 +58,7 @@ export default defineNuxtConfig({
     'nuxt-simple-robots',
     'nuxt-link-checker',
     'nuxt-og-image',
+    '@nuxtjs/strapi',
   ],
   nitro: {
     prerender: {
@@ -70,6 +70,26 @@ export default defineNuxtConfig({
   },
   quasar: {
     lang: 'en-US',
+    plugins: ['Dark', 'Dialog'],
+    config: {
+      brand: {
+        primary: '#271249',
+        secondary: '#00A2ED',
+        accent: '#9C27B0',
+
+        dark: '#1D1D1D',
+        'dark-page': '#121212',
+
+        positive: '#21BA45',
+        negative: '#C10015',
+        info: '#31CCEC',
+        warning: '#F2C037',
+      },
+    },
+    extras: {
+      font: null,
+      svgIcons: ['mdi-v7'],
+    },
   },
   googleFonts: {
     download: true,

package.json

@@ -14,51 +14,53 @@
     "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.9.0",
+    "@nuxt/content": "^2.11.0",
     "@nuxt/devtools": "latest",
-    "@nuxt/types": "^2.17.2",
+    "@nuxt/types": "^2.17.3",
     "@nuxtjs/color-mode": "^3.3.2",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/eslint-module": "^4.1.0",
-    "@nuxtjs/google-fonts": "^3.1.0",
+    "@nuxtjs/google-fonts": "^3.1.3",
+    "@nuxtjs/strapi": "^1.11.0",
     "@nuxtjs/stylelint-module": "^5.1.0",
     "@pinia/nuxt": "^0.5.1",
-    "@quasar/extras": "^1.16.8",
-    "@typescript-eslint/parser": "^6.10.0",
-    "caniuse-lite": "^1.0.30001564",
+    "@typescript-eslint/parser": "^6.19.1",
+    "animate.css": "latest",
+    "bootstrap": "^5.3.2",
+    "caniuse-lite": "^1.0.30001579",
     "csso": "^5.0.5",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "nuxt": "^3.8.1",
-    "nuxt-link-checker": "^2.1.10",
+    "eslint-plugin-prettier": "^5.1.3",
+    "nuxt": "^3.9.3",
+    "nuxt-link-checker": "^2.1.11",
     "nuxt-og-image": "^2.2.4",
-    "nuxt-quasar-ui": "^2.0.6",
-    "nuxt-simple-robots": "^3.1.9",
-    "nuxt-simple-sitemap": "^4.1.6",
+    "nuxt-quasar-ui": "^2.0.7",
+    "nuxt-simple-robots": "^4.0.0-rc.13",
+    "nuxt-simple-sitemap": "^4.4.1",
+    "nuxt-site-config": "^2.2.8",
     "pinia": "^2.1.7",
-    "prettier": "^3.1.0",
-    "quasar": "^2.14.0",
-    "sass": "^1.69.5",
+    "prettier": "^3.2.4",
+    "quasar": "^2.14.2",
+    "sass": "^1.70.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^11.1.0",
-    "typescript": "^5.3.2",
-    "vite-plugin-require": "^0.0.3",
-    "vue": "^3.3.8",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "typescript": "^5.3.3",
+    "vite-plugin-require": "^1.1.14",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^1.8.27"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.2",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
-    "animate.css": "^4.1.1",
-    "bootstrap": "^5.3.2"
+    "@quasar/extras": "^1.16.9"
   },
   "version": "0.1.3"
 }

pages/about.vue

@@ -37,8 +37,6 @@ useHead({
     },
   ],
 })
-
-defineRobotMeta()
 </script>
 
 <template>

pages/index.vue

@@ -37,8 +37,6 @@ useHead({
     },
   ],
 })
-
-defineRobotMeta()
 </script>
 
 <template>

pages/projects.vue

@@ -64,8 +64,6 @@ useHead({
     },
   ],
 })
-
-defineRobotMeta()
 </script>
 
 <template>

pages/social.vue

@@ -84,8 +84,6 @@ useHead({
     },
   ],
 })
-
-defineRobotMeta()
 </script>
 
 <template>
@@ -93,6 +91,7 @@ defineRobotMeta()
     <h3 class="alex">Online presence</h3>
     <hr />
     <p>
+      <FontAwesomeIcon icon="fa-solid fa-" fixed-width />
       <strong>🚧 This page is currently under construction.</strong> Expect a
       lot more content to be added as time passes.
       <em>Please report all bugs you encounter via the link in the footer</em>,

plugins/fontawesome.client.ts

@@ -1,10 +1,11 @@
 import { library, config } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons'
+import { fas } from '@fortawesome/free-solid-svg-icons'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 // Add icon packs.
-library.add(fab)
+library.add(fab, fas)
 
 // Let Nuxt manage CSS.
 config.autoAddCss = false

plugins/quasar.client.ts

@@ -7,4 +7,6 @@ export default defineNuxtPlugin(() => {
     lg: 1281,
     xl: 1921,
   })
+
+  Screen.setDebounce(0)
 })

stores/pages.ts

@@ -1,5 +1,10 @@
 import { defineStore } from 'pinia'
 
+import aboutIcon from '~/assets/images/icons/info.png'
+import projectIcon from '~/assets/images/icons/defrag.png'
+import socialIcon from '~/assets/images/icons/user.png'
+import blogIcon from '~/assets/images/icons/book.png'
+
 export const usePageStore = defineStore('page', () => {
   const title: string = 'Enderman'
   const description: string = 'official website'
@@ -14,14 +19,34 @@ export const usePageStore = defineStore('page', () => {
     {
       name: 'About',
       path: '/about',
+      icon: {
+        src: aboutIcon,
+        alt: 'Information',
+      },
     },
     {
       name: 'Projects',
       path: '/projects',
+      icon: {
+        src: projectIcon,
+        alt: 'Blocks',
+      },
     },
     {
       name: 'Socials',
       path: '/social',
+      icon: {
+        src: socialIcon,
+        alt: 'Users',
+      },
+    },
+    {
+      name: 'Blog',
+      path: '/blog',
+      icon: {
+        src: blogIcon,
+        alt: 'Book',
+      },
     },
   ])