enhancement(lint): Fix lint errors for components/Backdrop.vue

Co-authored-by: NeonGamerBot-QK <neon@saahild.com>
Signed-off-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com>

app.vue

@@ -1,6 +1,9 @@
+<script>
+import Backdrop from "./components/Backdrop.vue";
+</script>
 <template>
   <div>
-    <NuxtRouteAnnouncer />
+    <Backdrop />
-    <NuxtWelcome />
+    <router-view />
   </div>
 </template>

assets/app.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "daisyui";

components/Backdrop.vue

@@ -0,0 +1,151 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+
+const canvas = ref(null);
+const cursor = ref({ x: 0, y: 0 });
+let ctx = null;
+let animationFrame = null;
+let chars = [];
+
+class Char {
+  constructor(x, y, char) {
+    this.x = x;
+    this.y = y;
+    this.char = char;
+    this.speed = 0.02 + Math.random() * 0.8;
+    this.opacity = 0.05 + Math.random() * 0.15;
+    this.actualY = y;
+  }
+
+  draw() {
+    const distToCursor = Math.hypot(
+      this.x - cursor.value.x,
+      this.y - cursor.value.y,
+    );
+
+    const highlight = Math.max(0, 0.5 - distToCursor / 250);
+    ctx.fillStyle = `rgba(203, 166, 247, ${this.opacity + highlight})`;
+    ctx.fillText(this.char, this.x, this.y);
+  }
+
+  update() {
+    this.actualY += this.speed;
+    this.y = this.actualY % window.innerHeight;
+
+    if (this.y < this.speed) {
+      this.char = String.fromCharCode(0x2729 + Math.floor(Math.random() * 706));
+      this.opacity = 0.05 + Math.random() * 0.15;
+    }
+  }
+}
+
+const calculateFontSize = () => {
+  const baseSize = 16;
+  const screenWidth = window.innerWidth;
+
+  // For smaller screens
+  if (screenWidth < 768) {
+    return Math.max(18, baseSize * (screenWidth / 768));
+  }
+
+  // For larger screens
+  return Math.min(22, Math.max(18, baseSize * (screenWidth / 1920)));
+};
+
+const init = () => {
+  if (!canvas.value) return;
+
+  ctx = canvas.value.getContext("2d", { alpha: false });
+  canvas.value.width = window.innerWidth;
+  canvas.value.height = window.innerHeight;
+
+  const fontSize = calculateFontSize();
+  const columnSpacing = fontSize * 1.5;
+
+  // Adjust number of columns based on screen size
+  const minColumns = 15; // Ensure at least this many columns on mobile
+  const columns = Math.max(
+    minColumns,
+    Math.floor(window.innerWidth / columnSpacing),
+  );
+
+  // Adjust rows based on screen height
+  const rowSpacing = fontSize * 2;
+  const minRows = 15; // Ensure at least this many rows on small screens
+  const maxRows = 25; // Cap for performance on large screens
+  const rows = Math.min(
+    maxRows,
+    Math.max(minRows, Math.floor(window.innerHeight / rowSpacing)),
+  );
+
+  chars = [];
+  for (let i = 0; i < columns; i++) {
+    for (let j = 0; j < rows; j++) {
+      const x = i * (window.innerWidth / columns); // Evenly distribute columns
+      const y = j * rowSpacing - Math.random() * window.innerHeight;
+      const char = String.fromCharCode(
+        0x2729 + Math.floor(Math.random() * 706),
+      );
+      chars.push(new Char(x, y, char));
+    }
+  }
+
+  ctx.font = `${fontSize}px monospace`;
+};
+
+const animate = () => {
+  ctx.fillStyle = "rgb(17, 17, 20)";
+  ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
+
+  chars.forEach((char) => {
+    char.draw();
+    char.update();
+  });
+
+  animationFrame = requestAnimationFrame(animate);
+};
+
+const handleMouseMove = (e) => {
+  cursor.value = {
+    x: e.clientX,
+    y: e.clientY,
+  };
+};
+
+let resizeTimeout;
+const handleResize = () => {
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+
+  resizeTimeout = setTimeout(() => {
+    if (canvas.value) {
+      canvas.value.width = window.innerWidth;
+      canvas.value.height = window.innerHeight;
+      init();
+    }
+  }, 250);
+};
+
+onMounted(() => {
+  init();
+  animate();
+  window.addEventListener("mousemove", handleMouseMove);
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame);
+  }
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+  window.removeEventListener("mousemove", handleMouseMove);
+  window.removeEventListener("resize", handleResize);
+});
+</script>
+
+<template>
+  <canvas ref="canvas" class="fixed inset-0 -z-10 h-full w-full bg-crust" />
+</template>

eslint.config.mjs

@@ -1,6 +1,5 @@
 // @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
+import withNuxt from "./.nuxt/eslint.config.mjs";
 
-export default withNuxt(
+export default withNuxt();
-  // Your custom configs here
+// Your custom configs here
-)

nuxt.config.ts

@@ -1,18 +1,23 @@
+import tailwindcss from "@tailwindcss/vite";
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2025-05-15',
+  compatibilityDate: "2025-05-15",
   devtools: { enabled: true },
-  target: 'static',
+  target: "static",
- // make static output
+  // make static output
   ssr: false,
   nitro: {
-    preset: 'static'
+    preset: "static",
   },
   modules: [
-    '@nuxt/content',
+    "@nuxt/content",
-    '@nuxt/eslint',
+    "@nuxt/eslint",
-    '@nuxt/fonts',
+    "@nuxt/fonts",
-    '@nuxt/icon',
+    "@nuxt/icon",
-    '@nuxt/image'
+    "@nuxt/image",
-  ]
+  ],
-})
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  css: ["~/assets/app.css"],
+});

package.json

@@ -15,9 +15,12 @@
     "@nuxt/fonts": "0.11.4",
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
+    "@tailwindcss/vite": "^4.1.10",
     "better-sqlite3": "^11.10.0",
+    "daisyui": "^5.0.43",
     "eslint": "^9.0.0",
     "nuxt": "^3.17.5",
+    "tailwindcss": "^4.1.10",
     "vue": "^3.5.16",
     "vue-router": "^4.5.1"
   }

pages/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="hero min-h-screen">
+    <div class="hero-content text-center">
+      <div class="max-w-md">
+        <h1 class="text-5xl font-bold">Hello there</h1>
+        <p class="py-6">
+          Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
+          excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a
+          id nisi.
+        </p>
+        <button class="btn btn-primary">Get Started</button>
+      </div>
+    </div>
+  </div>
+</template>