improve page contents (and fix some ui)

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;
     }
   }

src/layouts/GlobalLayout.astro

@@ -2,7 +2,6 @@
 import { ClientRouter } from "astro:transitions";
 import Footer from "+/components/Footer.astro";
 import Header from "+/components/Header.astro";
-import Logo from "+/images/favicon.png";
 import type { Focus } from "+/schema";
 import Meta from "./meta.astro";
 
@@ -17,7 +16,7 @@ const { title, description, focus, image } = Astro.props;
 ---
 
 <html lang="ja" class="bg-gray-50 text-gray-800" data-theme="light">
-  <Meta {title} {description} image={image ?? Logo} />
+  <Meta {title} {description} image={image} />
   <body class="min-h-full w-full">
     <style is:global>
       @import "+/global.css";

src/layouts/meta.astro

@@ -3,7 +3,7 @@ interface Props {
   title: string | null;
   description: string | null;
   keywords?: string[];
-  image: ImageMetadata;
+  image: ImageMetadata | null;
 }
 const { title, description, keywords = [], image } = Astro.props;
 const url = Astro.url.href;
@@ -22,7 +22,7 @@ const url = Astro.url.href;
 <meta property="og:site_name" content="ut.code();" />
 <meta property="og:title" content={title} />
 {description && <meta property="og:description" content={description} />}
-<meta property="og:image" content={image.src} />
+<meta property="og:image" content={image?.src ?? "/utcode-logo/normal.svg"} />
 <meta property="og:url" content={url} />
 <meta property="og:locale" content="ja_JP" />
 <meta name="twitter:card" content="summary_large_image" />

src/pages/activities/develop.astro

@@ -5,10 +5,12 @@ import Summary from "+/components/ActivityPage/Summary.astro";
 import Title from "+/components/ActivityPage/Title.astro";
 
 import ActionButton from "+/components/ActionButton.astro";
-import Brainstorming from "+/images/activity-develop-brainstorming.jpg";
-import Meeting from "+/images/activity-develop-meeting.jpg";
-import Project from "+/images/activity-develop-project.jpg";
-import Cover from "+/images/activity-develop.jpg";
+
+import Cover from "+/images/activity/develop/cover.jpg";
+
+import Hackathon from "+/images/activity/develop/hackathon.jpg";
+import Project from "+/images/activity/develop/project.jpg";
+import Meeting from "+/images/activity/develop/solo-dev.jpg";
 ---
 
 <Layout type="開発" cover={Cover}>
@@ -24,46 +26,33 @@ import Cover from "+/images/activity-develop.jpg";
     title="プロジェクト"
     image={Project}
     imageAlt="共同作業の様子"
-    edge="left"
+    align-image="right"
   >
-    {/* eslint-disable prettier/prettier */}
     <p>
       プロジェクトは、ut.code();
       内のチームにより開発されるソフトウェアの単位で、多くはそれぞれ独立した
-      Slack チャンネル、Notion ページ、Google Drive
-      フォルダを持っています。成果物はオープンソースにすることが推奨されており、
+      Slack チャンネル、Notion ページ、Google Drive フォルダを持っています。
+      成果物はすべてオープンソースであり、
       <a href="https://github.com/ut-code" target="_blank" rel="noreferrer">
         GitHub</a
-      >
-      上で公開されています。
+      > 上で公開されています。
     </p>
     <ActionButton to="/projects"> すべてのプロジェクト </ActionButton>
   </Section>
-  <Section
-    title="ブレインストーミング"
-    image={Brainstorming}
-    imageAlt="2022 年度大忘年会の様子"
-    edge="right"
-  >
+  <Section title="ハッカソン" image={Hackathon} imageAlt="" align-image="left">
     <p>
-      ソフトウェアは、作り始める前にしっかりとアイデアを練り上げることが重要です。ut.code();
-      では、プロジェクトの実施の前にブレインストーミング会を実施し、多くの人から作りたいプロダクトについてのアイデアに対するフィードバックを得る機会を提供しています。
+      ハッカソンは、限られた時間の中でアイデアを形にし、実際に動くプロダクトを開発するイベントです。
+      参加者はチームを組み、短期間で設計・実装・発表までを行うため、創造力や技術力、チームワークが試されます。
+      アイデアを素早く具体化し、試行錯誤しながらブラッシュアップする過程を通じて、実践的なスキルを磨くことができます。
     </p>
   </Section>
-  <Section
-    title="定例ミーティング"
-    image={Meeting}
-    imageAlt="定例ミーティング"
-    edge="left"
-  >
+  <Section title="個人開発" image={Meeting} imageAlt="" align-image="right">
     <p>
-      プロジェクトが動き始めた後、重要になってくるのは継続です。ut.code();
-      では、すべてのプロジェクトで週 1
-      度の定例ミーティングを実施することを推奨しています。テスト期間など、時間がとりづらい時期でも、週に
-      1
-      度、ほんの少しだけ実施中のプロジェクトに意識を向けることにより、プロジェクトの成功率を大きく高めることができます。
+      個人開発は、アイデアを自由に形にし、自分のペースで開発を進めるスタイルです。
+      発想から実装までを一貫して行うことで、技術力や問題解決能力を高めることができます。
+      思いついたものをすぐに試し、試行錯誤を重ねながらプロダクトを作り上げていく過程そのものが、大きな学びや発見につながります。
+      ut.code();
+      は、そんな個人開発を支えるため、発表の場や開発に必要なリソース提供を通じて、開発者の挑戦をサポートしています。
     </p>
   </Section>
 </Layout>
-); }
-