improve page contents (and fix some ui) (#231)

Author: aster-void

bun.lock

@@ -4,33 +4,32 @@
     "": {
       "name": "website",
       "dependencies": {
-        "@astrojs/mdx": "^4.1.0",
-        "@astrojs/sitemap": "^3.2.1",
-        "@astrojs/svelte": "^7.0.6",
+        "@astrojs/mdx": "^4.2.2",
+        "@astrojs/sitemap": "^3.3.0",
+        "@astrojs/svelte": "^7.0.8",
         "@date-fns/tz": "^1.2.0",
         "@iconify-json/feather": "^1.2.1",
         "@tailwindcss/typography": "^0.5.16",
-        "astro": "^5.4.2",
+        "astro": "^5.5.5",
         "astro-icon": "^1.1.5",
-        "bits-ui": "^1.3.13",
-        "daisyui": "^5.0.4",
+        "bits-ui": "^1.3.14",
+        "daisyui": "^5.0.9",
         "date-fns": "^4.1.0",
         "markdown-to-txt": "^2.0.1",
         "sharp": "^0.33.5",
-        "svelte": "^5.23.1",
+        "svelte": "^5.25.3",
       },
       "devDependencies": {
         "@astrojs/check": "^0.9.4",
         "@biomejs/biome": "^1.9.4",
-        "@tailwindcss/vite": "^4.0.12",
-        "@types/bun": "^1.2.4",
-        "lefthook": "^1.11.3",
+        "@tailwindcss/vite": "^4.0.17",
+        "lefthook": "^1.11.5",
         "prettier": "^3.5.3",
         "prettier-plugin-astro": "^0.14.1",
         "prettier-plugin-svelte": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "rollup-plugin-visualizer": "^5.14.0",
-        "tailwindcss": "^4.0.12",
+        "tailwindcss": "^4.0.17",
         "typescript": "^5.8.2",
       },
     },
@@ -328,8 +327,6 @@
 
     "@types/acorn": ["@types/[email protected]", "", { "dependencies": { "@types/estree": "*" } }, "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ=="],
 
-    "@types/bun": ["@types/[email protected]", "", { "dependencies": { "bun-types": "1.2.6" } }, "sha512-fY9CAmTdJH1Llx7rugB0FpgWK2RKuHCs3g2cFDYXUutIy1QGiPQxKkGY8owhfZ4MXWNfxwIbQLChgH5gDsY7vw=="],
-
     "@types/debug": ["@types/[email protected]", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
 
     "@types/estree": ["@types/[email protected]", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
@@ -354,8 +351,6 @@
 
     "@types/unist": ["@types/[email protected]", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
-    "@types/ws": ["@types/[email protected]", "", { "dependencies": { "@types/node": "*" } }, "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw=="],
-
     "@types/yauzl": ["@types/[email protected]", "", { "dependencies": { "@types/node": "*" } }, "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q=="],
 
     "@ungap/structured-clone": ["@ungap/[email protected]", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
@@ -414,7 +409,7 @@
 
     "base-64": ["[email protected]", "", {}, "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg=="],
 
-    "bits-ui": ["[email protected].13", "", { "dependencies": { "@floating-ui/core": "^1.6.4", "@floating-ui/dom": "^1.6.7", "@internationalized/date": "^3.5.6", "esm-env": "^1.1.2", "runed": "^0.23.2", "svelte-toolbelt": "^0.7.1", "tabbable": "^6.2.0" }, "peerDependencies": { "svelte": "^5.11.0" } }, "sha512-0ysKdvHBIArfFBe+MYVAvu5OANOsivk+UJftdiW+e6lGHzf+EW/TZpLh69Vf0n8pYTjkH+33CHlVIImxTZRIMQ=="],
+    "bits-ui": ["[email protected].14", "", { "dependencies": { "@floating-ui/core": "^1.6.4", "@floating-ui/dom": "^1.6.7", "@internationalized/date": "^3.5.6", "esm-env": "^1.1.2", "runed": "^0.23.2", "svelte-toolbelt": "^0.7.1", "tabbable": "^6.2.0" }, "peerDependencies": { "svelte": "^5.11.0" } }, "sha512-T4ClhH0eQmrhZ8uMfC8Q4WBcpygnfdVTfb/1Y/6PrYA5Fqv7HTLmK3B9NSv4DUbDXpuG4SiC2cPSXVUqsEA/aw=="],
 
     "boolbase": ["[email protected]", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
 
@@ -424,8 +419,6 @@
 
     "buffer-crc32": ["[email protected]", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="],
 
-    "bun-types": ["[email protected]", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-FbCKyr5KDiPULUzN/nm5oqQs9nXCHD8dVc64BArxJadCvbNzAI6lUWGh9fSJZWeDIRD38ikceBU8Kj/Uh+53oQ=="],
-
     "call-bind-apply-helpers": ["[email protected]", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
 
     "camelcase": ["[email protected]", "", {}, "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA=="],

package.json

@@ -31,7 +31,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "astro": "^5.5.5",
     "astro-icon": "^1.1.5",
-    "bits-ui": "^1.3.13",
+    "bits-ui": "^1.3.14",
     "daisyui": "^5.0.9",
     "date-fns": "^4.1.0",
     "markdown-to-txt": "^2.0.1",
@@ -42,7 +42,6 @@
     "@astrojs/check": "^0.9.4",
     "@biomejs/biome": "^1.9.4",
     "@tailwindcss/vite": "^4.0.17",
-    "@types/bun": "^1.2.6",
     "lefthook": "^1.11.5",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",

src/components/ActivityPage/Section.astro

@@ -2,12 +2,12 @@
 import { Picture } from "astro:assets";
 interface Props {
   title: string;
-  edge: "left" | "right";
+  "align-image": "left" | "right";
   image: ImageMetadata;
   imageAlt: string;
 }
 
-const { title, edge, image, imageAlt } = Astro.props;
+const { title, "align-image": align, image, imageAlt } = Astro.props;
 ---
 
 <section class="mt-16 lg:grid lg:items-center">
@@ -16,9 +16,9 @@ const { title, edge, image, imageAlt } = Astro.props;
       class:list={[
         "isolate h-[300px] overflow-clip md:h-[400px] lg:h-[500px] lg:w-1/2 xl:h-[600px]",
         {
-          left: "lg:ml-auto lg:rounded-l-2xl",
-          right: "lg:rounded-r-2xl",
-        }[edge],
+          left: "lg:rounded-r-2xl",
+          right: "lg:ml-auto lg:rounded-l-2xl",
+        }[align],
       ]}
     >
       <Picture
@@ -35,7 +35,7 @@ const { title, edge, image, imageAlt } = Astro.props;
     style={{ gridArea: "1 / 1" }}
     class="container mx-auto lg:max-w-screen-lg"
   >
-    <div class:list={["p-8 lg:w-1/2", edge === "right" && "lg:ml-auto"]}>
+    <div class:list={["p-8 lg:w-1/2", align === "left" && "lg:ml-auto"]}>
       <h2 class="text-4xl">{title}</h2>
       <div class="prose mt-4 max-w-none">
         <slot />

src/components/ArticleList.astro

@@ -73,7 +73,7 @@ const articlesWithExcerpts = await Promise.all(
           <a
             href={`/articles/${article.id}`}
             class:list={[
-              "relative rounded-xl bg-gray-50 p-2 hover:brightness-95",
+              "rounded-xl bg-gray-50 p-2 hover:brightness-95",
               additionalProps.cellClassName,
             ]}
           >

src/components/Footer.astro

@@ -28,6 +28,7 @@ const props = Astro.props;
       <FooterSection
         title="活動"
         links={[
+          { title: "プロジェクト", to: "/projects" },
           { title: "ご寄付・ご協賛のお願い", to: "/donation/" },
           { title: "ut.code(); で学習する", to: "/activities/learn/" },
           { title: "ut.code(); で交流する", to: "/activities/share/" },
@@ -38,10 +39,6 @@ const props = Astro.props;
         title="リンク"
         links={[
           { title: "ut.code(); Learn", to: "https://learn.utcode.net/" },
-          {
-            title: "はじめてのプログラミング教室",
-            to: "https://first-programming.utcode.net/",
-          },
           { title: "GitHub", to: "https://github.com/ut-code" },
           { title: "X", to: "https://x.com/utokyo_code" },
         ]}

src/components/Footer/FooterSection.astro

@@ -1,4 +1,6 @@
 ---
+import { Icon } from "astro-icon/components";
+
 interface Props {
   title: string;
   links: { title: string; to: string }[];
@@ -11,14 +13,17 @@ const { title, links } = Astro.props;
   <ul class="mt-4 space-y-2">
     {
       links.map((link) => (
-        <li>
+        <li class="align-middle">
           <a
             href={link.to}
-            class="link relative active:top-0.25 motion-reduce:hover:underline"
+            class="link motion-reduce:hover:underline"
             target={link.to.startsWith("/") ? "" : "_blank"}
             rel={link.to.startsWith("/") ? "" : "noreferrer"}
           >
             {link.title}
+            {!link.to.startsWith("/") && (
+              <Icon name="feather:external-link" class="mx-1 mb-1 inline" />
+            )}
           </a>
         </li>
       ))

src/components/ProjectList.astro

@@ -15,13 +15,10 @@ const { projects, variant = "full" } = props;
   {
     projects.map((project, i) => (
       <li
-        class:list={[
-          "contents",
-          variant === "compact" ? "variant-short" : "variant-full",
-        ]}
+        class:list={["contents", variant === "compact" && "data-variant-short"]}
       >
         <a
-          class="relative top-0 overflow-clip rounded-xl border border-gray-200 hover:brightness-95"
+          class="overflow-clip rounded-xl border border-gray-200 bg-gray-50 hover:brightness-95"
           href={`/projects/${project.id}`}
         >
           <Picture
@@ -61,12 +58,12 @@ const { projects, variant = "full" } = props;
 
 <style>
   @media (max-width: 48rem) {
-    li.variant-short:nth-child(n + 3) {
+    li.data-variant-short:nth-child(n + 3) {
       display: none;
     }
   }
   @media (max-width: 80rem) {
-    li.variant-short:nth-child(n + 5) {
+    li.data-variant-short:nth-child(n + 5) {
       display: none;
     }
   }