Merge pull request #5 from AltriusRS:dev

Dev

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@nuxtjs/eslint-config-typescript'
+  ]
+}

.github/workflows/lint.yml

@@ -0,0 +1,11 @@
+name: Lint
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install modules
+        run: npm ci
+      - name: Run ESLint
+        run: npx eslint . --ext .js,.jsx,.ts,.tsx

app.vue

@@ -1,3 +1,11 @@
+<template>
+  <div>
+    <Header />
+    <NuxtPage />
+    <Footer />
+  </div>
+</template>
+
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
@@ -13,10 +21,3 @@ body {
   overflow-x: hidden;
 }
 </style>
-
-
-<template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
-</template>

components/Accordion.vue

@@ -1,3 +1,58 @@
+<script setup>
+const props = defineProps({
+  show: Boolean
+})
+const showAccordion = ref(false)
+
+function toggle () {
+  showAccordion.value = !showAccordion.value
+}
+
+useAsyncData(() => {
+  showAccordion.value = props.show
+}, {
+  watch: [props]
+})
+
+function beforeEnter (el) {
+  el.style.height = '0'
+}
+
+function enter (el) {
+  el.style.height = el.scrollHeight + 'px'
+}
+
+function beforeLeave (el) {
+  el.style.height = el.scrollHeight + 'px'
+}
+
+function leave (el) {
+  el.style.height = '0'
+};
+</script>
+<template>
+  <div class="accordion">
+    <div class="header" @click="toggle">
+      <slot name="header">
+        HINT
+      </slot>
+      <i class="fa fa-2x fa-angle-down header-icon" :class="{ rotate: showAccordion }" />
+    </div>
+    <transition
+      name="accordion"
+      @before-enter="beforeEnter"
+      @enter="enter"
+      @before-leave="beforeLeave"
+      @leave="leave"
+    >
+      <div v-show="showAccordion" class="body">
+        <div class="body-inner">
+          <slot />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
 <style>
 .accordion {
     margin: 0 0 20px;
@@ -73,49 +128,3 @@
     transition-duration: 0.3s;
 }
 </style>
-<script setup>
-const props = defineProps(['show']);
-const show = ref(false);
-
-function toggle() {
-    show.value = !show.value;
-}
-
-useAsyncData(() => {
-    show.value = props.show;
-}, {
-    watch: [props]
-})
-
-function beforeEnter(el) {
-    el.style.height = '0';
-}
-
-function enter(el) {
-    el.style.height = el.scrollHeight + 'px';
-}
-
-function beforeLeave(el) {
-    el.style.height = el.scrollHeight + 'px';
-}
-
-function leave(el) {
-    el.style.height = '0';
-};
-</script>
-<template>
-    <div class="accordion">
-        <div class="header" v-on:click="toggle">
-            <slot name="header">HINT</slot>
-            <i class="fa fa-2x fa-angle-down header-icon" v-bind:class="{ rotate: show }"></i>
-        </div>
-        <transition name="accordion" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:before-leave="beforeLeave"
-            v-on:leave="leave">
-            <div class="body" v-show="show">
-                <div class="body-inner">
-                    <slot></slot>
-                </div>
-            </div>
-        </transition>
-    </div>
-</template>

components/Banner.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import style from "./Banner.module.css";
-
-
+import style from './Banner.module.css'
 
 export interface Props {
     pid?: string,
@@ -11,27 +9,27 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    fixed: false
-});
+  fixed: false
+})
 
-let show = ref(true);
+let show = ref(true)
 
 if (props.pid) {
-    show = useState(`show-banner-${props.pid}`, () => true);
+  show = useState(`show-banner-${props.pid}`, () => true)
 }
 
