From 2d7598e0816208a5f65a882d4149d1bba4cbfc1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yae=CC=88l=20GUILLOUX?= <yael.guilloux@gmail.com>
Date: Wed, 12 May 2021 18:04:19 +0200
Subject: [PATCH] :rotating_light: (lint) update project files w/ new lint
 rules

---
 docs/components/AppFooter.vue                 | 39 +++++++++++-
 docs/components/FooterBody.vue                | 26 +++++++-
 docs/components/Showcases.vue                 | 16 ++++-
 playground/components/Page.vue                | 40 +++++++++++-
 src/admin/app/components/FilesTree.vue        | 16 ++++-
 src/admin/runtime/DocusUI.vue                 | 62 +++++++++++++++++--
 src/core/runtime/api/QueryBuilder.ts          |  2 +-
 src/defaultTheme/components/atoms/Badge.vue   | 14 ++++-
 .../components/atoms/CardGrid.vue             | 11 +++-
 .../components/atoms/CodeGroup.vue            | 12 +++-
 .../components/atoms/CodeSandbox.vue          | 15 ++++-
 .../components/molecules/AsideNavigation.vue  | 38 +++++++++++-
 .../molecules/AsideNavigationItem.vue         | 14 ++++-
 .../components/molecules/NavigationButton.vue | 14 ++++-
 .../components/organisms/AppAside.vue         | 15 ++++-
 .../components/organisms/AppHeader.vue        | 13 +++-
 .../components/organisms/BlockFeatures.vue    | 31 +++++++++-
 .../components/organisms/BlockHero.vue        | 36 ++++++++++-
 .../components/organisms/BlogpostToc.vue      | 38 +++++++++---
 .../components/organisms/PageContent.vue      | 17 ++++-
 .../components/organisms/PagePrevNext.vue     | 45 +++++++++++++-
 .../components/organisms/PageToc.vue          | 52 +++++++++++++---
 .../components/templates/Blog.vue             | 31 ++++++++--
 .../components/templates/BlogPost.vue         | 16 ++++-
 24 files changed, 556 insertions(+), 57 deletions(-)

diff --git a/docs/components/AppFooter.vue b/docs/components/AppFooter.vue
index df940c480..a658f1481 100644
--- a/docs/components/AppFooter.vue
+++ b/docs/components/AppFooter.vue
@@ -6,7 +6,16 @@
           href="https://nuxtlabs.com"
           rel="noopener"
           target="_blank"
-          class="flex items-end text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 hover:text-gray-600 mb-3 sm:mb-0"
+          class="
+            flex
+            items-end
+            text-gray-900
+            dark:text-gray-300
+            dark:hover:text-gray-100
+            hover:text-gray-600
+            mb-3
+            sm:mb-0
+          "
         >
           <IconNuxtLabs class="mr-2" />
           <p class="font-semibold text-xs">Made by Nuxt Labs</p>
@@ -18,7 +27,19 @@
             aria-label="NuxtJS"
             href="https://nuxtjs.org"
             target="_blank"
-            class="text-sm flex items-center font-medium p-1 text-gray-500 transition-colors duration-200 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-400"
+            class="
+              text-sm
+              flex
+              items-center
+              font-medium
+              p-1
+              text-gray-500
+              transition-colors
+              duration-200
+              dark:text-gray-500
+              hover:text-gray-700
+              dark:hover:text-gray-400
+            "
           >
             <IconNuxt class="w-5 h-5" />
           </a>
@@ -27,7 +48,19 @@
             aria-label="Vue Telescope"
             href="https://vuetelescope.com"
             target="_blank"
-            class="text-sm flex items-center font-medium p-1 text-gray-500 transition-colors duration-200 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-400"
+            class="
+              text-sm
+              flex
+              items-center
+              font-medium
+              p-1
+              text-gray-500
+              transition-colors
+              duration-200
+              dark:text-gray-500
+              hover:text-gray-700
+              dark:hover:text-gray-400
+            "
           >
             <IconVueTelescope class="w-5 h-5" />
           </a>
diff --git a/docs/components/FooterBody.vue b/docs/components/FooterBody.vue
index b5e56944c..18f117302 100644
--- a/docs/components/FooterBody.vue
+++ b/docs/components/FooterBody.vue
@@ -12,14 +12,36 @@
       <a
         href="https://nuxtjs.org"
         target="_blank"
-        class="text-sm flex items-center font-medium p-1 text-gray-500 transition-colors duration-200 dark:text-gray-500 hover:text-hex-00DC82"
+        class="
+          text-sm
+          flex
+          items-center
+          font-medium
+          p-1
+          text-gray-500
+          transition-colors
+          duration-200
+          dark:text-gray-500
+          hover:text-hex-00DC82
+        "
       >
         <IconNuxt class="w-5 h-5" />
       </a>
       <a
         href="https://vuetelescope.com"
         target="_blank"
