feat: add zeek konami code secret

components/content/ZeekEasterEgg.vue

@@ -0,0 +1,133 @@
+<template>
+  <ClientOnly>
+    <template #default>
+      <button
+        class="underline"
+        @click="addZeek()"
+      >
+        {{ text }}
+      </button>
+      <div
+        ref="el"
+        class="pointer-events-none fixed inset-0 isolate z-[100] h-full w-full"
+      />
+    </template>
+    <template #fallback>
+      {{ text }}
+    </template>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { useElementSize, useRafFn } from '@vueuse/core';
+
+defineProps({
+  text: {
+    type: String,
+    default: 'Zeek',
+  },
+});
+
+const images = [
+  'zeek-astronaut.svg',
+  'zeek-banker.svg',
+  'zeek-champion.svg',
+  'zeek-coffee.svg',
+  'zeek-davinci.svg',
+  'zeek-dj.svg',
+  'zeek-firstmate.svg',
+  'zeek-foundry.svg',
+  'zeek-ice-cream.svg',
+  'zeek-indiana-jones.svg',
+  'zeek-matrix.svg',
+  'zeek-passport.svg',
+  'zeek-pirate.svg',
+];
+const el = ref<HTMLElement | null>(null);
+
+const { width, height } = useElementSize(el);
+
+class Particle {
+  size: number;
+  x: number;
+  y: number;
+  vx: number = 0;
+  vy: number = 0;
+  image: HTMLImageElement;
+  loaded: boolean = false;
+  static gravity = 0.15;
+  static minSpeed = 1;
+
+  constructor() {
+    this.size = Math.random() * 90 + 70;
+    this.x = Math.random() * width.value - this.size;
+    this.y = Math.random() * height.value - this.size;
+    this.vx = (Math.random() + Particle.minSpeed) * Particle.gravity * (Math.random() > 0.5 ? -1 : 1);
+    this.vy = (Math.random() + Particle.minSpeed) * Particle.gravity * (Math.random() > 0.5 ? -1 : 1);
+    this.image = new Image();
+    this.image.onload = () => {
+      this.loaded = true;
+      this.image.classList.add('absolute');
+      this.image.style.width = `${this.size}px`;
+      this.image.style.height = `${this.size}px`;
+      this.image.style.willChange = `transform`;
+      this.image.style.pointerEvents = `auto`;
+      this.image.style.cursor = `crosshair`;
+      this.image.style.margin = `0`;
+      this.image.style.userSelect = `none`;
+      this.image.draggable = false;
+      el.value?.appendChild(this.image);
+    };
+    this.image.onclick = () => this.destroy();
+    this.image.src = `/images/zeek/${images[Math.floor(Math.random() * images.length)]}`;
+  }
+  update(delta: number) {
+    // Reverse direction upon hitting canvas edges to keep emojis within view
+    if (this.x < 0 || this.x + this.size > width.value) {
+      this.vx = -this.vx;
+      this.x = this.x < 0 ? 0 : width.value - this.size;
+    } else {
+      this.x += this.vx * delta;
+    }
+    if (this.y < 0 || this.y + this.size > height.value) {
+      this.vy = -this.vy;
+      this.y = this.y < 0 ? 0 : height.value - this.size;
+    } else {
+      this.y += this.vy * delta;
+    }
+  }
+  draw() {
+    if (this.loaded) {
+      this.image.style.transform = `translate(${this.x}px, ${this.y}px)`;
+    }
+  }
+  destroy() {
+    // remove image and from particles array
+    this.image.remove();
+    const index = particles.indexOf(this);
+    particles.splice(index, 1);
+  }
+}
+
+const addZeek = () => {
+  for (let a = 0; a < 2; a++) {
+    particles.push(new Particle());
+  }
+};
+
+const particles: Particle[] = [];
+
+function animate(_delta: number) {
+  particles.forEach((particle) => {
+    particle.update(_delta);
+    particle.draw();
+  });
+}
+
+useRafFn(
+  ({ delta }) => {
+    animate(delta);
+  },
+  { fpsLimit: 100 }
+);
+</script>

server/plugins/parse-zk-tags.ts

@@ -9,7 +9,10 @@ export default defineNitroPlugin((nitroApp) => {
     if (file._id.endsWith('.md')) {
       Object.keys(tags).forEach((key) => {
         file.body = file.body.replace(new RegExp(`%%${key}%%`, 'g'), tags[key]);
+        // replace all "zeek" or "Zeek" with "<ZeekEasterEgg :text="replacedWord"></ZeekEasterEgg>"
+        // make sure it case-insensitive and actually new word
       });
+      file.body = file.body.replace(/zeek/gi, '<ZeekEasterEgg />');
     }
   });
 });