Apply ESLint rules

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",

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,32 +129,30 @@
             return {
               "--tw-bg-opacity": 1,
               "--tw-backdrop-blur": "blur(20px)",
-              transitionDelay: `${START_TRANSITION_DELAY}ms`,
+              "transitionDelay": `${START_TRANSITION_DELAY}ms`,
-              transition: `background ${START_TRANSITION_DURATION}ms ease, backdrop-filter 100ms linear`
+              "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",
+            "transition": "background 200ms ease, backdrop-filter 200ms linear",
-              pointerEvents: "none"
+            "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`,
+            transition: "opacity 100ms ease-out",
             pointerEvents: "none"
           }
-          }
         })
       }
     }

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"

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",

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)
     }
   }
-  }
 </script>

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,

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>

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"

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",

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 = [
     {

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
       }

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 = [
         {

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>
-          <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>
+            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>
-          <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>
+            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>
-          <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>
+            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>

vite.config.ts

@@ -16,9 +16,7 @@ export default defineConfig({
   ssgOptions: {
     formatting: "minify",
     includedRoutes(routes) {
-      return routes.filter(route => {
+      return routes.filter(route => !route.includes(":") && route !== "/blog")
-        return /* Dynamic routes: */ !route.includes(":") && /* Blog post overview: */route !== "/blog"
-      })
     }
   }
 })

windi.config.ts

@@ -25,9 +25,7 @@ export default defineConfig({
   plugins: [
     scrollSnapPlugin,
     plugin(({ addVariant }) => {
-      addVariant("can-hover", ({ atRule }) => {
+      addVariant("can-hover", ({ atRule }) => atRule("@media(hover: hover)"))
-        return atRule("@media(hover: hover)")
-      })
     })
   ]
 })