feat: add plausible (#1251)

And some lint fixes
nuxt · Jan 10, 2023 · e5969fe · e5969fe
1 parent 5b6a5dd
commit e5969fe
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 144 deletions.
diff --git a/components/global/AppModal.vue b/components/global/AppModal.vue
@@ -64,11 +64,6 @@ export default {
       showModal: false
     }
   },
-  computed: {
-    open() {
-      return this.showModal
-    }
-  },
   head() {
     return this.open
       ? {
@@ -77,6 +72,11 @@ export default {
           }
         }
       : undefined
+  },
+  computed: {
+    open() {
+      return this.showModal
+    }
   }
 }
 </script>

diff --git a/components/global/CodeGroup.vue b/components/global/CodeGroup.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="code-group">
     <div
-      class="rounded-t border-b-2 border-dark-border px-2 bg-dark-elevatedSurface text-sm text-white relative"
+      class="relative px-2 text-sm text-white border-b-2 rounded-t border-dark-border bg-dark-elevatedSurface"
     >
       <button
         v-for="({ label }, i) in tabs"
         ref="tabs"
         :key="label"
-        class="px-4 py-3 text-gray-400 font-bold font-mono"
+        class="px-4 py-3 font-mono font-bold text-gray-400"
         :class="[activeTabIndex === i && 'active']"
         @click="updateTabs(i)"
       >