-function close() {
-    show.value = false;
+function close () {
+  show.value = false
 }
 
 </script>
 
-
-
 <template>
-    <div :class="[style.banner, !show ? style.hide : undefined]"
-        :style="{ backgroundColor: props.bg || '#2a2a2a', color: props.fg || 'orange' }">
-        <slot />
-        <Icon v-if="!props.fixed" name="mdi:close-thick" @click="close()" />
-    </div>
-</template>
+  <div
+    :class="[style.banner, !show ? style.hide : undefined]"
+    :style="{ backgroundColor: props.bg || '#2a2a2a', color: props.fg || 'orange' }"
+  >
+    <slot />
+    <Icon v-if="!props.fixed" name="mdi:close-thick" @click="close()" />
+  </div>
+</template>

components/Footer.vue

@@ -1,42 +1,45 @@
 <script async setup>
-import style from "./Footer.module.css";
+import style from './Footer.module.css'
 
-let sb = useSupabaseClient();
-let { data, error } = await useAsyncData(async () => {
+const sb = useSupabaseClient()
+const { data, error } = await useAsyncData(async () => {
+  const e = (await sb.from('episodes').select('*', { count: 'exact', head: true })).count
+  const c = (await sb.from('cast').select('*', { count: 'exact', head: true })).count
+  const t = (await sb.from('topics').select('*', { count: 'exact', head: true })).count
+  const co = (await sb.from('contributors').select('*', { count: 'exact', head: true })).count
 
-    let e = (await sb.from('episodes').select('*', { count: 'exact', head: true })).count;
-    let c = (await sb.from('cast').select('*', { count: 'exact', head: true })).count;
-    let t = (await sb.from('topics').select('*', { count: 'exact', head: true })).count;
-    let co = (await sb.from('contributors').select('*', { count: 'exact', head: true })).count;
-
-    return {
-        episodes: e,
-        cast: c,
-        topics: t,
-        contributors: co
-    }
+  return {
+    episodes: e,
+    cast: c,
+    topics: t,
+    contributors: co
+  }
 })
 </script>
 <template>
-    <div :class="style.footer">
-        <p v-if="data">
-            This database contains {{ data.topics.toLocaleString() }} topics, covered over 
-            {{ data.episodes.toLocaleString() }} episodes of The WAN Show featuring 
-            {{ data.cast.toLocaleString() }} people.
+  <div :class="style.footer">
+    <p v-if="data">
+      This database contains {{ data.topics.toLocaleString() }} topics, covered over
+      {{ data.episodes.toLocaleString() }} episodes of The WAN Show featuring
+      {{ data.cast.toLocaleString() }} people.
 
-            It was compiled thanks to the tireless work of {{ data.contributors.toLocaleString() }} people.
-            Thank you to the following legends who helped make this possible (knowingly or not)
-            <ul>
-                <li>Noki1119 - "The Timestamp Guy" - For creating timestamp comments across over 100 episodes of the show, in real time</li>
-                <li>kuyans3889 - Provided helpful timestamps for early WAN Show VODs, including some before it was called The WAN Show</li>
-            </ul>
-        </p>
-        <p v-else-if="error">{{error}}</p>
-        <p v-else>Loading facts</p>
-        <span class="style.copyright">
-            The WAN DB is not affiliated with Linus Media Group or any of its employees, partners, or otherwise.
-            It is solely owned and operated as a community project meant to help provide a handy index of everything discussed.
-            The copyright of the content featured on this website belongs solely to its original creators.
-        </span>
-    </div>
-</template>
+      It was compiled thanks to the tireless work of {{ data.contributors.toLocaleString() }} people.
+      Thank you to the following legends who helped make this possible (knowingly or not)
+      <ul>
+        <li>Noki1119 - "The Timestamp Guy" - For creating timestamp comments across over 100 episodes of the show, in real time</li>
+        <li>kuyans3889 - Provided helpful timestamps for early WAN Show VODs, including some before it was called The WAN Show</li>
+      </ul>
+    </p>
+    <p v-else-if="error">
+      {{ error }}
+    </p>
+    <p v-else>
+      Loading facts
+    </p>
+    <span class="style.copyright">
+      The WAN DB is not affiliated with Linus Media Group or any of its employees, partners, or otherwise.
+      It is solely owned and operated as a community project meant to help provide a handy index of everything discussed.
+      The copyright of the content featured on this website belongs solely to its original creators.
+    </span>
+  </div>
+</template>

components/Sidenav.vue

@@ -1,13 +1,21 @@
 <script setup>
-let r = useRoute();
+const r = useRoute()
 
+// const { data } = await useAsyncData(() => {
 
-let { data } = await useAsyncData(() => {
-
-})
-
+// })
 
 </script>
+<template>
+  <div class="sidenav">
+    <h1>My Profile</h1>
+    <hr>
+    <a href="/profile" :class="[r.path === '/profile' ? 'active' : undefined]">Profile</a>
+    <a href="/profile/settings" :class="[r.path === '/profile/settings' ? 'active' : undefined]">Settings</a>
+    <a href="/profile/data" :class="[r.path === '/profile/data' ? 'active' : undefined]">My Data</a>
+  </div>
+</template>
+
 <style scoped>
 .sidenav {
     grid-area: sidenav;
@@ -54,13 +62,3 @@ let { data } = await useAsyncData(() => {
     background: #3d3c3d;
 }
 </style>
-
-<template>
-    <div class="sidenav">
-        <h1>My Profile</h1>
-        <hr />
-        <a href="/profile" :class="[r.path === '/profile' ? 'active' : undefined]">Profile</a>
-        <a href="/profile/settings" :class="[r.path === '/profile/settings' ? 'active' : undefined]">Settings</a>
-        <a href="/profile/data" :class="[r.path === '/profile/data' ? 'active' : undefined]">My Data</a>
-    </div>
-</template>