-        class="text-sm flex items-center font-medium p-1 text-gray-500 transition-colors duration-200 dark:text-gray-500 hover:text-hex-0BDCA0"
+        class="
+          text-sm
+          flex
+          items-center
+          font-medium
+          p-1
+          text-gray-500
+          transition-colors
+          duration-200
+          dark:text-gray-500
+          hover:text-hex-0BDCA0
+        "
       >
         <IconVueTelescope class="w-5 h-5" />
       </a>
diff --git a/docs/components/Showcases.vue b/docs/components/Showcases.vue
index 851fbf89b..f2e4e1b50 100644
--- a/docs/components/Showcases.vue
+++ b/docs/components/Showcases.vue
@@ -2,8 +2,20 @@
   <div class="grid lg:grid-cols-2 gap-4">
     <div v-for="(showcase, index) of showcases" :key="index" class="border dark:border-gray-800 rounded-md">
       <a :href="showcase" target="_blank" class="py-1 block">
-        <nuxt-img loading="lazy" :src="`${showcase}/preview.png`" class="light-img rounded-md" width="1280" height="640" />
-        <nuxt-img loading="lazy" :src="`${showcase}/preview-dark.png`" class="dark-img rounded-md" width="1280" height="640" />
+        <NuxtImg
+          loading="lazy"
+          :src="`${showcase}/preview.png`"
+          class="light-img rounded-md"
+          width="1280"
+          height="640"
+        />
+        <NuxtImg
+          loading="lazy"
+          :src="`${showcase}/preview-dark.png`"
+          class="dark-img rounded-md"
+          width="1280"
+          height="640"
+        />
       </a>
     </div>
   </div>
diff --git a/playground/components/Page.vue b/playground/components/Page.vue
index 83442a6ed..d7de4bf65 100644
--- a/playground/components/Page.vue
+++ b/playground/components/Page.vue
@@ -19,7 +19,22 @@
             <h1 class="flex-1 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">{{ page.title }}</h1>
             <span
               v-if="page.draft"
-              class="inline-block px-3 py-1 mr-2 text-base font-medium leading-5 tracking-tight text-yellow-500 bg-yellow-100 rounded-full items-flex dark:bg-yellow-800 dark:text-yellow-400"
+              class="
+                inline-block
+                px-3
+                py-1
+                mr-2
+                text-base
+                font-medium
+                leading-5
+                tracking-tight
+                text-yellow-500
+                bg-yellow-100
+                rounded-full
+                items-flex
+                dark:bg-yellow-800
+                dark:text-yellow-400
+              "
               >Draft</span
             >
             <DBadge v-if="page.badge" class="font-medium">{{ page.badge }}</DBadge>
@@ -30,12 +45,31 @@
         <!-- PageSummary -->
         <section class="pb-10">
           <ul
-            class="grid gap-4 font-semibold text-left text-gray-900 dark:text-gray-100 sm:grid-cols-2 xl:grid-cols-3 2xl:gap-8"
+            class="
+              grid
+              gap-4
+              font-semibold
+              text-left text-gray-900
+              dark:text-gray-100
+              sm:grid-cols-2
+              xl:grid-cols-3
+              2xl:gap-8
+            "
           >
             <li v-for="link of $docus.nav.value.en.links[2].children" :key="link.to" class="flex">
               <NuxtLink
                 :to="link.to"
-                class="relative w-full px-6 py-8 rounded shadow bg-gray-50 dark:bg-gray-800 dark:bg-gray-900 hover:shadow-lg"
+                class="
+                  relative
+                  w-full
+                  px-6
+                  py-8
+                  rounded
+                  shadow
+                  bg-gray-50
+                  dark:bg-gray-800 dark:bg-gray-900
+                  hover:shadow-lg
+                "
               >
                 <InjectComponent
                   v-if="link.icon"
diff --git a/src/admin/app/components/FilesTree.vue b/src/admin/app/components/FilesTree.vue
index 3f5001a72..8d7c7138b 100644
--- a/src/admin/app/components/FilesTree.vue
+++ b/src/admin/app/components/FilesTree.vue
@@ -7,7 +7,21 @@
       :class="{ 'bg-gray-200 text-gray-900': isCurrent(file) }"
     >
       <div
-        class="group flex cursor-pointer items-center px-1 py-1 text-sm leading-5 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50"
+        class="
+          group
+          flex
+          cursor-pointer
+          items-center
+          px-1
+          py-1
+          text-sm
+          leading-5
+          hover:text-gray-900
+          hover:bg-gray-50
+          focus:outline-none
+          focus:text-gray-900
+          focus:bg-gray-50
+        "
         @click="open(file)"
       >
         <FilesTreeIcon :file="file" />
