svelte

.github/workflows/pages.yml

@@ -25,7 +25,6 @@ jobs:
       #- uses: actions/upload-pages-artifact@v3
       #  with:
       #    path: dist
-
 #  deploy:
 #    permissions:
 #      id-token: write

.prettierrc

@@ -1,7 +1,7 @@
 {
-  "printWidth": 80,
+  "printWidth": 120,
   "semi": false,
   "bracketSameLine": true,
   "arrowParens": "avoid",
-  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-astro"]
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-organize-imports", "prettier-plugin-svelte"]
 }

astro.config.js

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

package.json

@@ -2,20 +2,23 @@
   "name": "yamad.me",
   "version": "2.0.2",
   "dependencies": {
-    "@builder.io/qwik": "1.3.2",
-    "katex": "0.16.9"
+    "@builder.io/qwik": "1.3.5",
+    "katex": "0.16.9",
+    "svelte": "4.2.8"
   },
   "devDependencies": {
-    "@astrojs/check": "0.3.4",
-    "@astrojs/mdx": "2.0.3",
-    "@qwikdev/astro": "0.3.4",
-    "astro": "4.0.9",
+    "@astrojs/check": "0.4.1",
+    "@astrojs/mdx": "2.0.4",
+    "@astrojs/svelte": "5.0.3",
+    "@qwikdev/astro": "0.4.0",
+    "astro": "4.1.2",
     "badgen": "3.2.3",
     "js-beautify": "1.14.11",
     "lightningcss": "1.22.1",
-    "prettier": "3.1.1",
+    "prettier": "3.2.2",
     "prettier-plugin-astro": "0.12.3",
     "prettier-plugin-organize-imports": "3.2.4",
+    "prettier-plugin-svelte": "3.1.2",
     "rehype-katex": "7.0.0",
     "remark-math": "6.0.0"
   },

src/components/Header.astro

@@ -21,9 +21,7 @@ const links = [
 
 {
   Astro.url.pathname.split("/").length > 3 && (
-    <div style={{ background: "maroon" }}>
-      募: いい感じのパンくずリストのデザイン
-    </div>
+    <div style={{ background: "maroon" }}>募: いい感じのパンくずリストのデザイン</div>
   )
 }
 

src/components/YO.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  let value = new Date().getFullYear()
+  $: delta = value - 2005
+</script>
+
+<p>
+  西暦<input type="number" class="form" bind:value />年において，山Dは{#if delta < 0}
+    まだ生まれていません。{:else}<strong>{delta}</strong>歳です。{/if}{#if delta >= 200}
+    おそらく死んでいます。
+  {/if}
+</p>
+
+<style>
+  .form {
+    width: 6em;
+    margin: 0 0.3em;
+  }
+</style>

src/components/badges/GitHub.astro

@@ -5,10 +5,9 @@ import "./badge.css"
 async function updated() {
   const fallback = "9315-19-19T11:45:14Z"
   if (import.meta.env.DEV) return fallback
-  const res = await fetch(
-    `https://api.github.com/repos/${repo}/commits?author=yamader`,
-    { headers: { Authorization: "Bearer " + import.meta.env.GITHUB_TOKEN } },
-  )
+  const res = await fetch(`https://api.github.com/repos/${repo}/commits?author=yamader`, {
+    headers: { Authorization: "Bearer " + import.meta.env.GITHUB_TOKEN },
+  })
   if (!res.ok) {
     console.error(res)
     return fallback

src/pages/about.mdx

@@ -4,7 +4,7 @@ title: About
 description: 山Dについて
 ---
 
-import YO from "~/components/YO"
+import YO from "~/components/YO.svelte"
 
 # About
 
@@ -14,7 +14,7 @@ import YO from "~/components/YO"
 
 某市立高専 電子工学科の4年生です。
 
-<YO />
+<YO client:idle />
 
 ## やったこと