chore: eslint & prettier

viandwi24 · Apr 12, 2023 · 78dd478 · 78dd478
1 parent 14fa9da
commit 78dd478
Show file tree

Hide file tree

Showing 19 changed files with 1,480 additions and 186 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+.nuxt
+.output
+coverage
+components.d.ts
+nuxt.d.ts
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,12 @@
+{
+  "root": true,
+  "extends": [
+    "@nuxtjs/eslint-config-typescript",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "vue/multi-word-component-names": "off",
+    "vue/no-multiple-template-root": "off",
+    "@typescript-eslint/no-unused-vars": "off"
+  }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/README.md b/README.md
@@ -31,6 +31,6 @@ a Nuxt 3 starter template with a lot of useful features, integrated with Tailwin
 - [x] Adding Pinia
   - [x] auto import "defineStore" as "definePiniaStore"
   - [x] auto import folder "stores"
+- [x] Eslint & Prettier
 - [ ] 🌙 Switch Theme (light, dark, system, realtime)
 - [ ] 🇮🇩 Language Switcher
-- [ ] Eslint & Prettier
diff --git a/app.config.ts b/app.config.ts
@@ -44,7 +44,7 @@ export interface NuxtAwesomeAppConfig {
       /** author github link */
       github?: string
       /** author medium link */
-      medium?: string,
+      medium?: string
       /** author website link */
       website?: string
     }
@@ -63,13 +63,13 @@ export default defineAppConfig({
     project: {
       links: {
         github: 'https://github.com/viandwi24/nuxt3-awesome-starter',
-      }
+      },
     },
     layout: {
       page: {
         navbar: {
-          menus: []
-        }
+          menus: [],
+        },
       },
       footer: {
         year: 2022,
@@ -83,5 +83,5 @@ export default defineAppConfig({
         website: 'https://viandwi24.site',
       },
     },
-  } as NuxtAwesomeAppConfig
+  } as NuxtAwesomeAppConfig,
 })
diff --git a/app/app.config.ts b/app/app.config.ts
@@ -4,7 +4,7 @@ export default defineAppConfig({
     project: {
       links: {
         github: 'https://github.com/viandwi24/nuxt3-awesome-starter',
-      }
+      },
     },
     layout: {
       page: {
@@ -14,8 +14,8 @@ export default defineAppConfig({
             { type: 'link', title: 'Post', to: { name: 'post' } },
             { type: 'link', title: 'Test', to: { name: 'test' } },
             { type: 'button', title: 'Setting', to: { name: 'setting' } },
-          ]
-        }
+          ],
+        },
       },
       footer: {
         year: 2022,
@@ -29,5 +29,5 @@ export default defineAppConfig({
         website: 'https://viandwi24.site',
       },
     },
-  }
+  },
 })
diff --git a/app/nuxt.config.ts b/app/nuxt.config.ts
@@ -3,5 +3,5 @@ export default defineNuxtConfig({
   modules: [
     // for debugging on development
     // '@nuxt/devtools'
-  ]
+  ],
 })