diff --git a/src/admin/runtime/DocusUI.vue b/src/admin/runtime/DocusUI.vue
index 16b744f05..29f12249e 100644
--- a/src/admin/runtime/DocusUI.vue
+++ b/src/admin/runtime/DocusUI.vue
@@ -12,7 +12,19 @@
       <li class="flex items-center pb-1 font-medium">
         <button
           type="button"
-          class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 rounded-full cursor-pointer group focus:outline-none"
+          class="
+            relative
+            inline-flex
+            items-center
+            justify-center
+            flex-shrink-0
+            w-10
+            h-5
+            rounded-full
+            cursor-pointer
+            group
+            focus:outline-none
+          "
           aria-pressed="false"
           @click="$docus.ui.draft = !$docus.ui.draft"
         >
@@ -26,7 +38,22 @@
           <span
             aria-hidden="true"
             :class="drafts ? 'translate-x-5' : 'translate-x-0'"
-            class="absolute left-0 inline-block w-5 h-5 transition-transform duration-200 ease-in-out transform bg-white border border-gray-200 rounded-full shadow pointer-events-none"
+            class="
+              absolute
+              left-0
+              inline-block
+              w-5
+              h-5
+              transition-transform
+              duration-200
+              ease-in-out
+              transform
+              bg-white
+              border border-gray-200
+              rounded-full
+              shadow
+              pointer-events-none
+            "
           ></span>
         </button>
 
@@ -36,7 +63,19 @@
       <li class="flex items-center font-medium">
         <button
           type="button"
-          class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 rounded-full cursor-pointer group focus:outline-none"
+          class="
+            relative
+            inline-flex
+            items-center
+            justify-center
+            flex-shrink-0
+            w-10
+            h-5
+            rounded-full
+            cursor-pointer
+            group
+            focus:outline-none
+          "
           aria-pressed="false"
           @click="$docus.ui.slots = !$docus.ui.slots"
         >
@@ -50,7 +89,22 @@
           <span
             aria-hidden="true"
             :class="slots ? 'translate-x-5' : 'translate-x-0'"
-            class="absolute left-0 inline-block w-5 h-5 transition-transform duration-200 ease-in-out transform bg-white border border-gray-200 rounded-full shadow pointer-events-none"
+            class="
+              absolute
+              left-0
+              inline-block
+              w-5
+              h-5
+              transition-transform
+              duration-200
+              ease-in-out
+              transform
+              bg-white
+              border border-gray-200
+              rounded-full
+              shadow
+              pointer-events-none
+            "
           ></span>
         </button>
 
diff --git a/src/core/runtime/api/QueryBuilder.ts b/src/core/runtime/api/QueryBuilder.ts
index 30f3981e0..580b07efe 100644
--- a/src/core/runtime/api/QueryBuilder.ts
+++ b/src/core/runtime/api/QueryBuilder.ts
@@ -8,7 +8,7 @@ const omit = keys => obj =>
     .filter(key => !keys.includes(key))
     .reduce((newObj, key) => Object.assign(newObj, { [key]: obj[key] }), {})
 
