From 7ad56aa98b08633813bcbc32c69e0c62848b5ff9 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Sat, 18 Dec 2021 19:45:13 +0100
Subject: [PATCH] Apply ESLint rules

---
 package.json                           |  2 +-
 src/App.vue                            | 35 ++++++++----------
 src/components/BlogPostPageContent.vue |  6 +--
 src/components/NotFoundPage.vue        |  2 +-
 src/components/SuspendingImage.vue     |  6 +--
 src/components/TopBarLayout.vue        |  6 ++-
 src/pages/[...all].vue                 |  4 +-
 src/pages/blog/[slug].vue              |  4 +-
 src/pages/contact.vue                  |  4 +-
 src/pages/index.vue                    |  2 +-
 src/pages/photography.vue              |  4 +-
 src/pages/projects.vue                 |  3 +-
 src/pages/terms.vue                    | 51 +++++++++++++++++++++-----
 vite.config.ts                         |  4 +-
 windi.config.ts                        |  4 +-
 15 files changed, 79 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index 706c2bd..1bcb117 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "dev": "vite --host",
     "build": "vite-ssg build",
     "start": "vite preview",
-    "lint": "eslint . --fix"
+    "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.0.1",
diff --git a/src/App.vue b/src/App.vue
index 0765381..4f3f5e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,7 +31,6 @@
     overflow-x: hidden;
     width: 100vw;
     min-height: 100vh;
-    font-size: 17px;
   }
 
   .centerLoadingText {
@@ -64,8 +63,8 @@
 <script lang="ts">
   import { computed, ref } from "vue"
   import { useIntervalFn, useWindowSize, whenever } from "@vueuse/core"
-  import { pageComponentLoading } from "./store"
   import { useRouter } from "vue-router"
+  import { pageComponentLoading } from "./store"
 
   export default {
     name: "App",
@@ -75,7 +74,7 @@
       const START_TRANSITION_DURATION = 200
       const START_TRANSITION_DELAY = 0
 
-      const loadingTexts = ref<Array<{ x: number, y: number }>>([])
+      const loadingTexts = ref<Array<{ x: number; y: number }>>([])
 
       const stopLoading = () => {
         isLoadingScreenActive.value = false
@@ -130,31 +129,29 @@
             return {
               "--tw-bg-opacity": 1,
               "--tw-backdrop-blur": "blur(20px)",
-              transitionDelay: `${START_TRANSITION_DELAY}ms`,
-              transition: `background ${START_TRANSITION_DURATION}ms ease, backdrop-filter 100ms linear`
-            }
-          } else {
-            return {
-              "--tw-bg-opacity": 0,
-              "--tw-backdrop-blur": 0,
-              transition: "background 200ms ease, backdrop-filter 200ms linear",
-              pointerEvents: "none"
+              "transitionDelay": `${START_TRANSITION_DELAY}ms`,
+              "transition": `background ${START_TRANSITION_DURATION}ms ease, backdrop-filter 100ms linear`
             }
           }
+          return {
+            "--tw-bg-opacity": 0,
+            "--tw-backdrop-blur": 0,
+            "transition": "background 200ms ease, backdrop-filter 200ms linear",
+            "pointerEvents": "none"
+          }
         }),
         loadingOverlayContentStyle: computed(() => {
           if (isLoadingScreenActive.value) {
             return {
               opacity: 1,
-              transition: `opacity 2s ease-out`,
+              transition: "opacity 2s ease-out",
               transitionDelay: "1s"
             }
-          } else {
-            return {
-              opacity: 0,
-              transition: `opacity 100ms ease-out`,
-              pointerEvents: "none"
-            }
+          }
+          return {
+            opacity: 0,
+            transition: "opacity 100ms ease-out",
+            pointerEvents: "none"
           }
         })
       }
diff --git a/src/components/BlogPostPageContent.vue b/src/components/BlogPostPageContent.vue
index feb9799..b3e3690 100644
--- a/src/components/BlogPostPageContent.vue
+++ b/src/components/BlogPostPageContent.vue
@@ -1,6 +1,6 @@
 <template>
   <NotFoundPage v-if="post === null" object-name="post" back-target="/blog"/>
-  <TopBarLayout title="Blog" back-target="/blog" v-else>
+  <TopBarLayout v-else title="Blog" back-target="/blog">
     <article>
       <h1 class="font-bold text-3xl sm:text-3xl sm:text-center font-special">
         {{ post.title }}
