feat: add eslint

.github/workflows/lint.yaml

@@ -0,0 +1,58 @@
+name: Lint
+
+permissions: read-all
+
+on:
+    pull_request:
+        branches:
+            - main
+    push:
+        branches:
+            - main
+
+jobs:
+    lint:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: read
+            pull-requests: write
+            checks: write
+        strategy:
+            matrix:
+                node-version:
+                    - "18"
+                    - "20"
+                    - "lts/*"
+                    - "latest"
+        steps:
+            - uses: actions/checkout@v2
+
+            - name: Get PNPM version from package.json
+              id: pnpm-version
+              shell: bash
+              run: echo "pnpm_version=$(node -p "require('./package.json').engines.pnpm")" >> "$GITHUB_OUTPUT"
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                  version: ${{ steps.pnpm-version.outputs.pnpm_version }}
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: "pnpm"
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Gather lint results
+              run: pnpm run lint:report
+              continue-on-error: true
+
+            - name: Upload lint results
+              uses: ataylorme/eslint-annotate-action@v3
+              with:
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                report-json: "eslint_report.json"

components/NavBar.vue

@@ -9,13 +9,13 @@
                 </NuxtLink>
                 <!-- Mobile Hamburger -->
                 <button
+                    v-if="isMobile && !isMenuOpen"
                     data-collapse-toggle="navbar-default"
                     type="button"
                     class="navbar-burger in1line-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-center text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                     aria-controls="navbar-default"
                     aria-expanded="false"
                     @click="toggleMenu"
-                    v-if="isMobile && !isMenuOpen"
                 >
                     <span class="sr-only">Open main menu</span>
                     <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
@@ -25,7 +25,7 @@
             </div>
 
             <!--Full size menu-->
-            <div v-if="mounted && !isMobile" class="w-full md:block md:w-auto" id="navbar-default">
+            <div v-if="mounted && !isMobile" id="navbar-default" class="w-full md:block md:w-auto">
                 <ul
                     class="mt-4 flex flex-col rounded-lg border border-gray-100 p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:border-0 md:p-0 dark:border-gray-700"
                 >
@@ -82,7 +82,7 @@
                 </ul>
             </div>
             <!--Mobile menu-->
-            <div class="navbar-menu relative z-50" v-if="isMenuOpen">
+            <div v-if="isMenuOpen" class="navbar-menu relative z-50">
                 <div class="navbar-backdrop fixed inset-0 bg-[#666666] opacity-25 dark:bg-[#111111]"></div>
                 <nav class="fixed bottom-0 left-0 top-0 flex w-5/6 max-w-sm flex-col overflow-y-auto bg-[#666666] px-6 py-6 dark:bg-[#111111]">
                     <div class="mb-8 ml-2 flex items-center">

components/footer/Footer.vue