diff --git a/app/pages/setting.vue b/app/pages/setting.vue
@@ -39,10 +39,11 @@ const validate = async () => {
     const response = await fetch(
       `https://api.github.com/users/${username.value}`
     )
-    if (response.status !== 200)
+    if (response.status !== 200) {
       throw new Error(
         `error when fetching username : ${response.statusText} (${response.status})`
       )
+    }
     const data = (await response.json()) as {
       name: string
       id: string
@@ -66,8 +67,15 @@ const validate = async () => {
           class="flex flex-col md:flex-row md:space-x-4"
           :vertical="screen.higherThan(Size.MEDIUM)"
         >
-          <HeadlessTabList class="w-full md:w-1/6 flex md:flex-col rounded-lg mb-2">
-            <HeadlessTab v-for="(item, i) in ['General', 'Protection', 'Advanced']" :key="i" v-slot="{ selected }" as="template">
+          <HeadlessTabList
+            class="w-full md:w-1/6 flex md:flex-col rounded-lg mb-2"
+          >
+            <HeadlessTab
+              v-for="(item, i) in ['General', 'Protection', 'Advanced']"
+              :key="i"
+              v-slot="{ selected }"
+              as="template"
+            >
               <button
                 :class="[
                   'md:w-full text-left px-3 rounded py-2.5 text-sm leading-5 transition-all hover:bg-gray-200 hover:text-slate-900 dark:hover:bg-white/[0.12] dark:hover:text-white',
@@ -80,124 +88,137 @@ const validate = async () => {
               </button>
             </HeadlessTab>
           </HeadlessTabList>
-            <HeadlessTabPanels class="flex-1">
-              <!-- general -->
-              <HeadlessTabPanel>
-                <AwesomeCard class="mb-4">
-                  <AwesomeCardContent>
-                    <AwesomeCardTitle
-                      class="capitalize"
-                      text="validate github profile"
-                    />
-                    <p class="mb-2">
-                      type your github username and click the button to validate.
-                    </p>
-                    <div class="flex">
-                      <AwesomeFormTextInput v-model="username" class="w-full md:w-1/3">
-                        <template #prefix-disabled>
-                          <span class="flex-1 px-4 py-2">github.com/</span>
-                        </template>
-                      </AwesomeFormTextInput>
-                    </div>
-                  </AwesomeCardContent>
-                  <AwesomeCardFooter
-                    class="flex flex-col space-y-2 md:space-y md:flex-row items-center md:justify-between"
-                  >
-                    <p>
-                      Learn more about
-                      <!-- <Anchor
-                        class="underline font-bold capitalize"
-                        text="github users api"
-                        href="https://docs.github.com/en/rest/users/users#get-a-user"
-                      /> -->
-                    </p>
-                    <Button
-                      class="capitalize"
-                      size="sm"
-                      type="opposite"
-                      text="validate"
-                      @click="validate"
-                    />
-                  </AwesomeCardFooter>
-                </AwesomeCard>
-              </HeadlessTabPanel>
-              <!-- protection -->
-              <HeadlessTabPanel>
-                <AwesomeCard
-                  :class="{
-                    'mb-4': true,
-                    'border-red-500 dark:border-red-500': !enableSpamProtection,
-                  }"
+          <HeadlessTabPanels class="flex-1">
+            <!-- general -->
+            <HeadlessTabPanel>
+              <AwesomeCard class="mb-6">
+                <AwesomeCardContent>
+                  <AwesomeCardTitle
+                    class="capitalize"
+                    text="validate github profile"
+                  />
+                  <p class="mb-2">
+                    type your github username and click the button to validate.
+                  </p>
+                  <div class="flex">
+                    <AwesomeFormTextInput
+                      v-model="username"
+                      class="w-full md:w-1/3"
+                    >
+                      <template #prefix-disabled>
+                        <span class="flex-1 px-4 py-2">github.com/</span>
+                      </template>
+                    </AwesomeFormTextInput>
+                  </div>
+                </AwesomeCardContent>
+                <AwesomeCardFooter
+                  class="flex flex-col space-y-2 md:space-y md:flex-row items-center md:justify-between"
                 >
-                  <AwesomeCardContent>
-                    <AwesomeCardTitle
-                      class="capitalize"
-                      text="spam protection"
+                  <p>
+                    Learn more about
+                    <AwesomeLink
+                      class="underline font-bold capitalize"
+                      text="github users api"
+                      href="https://docs.github.com/en/rest/users/users#get-a-user"
                     />
-                    <p class="mb-2">
-                      toggle enable to remove the red border
-                    </p>
-                    <div class="flex">
-                      <AwesomeFormSwitch v-model="enableSpamProtection">
-                        <span class="capitalize">{{
-                          enableSpamProtection
-                            ? 'enabled'
-                            : 'disabled'
-                        }}</span>
-                      </AwesomeFormSwitch>
-                    </div>
-                  </AwesomeCardContent>
-                  <AwesomeCardFooter class="justify-between">
-                    <p>
-                      if enable we will secure your comments from spam
-                    </p>
-                  </AwesomeCardFooter>
-                </AwesomeCard>
-              </HeadlessTabPanel>
-              <!-- advanced -->
-              <HeadlessTabPanel>
-                <AwesomeCard class="mb-4">
-                  <AwesomeCardContent>
-                    <AwesomeCardTitle
-                      class="capitalize"
-                      text="enable advanced settings"
-                    />
-                    <p class="mb-2">
-                      you can enable advanced settings to change the settings
-                    </p>
-                    <div class="flex">
-                      <AwesomeFormSwitch v-model="enableAdvancedSetting">
-                        <span class="capitalize">{{
-                          enableAdvancedSetting
-                            ? 'enabled'
-                            : 'disabled'
-                        }}</span>
-                      </AwesomeFormSwitch>
-                    </div>
-                  </AwesomeCardContent>
-                </AwesomeCard>
-                <AwesomeCard class="mb-4" :disabled="!enableAdvancedSetting">
-                  <AwesomeCardContent>
-                    <AwesomeCardTitle
-                      class="capitalize"
-                      text="directory listing"
-                    />
-                    <p class="mb-2">
-                      if no index file is present within a directory, the directory contents will be displayed.
-                    </p>
-                    <div class="flex">
-                      <AwesomeFormSwitch v-model="enableDirList" on>
-                        <span class="capitalize">{{
-                          enableDirList
-                            ? 'enabled'
-                            : 'disabled'
-                        }}</span>
-                      </AwesomeFormSwitch>
-                    </div>
-                  </AwesomeCardContent>
-                </AwesomeCard>
-              </HeadlessTabPanel>
-            </HeadlessTabPanels>
+                  </p>
+                  <AwesomeButton
+                    class="capitalize"
+                    size="sm"
+                    type="opposite"
+                    text="validate"
+                    @click="validate"
+                  />
+                </AwesomeCardFooter>
+              </AwesomeCard>
+              <AwesomeCard class="mb-4">
+                <AwesomeCardContent>
+                  <AwesomeCardTitle class="capitalize" text="bot id" />
+                  <p class="mb-2">This is your bot ID.</p>
+                  <div class="flex">
+                    <AwesomeFormTextInput v-model="id" class="w-full md:w-1/3">
+                      <template #suffix>
+                        <AwesomeButton
+                          type="opposite"
+                          class="flex space-x-1 border-none"
+                        >
+                          <Icon name="ic:baseline-content-copy" />
+                          <span>Copy</span>
+                        </AwesomeButton>
+                      </template>
+                    </AwesomeFormTextInput>
+                  </div>
+                </AwesomeCardContent>
+                <AwesomeCardFooter class="justify-between">
+                  <p>Used when interacting with the bot.</p>
+                </AwesomeCardFooter>
+              </AwesomeCard>
+            </HeadlessTabPanel>
+            <!-- protection -->
+            <HeadlessTabPanel>
+              <AwesomeCard
+                :class="{
+                  'mb-4': true,
+                  'border-red-500 dark:border-red-500': !enableSpamProtection,
+                }"
+              >
+                <AwesomeCardContent>
+                  <AwesomeCardTitle class="capitalize" text="spam protection" />
+                  <p class="mb-2">toggle enable to remove the red border</p>
+                  <div class="flex">
+                    <AwesomeFormSwitch v-model="enableSpamProtection">
+                      <span class="capitalize">{{
+                        enableSpamProtection ? 'enabled' : 'disabled'
+                      }}</span>
+                    </AwesomeFormSwitch>
+                  </div>
+                </AwesomeCardContent>
+                <AwesomeCardFooter class="justify-between">
+                  <p>if enable we will secure your comments from spam</p>
+                </AwesomeCardFooter>
+              </AwesomeCard>
+            </HeadlessTabPanel>
+            <!-- advanced -->
+            <HeadlessTabPanel>
+              <AwesomeCard class="mb-6">
+                <AwesomeCardContent>
+                  <AwesomeCardTitle
+                    class="capitalize"
+                    text="enable advanced settings"
+                  />
+                  <p class="mb-2">
+                    you can enable advanced settings to change the settings
+                  </p>
+                  <div class="flex">
+                    <AwesomeFormSwitch v-model="enableAdvancedSetting">
+                      <span class="capitalize">{{
+                        enableAdvancedSetting ? 'enabled' : 'disabled'
+                      }}</span>
+                    </AwesomeFormSwitch>
+                  </div>
+                </AwesomeCardContent>
+              </AwesomeCard>
+              <AwesomeCard class="mb-6" :disabled="!enableAdvancedSetting">
+                <AwesomeCardContent>
+                  <AwesomeCardTitle
+                    class="capitalize"
+                    text="directory listing"
+                  />
+                  <p class="mb-2">
+                    if no index file is present within a directory, the
+                    directory contents will be displayed.
+                  </p>
+                  <div class="flex">
+                    <AwesomeFormSwitch v-model="enableDirList" on>
+                      <span class="capitalize">{{
+                        enableDirList ? 'enabled' : 'disabled'
+                      }}</span>
+                    </AwesomeFormSwitch>
+                  </div>
+                </AwesomeCardContent>
+              </AwesomeCard>
+            </HeadlessTabPanel>
+          </HeadlessTabPanels>
         </HeadlessTabGroup>
       </div>
     </LayoutPageSection>