Update tailwindcss and eslint

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
+    ['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry', corejs: 3 }]
   ]
 }

eslint.config.js

@@ -0,0 +1,21 @@
+import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+export default [
+  // add more generic rulesets here, such as:
+  // js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
+  {
+    rules: {
+      // override/add rules settings here, such as:
+      // 'vue/no-unused-vars': 'error'
+    },
+    languageOptions: {
+      sourceType: 'module',
+      globals: {
+        ...globals.browser
+      }
+    }
+  }
+]

package.json

@@ -4,45 +4,31 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "build": "vue-cli-service build",
+    "lint": "eslint src"
   },
   "dependencies": {
-    "autoprefixer": "^9.8.7",
+    "@tailwindcss/postcss": "^4.1.18",
     "core-js": "^3.6.5",
     "marked": "^3.0.4",
-    "postcss": "^7.0.38",
+    "postcss": "^8.4",
     "sass": "^1.42.1",
     "sass-loader": "^10",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16",
+    "tailwindcss": "^4.1.18",
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.4",
+    "eslint": "^10.0.0",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.3.0",
+    "vue-eslint-parser": "^10.4.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead"
   ]
-}
+}

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

src/App.vue

@@ -1,32 +1,32 @@
 <template>
-  <Navbar />
-  <Hero />
-  <Distributions />
-  <Devices />
-  <Installation />
-  <Contributors />
-  <Footer />
+  <NavbarComponent />
+  <HeroComponent />
+  <DistributionsComponent />
+  <DevicesComponent />
+  <InstallationComponent />
+  <ContributorsComponent />
+  <FooterComponent />
 </template>
 
 <script>
-import Hero from "./components/Hero.vue";
-import Navbar from "./components/Navbar.vue";
-import Distributions from "./components/Distributions.vue";
-import Devices from "./components/Devices.vue";
-import Installation from "./components/Installation.vue";
-import Contributors from "./components/Contributors.vue";
-import Footer from "./components/Footer.vue";
+import HeroComponent from "./components/HeroComponent.vue";
+import NavbarComponent from "./components/NavbarComponent.vue";
+import DistributionsComponent from "./components/DistributionsComponent.vue";
+import DevicesComponent from "./components/DevicesComponent.vue";
+import InstallationComponent from "./components/InstallationComponent.vue";
+import ContributorsComponent from "./components/ContributorsComponent.vue";
+import FooterComponent from "./components/FooterComponent.vue";
 
 export default {
   name: "App",
   components: {
-    Navbar,
-    Hero,
-    Distributions,
-    Devices,
-    Installation,
-    Contributors,
-    Footer,
+    NavbarComponent,
+    HeroComponent,
+    DistributionsComponent,
+    DevicesComponent,
+    InstallationComponent,
+    ContributorsComponent,
+    FooterComponent,
   },
 };
 </script>

src/components/Contributors.vue → src/components/ContributorsComponent.vue

@@ -13,40 +13,35 @@
           <div>
             <div class="grid grid-cols-4 md:grid-cols-4 gap-5 md:gap-0 mb-3">
               <div
-                class="contributorLink"
                 v-for="entry in contributors"
-                v-bind:key="entry.index"
+                :key="entry.index"
+                class="contributorLink"
               >
-                <a :href="entry.href" target="_blank">
+                <a
+                  :href="entry.href"
+                  target="_blank"
+                >
                   <img
                     class="w-auto h-auto md:w-24 md:h-24 rounded-full"
                     :src="entry.img"
                     :alt="'Link to ' + entry.href"
-                  />
+                  >
                 </a>
               </div>
             </div>
-            <span class="text-white text-base md:text-2xl"
-              >and many more...</span
-            >
+            <span class="text-white text-base md:text-2xl">and many more...</span>
           </div>
 
           <div class="flex flex-col my-auto max-w-full md:max-w-lg">