@@ -56,7 +56,7 @@ const footer_categories = [
 <template>
     <div class="mx-auto flex max-w-screen-xl flex-col divide-y divide-neutral-500">
         <div class="flex max-w-screen-xl flex-row justify-between max-md:flex-col">
-            <FooterCategory v-for="category in footer_categories" :title="category.title" :links="category.links"></FooterCategory>
+            <FooterCategory v-for="category in footer_categories" :key="category.title" :title="category.title" :links="category.links"></FooterCategory>
         </div>
         <div class="flex flex-row justify-between py-8 max-md:flex-col max-md:py-4">
             <img src="../../assets/logo.png" alt="Full Logo" class="h-auto w-1/6 max-xl:ml-4 max-md:mx-auto max-md:my-4 max-md:w-2/3" />

components/footer/FooterCategory.vue

@@ -7,7 +7,7 @@ interface Link {
     title: string;
 }
 
-const props = defineProps({
+defineProps({
     title: {
         type: String,
         required: true,

components/highlight/HighlightCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-const props = defineProps({
+defineProps({
     icon: {
         type: String,
         required: true,

components/highlight/HighlightSection.vue

@@ -23,7 +23,7 @@ const cards = [
 ];
 
 const loopCards = computed(() => {
-    let localcards = [];
+    const localcards = [];
     for (let i = 1; i < cards.length - 1; i++) {
         localcards.push(cards[i]);
     }
@@ -39,7 +39,14 @@ const loopCards = computed(() => {
         </div>
         <div class="mx-auto my-8 flex max-w-screen-xl flex-row max-lg:flex-col">
             <HighlightCard class="my-2 mr-2 flex-1 max-lg:ml-2" :icon="cards[0].icon" :title="cards[0].title" :text="cards[0].text"></HighlightCard>
-            <HighlightCard v-for="card in loopCards" class="mx-2 my-2 flex-1" :icon="card.icon" :title="card.title" :text="card.text"></HighlightCard>
+            <HighlightCard
+                v-for="card in loopCards"
+                :key="card.title"
+                class="mx-2 my-2 flex-1"
+                :icon="card.icon"
+                :title="card.title"
+                :text="card.text"
+            ></HighlightCard>
             <HighlightCard
                 class="my-2 ml-2 flex-1 max-lg:mr-2"
                 :icon="cards[cards.length - 1].icon"

components/team/ContributorsSection.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+
 interface Contributor {
     login: string;
     id: number;
@@ -21,23 +23,36 @@ interface Contributor {
     contributions: number;
 }
 
-let contributors: Contributor[];
-let { data } = await useFetch<Contributor[]>("https://api.github.com/repos/Mockbukkit/Mockbukkit/contributors");
+const contributors = ref<Contributor[]>([]);
+const filterOut = ["seeseemelk", "TheBusyBiscuit", "thelooter", "Insprill", "Thorinwasher", "4everTheOne", "renovate[bot]", "renovate-bot"];
 
-let filterOut = ["seeseemelk", "TheBusyBiscuit", "thelooter", "Insprill", "Thorinwasher", "4everTheOne", "renovate[bot]", "renovate-bot"];
+onMounted(async () => {
+    let page = 1;
+    let allContributors: Contributor[] = [];
+    const perPage = 100;
+    let morePagesAvailable = true;
 
-if (data.value != null) {
-    contributors = data.value;
-    contributors.sort((a, b) => b.contributions - a.contributions);
-    contributors = contributors.filter((contributor) => !filterOut.includes(contributor.login));
-}
+    const uri = "https://api.github.com/repos/Mockbukkit/Mockbukkit/contributors";
+    while (morePagesAvailable) {
+        const { data } = await useFetch<Contributor[]>(`${uri}?per_page=${perPage}&page=${page}`);
+        if (data.value != null && data.value.length > 0) {
+            allContributors = allContributors.concat(data.value);
+            page++;
+        } else {
+            morePagesAvailable = false;
+        }
+    }
+
+    allContributors.sort((a, b) => b.contributions - a.contributions);
+    contributors.value = allContributors.filter((contributor) => !filterOut.includes(contributor.login));
+});
 </script>
 
 <template>
     <div class="bg-neutral-400 p-4 dark:bg-neutral-800">
         <h2 class="py-4 text-center text-3xl font-bold dark:text-white">Contributors</h2>
         <div class="mx-auto grid max-w-screen-xl gap-4 pb-8 pt-4 max-md:grid-cols-3 lg:grid-cols-8">
-            <a v-for="contributor in contributors" :href="contributor.html_url" target="_blank" rel="noopener noreferrer">
+            <a v-for="contributor in contributors" :key="contributor.node_id" :href="contributor.html_url" target="_blank" rel="noopener noreferrer">
                 <img
                     :src="contributor.avatar_url"
                     class="mx-auto h-auto w-20 max-w-screen-xl rounded-full shadow-xl transition duration-200 ease-in-out hover:scale-105"

components/team/TeamCard.vue

@@ -1,11 +1,23 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-const props = defineProps({
-    name: String,
-    role: String,
-    image: String,
-    github: String,
+defineProps({
+    name: {
+        type: String,
+        required: true,
+    },
+    role: {
+        type: String,
+        required: true,
+    },
+    image: {
+        type: String,
+        required: true,
+    },
+    github: {
+        type: String,
+        required: true,
+    },
 });
 </script>
 

eslint.config.js

@@ -0,0 +1,15 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import withNuxt from "./.nuxt/eslint.config.mjs";
+
+export default withNuxt([
+    {
+        files: ["**/*.{js,mjs,cjs,ts,vue}"],
+        languageOptions: {
+            globals: globals.browser,
+        },
+    },
+    pluginJs.configs.recommended,
+    eslintPluginPrettierRecommended,
+]);

layouts/default.vue

@@ -4,7 +4,9 @@
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <slot />
-    <Footer></Footer>
+    <div>
+        <NavBar></NavBar>
+        <slot />
+        <Footer></Footer>
+    </div>
 </template>

nuxt.config.ts

@@ -1,7 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import { defineNuxtConfig } from "nuxt/config";
 export default defineNuxtConfig({
     devtools: { enabled: true },
-    modules: ["@nuxtjs/tailwindcss", "@vueuse/nuxt", "@nuxtjs/robots", "@nuxtjs/sitemap", "nuxt-schema-org", "nuxt-posthog"],
+    modules: ["@nuxtjs/tailwindcss", "@vueuse/nuxt", "@nuxtjs/robots", "@nuxtjs/sitemap", "nuxt-schema-org", "@nuxt/eslint"],
 
     site: {
         url: "https://mockbukkit.org",

package.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/package",
   "name": "nuxt-app",
   "private": true,
   "type": "module",
@@ -8,20 +9,31 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "lint:report": "eslint --output-file=eslint_report.json --format json ."
   },
   "devDependencies": {
+    "@eslint/js": "^9.15.0",
     "@nuxt/devtools": "latest",
+    "@nuxt/eslint": "^0.7.2",
     "@nuxtjs/robots": "^4.1.3",
     "@nuxtjs/sitemap": "6.0.0-beta.4",
     "@nuxtjs/tailwindcss": "^6.12.1",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.31.0",
+    "globals": "^15.12.0",
     "nuxt": "^3.12.4",
     "nuxt-posthog": "^1.5.4",
     "nuxt-schema-org": "^3.3.9",
-    "vue": "^3.4.34",
-    "vue-router": "^4.4.0",
     "prettier": "^3.4.1",
-    "prettier-plugin-tailwindcss": "^0.6.9"
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "typescript-eslint": "^8.16.0",
+    "vue": "^3.4.34",
+    "vue-router": "^4.4.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",

pages/cookies.vue

@@ -21,7 +21,7 @@ useSeoMeta({
 <template>
     <div class="container mx-auto max-w-screen-lg text-justify dark:text-white">
         <div class="my-8">
-            <h1 class="text-center text-2xl font-bold" id="cookie-policy">Cookie Policy</h1>
+            <h1 id="cookie-policy" class="text-center text-2xl font-bold">Cookie Policy</h1>
             <p class="text-center text-neutral-500"><strong>Effective Date:</strong> August 3, 2024</p>
         </div>
 

pages/index.vue

@@ -1,19 +1,10 @@
 <template>
-    <CatchSection></CatchSection>
-    <HighlightSection></HighlightSection>
+    <div>
+        <CatchSection></CatchSection>
+        <HighlightSection></HighlightSection>
+    </div>
 </template>
 
-<style>
-body {
-    background-color: #111111;
-}
-@media (prefers-color-scheme: light) {
-    body {
-        background-color: #dddddd;
-    }
-}
-</style>
-
 <script setup lang="ts">
 const title = "MockBukkit | Comprehensive Unit Testing for Minecraft Plugins";
 // The useSeoMeta function is used to set the SEO metadata for the page.
@@ -35,3 +26,14 @@ useSeoMeta({
     twitterCard: "summary",
 });
 </script>
+
+<style>
+body {
+    background-color: #111111;
+}
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: #dddddd;
+    }
+}
+</style>

pages/legal.vue

@@ -21,7 +21,7 @@ useSeoMeta({
 <template>
     <div class="container mx-auto max-w-screen-lg text-justify dark:text-white">
         <div class="my-8">
-            <h1 class="text-center text-2xl font-bold" id="legal-notice">Legal Notice</h1>
+            <h1 id="legal-notice" class="text-center text-2xl font-bold">Legal Notice</h1>
             <p class="text-center text-neutral-500"><strong>Effective Date:</strong> August 3, 2024</p>
         </div>
 

pages/privacy.vue

@@ -21,7 +21,7 @@ useSeoMeta({
 <template>
     <div class="container mx-auto max-w-screen-lg text-justify dark:text-white">
         <div class="my-8">
-            <h1 class="text-center text-2xl font-bold" id="privacy-policy">Privacy Policy</h1>
+            <h1 id="privacy-policy" class="text-center text-2xl font-bold">Privacy Policy</h1>
             <p class="text-center text-neutral-500"><strong>Effective Date:</strong> August 3, 2024</p>
         </div>
         <p>