chore: up and lint

nuxt-themes · Apr 25, 2023 · d784582 · d784582
1 parent 8e7afaa
commit d784582
Show file tree

Hide file tree

Showing 21 changed files with 647 additions and 851 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@nuxt/eslint-config'
+  ],
+  rules: {
+    // Global
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
+    'quote-props': ['error', 'as-needed'],
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    // Vue
+    'vue/multi-word-component-names': 0,
+    'vue/no-v-html': 0
+  }
+}
diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
@@ -3,17 +3,30 @@ const { config } = useDocus()
 const socialIcons = ref(null)
 const icons = computed(() => config.value?.footer?.iconLinks || [])
 const textLinks = computed(() => config.value?.footer?.textLinks || [])
-const socialIconsCount = computed(() => Object.entries(config.value?.socials || {}).filter(([_, v]) => v).length)
+const socialIconsCount = computed(() => Object.entries(config.value?.socials || {}).filter(([, v]) => v).length)
 const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value : 0))
 </script>
 
 <template>
   <footer>
-    <Container :fluid="config?.footer?.fluid" padded class="footer-container">
+    <Container
+      :fluid="config?.footer?.fluid"
+      padded
+      class="footer-container"
+    >
       <!-- Left -->
       <div class="left">
-        <a v-if="config?.footer?.credits" :href="config?.footer?.credits?.href || '#'" rel="noopener" target="_blank">
-          <Component :is="config?.footer?.credits?.icon" v-if="config?.footer?.credits?.icon" class="left-icon" />
+        <a
+          v-if="config?.footer?.credits"
+          :href="config?.footer?.credits?.href || '#'"
+          rel="noopener"
+          target="_blank"
+        >
+          <Component
+            :is="config?.footer?.credits?.icon"
+            v-if="config?.footer?.credits?.icon"
+            class="left-icon"
+          />
           <p v-if="config?.footer?.credits?.text">{{ config.footer.credits.text }}</p>
         </a>
       </div>

diff --git a/components/app/AppHeaderDialog.vue b/components/app/AppHeaderDialog.vue
@@ -17,17 +17,33 @@ watch(visible, v => (v ? open() : close()))
 </script>
 
 <template>
-  <button aria-label="Menu" @click="open">
-    <Icon name="heroicons-outline:menu" aria-hidden="”true”" />
+  <button
+    aria-label="Menu"
+    @click="open"
+  >
+    <Icon
+      name="heroicons-outline:menu"
+      aria-hidden="”true”"
+    />
   </button>
 
   <!-- eslint-disable-next-line vue/no-multiple-template-root -->
   <teleport to="body">
-    <nav v-if="visible" class="dialog" @click="close">
+    <nav
+      v-if="visible"
+      class="dialog"
+      @click="close"
+    >
       <div @click.stop>
         <div class="wrapper">
-          <button aria-label="Menu" @click="close">
-            <Icon name="heroicons-outline:x" aria-hidden="”true”" />
+          <button
+            aria-label="Menu"
+            @click="close"
+          >
+            <Icon
+              name="heroicons-outline:x"
+              aria-hidden="”true”"
+            />
           </button>
 
           <div class="icons">

diff --git a/components/app/AppHeaderLogo.vue b/components/app/AppHeaderLogo.vue
@@ -5,19 +5,40 @@ const title = computed(() => config.value.header?.title || config.value.title)
 </script>
 
 <template>
-  <NuxtLink class="navbar-logo" to="/" :aria-label="title">
+  <NuxtLink
+    class="navbar-logo"
+    to="/"
+    :aria-label="title"
+  >
     <!-- Only Logo -->
-    <span class="logo" v-if="logo">
-      <component :is="logo" v-if="typeof logo === 'string'" />
+    <span
+      v-if="logo"
+      class="logo"
+    >
+      <component
+        :is="logo"
+        v-if="typeof logo === 'string'"
+      />
       <template v-else-if="logo.light && logo.dark">
-        <img :src="logo.light" alt="" class="light-img">
-        <img :src="logo.dark" alt="" class="dark-img">
+        <img
+          :src="logo.light"
+          alt=""
+          class="light-img"
+        >
+        <img
+          :src="logo.dark"
+          alt=""
+          class="dark-img"
+        >
       </template>
       <Logo v-else-if="logo" />
     </span>
 
     <!-- Only title -->
