From 93f80150a1d07cf3ce51447636c7f8cd510832f1 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sat, 13 Dec 2025 17:03:24 -0800 Subject: Syntax highlighting and a real repo struct --- src/js/script.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/js/script.js (limited to 'src/js/script.js') diff --git a/src/js/script.js b/src/js/script.js new file mode 100644 index 0000000..8ba3d82 --- /dev/null +++ b/src/js/script.js @@ -0,0 +1,87 @@ +import Prism from 'prismjs'; +import 'prismjs/components/prism-javascript'; +import 'prismjs/components/prism-css'; +import 'prismjs/components/prism-markup'; +import { initOneko } from './oneko.js'; + +(() => { + const toggleButton = document.getElementById("theme-toggle"); + 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) => { + createParticle(e.clientX, e.clientY); + }); + + const createParticle = (x, y) => { + 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(); +}); -- cgit v1.2.3-70-g09d2