@@ -28,9 +28,9 @@
 </style>
 
 <script lang="ts">
-  import TopBarLayout from "./TopBarLayout.vue"
-  import { getPostBySlug } from "../posts"
   import { useRoute } from "vue-router"
+  import { getPostBySlug } from "../posts"
+  import TopBarLayout from "./TopBarLayout.vue"
   import Prose from "./Prose.vue"
   import XSpacer from "./XSpacer.vue"
   import NotFoundPage from "./NotFoundPage.vue"
diff --git a/src/components/NotFoundPage.vue b/src/components/NotFoundPage.vue
index fce7e03..0749dec 100644
--- a/src/components/NotFoundPage.vue
+++ b/src/components/NotFoundPage.vue
@@ -19,8 +19,8 @@
 </style>
 
 <script>
-  import ArrowLeftIcon from "~icons/ph/arrow-left"
   import XSpacer from "../components/XSpacer.vue"
+  import ArrowLeftIcon from "~icons/ph/arrow-left"
 
   export default {
     name: "NotFoundPage",
diff --git a/src/components/SuspendingImage.vue b/src/components/SuspendingImage.vue
index 9de6864..5055056 100644
--- a/src/components/SuspendingImage.vue
+++ b/src/components/SuspendingImage.vue
@@ -9,11 +9,12 @@
 <script>
   import { $fetch } from "ohmyfetch"
 
+  // eslint-disable-next-line no-promise-executor-return
   const waitForAnimationFrame = () => new Promise(resolve => requestAnimationFrame(resolve))
 
   const asyncSetup = async src => {
     const blob = await $fetch(src)
-    await waitForAnimationFrame()
+    await waitForAnimationFrame() // makes sure the browser is idle
     return {
       objectUrl: URL.createObjectURL(blob)
     }
@@ -36,9 +37,8 @@
         return {
           objectUrl: props.src
         }
-      } else {
-        return asyncSetup(props.src)
       }
+      return asyncSetup(props.src)
     }
   }
 </script>
diff --git a/src/components/TopBarLayout.vue b/src/components/TopBarLayout.vue
index 8c79a30..0b6504f 100644
--- a/src/components/TopBarLayout.vue
+++ b/src/components/TopBarLayout.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="h-100vh flex flex-col justify-between">
     <div class="w-full max-w-1000px mx-auto">
-      <div class="bg-background bg-opacity-70 backdrop-filter backdrop-blur-sm backdrop-saturate-200 px-6 py-4 sm:py-8 text-light-900 sticky top-0 z-10 flex items-center justify-between">
+      <div class="bg-background bg-opacity-70 backdrop-filter backdrop-blur-sm backdrop-saturate-200 px-6 py-4 sm:py-8 text-light-900 sticky top-0 z-10
+                  flex items-center justify-between">
         <div class="w-0">
           <router-link :to="backTarget" class="w-8 flex items-center group relative">
             <ArrowLeftIcon class="text-2xl"/>
@@ -35,12 +36,13 @@
 </style>
 
 <script>
-  import ArrowLeftIcon from "~icons/ph/arrow-left"
   import { useHead } from "@vueuse/head"