-            <span class="text-base md:text-4xl text-white"
-              >Notable Contributors</span
-            >
-            <span class="sub"
-              >The t2linux project is a community effort of people with
-              knowledge in many different areas. You can help as well!</span
-            >
+            <span class="text-base md:text-4xl text-white">Notable Contributors</span>
+            <span class="sub">The t2linux project is a community effort of people with
+              knowledge in many different areas. You can help as well!</span>
             <a
               class="DiscordButton mt-3 w-auto md:w-1/2"
               href="https://matrix.to/#/#space:t2linux.org"
               target="_blank"
             >
-              <span class="m-auto text-lg text-black text-semibold"
-                >Join us on Matrix</span
-              >
+              <span class="m-auto text-lg text-black text-semibold">Join us on Matrix</span>
             </a>
           </div>
         </div>
@@ -99,6 +94,7 @@ export default {
 </script>
 
 <style>
+@reference "../styles/index.scss";
 .ContributorsCard {
   @apply p-7 md:p-12 rounded;
   background-color: rgba(46, 46, 46, 1);

src/components/Devices.vue → src/components/DevicesComponent.vue

@@ -18,15 +18,15 @@
       >
         <div
           v-for="item in machines"
-          v-bind:key="item.index"
+          :key="item.index"
           class="flex flex-col justify-center items-center text-center"
         >
           <img
             :src="require(`../assets/icons/machines/` + item.src)"
             alt=""
             class="w-7/12 h-7/12 md:w-36 md:h-36"
             srcset=""
-          />
+          >
           <span class="text-white text-base md:text-2xl mt-5">{{
             item.name
           }}</span>

src/components/Distributions.vue → src/components/DistributionsComponent.vue

@@ -11,7 +11,7 @@
       <div class="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6 mt-5 md:mt-14">
         <a
           v-for="item in distributions"
-          v-bind:key="item.index"
+          :key="item.index"
           :href="item.href"
         >
           <div class="DistroCard">
@@ -20,15 +20,15 @@
                 :src="require(`../assets/icons/distributions/` + item.src)"
                 class="w-8 h-8 md:w-auto md:h-auto"
                 alt=""
-              />
+              >
               <span class="DistroName">{{ item.name }}</span>
             </div>
             <div>
               <img
                 src="../assets/icons/redirect.svg"
                 class="hover:opacity-70 transition-all duration-200 ease-in-out"
                 :alt="'Icon for ' + item.name"
-              />
+              >
             </div>
           </div>
         </a>
@@ -67,6 +67,7 @@ export default {
 </script>
 
 <style>
+@reference "../styles/index.scss";
 .TitleText {
   @apply text-center text-white font-bold block text-xl md:text-section md:leading-section;
 }

src/components/Footer.vue → src/components/FooterComponent.vue

@@ -5,8 +5,7 @@
         <div class="flex flex-col">
           <span
             class="BodyText text-left cursor-pointer hover:opacity-80 transition-all duration-200 ease-in-out my-0"
-            >© 2021-2026 t2linux.org</span
-          >
+          >© 2021-2026 t2linux.org</span>
           <span
             class="BodyText text-left cursor-pointer hover:opacity-80 transition-all duration-200 ease-in-out my-0"
           >
@@ -19,22 +18,20 @@
             target="_blank"
             href="https://matrix.to/#/#space:t2linux.org"
             class="flex items-center mx-4 linkhover my-2 md:my-0"
-            ><img
-              src="../assets/icons/matrix.svg"
-              class="mr-2 matrix"
-              alt=""
-            />Matrix</a
-          >
+          ><img
+            src="../assets/icons/matrix.svg"
+            class="mr-2 matrix"
+            alt=""
+          >Matrix</a>
           <a
             target="_blank"
             href="https://github.com/t2linux"
             class="flex items-center linkhover mx-4 my-2 md:my-0"
-            ><img
-              src="../assets/icons/github.svg"
-              class="mr-2"
-              alt=""
-            />Github</a
-          >
+          ><img
+            src="../assets/icons/github.svg"
+            class="mr-2"
+            alt=""
+          >Github</a>
         </div>
       </div>
     </div>
@@ -46,6 +43,7 @@ export default {};
 </script>
 
 <style>
+@reference "../styles/index.scss";
 .footer {
   @apply flex flex-col md:flex-row justify-center md:justify-between items-center align-middle;
 }