Version 0.2.1

.stylelintcache

@@ -1 +1 @@
-[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\vuetify.scss":"16","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\[...slug].vue":"17","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\index.vue":"18","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\[slug].vue":"19","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\Card.vue":"20","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\OgImage.vue":"21","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\NotFound.vue":"22"},{"size":165,"mtime":1700688268778,"hashOfConfig":"23"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"23"},{"size":804,"mtime":1700688952880,"hashOfConfig":"23"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"23"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"23"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"23"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"23"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"23"},{"size":3065,"mtime":1708262194629,"hashOfConfig":"24"},{"size":1132,"mtime":1708254584095,"hashOfConfig":"24"},{"size":1269,"mtime":1708255068679,"hashOfConfig":"24"},{"size":1147,"mtime":1708248797872,"hashOfConfig":"24"},{"size":979,"mtime":1706003786966,"hashOfConfig":"24"},{"size":16968,"mtime":1708180277353,"hashOfConfig":"24"},{"size":935,"mtime":1706445231843,"hashOfConfig":"24"},{"size":120,"mtime":1706789613657,"hashOfConfig":"25"},{"size":2084,"mtime":1708424343371,"hashOfConfig":"24"},{"size":2560,"mtime":1708202402381,"hashOfConfig":"24"},{"size":983,"mtime":1708206997656,"hashOfConfig":"24"},{"size":1912,"mtime":1708290866348,"hashOfConfig":"24"},{"size":976,"mtime":1708431988520,"hashOfConfig":"24"},{"size":1645,"mtime":1708450985689,"hashOfConfig":"24"},"5tgxr3","1nljphs","1lk8nat"]
+[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\vuetify.scss":"16","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\[...slug].vue":"17","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\index.vue":"18","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\[slug].vue":"19","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\Card.vue":"20","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\OgImage.vue":"21","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\NotFound.vue":"22"},{"size":165,"mtime":1700688268778,"hashOfConfig":"23"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"23"},{"size":804,"mtime":1700688952880,"hashOfConfig":"23"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"23"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"23"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"23"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"23"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"23"},{"size":3855,"mtime":1708455917401,"hashOfConfig":"24"},{"size":1132,"mtime":1708254584095,"hashOfConfig":"24"},{"size":1269,"mtime":1708255068679,"hashOfConfig":"24"},{"size":1147,"mtime":1708248797872,"hashOfConfig":"24"},{"size":979,"mtime":1706003786966,"hashOfConfig":"24"},{"size":17150,"mtime":1708455647910,"hashOfConfig":"24"},{"size":935,"mtime":1706445231843,"hashOfConfig":"24"},{"size":120,"mtime":1706789613657,"hashOfConfig":"25"},{"size":2084,"mtime":1708424343371,"hashOfConfig":"24"},{"size":2560,"mtime":1708202402381,"hashOfConfig":"24"},{"size":983,"mtime":1708206997656,"hashOfConfig":"24"},{"size":1912,"mtime":1708290866348,"hashOfConfig":"24"},{"size":976,"mtime":1708431988520,"hashOfConfig":"24"},{"size":1645,"mtime":1708450985689,"hashOfConfig":"24"},"5tgxr3","1nljphs","1lk8nat"]

components/animations/Portal.vue

@@ -7,6 +7,8 @@ const fqdn = config.url.split('//')[1]
 
 const resources: string[] = [sky, particles]
 
+const pages = storeToRefs(usePageStore())
+
 const props = defineProps({
   layout: {
     default: '#ender-app',
@@ -65,7 +67,7 @@ class Canvas {
   compatible(
     obj: HTMLCanvasElement | HTMLElement | Element,
   ): obj is HTMLCanvasElement {
-    return obj.tagName === 'CANVAS'
+    return obj.tagName.toLowerCase() === 'canvas'
   }
 
   query(): HTMLCanvasElement {
@@ -252,7 +254,7 @@ class Portal {
     this.animate = animate
     this.randomize = randomize
 
-    // Set default speed.
+    // Set the default speed.
     this.speed = speed
     this.initialSpeed = this.speed
     this.dv = 20
@@ -561,6 +563,9 @@ class Portal {
     // Run the scene.
     this.scene()
 
+    // TODO: Make it into a composable? The toggle will not work. Hardcoded.
+    if (!pages.animate.value) this.pause()
+
     // Request the next animation frame if animation is enabled.
     if (this.animate) requestAnimationFrame(this.render.bind(this))
   }

components/blocks/Options.vue

@@ -11,10 +11,12 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
 }%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! :)`
+
+const pages = storeToRefs(usePageStore())
 </script>
 
 <template>
-  <VDialog>
+  <VDialog width="auto">
     <template #activator="{ props }">
       <div v-bind="props" class="options clickable">
         <img
@@ -27,35 +29,55 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
     </template>
     <template #default="{ isActive }">
       <VCard>
-        <template #title>
-          <h3 class="alex text-align-center">Site options</h3>
-        </template>
-        <div class="overlay background"></div>
-        <VCardText class="overlay content">
         <img
           draggable="false"
           :src="pearlIcon"
           alt="Pearl"
           class="icon-badge user-select-none"
         />
+
+        <template #title>
+          <h3 class="alex text-align-center">Site options</h3>
+        </template>
+
+        <div class="overlay background"></div>
+        <template #text>
+          <p class="center mb-3">
+            This tab is experimental and isn't ready for production.
+            <em>I was too lazy to exclude it from the build.</em><br />
+            <strong>Features provided here may or may not work.</strong>
+          </p>
+
           <div>
-            <div class="row">
+            <VRow>
-              <div class="col-12 col-sm-6">
+              <VCol>
+                <strong>Theme</strong>
+                <p>Available in all flavors, vanilla and chocolate.</p>
+                <VBtn variant="flat" color="secondary" @click="theme.toggle()">
+                  Toggle theme
+                </VBtn>
+              </VCol>
+              <VCol>
+                <strong>Animation</strong>
                 <p>
-                  <strong>Theme</strong><br />
-                  Available in all flavors, vanilla and chocolate.
-                </p>
-              </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
+                  background animation. Disabling it substantially decreases
-                  power consumption.
+                  power consumption, but also makes the website less cool.
                 </p>
+                <VBtn
+                  variant="flat"
+                  color="primary"
+                  @click="pages.animate.value = !pages.animate.value"
+                >
+                  Stop animation
+                </VBtn>
+              </VCol>
+            </VRow>
           </div>
-            </div>
+          <span class="mt-3">
-          </div>
+            Since you're so curious and thus here, why not report a bug from the
+            production environment behind this tab?<br />
+            It will greatly help me improve the website!
             <EMail
               class="link-hi"
               :address="`contact@${fqdn}`"
@@ -65,10 +87,11 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
             >
               <strong>Report a bug</strong>
             </EMail>
-        </VCardText>
+          </span>
-        <VCardActions>
+        </template>
-          <VSpacer></VSpacer>
+
-          <VBtn color="danger" @click="theme.toggle()" />
+        <template #actions>
+          <VSpacer />
           <VBtn
             variant="outlined"
             prepend-icon="close"
@@ -76,7 +99,7 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
           >
             Close
           </VBtn>
-        </VCardActions>
+        </template>
       </VCard>
     </template>
   </VDialog>
@@ -96,10 +119,10 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
 .icon-badge {
   position: fixed;
 
-  top: -16px;
+  top: -48px;
-  left: -16px;
+  left: -32px;
 
-  transform: rotate(-30deg);
+  transform: rotate(-15deg);
 }
 
 .logo {

composables/useVThemeSSR.ts

@@ -1,6 +1,6 @@
 import { useDark, useToggle } from '@vueuse/core'
 
-export default function () {
+export default () => {
   const { $vuetify } = useNuxtApp()
   const config = useAppConfig()
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "enderapp",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "private": true,
   "type": "module",
   "scripts": {

stores/pages.ts

@@ -51,6 +51,7 @@ export const usePageStore = defineStore('page', () => {
   ])
 
   const reader = ref(false)
+  const animate = ref(true)
 
   function _autoFetchPages() {
     while (pages.value.length) pages.value.pop()
@@ -71,5 +72,6 @@ export const usePageStore = defineStore('page', () => {
     keywords,
     pages,
     reader,
+    animate,
   }
 })