+  import ArrowLeftIcon from "~icons/ph/arrow-left"
 
   export default {
     name: "TopBarLayout",
     components: { ArrowLeftIcon },
+    inheritAttrs: false,
     props: {
       backTarget: {
         type: String,
diff --git a/src/pages/[...all].vue b/src/pages/[...all].vue
index df1630c..1933ba1 100644
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
@@ -3,12 +3,10 @@
 </template>
 
 <script>
-  import ArrowLeftIcon from "~icons/ph/arrow-left"
-  import XSpacer from "../components/XSpacer.vue"
   import NotFoundPage from "../components/NotFoundPage.vue"
 
   export default {
     name: "FallbackPage",
-    components: { NotFoundPage, XSpacer, ArrowLeftIcon }
+    components: { NotFoundPage }
   }
 </script>
diff --git a/src/pages/blog/[slug].vue b/src/pages/blog/[slug].vue
index a33ae00..84af624 100644
--- a/src/pages/blog/[slug].vue
+++ b/src/pages/blog/[slug].vue
@@ -1,6 +1,6 @@
 <template>
   <NotFoundPage v-if="post === null" object-name="post" back-target="/blog"/>
-  <TopBarLayout title="Blog" back-target="/blog" v-else>
+  <TopBarLayout v-else title="Blog" back-target="/blog">
     <article>
       <h1 class="font-bold text-3xl sm:text-3xl sm:text-center font-special">
         {{ post.title }}
@@ -28,9 +28,9 @@
 </style>
 
 <script lang="ts">
+  import { useRoute } from "vue-router"
   import TopBarLayout from "../../components/TopBarLayout.vue"
   import { getPostBySlug } from "../../posts"
-  import { useRoute } from "vue-router"
   import Prose from "../../components/Prose.vue"
   import XSpacer from "../../components/XSpacer.vue"
   import NotFoundPage from "../../components/NotFoundPage.vue"
diff --git a/src/pages/contact.vue b/src/pages/contact.vue
index a6554ad..3f53695 100644
--- a/src/pages/contact.vue
+++ b/src/pages/contact.vue
@@ -30,14 +30,14 @@
 </style>
 
 <script>
+  import { computed } from "vue"
+  import { useRoute } from "vue-router"
   import TopBarLayout from "../components/TopBarLayout.vue"
   import LinkCardList from "../components/LinkCardList.vue"
   import BlurredBlobCanvas from "../components/BlurredBlobCanvas.vue"
   import MatrixIcon from "~icons/simple-icons/matrix"
   import TwitterIcon from "~icons/simple-icons/twitter"
   import EmailIcon from "~icons/carbon/email"
-  import { computed } from "vue"
-  import { useRoute } from "vue-router"
 
   export default {
     name: "ContactPage",
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 425bb5a..79eafa5 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -93,10 +93,10 @@
 </style>
 
 <script>
+  import { useHead } from "@vueuse/head"
   import BlurredBlobCanvas from "../components/BlurredBlobCanvas.vue"
   import XSpacer from "../components/XSpacer.vue"
   import LinkCardList from "../components/LinkCardList.vue"
-  import { useHead } from "@vueuse/head"
 
   const NAVIGATION_LINKS = [
     {
diff --git a/src/pages/photography.vue b/src/pages/photography.vue
index fffc067..82cdafc 100644
--- a/src/pages/photography.vue
+++ b/src/pages/photography.vue
@@ -34,14 +34,12 @@
 <script lang="ts">
   import TopBarLayout from "../components/TopBarLayout.vue"
   import { photos } from "../photos"
-  import XSpacer from "../components/XSpacer.vue"
   import SuspendingImage from "../components/SuspendingImage.vue"
 
   export default {
     name: "PhotographyPage",
-    components: { SuspendingImage, XSpacer, TopBarLayout },
+    components: { SuspendingImage, TopBarLayout },
     setup() {
-
       return {
         photos
       }
diff --git a/src/pages/projects.vue b/src/pages/projects.vue
index 9b34bf3..9c0a376 100644
--- a/src/pages/projects.vue
+++ b/src/pages/projects.vue
@@ -12,12 +12,11 @@
 
 <script>
   import TopBarLayout from "../components/TopBarLayout.vue"
-  import ArrowRightIcon from "~icons/ph/arrow-right"
   import LinkCardList from "../components/LinkCardList.vue"
 
   export default {
     name: "ProjectsPage",
-    components: { LinkCardList, TopBarLayout, ArrowRightIcon },
+    components: { LinkCardList, TopBarLayout },
     setup() {
       const projects = [
         {
diff --git a/src/pages/terms.vue b/src/pages/terms.vue
index 3b01876..eef3126 100644
--- a/src/pages/terms.vue
+++ b/src/pages/terms.vue
@@ -8,7 +8,10 @@
         <h2>1. Generelles</h2>
         <ol>
           <li>Die nachfolgenden Bestimmungen gelten für alle zwischen Moritz Ruth und dem Auftraggeber geschlossenen Verträge.</li>
-          <li>Abweichende, widersprüchliche oder ergänzende Allgemeine Geschäftsbedingungen des Auftraggebers gelten nur nach ausdrücklicher, schriftlicher Zustimmung von Moritz Ruth.</li>
+          <li>
+            Abweichende, widersprüchliche oder ergänzende Allgemeine Geschäftsbedingungen des Auftraggebers gelten nur nach ausdrücklicher,
+            schriftlicher Zustimmung von Moritz Ruth.
+          </li>
           <li>Änderungen und Ergänzungen des Vertrags bedürfen der Schriftform, um wirksam zu sein.</li>
         </ol>
       </section>
@@ -18,8 +21,14 @@
           <li>Moritz Ruth führt den Auftrag in eigener Verantwortung durch und hat Gestaltungsfreiheit im Rahmen dessen.</li>
           <li>Handelt es sich um einen Werkvertrag, sind in der Konzeptions- und Entwurfsphase zwei Korrekturschleifen zulässig.</li>
           <li>Die Mehrkosten durch eventuelle, von der Leistungsbeschreibung im Angebot abweichende Änderungswünsche hat der Auftraggeber zu tragen.</li>
-          <li>Wurde dem Auftraggeber die Fertigstellung einer Werkleistung in Textform mitgeteilt, hat er 14 Tage Zeit, die Abnahme zu verweigern. Tut er dies nicht, gilt die Leistung als abgenommen.</li>
-          <li>Moritz Ruth ist nicht verpflichtet, Quellcode und offene Dateien herauszugeben. Ist dies dennoch gewünscht, so muss es schriftlich vereinbart und gesondert vergütet werden.</li>
+          <li>
+            Wurde dem Auftraggeber die Fertigstellung einer Werkleistung in Textform mitgeteilt, hat er 14 Tage Zeit, die Abnahme zu verweigern. Tut er dies nicht,
+            gilt die Leistung als abgenommen.
+          </li>
+          <li>
+            Moritz Ruth ist nicht verpflichtet, Quellcode und offene Dateien herauszugeben. Ist dies dennoch gewünscht,
+            so muss es schriftlich vereinbart und gesondert vergütet werden.
+          </li>
           <li>Moritz Ruth bestimmt den Tätigkeitsort nach freiem Ermessen.</li>
           <li>Moritz Ruth steht es frei, auch für andere Auftraggeber tätig zu werden.</li>
           <li>Moritz Ruth unterliegt keinem Weisungs- oder Direktionsrecht des Auftraggebers.</li>
@@ -32,9 +41,14 @@
         <h2>3. Pflichten des Auftraggebers</h2>
         <ol>
           <li>Der Auftraggeber ist verpflichtet, Moritz Ruth sämtliche zur Erfüllung des Vertrags erforderlichen Daten und Dateien zur Verfügung zu stellen.</li>
-          <li>Der Auftraggeber ist zum Ersatz von Schäden, die Moritz Ruth durch Schadprogramme in den vom Auftraggeber bereitgestellten Dateien und Daten entstehen, verpflichtet.</li>
+          <li>
+            Der Auftraggeber ist zum Ersatz von Schäden, die Moritz Ruth durch Schadprogramme in den vom Auftraggeber bereitgestellten Dateien und Daten entstehen, verpflichtet.
+          </li>
           <li>Das Anfertigen von Sicherungskopien liegt allein in der Verantwortung des Auftraggebers.</li>
-          <li>Ist zur Erfüllung des Auftrags die Mitwirkung des Auftraggebers erforderlich, muss dieser seiner Mitwirkungspflicht innerhalb von 14 Tagen nach Aufforderung durch Moritz Ruth nachkommen. Andernfalls kann Moritz Ruth den Vertrag kündigen. Sein Entschädigungsanspruch nach § 642 BGB bleibt hiervon unberührt.</li>
+          <li>
+            Ist zur Erfüllung des Auftrags die Mitwirkung des Auftraggebers erforderlich, muss dieser seiner Mitwirkungspflicht innerhalb von 14 Tagen nach
+            Aufforderung durch Moritz Ruth nachkommen. Andernfalls kann Moritz Ruth den Vertrag kündigen. Sein Entschädigungsanspruch nach § 642 BGB bleibt hiervon unberührt.
+          </li>
         </ol>
       </section>
       <section>
@@ -47,22 +61,39 @@
       <section>
         <h2>Nutzungsrechte</h2>
         <ol>
-          <li>Moritz Ruth ist es erlaubt, die im Rahmen des Auftrags entstandenen Ergebnisse zur Selbstdarstellung zu verwenden (z. B. auf einer Website). Zudem darf er den Auftraggeber als Referenz nennen und in diesem Zuge auch dessen Logo verwenden.</li>
+          <li>
+            Moritz Ruth ist es erlaubt, die im Rahmen des Auftrags entstandenen Ergebnisse zur Selbstdarstellung zu verwenden (z. B. auf einer Website).
+            Zudem darf er den Auftraggeber als Referenz nennen und in diesem Zuge auch dessen Logo verwenden.
+          </li>
           <li>Moritz Ruth überträgt nur die Nutzungsrechte, die zur Erfüllung des Vertrages erforderlich sind.</li>
         </ol>
       </section>
       <section>
         <h2>Haftung</h2>
         <ol>
-          <li>Moritz Ruth haftet dem Auftraggeber gegenüber für die von ihm vorsätzlich oder grob fahrlässig verursachten Schäden sowie bei der Verletzung von Leben, Körper oder Gesundheit.</li>
-          <li>Moritz Ruth haftet nicht bei leichter Fahrlässigkeit, außer es handelt sich um die Verletzung wesentlicher Vertragspflichten nach den gesetzlichen Bestimmungen, wobei wesentliche Vertragspflichten solche sind, deren Erfüllung die ordnungsgemäße Durchführung des Vertrages überhaupt erst ermöglichen und auf deren Einhaltung der Auftraggeber regelmäßig vertrauen darf.</li>
+          <li>
+            Moritz Ruth haftet dem Auftraggeber gegenüber für die von ihm vorsätzlich oder grob fahrlässig verursachten Schäden sowie bei der Verletzung von Leben,
+            Körper oder Gesundheit.
+          </li>
+          <li>
+            Moritz Ruth haftet nicht bei leichter Fahrlässigkeit, außer es handelt sich um die Verletzung wesentlicher Vertragspflichten nach den gesetzlichen Bestimmungen,
+            wobei wesentliche Vertragspflichten solche sind, deren Erfüllung die ordnungsgemäße Durchführung des Vertrages überhaupt erst ermöglichen und auf deren Einhaltung der
+            Auftraggeber regelmäßig vertrauen darf.
+          </li>
         </ol>
       </section>
       <section>
         <h2>Schlussbestimmungen</h2>
         <ol>
-          <li>Erfüllungsort und Gerichtsstand für alle Streitigkeiten aus und im Zusammenhang mit dieser Vereinbarung ist der Sitz von Moritz Ruth, sofern der Auftraggeber Kaufmann, juristische Person des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen ist.</li>
-          <li>Sollte eine Bestimmung dieser Vereinbarung ganz oder teilweise unwirksam sein oder werden oder sollte die Vereinbarung unvollständig sein, so wird die Vereinbarung im Übrigen Inhalt nicht berührt. Die Vertragspartner verpflichten sich, die unwirksame Bestimmung durch eine solche Bestimmung zu ersetzen, welche dem Sinn und Zweck der unwirksamen Bestimmung in rechtswirksamer Weise wirtschaftlich am nächsten kommt.</li>
+          <li>
+            Erfüllungsort und Gerichtsstand für alle Streitigkeiten aus und im Zusammenhang mit dieser Vereinbarung ist der Sitz von Moritz Ruth, sofern der Auftraggeber Kaufmann,
+            juristische Person des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen ist.
+          </li>
+          <li>
+            Sollte eine Bestimmung dieser Vereinbarung ganz oder teilweise unwirksam sein oder werden oder sollte die Vereinbarung unvollständig sein,
+            so wird die Vereinbarung im Übrigen Inhalt nicht berührt. Die Vertragspartner verpflichten sich, die unwirksame Bestimmung durch eine solche Bestimmung zu ersetzen,
+            welche dem Sinn und Zweck der unwirksamen Bestimmung in rechtswirksamer Weise wirtschaftlich am nächsten kommt.
+          </li>
           <li>Es gilt deutsches Recht unter Ausschluss des UN-Kaufrechts.</li>
         </ol>
       </section>
diff --git a/vite.config.ts b/vite.config.ts
index 6a250b3..5ac0705 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,9 +16,7 @@ export default defineConfig({
   ssgOptions: {
     formatting: "minify",
     includedRoutes(routes) {
-      return routes.filter(route => {
-        return /* Dynamic routes: */ !route.includes(":") && /* Blog post overview: */route !== "/blog"
-      })
+      return routes.filter(route => !route.includes(":") && route !== "/blog")
     }
   }
 })
diff --git a/windi.config.ts b/windi.config.ts
index cb2a0a3..46ebf6c 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -25,9 +25,7 @@ export default defineConfig({
   plugins: [
     scrollSnapPlugin,
     plugin(({ addVariant }) => {
-      addVariant("can-hover", ({ atRule }) => {
-        return atRule("@media(hover: hover)")
-      })
+      addVariant("can-hover", ({ atRule }) => atRule("@media(hover: hover)"))
     })
   ]
 })