From 8cbea15b2d3db4d89085af964f4c9f9c8e8d40d7 Mon Sep 17 00:00:00 2001
From: Gabe Cook <gabe565@gmail.com>
Date: Sun, 22 Dec 2024 02:13:15 -0600
Subject: [PATCH] style: Enforce kebab-cased components

---
 eslint.config.js                                            | 1 +
 src/App.vue                                                 | 6 +++---
 .../NavButtons/{GitHubButton.vue => GithubButton.vue}       | 0
 src/layouts/ConvertersPage.vue                              | 4 ++--
 src/layouts/PageLayout.vue                                  | 4 ++--
 src/views/AboutPage.vue                                     | 6 +++---
 src/views/HomePage.vue                                      | 4 ++--
 src/views/InteractiveConverter.vue                          | 4 ++--
 src/views/NotFoundPage.vue                                  | 4 ++--
 src/views/NumberConverter.vue                               | 4 ++--
 src/views/WordConverter.vue                                 | 4 ++--
 11 files changed, 21 insertions(+), 20 deletions(-)
 rename src/components/NavButtons/{GitHubButton.vue => GithubButton.vue} (100%)

diff --git a/eslint.config.js b/eslint.config.js
index 12cabb78..a912518c 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -19,6 +19,7 @@ export default [
     rules: {
       "no-unused-vars": ["error", { varsIgnorePattern: "^_", argsIgnorePattern: "^_" }],
       "vue/no-template-shadow": "off",
+      "vue/component-name-in-template-casing": ["error", "kebab-case"],
     },
   },
 ];
diff --git a/src/App.vue b/src/App.vue
index 8dbfba4f..57cd1962 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,7 @@
 
       <template #append>
         <div class="d-flex overflow-hidden">
-          <GitHubButton />
+          <github-button />
         </div>
       </template>
     </v-navigation-drawer>
@@ -48,7 +48,7 @@
       </template>
     </v-bottom-navigation>
 
-    <UpdateSnackbar />
+    <update-snackbar />
 
     <v-main>
       <span id="content" class="anchor" />
@@ -67,7 +67,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
 import { computed, onBeforeMount } from "vue";
 import UpdateSnackbar from "./components/UpdateSnackbar.vue";
-import GitHubButton from "./components/NavButtons/GitHubButton.vue";
+import GithubButton from "./components/NavButtons/GithubButton.vue";
 
 const { smAndDown: isMobile } = useDisplay();
 
diff --git a/src/components/NavButtons/GitHubButton.vue b/src/components/NavButtons/GithubButton.vue
similarity index 100%
rename from src/components/NavButtons/GitHubButton.vue
rename to src/components/NavButtons/GithubButton.vue
diff --git a/src/layouts/ConvertersPage.vue b/src/layouts/ConvertersPage.vue
index d7ec9a7b..0244289d 100644
--- a/src/layouts/ConvertersPage.vue
+++ b/src/layouts/ConvertersPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageLayout>
+  <page-layout>
     <v-row v-if="error">
       <v-col>
         <v-alert type="error">{{ error }}</v-alert>
@@ -11,7 +11,7 @@
         <slot />
       </v-col>
     </v-row>
-  </PageLayout>
+  </page-layout>
 </template>
 
 <script setup>
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index bb5fcef3..90e33451 100644
--- a/src/layouts/PageLayout.vue
+++ b/src/layouts/PageLayout.vue
@@ -6,7 +6,7 @@
       </v-btn>
     </template>
     <template #append>
-      <GitHubButton v-if="isMobile" />
+      <github-button v-if="isMobile" />
     </template>
   </v-app-bar>
 
@@ -27,7 +27,7 @@
 <script setup>
 import AppIcon from "~icons/mnemonic-ninja/logo";
 import { useDisplay } from "vuetify";
-import GitHubButton from "../components/NavButtons/GitHubButton.vue";
+import GithubButton from "../components/NavButtons/GithubButton.vue";
 
 const { smAndDown: isMobile } = useDisplay();
 </script>
diff --git a/src/views/AboutPage.vue b/src/views/AboutPage.vue
index a2e49d67..cc599364 100644
--- a/src/views/AboutPage.vue
+++ b/src/views/AboutPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageLayout>
+  <page-layout>
     <template #description>
       The
       <a href="https://en.wikipedia.org/wiki/Mnemonic_major_system" target="_blank"
@@ -29,7 +29,7 @@
             >Wikipedia page</a
           >, here are the numbers and their corresponding sounds:
         </p>
-        <RulesTable />
+        <rules-table />
       </v-col>
     </v-row>
     <v-row tag="section">
@@ -126,7 +126,7 @@
         </p>
       </v-col>
     </v-row>
-  </PageLayout>
+  </page-layout>
 </template>
 
 <script setup>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 9d3292c2..146e0ffc 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageLayout>
+  <page-layout>
     <template #description>
       The
       <a href="https://en.wikipedia.org/wiki/Mnemonic_major_system" target="_blank"
@@ -36,7 +36,7 @@
         />
       </v-col>
     </v-row>
-  </PageLayout>
+  </page-layout>
 </template>
 
 <script setup>
diff --git a/src/views/InteractiveConverter.vue b/src/views/InteractiveConverter.vue
index a1f862cd..1963cc5a 100644
--- a/src/views/InteractiveConverter.vue
+++ b/src/views/InteractiveConverter.vue
@@ -1,5 +1,5 @@
 <template>
-  <ConvertersPage>
+  <converters-page>
     <v-form v-model="valid" @submit.prevent>
       <v-container>
         <v-row>
@@ -52,7 +52,7 @@
         </v-row>
       </v-container>
     </v-form>
-  </ConvertersPage>
+  </converters-page>
 </template>
 
 <script setup>
diff --git a/src/views/NotFoundPage.vue b/src/views/NotFoundPage.vue
index cab83b97..37333d1e 100644
--- a/src/views/NotFoundPage.vue
+++ b/src/views/NotFoundPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <PageLayout>
+  <page-layout>
     <template #description> Oh no! The requested file could not be located. </template>
-  </PageLayout>
+  </page-layout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/NumberConverter.vue b/src/views/NumberConverter.vue
index dad950e3..c77a071c 100644
--- a/src/views/NumberConverter.vue
+++ b/src/views/NumberConverter.vue
@@ -1,5 +1,5 @@
 <template>
-  <ConvertersPage>
+  <converters-page>
     <v-form v-model="valid">
       <v-container>
         <v-row>
@@ -56,7 +56,7 @@
         </v-row>
       </v-container>
     </v-form>
-  </ConvertersPage>
+  </converters-page>
 </template>
 
 <script setup>
diff --git a/src/views/WordConverter.vue b/src/views/WordConverter.vue
index 54c621c5..0ad8fdc0 100644
--- a/src/views/WordConverter.vue
+++ b/src/views/WordConverter.vue
@@ -1,5 +1,5 @@
 <template>
-  <ConvertersPage>
+  <converters-page>
     <v-form v-model="valid">
       <v-container>
         <v-row>
@@ -61,7 +61,7 @@
         </v-row>
       </v-container>
     </v-form>
-  </ConvertersPage>
+  </converters-page>
 </template>
 
 <script setup>