-const apply = fn => data => (Array.isArray(data) ? data.map(item => fn(item)) : fn(data))
+const apply = fn => data => Array.isArray(data) ? data.map(item => fn(item)) : fn(data)
 
 export class QueryBuilder {
   private query: any
diff --git a/src/defaultTheme/components/atoms/Badge.vue b/src/defaultTheme/components/atoms/Badge.vue
index 0e5b7e4f3..ebf0c9186 100644
--- a/src/defaultTheme/components/atoms/Badge.vue
+++ b/src/defaultTheme/components/atoms/Badge.vue
@@ -1,6 +1,18 @@
 <template>
   <span
-    class="inline-flex items-center px-3 py-1 text-base leading-5 tracking-tight rounded-full bg-primary-100 dark:bg-primary-800 text-primary"
+    class="
+      inline-flex
+      items-center
+      px-3
+      py-1
+      text-base
+      leading-5
+      tracking-tight
+      rounded-full
+      bg-primary-100
+      dark:bg-primary-800
+      text-primary
+    "
   >
     <slot />
   </span>
diff --git a/src/defaultTheme/components/atoms/CardGrid.vue b/src/defaultTheme/components/atoms/CardGrid.vue
index 59a9ed132..5108cf5fd 100644
--- a/src/defaultTheme/components/atoms/CardGrid.vue
+++ b/src/defaultTheme/components/atoms/CardGrid.vue
@@ -5,7 +5,16 @@
         {{ title }}
       </h2>
       <div
-        class="grid gap-4 font-semibold text-left text-gray-900 dark:text-gray-100 sm:grid-cols-2 xl:grid-cols-3 2xl:gap-8"
+        class="
+          grid
+          gap-4
+          font-semibold
+          text-left text-gray-900
+          dark:text-gray-100
+          sm:grid-cols-2
+          xl:grid-cols-3
+          2xl:gap-8
+        "
       >
         <slot />
       </div>
diff --git a/src/defaultTheme/components/atoms/CodeGroup.vue b/src/defaultTheme/components/atoms/CodeGroup.vue
index 8fcc153a6..54b08ed52 100644
--- a/src/defaultTheme/components/atoms/CodeGroup.vue
+++ b/src/defaultTheme/components/atoms/CodeGroup.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="code-group" :class="[activeTabIndex == 0 && 'first-tab']">
     <div
-      class="relative px-2 text-sm text-white bg-gray-100 border-b-2 border-gray-200 rounded-t-md h-12 dark:bg-gray-800 dark:border-gray-700"
+      class="
+        relative
+        px-2
+        text-sm text-white
+        bg-gray-100
+        border-b-2 border-gray-200
+        rounded-t-md
+        h-12
+        dark:bg-gray-800
+        dark:border-gray-700
+      "
     >
       <button
         v-for="({ label }, i) in tabs"
diff --git a/src/defaultTheme/components/atoms/CodeSandbox.vue b/src/defaultTheme/components/atoms/CodeSandbox.vue
index ea9cde594..03d51235a 100644
--- a/src/defaultTheme/components/atoms/CodeSandbox.vue
+++ b/src/defaultTheme/components/atoms/CodeSandbox.vue
@@ -1,7 +1,20 @@
 <template>
   <div
     ref="box"
-    class="flex items-center justify-center w-full min-h-[500px] mx-auto mb-6 overflow-hidden text-3xl text-center text-white bg-black rounded-md codesandbox"
+    class="
+      flex
+      items-center
+      justify-center
+      w-full
+      min-h-[500px]
+      mx-auto
+      mb-6
+      overflow-hidden
+      text-3xl text-center text-white
+      bg-black
+      rounded-md
+      codesandbox
+    "
     style="background-color: rgb(21, 21, 21)"
   >
     <iframe
diff --git a/src/defaultTheme/components/molecules/AsideNavigation.vue b/src/defaultTheme/components/molecules/AsideNavigation.vue
index e4ee2676c..11eff6ee2 100644
--- a/src/defaultTheme/components/molecules/AsideNavigation.vue
+++ b/src/defaultTheme/components/molecules/AsideNavigation.vue
@@ -1,12 +1,35 @@
 <template>
   <div
-    class="fixed top-0 left-0 w-auto h-full overflow-auto pointer-events-auto lg:h-screen min-h-fill-available lg:sticky lg:top-header lg:w-60"
+    class="
+      fixed
+      top-0
+      left-0
+      w-auto
+      h-full
+      overflow-auto
+      pointer-events-auto
+      lg:h-screen
+      min-h-fill-available
+      lg:sticky
+      lg:top-header
+      lg:w-60
+    "
   >
     <div class="w-auto h-full overflow-auto bg-white dark:bg-gray-900 lg:bg-transparent">
       <!-- Aside Header -->
       <div class="flex items-center w-full px-4 sm:px-6 lg:hidden h-header bg-gray-50 dark:bg-gray-800">
         <button
-          class="flex-1 text-gray-500 transition-colors duration-200 focus:outline-none lg:hidden dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-400"
+          class="
+            flex-1
+            text-gray-500
+            transition-colors
+            duration-200
+            focus:outline-none
+            lg:hidden
+            dark:text-gray-500
+            hover:text-gray-700
+            dark:hover:text-gray-400
+          "
           @click.stop="$menu.toggle"
         >
           <IconArrowLeft class="w-5 h-5" />
@@ -20,7 +43,16 @@
 
       <!-- Aside Navigation -->
       <nav
-        class="flex flex-col justify-between lg:justify-start max-w-sm overflow-y-auto text-sm font-medium h-(full-header)"
+        class="
+          flex flex-col
+          justify-between
+          lg:justify-start
+          max-w-sm
+          overflow-y-auto
+          text-sm
+          font-medium
+          h-(full-header)
+        "
       >
         <div class="py-4 pl-4 pr-24 sm:pl-6 lg:pr-0 lg:pt-10">
           <AsideTop />
diff --git a/src/defaultTheme/components/molecules/AsideNavigationItem.vue b/src/defaultTheme/components/molecules/AsideNavigationItem.vue
index c5d8fcc65..683303cef 100644
--- a/src/defaultTheme/components/molecules/AsideNavigationItem.vue
+++ b/src/defaultTheme/components/molecules/AsideNavigationItem.vue
@@ -12,7 +12,19 @@
       <li v-for="doc of docs" :key="doc.to">
         <NuxtLink
           :to="$contentLocalePath(doc.to)"
-          class="relative inline-flex items-center justify-between pl-3 py-1 transition duration-200 border-l border-gray-100 dark:border-gray-800 hover:text-primary"
+          class="
+            relative
+            inline-flex
+            items-center
+            justify-between
+            pl-3
+            py-1
+            transition
+            duration-200
+            border-l border-gray-100
+            dark:border-gray-800
+            hover:text-primary
+          "
           :class="[
             $docus.isLinkActive(doc.to)
               ? 'text-primary dark:text-primary-400 hover:text-primary border-primary-500 dark:border-primary-500'
diff --git a/src/defaultTheme/components/molecules/NavigationButton.vue b/src/defaultTheme/components/molecules/NavigationButton.vue
index 43bf0a219..4f95c354b 100644
--- a/src/defaultTheme/components/molecules/NavigationButton.vue
+++ b/src/defaultTheme/components/molecules/NavigationButton.vue
@@ -1,6 +1,18 @@
 <template>
   <button
-    class="flex items-center transition-colors text-gray-500 duration-200 justify-center lg:hidden dark:text-gray-500 hover:text-gray-700 focus:outline-none dark:hover:text-gray-400"
+    class="
+      flex
+      items-center
+      transition-colors
+      text-gray-500
+      duration-200
+      justify-center
+      lg:hidden
+      dark:text-gray-500
+      hover:text-gray-700
+      focus:outline-none
+      dark:hover:text-gray-400
+    "
     @click.stop="$menu.toggle"
   >
     <IconMenuAlt class="h-6 w-6" />
diff --git a/src/defaultTheme/components/organisms/AppAside.vue b/src/defaultTheme/components/organisms/AppAside.vue
index 07c720402..68b195e6d 100644
--- a/src/defaultTheme/components/organisms/AppAside.vue
+++ b/src/defaultTheme/components/organisms/AppAside.vue
@@ -5,7 +5,20 @@
       <Transition name="fade">
         <div
           v-if="$menu.visible.value"
-          class="fixed top-0 left-0 z-0 w-full h-full bg-gray-400 pointer-events-auto blur-8 dark:bg-gray-900 dark:bg-opacity-80 bg-opacity-80 lg:hidden"
+          class="
+            fixed
+            top-0
+            left-0
+            z-0
+            w-full
+            h-full
+            bg-gray-400
+            pointer-events-auto
+            blur-8
+            dark:bg-gray-900 dark:bg-opacity-80
+            bg-opacity-80
+            lg:hidden
+          "
           @click.stop="$menu.toggle"
         />
       </Transition>
diff --git a/src/defaultTheme/components/organisms/AppHeader.vue b/src/defaultTheme/components/organisms/AppHeader.vue
index 40f48b709..0700d76dd 100644
--- a/src/defaultTheme/components/organisms/AppHeader.vue
+++ b/src/defaultTheme/components/organisms/AppHeader.vue
@@ -28,7 +28,18 @@
           <NuxtLink
             v-if="lastRelease"
             :to="localePath('/releases')"
-            class="hidden px-3 font-medium text-gray-400 transition-colors duration-200 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 lg:block"
+            class="
+              hidden
+              px-3
+              font-medium
+              text-gray-400
+              transition-colors
+              duration-200
+              dark:text-gray-500
+              hover:text-gray-500
+              dark:hover:text-gray-400
+              lg:block
+            "
             exact-active-class="text-primary-500 dark:text-primary-400"
             >{{ lastRelease }}</NuxtLink
           >
diff --git a/src/defaultTheme/components/organisms/BlockFeatures.vue b/src/defaultTheme/components/organisms/BlockFeatures.vue
index a05c220ac..f495dc3ba 100644
--- a/src/defaultTheme/components/organisms/BlockFeatures.vue
+++ b/src/defaultTheme/components/organisms/BlockFeatures.vue
@@ -5,14 +5,39 @@
         {{ title }}
       </h2>
       <ul
-        class="grid gap-4 font-semibold text-left text-gray-900 dark:text-gray-100 sm:grid-cols-2 xl:grid-cols-3 2xl:gap-8"
+        class="
+          grid
+          gap-4
+          font-semibold
+          text-left text-gray-900
+          dark:text-gray-100
+          sm:grid-cols-2
+          xl:grid-cols-3
+          2xl:gap-8
+        "
       >
         <li v-for="(f, index) of features" :key="index" class="flex">
           <div
-            class="relative w-full px-6 py-8 bg-white rounded border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+            class="
+              relative
+              w-full
+              px-6
+              py-8
+              bg-white
+              rounded
+              border border-gray-200
+              dark:border-gray-700
+              dark:bg-gray-900
+            "
           >
             <InjectComponent :component="f.icon" class="w-16 h-16 mb-3" :class="f.iconClass || ''">
-              <nuxt-img v-if="isImage(f.icon)" :src="f.icon" width="64" height="64" class="inline-block w-16 h-16 mb-3" />
+              <NuxtImg
+                v-if="isImage(f.icon)"
+                :src="f.icon"
+                width="64"
+                height="64"
+                class="inline-block w-16 h-16 mb-3"
+              />
               <span v-else class="inline-block w-16 h-16 mb-3 text-6xl">{{ f.icon }}</span>
             </InjectComponent>
             <h2 class="mb-2 text-xl">{{ f.title }}</h2>
diff --git a/src/defaultTheme/components/organisms/BlockHero.vue b/src/defaultTheme/components/organisms/BlockHero.vue
index c61eeaa46..022719fd3 100644
--- a/src/defaultTheme/components/organisms/BlockHero.vue
+++ b/src/defaultTheme/components/organisms/BlockHero.vue
@@ -3,12 +3,33 @@
     <div class="flex flex-col lg:flex-row my-8 md:my-16">
       <div class="flex flex-col items-center pr-0 lg:items-start lg:pr-8 lg:w-2/3">
         <h2
-          class="mb-4 text-4xl font-semibold sm:leading-none tracking-tighter text-center text-gray-900 lg:text-left dark:text-gray-100 sm:text-6xl lg:text-7xl sm:mb-8"
+          class="
+            mb-4
+            text-4xl
+            font-semibold
+            sm:leading-none
+            tracking-tighter
+            text-center text-gray-900
+            lg:text-left
+            dark:text-gray-100
+            sm:text-6xl
+            lg:text-7xl
+            sm:mb-8
+          "
         >
           {{ title }}
         </h2>
         <p
-          class="mb-8 text-base text-center text-gray-700 lg:text-left sm:text-xl xl:text-2xl leading-base sm:mb-12 dark:text-gray-300"
+          class="
+            mb-8
+            text-base text-center text-gray-700
+            lg:text-left
+            sm:text-xl
+            xl:text-2xl
+            leading-base
+            sm:mb-12
+            dark:text-gray-300
+          "
         >
           {{ description }}
         </p>
@@ -22,7 +43,16 @@
           <InjectComponent v-if="secondary" :component="secondary">
             <a
               :href="secondary[1]"
-              class="py-px mt-px font-medium text-gray-800 border-b-2 border-transparent dark:text-gray-100 hover:border-gray-800 dark:hover:border-gray-100"
+              class="
+                py-px
+                mt-px
+                font-medium
+                text-gray-800
+                border-b-2 border-transparent
+                dark:text-gray-100
+                hover:border-gray-800
+                dark:hover:border-gray-100
+              "
             >
               {{ secondary[0] }}
             </a>
diff --git a/src/defaultTheme/components/organisms/BlogpostToc.vue b/src/defaultTheme/components/organisms/BlogpostToc.vue
index 6bc583628..62a26cfdd 100644
--- a/src/defaultTheme/components/organisms/BlogpostToc.vue
+++ b/src/defaultTheme/components/organisms/BlogpostToc.vue
@@ -1,10 +1,34 @@
 <template>
   <div
     v-if="toc.length"
-    class="sticky z-10 px-4 text-sm bg-white border-b border-gray-100 border-dashed top-header dark:border-gray-800 blur-header bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80"
+    class="
+      sticky
+      z-10
+      px-4
+      text-sm
+      bg-white
+      border-b border-gray-100 border-dashed
+      top-header
+      dark:border-gray-800
+      blur-header
+      bg-opacity-80
+      dark:bg-gray-900 dark:bg-opacity-80
+    "
   >
     <button
-      class="relative z-10 flex items-center w-full py-3 text-sm font-semibold text-gray-900 focus:outline-none dark:text-gray-100"
+      class="
+        relative
+        z-10
+        flex
+        items-center
+        w-full
+        py-3
+        text-sm
+        font-semibold
+        text-gray-900
+        focus:outline-none
+        dark:text-gray-100
+      "
       @click="showMobileToc = !showMobileToc"
     >
       <span class="mr-2">{{ title || $t('toc.title') }}</span>
@@ -20,12 +44,10 @@
           :href="`#${link.id}`"
           class="block py-1 transition-colors duration-100 transform scrollactive-item"
           :class="{
-            'text-gray-600 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400': activeHeadings.includes(
-              link.id
-            ),
-            'text-gray-400 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400': !activeHeadings.includes(
-              link.id
-            )
+            'text-gray-600 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
+              activeHeadings.includes(link.id),
+            'text-gray-400 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
+              !activeHeadings.includes(link.id)
           }"
           @click.prevent="scrollToHeading(link.id, '--blogpost-scroll-margin-block')"
           >{{ link.text }}</a