-    <span class="title" v-else>
+    <span
+      v-else
+      class="title"
+    >
       {{ title }}
     </span>
   </NuxtLink>

diff --git a/components/app/AppHeaderNavigation.vue b/components/app/AppHeaderNavigation.vue
@@ -30,7 +30,10 @@ const isActive = (link: any) => (link.exact ? route.fullPath === link._path : ro
           :to="link.redirect? link.redirect : navBottomLink(link)"
           :class="{ active: isActive(link) }"
         >
-          <Icon v-if="link.icon && config?.header?.showLinkIcon" :name="link.icon" />
+          <Icon
+            v-if="link.icon && config?.header?.showLinkIcon"
+            :name="link.icon"
+          />
           {{ link.title }}
         </NuxtLink>
       </li>

diff --git a/components/app/AppSearch.vue b/components/app/AppSearch.vue
@@ -5,8 +5,14 @@ const onClick = () => element.value.querySelector('button').click()
 </script>
 
 <template>
-  <div class="doc-search" @click="onClick">
-    <button type="button" aria-label="Search">
+  <div
+    class="doc-search"
+    @click="onClick"
+  >
+    <button
+      type="button"
+      aria-label="Search"
+    >
       <span class="content">
         <Icon name="heroicons-outline:search" />
         <span>Search</span>

diff --git a/components/app/AppSocialIcons.vue b/components/app/AppSocialIcons.vue
@@ -32,7 +32,10 @@ const icons = computed<any>(() => {
     :href="icon.href"
     target="_blank"
   >
-    <Icon v-if="icon.icon" :name="icon.icon" />
+    <Icon
+      v-if="icon.icon"
+      :name="icon.icon"
+    />
   </NuxtLink>
 </template>
 

diff --git a/components/app/DocumentDrivenNotFound.vue b/components/app/DocumentDrivenNotFound.vue
@@ -15,7 +15,11 @@
         </div>
 
         <div class="button-section">
-          <ButtonLink href="/" size="large" variant="primary">
+          <ButtonLink
+            href="/"
+            size="large"
+            variant="primary"
+          >
             Go back home
           </ButtonLink>
         </div>

diff --git a/components/app/Logo.vue b/components/app/Logo.vue
@@ -1,5 +1,9 @@
 <template>
-  <svg viewBox="0 0 167 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    viewBox="0 0 167 44"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M60 34.5945H70.2569C78.3172 34.5945 83.064 29.6369 83.064 21.1959V21.159C83.064 12.7365 78.2986 8 70.2569 8H60V34.5945ZM65.6217 29.987V12.5891H69.5867C74.5197 12.5891 77.3306 15.63 77.3306 21.1775V21.2143C77.3306 26.9645 74.6128 29.987 69.5867 29.987H65.6217Z"
       fill="currentColor"

diff --git a/components/app/ThemeSelect.vue b/components/app/ThemeSelect.vue
@@ -10,11 +10,23 @@ const onClick = () => {
 </script>
 
 <template>
-  <button aria-label="Color Mode" @click="onClick">
+  <button
+    aria-label="Color Mode"
+    @click="onClick"
+  >
     <ColorScheme placeholder="...">
-      <Icon v-if="colorMode.preference === 'dark'" name="uil:moon" />
-      <Icon v-else-if="colorMode.preference === 'light'" name="uil:sun" />
-      <Icon v-else name="uil:desktop" />
+      <Icon
+        v-if="colorMode.preference === 'dark'"
+        name="uil:moon"
+      />
+      <Icon
+        v-else-if="colorMode.preference === 'light'"
+        name="uil:sun"
+      />
+      <Icon
+        v-else
+        name="uil:desktop"
+      />
     </ColorScheme>
   </button>
 </template>

diff --git a/components/docs/DocsAside.vue b/components/docs/DocsAside.vue
@@ -4,9 +4,19 @@ const { tree } = useDocus()
 
 <template>
   <nav>
-    <DocsAsideTree v-if="tree?.length > 0" :links="tree" />
-    <NuxtLink v-else to="/" class="go-back-link">
-      <Icon name="heroicons-outline:arrow-left" class="icon" />
+    <DocsAsideTree
+      v-if="tree?.length > 0"
+      :links="tree"
+    />
+    <NuxtLink
+      v-else
+      to="/"
+      class="go-back-link"
+    >
+      <Icon
+        name="heroicons-outline:arrow-left"
+        class="icon"
+      />
       <span class="text">Go back</span>
     </NuxtLink>
   </nav>

diff --git a/components/docs/DocsAsideTree.vue b/components/docs/DocsAsideTree.vue
@@ -75,13 +75,24 @@ const hasNesting = computed(() => props.links.some((link: any) => link.children)
         'active': isActive(link),
       }"
     >
-      <button v-if="link.children" class="title-collapsible-button" @click="toggleCollapse(link)">
+      <button
+        v-if="link.children"
+        class="title-collapsible-button"
+        @click="toggleCollapse(link)"
+      >
         <span class="content">
-          <Icon v-if="link?.navigation?.icon || link.icon" :name="link?.navigation?.icon || link.icon" class="icon" />
+          <Icon
+            v-if="link?.navigation?.icon || link.icon"
+            :name="link?.navigation?.icon || link.icon"
+            class="icon"
+          />
           <span>{{ link?.navigation?.title || link.title || link._path }}</span>
         </span>
         <span>
-          <Icon :name="isCollapsed(link) ? 'lucide:chevrons-up-down' : 'lucide:chevrons-down-up'" class="collapsible-icon" />
+          <Icon
+            :name="isCollapsed(link) ? 'lucide:chevrons-up-down' : 'lucide:chevrons-down-up'"
+            class="collapsible-icon"
+          />
         </span>
       </button>
 
@@ -96,7 +107,11 @@ const hasNesting = computed(() => props.links.some((link: any) => link.children)
         }"
       >
         <span class="content">
-          <Icon v-if="link?.navigation?.icon || link.icon" :name="link?.navigation?.icon || link.icon" class="icon" />
+          <Icon
+            v-if="link?.navigation?.icon || link.icon"
+            :name="link?.navigation?.icon || link.icon"
+            class="icon"
+          />
           <span>{{ link?.navigation?.title || link.title || link._path }}</span>
         </span>
       </NuxtLink>

diff --git a/components/docs/DocsPageBottom.vue b/components/docs/DocsPageBottom.vue
@@ -4,10 +4,19 @@ const { config } = useDocus()
 </script>
 
 <template>
-  <div v-if="page" class="docs-page-bottom">
-    <div v-if="config?.github?.edit" class="edit-link">
+  <div
+    v-if="page"
+    class="docs-page-bottom"
+  >
+    <div
+      v-if="config?.github?.edit"
+      class="edit-link"
+    >
       <Icon name="uil:edit" />
-      <EditOnLink v-slot="{ url }" :page="page">
+      <EditOnLink
+        v-slot="{ url }"
+        :page="page"
+      >
         <ProseA :to="url">
           <span>
             Edit this page on GitHub

diff --git a/components/docs/DocsPageLayout.vue b/components/docs/DocsPageLayout.vue
@@ -63,14 +63,21 @@ onBeforeUnmount(() => {
     }"
   >
     <!-- Aside -->
-    <aside v-if="hasAside" ref="asideNav" class="aside-nav">
+    <aside
+      v-if="hasAside"
+      ref="asideNav"
+      class="aside-nav"
+    >
       <DocsAside class="app-aside" />
     </aside>
 
     <!-- Page Body -->
     <article class="page-body">
       <slot v-if="hasBody" />
-      <Alert v-else type="info">
+      <Alert
+        v-else
+        type="info"
+      >
         Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
       </Alert>
       <template v-if="hasBody && page && bottom">
@@ -80,14 +87,24 @@ onBeforeUnmount(() => {
     </article>
 
     <!-- TOC -->
-    <div v-if="hasToc" class="toc">
+    <div
+      v-if="hasToc"
+      class="toc"
+    >
       <div class="toc-wrapper">
         <button @click="isOpen = !isOpen">
           <span class="title">Table of Contents</span>
-          <Icon name="heroicons-outline:chevron-right" class="icon" :class="[isOpen && 'rotate']" />
+          <Icon
+            name="heroicons-outline:chevron-right"
+            class="icon"
+            :class="[isOpen && 'rotate']"
+          />
         </button>
 
-        <div class="docs-toc-wrapper" :class="[isOpen && 'opened']">
+        <div
+          class="docs-toc-wrapper"
+          :class="[isOpen && 'opened']"
+        >
           <DocsToc @move="isOpen = false" />
         </div>
       </div>