mostly complete

Author: aster-void

README.md

@@ -22,7 +22,10 @@ bun install --frozen-lockfile
 
 style more
 a11y <https://astro.build/integrations/2/?search=&categories%5B%5D=performance%2Bseo&categories%5B%5D=accessibility>
-pagination https://code.vool.jp/blog/astro-pagination/
+pagination
+
+- https://code.vool.jp/blog/astro-pagination/
+- https://docs.astro.build/en/guides/routing/#pagination
 
 ## 開発
 

bun.lock

@@ -9,10 +9,13 @@
         "@iconify-json/feather": "^1.2.1",
         "@mdx-js/react": "^3.1.0",
         "@tailwindcss/typography": "^0.5.16",
+        "@types/html-to-text": "^9.0.4",
         "astro": "^5.4.2",
         "astro-icon": "^1.1.5",
+        "bits-ui": "^1.3.8",
         "color": "^5.0.0",
         "date-fns": "^4.1.0",
+        "markdown-to-txt": "^2.0.1",
         "nullthrows": "^1.1.1",
         "prismjs": "^1.29.0",
         "react": "^19.0.0",
@@ -197,6 +200,8 @@
 
     "@img/sharp-win32-x64": ["@img/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg=="],
 
+    "@internationalized/date": ["@internationalized/[email protected]", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/[email protected]", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
 
     "@jridgewell/resolve-uri": ["@jridgewell/[email protected]", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
@@ -345,6 +350,8 @@
 
     "@types/hast": ["@types/[email protected]", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
+    "@types/html-to-text": ["@types/[email protected]", "", {}, "sha512-pUY3cKH/Nm2yYrEmDlPR1mR7yszjGx4DrwPjQ702C4/D5CwHuZTgZdIdwPkRbcuhs7BAh2L5rg3CL5cbRiGTCQ=="],
+
     "@types/mdast": ["@types/[email protected]", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
 
     "@types/mdx": ["@types/[email protected]", "", {}, "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw=="],
@@ -419,6 +426,8 @@
 
     "base-64": ["[email protected]", "", {}, "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg=="],
 
+    "bits-ui": ["[email protected]", "", { "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-vmj0uQQqh7sEw5La4CXKjMszcDHeEwjUX5Q4/cX3UZ2aTY/HTEaMK5cJyCfA+2yMO7YNCx5mIM/THgFvphHt2w=="],
+
     "boolbase": ["[email protected]", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
 
     "boxen": ["[email protected]", "", { "dependencies": { "ansi-align": "^3.0.1", "camelcase": "^8.0.0", "chalk": "^5.3.0", "cli-boxes": "^3.0.0", "string-width": "^7.2.0", "type-fest": "^4.21.0", "widest-line": "^5.0.0", "wrap-ansi": "^9.0.0" } }, "sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw=="],
@@ -795,10 +804,14 @@
 
     "lodash.castarray": ["[email protected]", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],
 
+    "lodash.escape": ["[email protected]", "", {}, "sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw=="],
+
     "lodash.isplainobject": ["[email protected]", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],
 
     "lodash.merge": ["[email protected]", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
+    "lodash.unescape": ["[email protected]", "", {}, "sha512-DhhGRshNS1aX6s5YdBE3njCCouPgnG29ebyHvImlZzXZf2SHgt+J08DHgytTPnpywNbO1Y8mNUFyQuIDBq2JZg=="],
+
     "longest-streak": ["[email protected]", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
 
     "lru-cache": ["[email protected]", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
@@ -811,6 +824,10 @@
 
     "markdown-table": ["[email protected]", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
 
+    "markdown-to-txt": ["[email protected]", "", { "dependencies": { "lodash.escape": "^4.0.1", "lodash.unescape": "^4.0.1", "marked": "^4.0.14" } }, "sha512-Hsj7KTN8k1gutlLum3vosHwVZGnv8/cbYKWVkUyo/D1rzOYddbDesILebRfOsaVfjIBJank/AVOySBlHAYqfZw=="],
+
+    "marked": ["[email protected]", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A=="],
+
     "math-intrinsics": ["[email protected]", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
     "mdast-util-definitions": ["[email protected]", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ=="],
@@ -1101,6 +1118,8 @@
 
     "run-parallel": ["[email protected]", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
 
+    "runed": ["[email protected]", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],
+
     "s.color": ["[email protected]", "", {}, "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA=="],
 
     "safer-buffer": ["[email protected]", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
@@ -1147,6 +1166,8 @@
 
     "svelte": ["[email protected]", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^1.4.3", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-dxHyh3USJyayafSt5I5QD7KuoCM5ZGdIOtLQiKHEro7tymdh0jMcNkiSBVHW+LOA2jEqZEHhyfwN6/pCjx0Fug=="],
 
+    "svelte-toolbelt": ["[email protected]", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
+
     "svgo": ["[email protected]", "", { "dependencies": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", "css-select": "^5.1.0", "css-tree": "^2.3.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.0.0" }, "bin": "./bin/svgo" }, "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw=="],
 
     "tabbable": ["[email protected]", "", {}, "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="],

contents/articles/2025-02-20_2025-spring-camp/index.mdx

@@ -1,9 +1,9 @@
 ---
 title: 2025 年度春合宿を開催しました
-date: 2025-03-01T20:00:00+09:00
+date: 2025-03-01
 image: ./image.jpg
 slug: 2025-spring-camp
-author: tyasumura
+author: "tyasumura"
 ---
 
 ut.code(); では 2 月 20 日から 22 日まで、東京大学山中寮内藤セミナーハウスにて春合宿を実施しました。

contents/banner.ts

@@ -0,0 +1,18 @@
+type Banner = {
+  shown: boolean;
+  kind: "notify" | "error";
+  long: string;
+  short: string;
+  link: string;
+  linkText?: string;
+};
+const banner: Banner = {
+  shown: true,
+  kind: "error",
+  long: "開発中の Website V3 を見ています",
+  short: "ハッカソンを開催します",
+  link: "https://utcode.net",
+  linkText: "リリース版に戻る",
+};
+
+export default banner;

contents/members/kshibayama/index.mdx

@@ -7,6 +7,7 @@ description: サークルいっぱい入ってる多趣味な人。
 faceImage: ./face.jpg
 upperBodyImage: ./upper-body.jpg
 github: Tsurubara-UTcode
+theme-light: "#CEDDF2"
 ---
 
 ## 自己紹介

contents/members/ykobayashi/index.mdx

@@ -7,6 +7,7 @@ date: 2023-04-03
 description: Helix と NixOS を使います。
 faceImage: ./face.jpg
 upperBodyImage: ./upper-body.jpg
+theme-light: "#FEFCE8"
 ---
 
 ## 自己紹介

package.json

@@ -24,10 +24,12 @@
     "@iconify-json/feather": "^1.2.1",
     "@mdx-js/react": "^3.1.0",
     "@tailwindcss/typography": "^0.5.16",
+    "@types/html-to-text": "^9.0.4",
     "astro": "^5.4.2",
     "astro-icon": "^1.1.5",
     "color": "^5.0.0",
     "date-fns": "^4.1.0",
+    "markdown-to-txt": "^2.0.1",
     "nullthrows": "^1.1.1",
     "prismjs": "^1.29.0",
     "react": "^19.0.0",

src/components/ActionButton.astro

@@ -15,7 +15,7 @@ const { to, variant = "dark" } = props;
   href={to}
   {...!to.startsWith("/") ? { target: "_blank", rel: "noreferrer" } : {}}
   class:list={[
-    "not-prose relative flex w-max items-center gap-4 rounded-full bg-white px-6 py-3 font-bold text-black hover:brightness-95 active:top-0.75",
+    "not-prose relative flex w-max items-center gap-4 rounded-full bg-white px-6 py-3 font-bold text-black hover:brightness-95 active:top-0.25",
     variant === "dark" && "border border-black",
     !props["no-motion"] && "motion",
     Astro.props.class,

src/components/ArticleList.astro

@@ -1,98 +1,102 @@
 ---
 import { format } from "date-fns";
-import noImage from "../images/no-image.svg";
-import type { Article } from "../schema";
 import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
+import { markdownToTxt } from "markdown-to-txt";
 
 interface Props {
-  variant?: "normal" | "compact";
-  articles: { data: Article; body?: string }[];
+  variant?: "full" | "compact";
   class?: string;
 }
 const props = Astro.props;
-const { variant = "normal", articles } = props;
+const { variant = "full" } = props;
+
+const articles = (await getCollection("articles")).sort(
+  (a, b) => b.data.date.getTime() - a.data.date.getTime(),
+);
+if (variant === "compact") {
+  articles.splice(3);
+}
+
+const MDXSpecialSyntax = /^import ActionButton from ".+";/;
+
+const articlesWithExcerpts = await Promise.all(
+  articles.map(async (article) => {
+    if (!article.body) throw new Error("article doesn't have body!");
+    // 😇 performance
+    const text = markdownToTxt(article.body);
+    return {
+      article,
+      text: text.replace(MDXSpecialSyntax, ""),
+    };
+  }),
+);
 ---
 
-<!--
-  fragment ArticleListArticle on Mdx {
-    id
-    frontmatter {
-      date
-      slug
-      title
-      image {
-        childImageSharp {
-          gatsbyImageData(
-            width: 600
-            height: 400
-            transformOptions: { fit: INSIDE }
-          )
-          largeGatsbyImageData: gatsbyImageData(
-            width: 1200
-            height: 800
-            transformOptions: { fit: INSIDE }
-          )
-        }
-      }
-    }
-    excerpt(pruneLength: 60)
-    longExcerpt: excerpt(pruneLength: 200)
-  }
--->
 <ul
   class:list={[
     "grid grid-flow-dense gap-9 md:grid-cols-2 lg:grid-cols-3",
-    variant === "normal" && "xl:grid-cols-4",
+    variant === "full" ? "variant-full xl:grid-cols-4" : "variant-compact",
     props.class,
   ]}
 >
   {
-    articles.map((article, i) => {
-      const isFeatured = variant === "normal" && i % 11 === 0; // 11 記事ごとに大きく表示する
+    articlesWithExcerpts.map(({ article, text }, i) => {
+      const isFeatured = variant === "full" && i % 11 === 0; // 11 記事ごとに大きく表示する
       const additionalProps = isFeatured
         ? {
             cellClassName: "md:col-span-2 md:row-span-2",
-            imageClassName: "h-[350px] md:h-[450px]",
-            excerpt: article.body?.slice(0, 120),
+            imageClassName: "max-h-[350px] md:max-h-[450px]",
+            excerpt: text.slice(0, 300),
           }
         : {
             cellClassName: "",
-            imageClassName: "h-[200px]",
-            excerpt: article.body?.slice(0, 120),
+            imageClassName: "max-h-[200px]",
+            excerpt: text.slice(0, 80),
           };
       return (
         <li class="contents">
           <a
-            href={`/articles/${article.data.slug}`}
+            href={`/articles/${article.id}`}
             class:list={[
-              "block hover:opacity-80",
+              "relative rounded-xl p-1 shadow-md hover:brightness-110 active:top-0.5",
               additionalProps.cellClassName,
             ]}
           >
-            <div
+            <Image
+              loading={i < 5 ? "eager" : "lazy"}
+              alt="カバー画像"
+              height={48 * 4 * 4}
+              width={48 * 4 * 4}
+              src={article.data.image}
               class:list={[
-                "isolate h-48 w-full overflow-clip rounded-xl object-cover",
+                "animate-move w-full rounded-xl object-contain object-top",
                 additionalProps.imageClassName,
               ]}
-            >
-              <Image
-                alt="カバー画像"
-                height={48 * 4 * 4}
-                width={48 * 4 * 4}
-                src={article.data.image}
-                class="h-full w-full object-cover"
-              />
-            </div>
+            />
             <div class="mt-4">
               <time class="block text-sm text-gray-500">
                 {format(article.data.date, "yyyy/MM/dd HH:mm")}
               </time>
               <h3 class="text-lg font-bold">{article.data.title}</h3>
-              <p class="prose mt-2 max-w-none">{additionalProps.excerpt}</p>
+              <p class="prose mt-2 max-w-none">{additionalProps.excerpt}...</p>
             </div>
           </a>
         </li>
       );
     })
   }
 </ul>
+<style>
+  @import "tailwindcss";
+  @media (max-width: 64rem) {
+    .variant-compact :nth-child(n + 3) a {
+      @apply hidden;
+    }
+  }
+  @media (max-width: 80rem) {
+    .variant-compact :nth-child(n + 4) a {
+      @apply hidden;
+    }
+  }
+</style>

src/components/Footer.astro

@@ -12,7 +12,7 @@ const props = Astro.props;
 <footer
   class:list={["mt-auto mb-0 w-full bg-black text-gray-200", props.class]}
 >
-  <div class="container mx-auto px-8 py-12">
+  <div class="relative bottom-0 mx-auto px-8 py-12">
     <div
       class="grid gap-x-16 gap-y-8 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-3 lg:grid-rows-1"
     >