diff --git a/src/defaultTheme/components/organisms/PageContent.vue b/src/defaultTheme/components/organisms/PageContent.vue
index 573002396..0e2799a5e 100644
--- a/src/defaultTheme/components/organisms/PageContent.vue
+++ b/src/defaultTheme/components/organisms/PageContent.vue
@@ -12,7 +12,22 @@
         <h1 class="flex-1 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">{{ page.title }}</h1>
         <span
           v-if="page.draft"
-          class="inline-block px-3 py-1 mr-2 text-base font-medium leading-5 tracking-tight text-yellow-500 bg-yellow-100 rounded-full items-flex dark:bg-yellow-800 dark:text-yellow-400"
+          class="
+            inline-block
+            px-3
+            py-1
+            mr-2
+            text-base
+            font-medium
+            leading-5
+            tracking-tight
+            text-yellow-500
+            bg-yellow-100
+            rounded-full
+            items-flex
+            dark:bg-yellow-800
+            dark:text-yellow-400
+          "
           >Draft</span
         >
         <Badge v-if="page.badge" class="font-medium">{{ page.badge }}</Badge>
diff --git a/src/defaultTheme/components/organisms/PagePrevNext.vue b/src/defaultTheme/components/organisms/PagePrevNext.vue
index 79cd30ff5..ea218177c 100644
--- a/src/defaultTheme/components/organisms/PagePrevNext.vue
+++ b/src/defaultTheme/components/organisms/PagePrevNext.vue
@@ -4,7 +4,27 @@
       <NuxtLink
         v-if="prev"
         :to="$contentLocalePath(prev.to)"
