window

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 100,
   "semi": false,
   "bracketSameLine": true,
   "arrowParens": "avoid",

package.json

@@ -2,23 +2,24 @@
   "name": "yamad.me",
   "version": "2.0.2",
   "dependencies": {
-    "@builder.io/qwik": "1.4.4",
+    "@builder.io/qwik": "1.4.5",
     "katex": "0.16.9",
-    "svelte": "4.2.10"
+    "qwik-transition": "0.0.7",
+    "svelte": "4.2.11"
   },
   "devDependencies": {
-    "@astrojs/check": "0.5.3",
+    "@astrojs/check": "0.5.4",
     "@astrojs/mdx": "2.1.1",
     "@astrojs/svelte": "5.0.3",
     "@qwikdev/astro": "0.5.2",
-    "astro": "4.3.5",
+    "astro": "4.4.0",
     "badgen": "3.2.3",
-    "js-beautify": "1.14.11",
+    "js-beautify": "1.15.1",
     "lightningcss": "1.23.0",
     "prettier": "3.2.5",
     "prettier-plugin-astro": "0.13.0",
     "prettier-plugin-organize-imports": "3.2.4",
-    "prettier-plugin-svelte": "3.1.2",
+    "prettier-plugin-svelte": "3.2.1",
     "rehype-katex": "7.0.0",
     "remark-math": "6.0.0"
   },

src/apps/Launcher.tsx

@@ -0,0 +1,10 @@
+import { component$, type Signal } from "@builder.io/qwik"
+import Window from "~/components/Window"
+
+export default component$(({ launchSignal }: { launchSignal: Signal<boolean> }) => {
+  return (
+    <Window active={launchSignal}>
+      <p>hello!</p>
+    </Window>
+  )
+})

src/apps/Panel.tsx

@@ -0,0 +1,16 @@
+import { component$ } from "@builder.io/qwik"
+import Window from "~/components/Window"
+
+export default component$(() => {
+  return (
+    <Window>
+      <p>
+        インターネットをいつも
+        <br />
+        綺麗に使っていただき
+        <br />
+        ありがとうございます。
+      </p>
+    </Window>
+  )
+})

src/apps/Term.tsx

@@ -0,0 +1,10 @@
+import { component$ } from "@builder.io/qwik"
+import Window from "~/components/Window"
+
+export default component$(() => {
+  return (
+    <Window>
+      <p>hello!</p>
+    </Window>
+  )
+})

src/components/EasterEgg.tsx

@@ -1,12 +1,5 @@
-import {
-  component$,
-  createContextId,
-  useContextProvider,
-  useSignal,
-  useVisibleTask$,
-  type Signal,
-} from "@builder.io/qwik"
-import Term from "./Term"
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik"
+import Launcher from "~/apps/Launcher"
 
 const command = [
   "ArrowUp",
@@ -21,12 +14,9 @@ const command = [
   "a",
 ]
 
-export const easterCtx = createContextId<Signal<boolean>>("easter")
-
 export default component$(() => {
   const cur = useSignal(0)
   const easter = useSignal(false)
-  useContextProvider(easterCtx, easter)
 
   useVisibleTask$(() => {
     console.log("%cこんにちは!", "color: red; font-size: 8em; font-weight: bold;")
@@ -43,5 +33,5 @@ export default component$(() => {
     })
   })
 
-  return easter.value && <Term />
+  return <Launcher launchSignal={easter} />
 })

src/components/Header.astro

@@ -17,19 +17,13 @@ const links = [
   }
 </nav>
 
-<hr />
-
 {
   Astro.url.pathname.split("/").length > 3 && (
     <div style={{ background: "maroon" }}>募: いい感じのパンくずリストのデザイン</div>
   )
 }
 
 <style>
-  hr {
-    display: none;
-  }
-
   nav {
     display: flex;
     background: #111;

src/components/Window.tsx

@@ -0,0 +1,170 @@
+import {
+  $,
+  Slot,
+  component$,
+  useOnDocument,
+  useSignal,
+  useStore,
+  useStyles$,
+  useVisibleTask$,
+  type Signal,
+} from "@builder.io/qwik"
+import { useCSSTransition } from "qwik-transition"
+
+const dur = 250
+
+export default component$(
+  ({
+    active = useSignal(true),
+    title,
+    initw = 480,
+    inith = 320,
+    initx = 125,
+    inity = 125,
+    fill = true,
+  }: {
+    active?: Signal<boolean>
+    title?: string
+    initw?: number
+    inith?: number
+    initx?: number
+    inity?: number
+    fill?: boolean
+  }) => {
+    useStyles$(styles)
+
+    const w = useStore({
+      grab: false,
+      w: initw,
+      h: inith,
+      x: initx,
+      y: inity,
+      dx: 0,
+      dy: 0,
+    })
+
+    useOnDocument(
+      "mousemove",
+      $(e => {
+        if (w.grab) {
+          w.x = Math.max(0, e.pageX - w.dx)
+          w.y = Math.max(0, e.pageY - w.dy)
+        }
+      }),
+    )
+
+    useOnDocument(
+      "mouseup",
+      $(() => (w.grab = false)),
+    )
+
+    useVisibleTask$(({ track }) => {
+      if (track(active)) {
+        w.x = window.scrollX + initx
+        w.y = window.scrollY + inity
+      }
+    })
+
+    const { stage, shouldMount } = useCSSTransition(active, {
+      timeout: dur,
+      transitionOnAppear: true,
+    })
+
+    return (
+      shouldMount.value && (
+        <div
+          class={"abs blur window" + (stage.value == "enterTo" ? " active" : "")}
+          style={{ width: w.w, height: w.h, left: w.x, top: w.y }}
+          tabIndex={0}>
+          <div class="vv">
+            <div class="hh" />
+            <div class="vv" />
+            <div class="hh" />
+          </div>
+          <div class="f1 mid">
+            <div class="hh" />
+            <div class="nav">
+              <div
+                class="f1"
+                onMouseDown$={e => {
+                  w.grab = true
+                  // @ts-ignore wtf
+                  ;[w.dx, w.dy] = [e.offsetX || e.layerX, e.offsetY || e.layerY]
+                }}>
+                {title}
+              </div>
+              <div>
+                <button class="btn" onClick$={() => (active.value = false)}>
+                  &times;
+                </button>
+              </div>
+            </div>
+            <div class="f1 content" style={fill ? { background: "#111" } : {}}>
+              <Slot />
+            </div>
+            <div class="hh" />
+          </div>
+          <div class="vv">
+            <div class="hh" />
+            <div class="vv" />
+            <div class="hh" />
+          </div>
+        </div>
+      )
+    )
+  },
+)
+
+const styles = `
+  .f1 { flex: 1; }
+  .hh { width: 100%; height: .2rem; }
+  .vv { width: .2rem; height: 100%; }
+
+  .window {
+    display: flex;
+    background: #333a;
+    border: 1px solid #6666;
+    border-radius: .5rem;
+    overflow: hidden;
+    transition: transform ${dur}ms,
+                opacity ${dur}ms;
+
+    transform: scale(.9);
+    opacity: 0;
+    &.active {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .mid {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav {
+    display: flex;
+    margin-bottom: .2rem;
+    line-height: .9;
+    font-size: .9em;
+    user-select: none;
+  }
+
+  .btn {
+    border: none;
+    border-radius: .5em;
+    background: transparent;
+    color: white;
+
+    &:hover {
+      background: #fff4;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    border-radius: .3rem;
+    overflow: auto;
+  }
+`