@@ -45,7 +45,7 @@ export default {
   },
   methods: {
     switchTab(i) {
-      this.tabs.map(tab => {
+      this.tabs.forEach(tab => {
         tab.elm.classList.remove('active')
       })
       this.tabs[i].elm.classList.add('active')

diff --git a/components/molecules/AppLangSelect.vue b/components/molecules/AppLangSelect.vue
@@ -1,29 +1,27 @@
 <template>
   <div
-    class="nui-select text-nuxt-gray bg-gray-200 dark:bg-dark-surface dark:text-dark-onSurfaceSecondary inline-block rounded-full transition-colors duration-300 ease-linear"
+    class="inline-block transition-colors duration-300 ease-linear bg-gray-200 rounded-full nui-select text-nuxt-gray dark:bg-dark-surface dark:text-dark-onSurfaceSecondary"
   >
     <div class="flex items-center content-center px-4">
       <div class="-mr-4">
         <slot name="icon" />
       </div>
-      <template>
-        <select
-          :value="$i18n.locale"
-          class="bg-transparent cursor-pointer font-medium h-10 appearance-none focus:outline-none pl-6 pr-8 z-10"
-          :aria-label="label"
-          @change="onChange"
+      <select
+        :value="$i18n.locale"
+        class="z-10 h-10 pl-6 pr-8 font-medium bg-transparent appearance-none cursor-pointer focus:outline-none"
+        :aria-label="label"
+        @change="onChange"
+      >
+        <option
+          v-for="(locale, i) in $i18n.locales"
+          :key="i"
+          :value="locale.code"
+          class="dark:text-dark-surface"
         >
-          <option
-            v-for="(locale, i) in $i18n.locales"
-            :key="i"
-            :value="locale.code"
-            class="dark:text-dark-surface"
-          >
-            {{ getLocaleDescription(locale) }}
-          </option>
-        </select>
-        <CaretDownIcon class="-ml-4" />
-      </template>
+          {{ getLocaleDescription(locale) }}
+        </option>
+      </select>
+      <CaretDownIcon class="-ml-4" />
     </div>
   </div>
 </template>

diff --git a/components/organisms/NewsletterForm.vue b/components/organisms/NewsletterForm.vue
@@ -10,7 +10,7 @@
         tag="h2"
         class="text-3xl font-medium text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary mb-2 transition-colors duration-300 ease-linear"
       >
-        <template v-slot:nuxt>
+        <template #nuxt>
           <AppTitle />
         </template>
       </i18n>

diff --git a/components/organisms/ReleaseNotes.vue b/components/organisms/ReleaseNotes.vue
@@ -47,13 +47,13 @@ export default {
       return s
     }
   },
-  async fetch() {
-    this.releases = await this.$http.$get('/_releases')
-  },
   data() {
     return {
       releases: []
     }
+  },
+  async fetch() {
+    this.releases = await this.$http.$get('/_releases')
   }
 }
 </script>
diff --git a/components/organisms/ads/CarbonAds.vue b/components/organisms/ads/CarbonAds.vue
@@ -54,6 +54,7 @@ export default {
 
   @screen lg {
     @apply mt-0 mx-auto;
+
     max-width: 160px;
   }
 
@@ -62,6 +63,7 @@ export default {
 
     .carbon-wrap {
       @apply flex flex-col;
+
       flex: 1;
 
       @media (min-width: 320px) {

diff --git a/components/templates/TheMobileAsideNav.vue b/components/templates/TheMobileAsideNav.vue
@@ -1,28 +1,28 @@
 <template>
   <div
     v-click-outside="clickOutsideHandler"
-    class="header_mobile_aside shadow-nuxt block lg:hidden fixed left-0 z-20 w-full sm:w-1/2"
+    class="fixed left-0 z-20 block w-full header_mobile_aside shadow-nuxt lg:hidden sm:w-1/2"
     :class="{ 'header_mobile_aside--open': show }"
   >
     <div
-      class="mx-auto h-full light:bg-light-surface dark:bg-dark-surface transition-colors duration-300 ease-linear"
+      class="h-full mx-auto transition-colors duration-300 ease-linear light:bg-light-surface dark:bg-dark-surface"
     >
-      <div class="content-wrapper h-full relative">
-        <div class="overflow-y-auto h-full pt-4">
+      <div class="relative h-full content-wrapper">
+        <div class="h-full pt-4 overflow-y-auto">
           <transition-group
             v-for="(sublinks, group) in sortedLinks"
             :key="group"
             tag="div"
             name="list"
             class="header_mobile_aside_group"
           >
-            <h3 :key="`title-${group}`" class="uppercase text-gray-500 pb-2">
+            <h3 :key="`title-${group}`" class="pb-2 text-gray-500 uppercase">
               {{ $t(`content.${section}.${group}`) }}
             </h3>
             <ul :key="`list-${group}`" class="pb-6">
               <li v-for="(link, index) in sublinks" :key="index" class="py-2">
                 <NuxtLink
-                  class="block dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen transition-colors duration-300 ease-linear"
+                  class="block transition-colors duration-300 ease-linear dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen"
                   active-class
                   exact
                   exact-active-class="text-nuxt-lightgreen"
@@ -36,26 +36,26 @@
           </transition-group>
         </div>
         <button
-          class="inner-button sm:hidden absolute h-10 w-10 flex items-center justify-center text-nuxt-gray bg-gray-200 dark:bg-dark-elevatedSurface dark:text-dark-onSurfaceSecondary transition-colors duration-300 ease-linear"
+          class="absolute flex items-center justify-center w-10 h-10 transition-colors duration-300 ease-linear bg-gray-200 inner-button sm:hidden text-nuxt-gray dark:bg-dark-elevatedSurface dark:text-dark-onSurfaceSecondary"
           @click="show = false"
         >
           <TimesIcon
-            class="block h-5 fill-current transition-colors duration-300 ease-linear"
+            class="block h-5 transition-colors duration-300 ease-linear fill-current"
           />
         </button>
       </div>
 
       <button
-        class="bookmark-button absolute h-10 w-10 flex items-center justify-center text-nuxt-gray bg-gray-200 dark:bg-dark-surface dark:text-dark-onSurfaceSecondary transition-colors duration-300 ease-linear"
+        class="absolute flex items-center justify-center w-10 h-10 transition-colors duration-300 ease-linear bg-gray-200 bookmark-button text-nuxt-gray dark:bg-dark-surface dark:text-dark-onSurfaceSecondary"
         @click="show = !show"
       >
         <ListIcon
           v-if="!show"
-          class="block text-nuxt-gray dark:text-dark-onSurfaceSecondary stroke-current transition-colors duration-300 ease-linear"
+          class="block transition-colors duration-300 ease-linear stroke-current text-nuxt-gray dark:text-dark-onSurfaceSecondary"
         />
         <TimesIcon
           v-else
-          class="block h-5 fill-current transition-colors duration-300 ease-linear"
+          class="block h-5 transition-colors duration-300 ease-linear fill-current"
         />
       </button>
     </div>
@@ -76,7 +76,7 @@ export default {
   props: {
     links: {
       type: Object,
-      default: () => []
+      default: () => {}
     },
     section: {
       type: String,

diff --git a/components/templates/TheMobileAsideNavNewDocs.vue b/components/templates/TheMobileAsideNavNewDocs.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     v-click-outside="clickOutsideHandler"
-    class="header_mobile_aside shadow-nuxt block lg:hidden fixed left-0 z-20 w-full sm:w-1/2"
+    class="fixed left-0 z-20 block w-full header_mobile_aside shadow-nuxt lg:hidden sm:w-1/2"
     :class="{ 'header_mobile_aside--open': show }"
   >
     <div
-      class="mx-auto h-full light:bg-light-surface dark:bg-dark-surface transition-colors duration-300 ease-linear"
+      class="h-full mx-auto transition-colors duration-300 ease-linear light:bg-light-surface dark:bg-dark-surface"
     >
-      <div class="content-wrapper h-full relative">
-        <div class="overflow-y-auto h-full pt-4">
+      <div class="relative h-full content-wrapper">
+        <div class="h-full pt-4 overflow-y-auto">
           <transition-group
             v-for="(sublinks, group) in sortedLinks"
             :key="group"
@@ -23,7 +23,7 @@
                 name: 'docs-2.x-book-slug',
                 params: { book: group, slug: sublinks[0].slug }
               }"
-              class="flex items-center uppercase text-gray-600 pb-2"
+              class="flex items-center pb-2 text-gray-600 uppercase"
               :class="{
                 'hover:text-nuxt-lightgreen mb-4 block':
                   $route.params.book !== group,
@@ -44,7 +44,7 @@
             >
               <li v-for="(link, index) in sublinks" :key="index" class="py-2">
                 <NuxtLink
-                  class="block dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen transition-colors duration-300 ease-linear"
+                  class="block transition-colors duration-300 ease-linear dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen"
                   exact-active-class="text-nuxt-lightgreen"
                   :to="toLink(group, link)"
                   @click.native="show = false"
@@ -56,26 +56,26 @@
           </transition-group>
         </div>
         <button
-          class="inner-button sm:hidden absolute h-10 w-10 flex items-center justify-center text-nuxt-gray bg-gray-200 dark:bg-dark-elevatedSurface dark:text-dark-onSurfaceSecondary transition-colors duration-300 ease-linear"
+          class="absolute flex items-center justify-center w-10 h-10 transition-colors duration-300 ease-linear bg-gray-200 inner-button sm:hidden text-nuxt-gray dark:bg-dark-elevatedSurface dark:text-dark-onSurfaceSecondary"
           @click="show = false"
         >
           <TimesIcon
-            class="block h-5 fill-current transition-colors duration-300 ease-linear"
+            class="block h-5 transition-colors duration-300 ease-linear fill-current"
           />
         </button>
       </div>
 
       <button
-        class="bookmark-button absolute h-10 w-10 flex items-center justify-center text-nuxt-gray bg-gray-200 dark:bg-dark-surface dark:text-dark-onSurfaceSecondary transition-colors duration-300 ease-linear"
+        class="absolute flex items-center justify-center w-10 h-10 transition-colors duration-300 ease-linear bg-gray-200 bookmark-button text-nuxt-gray dark:bg-dark-surface dark:text-dark-onSurfaceSecondary"
         @click="show = !show"
       >
         <ListIcon
           v-if="!show"
-          class="block text-nuxt-gray dark:text-dark-onSurfaceSecondary stroke-current transition-colors duration-300 ease-linear"
+          class="block transition-colors duration-300 ease-linear stroke-current text-nuxt-gray dark:text-dark-onSurfaceSecondary"
         />
         <TimesIcon
           v-else
-          class="block h-5 fill-current transition-colors duration-300 ease-linear"
+          class="block h-5 transition-colors duration-300 ease-linear fill-current"
         />
       </button>
     </div>
@@ -100,7 +100,7 @@ export default {
   props: {
     links: {
       type: Object,
-      default: () => []
+      default: () => {}
     }
   },
   data() {

diff --git a/components/templates/home/HomeModes.vue b/components/templates/home/HomeModes.vue
@@ -8,7 +8,7 @@
           tag="h2"
           class="text-3xl text-center pt-10 font-medium"
         >
-          <template v-slot:nuxt>
+          <template #nuxt>
             <AppTitle />
           </template>
         </i18n>
@@ -27,7 +27,7 @@
               tag="p"
               class="leading-loose text-left text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:break>
+              <template #break>
                 <br />
                 <br />
               </template>
@@ -45,7 +45,7 @@
               tag="p"
               class="leading-loose text-left text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:proverbial>
+              <template #proverbial>
                 <span class="text-gray-600">
                   ({{ $t('homepage.modes.ssg.proverbial') }} 🐦🐦)
                 </span>

diff --git a/components/templates/home/HomeTargets.vue b/components/templates/home/HomeTargets.vue
@@ -1,10 +1,10 @@
 <template>
   <AppContainer class="py-12">
     <section>
-      <h1 class="text-3xl uppercase text-center pb-8">
+      <h1 class="pb-8 text-3xl text-center uppercase">
         Nuxt<span class="text-nuxt-lightgreen">JS</span> targets
       </h1>
-      <div class="flex items-end lg:items-center justify-between">
+      <div class="flex items-end justify-between lg:items-center">
         <div class="Home__Modes__Section">
           <h4 class="Home__Modes__Section__Title">
 Server

diff --git a/components/templates/home/HomeWhy.vue b/components/templates/home/HomeWhy.vue
@@ -8,7 +8,7 @@
           tag="h2"
           class="text-3xl font-medium pt-10 pb-8 text-center"
         >
-          <template v-slot:nuxt>
+          <template #nuxt>
             <AppTitle />
           </template>
         </i18n>
@@ -25,7 +25,7 @@
               tag="p"
               class="leading-loose text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:break>
+              <template #break>
                 <br />
               </template>
             </i18n>
@@ -42,7 +42,7 @@
               tag="p"
               class="leading-loose text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:break>
+              <template #break>
                 <br />
               </template>
             </i18n>
@@ -59,7 +59,7 @@
               tag="p"
               class="leading-loose text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:break>
+              <template #break>
                 💚
                 <br />
               </template>