-        class="inline-flex items-center justify-end w-full px-4 py-4 truncate border border-gray-100 rounded group min-w-1/2 xs:w-auto xs:justify-end dark:text-gray-400 dark:border-gray-800 dark:hover:text-primary-400 hover:text-primary hover:border-primary-400 dark:hover:border-gray-700"
+        class="
+          inline-flex
+          items-center
+          justify-end
+          w-full
+          px-4
+          py-4
+          truncate
+          border border-gray-100
+          rounded
+          group
+          min-w-1/2
+          xs:w-auto
+          xs:justify-end
+          dark:text-gray-400
+          dark:border-gray-800
+          dark:hover:text-primary-400
+          hover:text-primary
+          hover:border-primary-400
+          dark:hover:border-gray-700
+        "
       >
         <span class="relative flex flex-col items-end truncate">
           <span v-if="prev.category" class="mb-1 text-xs leading-tight text-gray-400 group-hover:text-primary-400">{{
@@ -22,7 +42,28 @@
       <NuxtLink
         v-if="next"
         :to="$contentLocalePath(next.to)"
-        class="inline-flex items-center justify-start w-full px-4 py-4 mb-2 truncate border border-gray-100 rounded group xs:mb-0 xs:w-auto min-w-1/2 xs:justify-start dark:text-gray-400 dark:border-gray-800 hover:text-primary hover:border-primary dark:hover:border-gray-700"
+        class="
+          inline-flex
+          items-center
+          justify-start
+          w-full
+          px-4
+          py-4
+          mb-2
+          truncate
+          border border-gray-100
+          rounded
+          group
+          xs:mb-0
+          xs:w-auto
+          min-w-1/2
+          xs:justify-start
+          dark:text-gray-400
+          dark:border-gray-800
+          hover:text-primary
+          hover:border-primary
+          dark:hover:border-gray-700
+        "
       >
         <span class="relative flex flex-col items-start truncate">
           <span v-if="next.category" class="mb-1 text-xs leading-tight text-gray-400 group-hover:text-primary-400">{{
diff --git a/src/defaultTheme/components/organisms/PageToc.vue b/src/defaultTheme/components/organisms/PageToc.vue
index e90c62cc7..63e925438 100644
--- a/src/defaultTheme/components/organisms/PageToc.vue
+++ b/src/defaultTheme/components/organisms/PageToc.vue
@@ -1,10 +1,48 @@
 <template>
   <div
     v-if="toc.length"
-    class="sticky left-0 flex-none w-full pl-4 mr-8 text-sm bg-white border-b border-gray-100 xl:relative xl:border-0 dark:border-gray-800 blur-header bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80 xl:bg-transparent lg:left-60 xl:left-0 sm:pl-6 xl:pl-8 xl:w-64 top-header xl:block xl:top-0"
+    class="
+      sticky
+      left-0
+      flex-none
+      w-full
+      pl-4
+      mr-8
+      text-sm
+      bg-white
+      border-b border-gray-100
+      xl:relative
+      xl:border-0
+      dark:border-gray-800
+      blur-header
+      bg-opacity-80
+      dark:bg-gray-900 dark:bg-opacity-80
+      xl:bg-transparent
+      lg:left-60
+      xl:left-0
+      sm:pl-6
+      xl:pl-8
+      xl:w-64
+      top-header
+      xl:block
+      xl:top-0
+    "
   >
     <button
-      class="relative z-10 flex items-center w-full py-3 text-sm font-semibold text-gray-900 focus:outline-none xl:hidden dark:text-gray-100"
+      class="
+        relative
+        z-10
+        flex
+        items-center
+        w-full
+        py-3
+        text-sm
+        font-semibold
+        text-gray-900
+        focus:outline-none
+        xl:hidden
+        dark:text-gray-100
+      "
       @click="showMobileToc = !showMobileToc"
     >
       <span class="mr-2">{{ title || $t('toc.title') }}</span>
@@ -45,12 +83,10 @@
               <a
                 :href="`#${childLink.id}`"
                 :class="{
-                  'text-gray-600 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400': activeHeadings.includes(
-                    childLink.id
-                  ),
-                  'text-gray-400 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400': !activeHeadings.includes(
-                    childLink.id
-                  )
+                  'text-gray-600 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
+                    activeHeadings.includes(childLink.id),
+                  'text-gray-400 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
+                    !activeHeadings.includes(childLink.id)
                 }"
                 class="block py-1 pl-3 transition-colors duration-100 transform"
                 @click.prevent="scrollToHeading(childLink.id, '--docs-scroll-margin-block')"
diff --git a/src/defaultTheme/components/templates/Blog.vue b/src/defaultTheme/components/templates/Blog.vue
index c6bc87e96..bdba1bb44 100644
--- a/src/defaultTheme/components/templates/Blog.vue
+++ b/src/defaultTheme/components/templates/Blog.vue
@@ -24,7 +24,13 @@
                   :key="index"
                   class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-500"
                 >
-                  <nuxt-img class="inline-block h-6 w-6 rounded-full" height="24" width="24" :src="author.avatarUrl" alt />
+                  <NuxtImg
+                    class="inline-block h-6 w-6 rounded-full"
+                    height="24"
+                    width="24"
+                    :src="author.avatarUrl"
+                    alt
+                  />
                 </span>
               </div>
             </div>
@@ -34,14 +40,25 @@
               :to="$contentLocalePath(post.to)"
             >
               <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800">
-                <nuxt-img :src="post.imgUrl" width="864" height="378" alt="" />
+                <NuxtImg :src="post.imgUrl" width="864" height="378" alt="" />
               </div>
             </NuxtLink>
           </div>
 
           <div class="flex flex-col sm:flex-row w-full">
             <div
-              class="hidden sm:flex sm:flex-col items-center sm:items-end justify-between sm:w-1/3 px-4 sm:pr-4 mb-4 sm:mb-0"
+              class="
+                hidden
+                sm:flex sm:flex-col
+                items-center
+                sm:items-end
+                justify-between
+                sm:w-1/3
+                px-4
+                sm:pr-4
+                mb-4
+                sm:mb-0
+              "
             >
               <!-- only show sticky author on desktop layout -->
               <div class="sticky top-header flex items-center py-2 -my-1.5">
@@ -50,7 +67,13 @@
                   :key="index"
                   class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-600"
                 >
-                  <nuxt-img class="inline-block h-6 w-6 rounded-full" height="24" width="24" :src="author.avatarUrl" alt />
+                  <NuxtImg
+                    class="inline-block h-6 w-6 rounded-full"
+                    height="24"
+                    width="24"
+                    :src="author.avatarUrl"
+                    alt
+                  />
                 </span>
               </div>
             </div>
diff --git a/src/defaultTheme/components/templates/BlogPost.vue b/src/defaultTheme/components/templates/BlogPost.vue
index f50511c55..810768e39 100644
--- a/src/defaultTheme/components/templates/BlogPost.vue
+++ b/src/defaultTheme/components/templates/BlogPost.vue
@@ -4,7 +4,21 @@
       <div class="max-w-2xl mx-auto py-24 relative">
         <NuxtLink
           :to="$contentLocalePath('/blog')"
-          class="absolute top-0 left-0 px-4 mt-12 leading-none text-gray-400 dark:text-gray-600 hover:text-gray-500 hover:dark:text-gray-400 font-medium transition-color duration-100"
+          class="
+            absolute
+            top-0
+            left-0
+            px-4
+            mt-12
+            leading-none
+            text-gray-400
+            dark:text-gray-600
+            hover:text-gray-500
+            hover:dark:text-gray-400
+            font-medium
+            transition-color
+            duration-100
+          "
         >
           <span class="">← Back</span>
         </NuxtLink>