Move to typescript

1 files changed, 78 insertions, 0 deletions

diff --git a/src/js/script.ts b/src/js/script.ts
new file mode 100644
index 0000000..e0b0b85
--- /dev/null
+++ b/src/js/script.ts
@@ -0,0 +1,78 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-markup';
+import { initOneko } from './oneko';
+
+(() => {
+    const toggleButton = document.getElementById('theme-toggle') as HTMLInputElement;
+    const html = document.documentElement;
+
+    const sessionTheme = sessionStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    const initialTheme = sessionTheme || (systemPrefersDark ? 'dark' : 'light');
+
+    if (initialTheme === 'dark') {
+        html.setAttribute('data-theme', 'dark');
+        toggleButton.checked = true;
+    }
+
+    toggleButton.addEventListener('change', () => {
+        const theme = html.getAttribute('data-theme');
+
+        if (theme === 'dark') {
+            html.removeAttribute('data-theme');
+            sessionStorage.setItem('theme', 'light');
+            toggleButton.checked = false;
+        } else {
+            html.setAttribute('data-theme', 'dark');
+            sessionStorage.setItem('theme', 'dark');
+            toggleButton.checked = true;
+        }
+    });
+})();
+
+(() => {
+    const colors = ['#ff69b4', '#b19cd9', '#8b6f47', '#ff85c0', '#c4b5fd', '#d4a574'];
+    const shapes = ['❀', '✿', '✽', '✾', '✻', '❊', '❋', '✼'];
+
+    document.addEventListener('mousemove', (e: MouseEvent) => {
+        createParticle(e.clientX, e.clientY);
+    });
+
+    const createParticle = (x: number, y: number) => {
+        const particle = document.createElement('div');
+        particle.className = 'fairy-dust';
+
+        const shape = shapes[Math.floor(Math.random() * shapes.length)];
+        const size = Math.random() * 8 + 6;
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        const offsetX = (Math.random() - 0.5) * 20;
+        const offsetY = (Math.random() - 0.5) * 20;
+        const rotation = Math.random() * 360;
+
+        particle.textContent = shape;
+        particle.style.cssText = `
+      position: fixed;
+      left: ${x + offsetX}px;
+      top: ${y + offsetY}px;
+      font-size: ${size}px;
+      color: ${color};
+      opacity: 0.4;
+      pointer-events: none;
+      z-index: 9001; /* it's over 9000 */
+      line-height: 1;
+      transform: rotate(${rotation}deg);
+      animation: fairy-float 0.8s ease-out forwards;
+    `;
+
+        document.body.appendChild(particle);
+        setTimeout(() => particle.remove(), 800);
+    };
+})();
+
+document.addEventListener('DOMContentLoaded', () => {
+    Prism.highlightAll();
+    initOneko();
+});