fix(ci/lint): resolve lint issues

.eslintrc.cjs

@@ -3,13 +3,24 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
+    '@vue/eslint-config-prettier/skip-formatting',
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
-  }
+    ecmaVersion: 'latest',
+  },
+  rules: {
+    'vue/no-unused-vars': 'warn',
+  },
+  overrides: [
+    {
+      files: ['src/views/**/*.vue'],
+      rules: {
+        'vue/multi-word-component-names': 'off',
+      },
+    },
+  ],
 }

src/App.vue

@@ -6,7 +6,7 @@ import { filter } from '@/router'
   <div class="wrapper">
     <div class="header">
       evie's pages
-      <span class="breadcrumb">{{ window.location.pathname }} </span>
+      <span class="breadcrumb">{{ $route.name }}</span>
     </div>
     <div class="nav">
       <router-link

src/components/BreakLine.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  for?: number
+}>()
+</script>
+
+<template>
+  <br v-for="_ in $props.for || 1" :key="_" />
+</template>

src/css/app.less

@@ -22,6 +22,14 @@
 
     justify-content: space-between;
 
+    &:not(.no-wrap) {
+      margin-top: 4px;
+    }
+
+    .no-wrap {
+      margin-bottom: 4px;
+    }
+
     .header,
     .footer {
       background-color: var(--background-color);
@@ -49,10 +57,15 @@
 
         font-weight: normal;
 
-        &:before {
-          color: darkgray;
+        max-width: 87.6em;
+
+        overflow: hidden;
+
+        text-overflow: ellipsis;
 
+        &:before {
           content: '> ';
+          color: darkgray;
         }
       }
     }

src/css/floating-vue.less

@@ -1,5 +1,11 @@
-.v-popper__popper .v-popper__inner {
-  background-color: var(--background-floating);
-  border: 4px solid var(--background-floating);
-  outline: 1px solid var(--note);
+.v-popper__popper {
+  .v-popper__inner {
+    background-color: var(--background-floating);
+    outline: 2px solid var(--note);
+    border-radius: 0;
+  }
+
+  .v-popper__arrow-outer {
+    border-color: var(--note);
+  }
 }

src/index.ts

@@ -3,19 +3,18 @@ import FloatingVue from 'floating-vue'
 
 import App from '@/App.vue'
 
+import BreakLine from '@/components/BreakLine.vue'
+
 import * as util from '@/util'
 import router from '@/router'
 
+import 'floating-vue/style.css'
 import '@/css/index.less'
 
 declare const window: CustomWindow
 
 const app = vue.createApp(App)
 
-app.use(router).use(FloatingVue)
-
-app.config.globalProperties.window = window
-
 window.__internals__ = {
   App,
   app,
@@ -26,4 +25,5 @@ window.__internals__ = {
   vue,
 }
 
-app.mount('#app')
+/* eslint-disable-next-line vue/multi-word-component-names */
+app.component('brk', BreakLine).use(router).use(FloatingVue).mount('#app')

src/util/createElement.ts

@@ -1,5 +1,3 @@
-import type { HtmlHTMLAttributes } from 'vue'
-
 export default (
   type: string,
   props?: Record<string, any>,

src/views/404.vue

@@ -1,11 +1,17 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const pathname = computed(() => window.location.pathname)
+</script>
+
 <template>
   <div class="highlight">something is wrong.</div>
-  <br />
+  <brk />
   <div>you tried to access a resource that does not exist.</div>
-  <br />
+  <brk />
   <div>did you make a typo?</div>
-  <br />
-  <div style="color: gray">&gt; could not resolve "{{ window.location.pathname }}"</div>
+  <brk />
+  <div style="color: gray">&gt; could not resolve "{{ pathname }}"</div>
 </template>
 
 <style scoped lang="less">

src/views/Home.vue

@@ -1,17 +1,17 @@
 <template>
   welcome to my github pages
-  <br v-for="_ in 3" />
+  <brk :for="3" />
   sorry i don't have much to say;
-  <br v-for="_ in 3" />
+  <brk :for="3" />
   even about myself or anything about this site in particular
-  <br v-for="_ in 2" />
+  <brk :for="2" />
   because it is nothing interesting
-  <br v-for="_ in 6" />
+  <brk :for="6" />
   this site has had 3 iterations so far;
-  <br v-for="_ in 2" />
+  <brk :for="2" />
   you are currently looking at the third iteration of this site; which is written in
   <a href="//v3.vuejs.org">[vue 3]</a>
-  <br v-for="_ in 3" />
+  <brk :for="3" />
   as for the previous two iterations:
   <ul>
     <li>
@@ -33,8 +33,8 @@
       >; which, probably, caused it to have a lot of janky wiring
     </li>
   </ul>
-  <br />
+  <brk />
   feel free to look and poke around with anything you see on this site!
-  <br v-for="_ in 2" />
+  <brk :for="2" />
   <div style="color: gray; font-size: 2px">window.__internals__</div>
 </template>

src/views/Projects/View.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive } from 'vue'
 
 import list from './list'
 
@@ -21,12 +21,16 @@ const state = reactive([false])
         {{ label.text }}
       </span>
 
-      <template v-else-if="label.length > 0" v-for="({ text, style, tooltip }, index) of label">
+      <template
+        v-else-if="label.length > 0"
+        v-for="({ text, style, tooltip }, index) of label"
+        :key="index"
+      >
         <span class="label" :style="style" v-tooltip="tooltip">{{ text }}</span
         ><template v-if="index !== label.length">{{ ' ' }}</template>
       </template>
     </template>
-    <br />
+    <brk />
     <ul class="meta" :style="`display: ${state[index] ? 'block' : 'none'}`">
       <li class="inner">
         {{ description || 'no description' }}
@@ -62,8 +66,6 @@ const state = reactive([false])
 
   margin-right: 8px;
 
-  user-select: none;
-
   &:hover {
     color: blanchedalmond;
 
@@ -76,8 +78,6 @@ const state = reactive([false])
 
   font-size: 12px;
 
-  user-select: none;
-
   &:before {
     color: darkgray;
 

vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite'
 
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import { plugin as markdown, Mode } from 'vite-plugin-markdown'
+// import { plugin as markdown, Mode } from 'vite-plugin-markdown'
 
 export default defineConfig({
   plugins: [