solid

.prettierrc

@@ -3,5 +3,5 @@
   "semi": false,
   "bracketSameLine": true,
   "arrowParens": "avoid",
-  "plugins": ["prettier-plugin-astro", "prettier-plugin-organize-imports", "prettier-plugin-svelte"]
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-organize-imports"]
 }

astro.config.js

@@ -1,6 +1,5 @@
 import mdx from "@astrojs/mdx"
-import svelte from "@astrojs/svelte"
-import qwikdev from "@qwikdev/astro"
+import solid from "@astrojs/solid-js"
 import { defineConfig, passthroughImageService } from "astro/config"
 import rehypeKatex from "rehype-katex"
 import remarkMath from "remark-math"
@@ -16,7 +15,7 @@ export default defineConfig({
     remarkPlugins: [remarkMath],
     rehypePlugins: [rehypeKatex],
   },
-  integrations: [mdx(), svelte(), qwikdev()],
+  integrations: [mdx(), solid()],
   vite: {
     css: { transformer: "lightningcss" },
     // build: { cssMinify: "lightningcss" },

package.json

@@ -2,24 +2,20 @@
   "name": "yamad.me",
   "version": "2.0.4",
   "dependencies": {
-    "@builder.io/qwik": "1.5.4",
     "katex": "0.16.10",
-    "qwik-transition": "0.0.7",
-    "svelte": "4.2.17"
+    "solid-js": "1.8.17"
   },
   "devDependencies": {
     "@astrojs/check": "0.7.0",
     "@astrojs/mdx": "3.0.0",
-    "@astrojs/svelte": "5.4.0",
-    "@qwikdev/astro": "0.5.15",
+    "@astrojs/solid-js": "4.2.0",
     "astro": "4.8.6",
     "badgen": "3.2.3",
     "js-beautify": "1.15.1",
     "lightningcss": "1.25.0",
     "prettier": "3.2.5",
     "prettier-plugin-astro": "0.13.0",
     "prettier-plugin-organize-imports": "3.2.4",
-    "prettier-plugin-svelte": "3.2.3",
     "rehype-katex": "7.0.0",
     "remark-math": "6.0.0"
   },

scripts/beautify.sh

@@ -3,17 +3,13 @@ set -e
 shopt -s globstar
 
 DIR=dist
-
-BEAUTIFY_OPTS='-s 2 -T pre -T textarea -T script -T style -E [] --no-preserve-newlines'
+BEAUTIFY_OPTS="-s 2 -T pre -T script -T style -E [] --no-preserve-newlines"
 
 for f in $DIR/**/*.html; do
   t=`mktemp`
   echo "beautifying $t -> $f"
   perl -pe '
-    s|\}\n|\}|g;
-    s|/\* \@vite-ignore \*/\s*||g;
-    s|<!-- prettier-ignore -->\s*||g;
-    s|\(\n|\(|g;
+    s|<!--(?![\$/])(?!astro).*?-->\s*||g;
   ' $f > $t
   html-beautify $BEAUTIFY_OPTS $t > $f
   rm $t

src/apps/Launcher.tsx

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

src/apps/Panel.tsx

@@ -1,7 +1,6 @@
-import { component$ } from "@builder.io/qwik"
 import Window from "~/components/Window"
 
-export default component$(() => {
+export default function Panel() {
   return (
     <Window>
       <p>
@@ -13,4 +12,4 @@ export default component$(() => {
       </p>
     </Window>
   )
-})
+}

src/apps/Term.tsx

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

src/components/EasterEgg.tsx

@@ -1,5 +1,8 @@
-import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik"
-import Launcher from "~/apps/Launcher"
+import { createSignal, lazy, onMount } from "solid-js"
+
+declare global {
+  var _easter_init: boolean
+}
 
 const command = [
   "ArrowUp",
@@ -14,24 +17,31 @@ const command = [
   "a",
 ]
 
-export default component$(() => {
-  const cur = useSignal(0)
-  const easter = useSignal(false)
+export default function EasterEgg() {
+  const [cur, setCur] = createSignal(0)
+  const [easter, setEaster] = createSignal(false)
+  const [load, setLoad] = createSignal(false)
+
+  onMount(() => {
+    if (globalThis._easter_init) return
+    globalThis._easter_init = true
 
-  useVisibleTask$(() => {
     console.log("%cこんにちは!", "color: red; font-size: 8em; font-weight: bold;")
 
     document.addEventListener("keydown", e => {
-      if (e.key == command[cur.value++]) {
-        if (cur.value == command.length) {
-          easter.value = true
-          cur.value = 0
+      if (e.key == command[cur()]) {
+        setCur(cur => cur + 1)
+        if (cur() > command.length / 2) setLoad(true)
+        if (cur() == command.length) {
+          setEaster(true)
+          setCur(0)
         }
       } else {
-        cur.value = 0
+        setCur(0)
       }
     })
   })
 
-  return <Launcher launchSignal={easter} />
-})
+  const Launcher = lazy(() => import("~/apps/Launcher"))
+  return <>{load() && <Launcher activeSignal={[easter, setEaster]} />}</>
+}

src/layouts/Layout.astro → src/components/Layout.astro

@@ -1,5 +1,4 @@
 ---
-import { ViewTransitions } from "astro:transitions"
 import EasterEgg from "~/components/EasterEgg"
 import Header from "~/components/Header.astro"
 
@@ -15,9 +14,6 @@ const {
   description = "山Dのウェブサイト",
   noRobots,
 } = Astro.props.frontmatter || Astro.props
-
-// <html lang="ja" transition:animate="none">
-// <ViewTransitions />
 ---
 
 <html lang="ja">
@@ -44,50 +40,50 @@ const {
         <small>&copy; 2020-2024 YamaD</small>
       </footer>
     </main>
-    <EasterEgg transition:persist />
+    <EasterEgg client:idle />
+  </body>
+</html>
 
-    <style is:global>
-      html {
-        background: black;
-        color: white;
-      }
+<style is:global>
+  html {
+    background: black;
+    color: white;
+  }
 
-      body {
-        display: flex;
-        margin: 0;
-      }
+  body {
+    display: flex;
+    margin: 0;
+  }
 
-      main {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        max-width: 48rem;
-        overflow: hidden;
-        background: #222;
+  main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 48rem;
+    overflow: hidden;
+    background: #222;
 
-        @media (width > 48rem) {
-          height: 100%; /* fit-content */
-          margin: 1.5rem auto;
-          border: 1px solid #383838;
-          border-radius: 0.5rem;
-        }
-      }
+    @media (width > 48rem) {
+      height: 100%; /* fit-content */
+      margin: 1.5rem auto;
+      border: 1px solid #383838;
+      border-radius: 0.5rem;
+    }
+  }
 
-      footer {
-        margin-top: auto;
-        padding: 0.5rem 0;
-        text-align: center;
-      }
+  footer {
+    margin-top: auto;
+    padding: 0.5rem 0;
+    text-align: center;
+  }
 
-      .container {
-        display: flex;
-        flex-direction: column;
-        padding: 0 1rem;
+  .container {
+    display: flex;
+    flex-direction: column;
+    padding: 0 1rem;
 
-        & > :first-child {
-          margin-top: 1rem;
-        }
-      }
-    </style>
-  </body>
-</html>
+    & > :first-child {
+      margin-top: 1rem;
+    }
+  }
+</style>