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

Author: aster-void

bun.lock

@@ -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",

package.json

@@ -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/ActivityPage/Section.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/ArticleList.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.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/Footer/FooterSection.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;
     }
   }