project and project/[project] complete

Author: aster-void

README.md

@@ -20,7 +20,9 @@ bun install --frozen-lockfile
 
 ## TODO
 
-<https://astro.build/integrations/2/?search=&categories%5B%5D=performance%2Bseo&categories%5B%5D=accessibility>
+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/
 
 ## 開発
 

astro.config.ts

@@ -23,4 +23,9 @@ export default defineConfig({
     }),
     mdx(),
   ],
+
+  prefetch: {
+    prefetchAll: true,
+    defaultStrategy: "hover",
+  },
 });

src/components/Header.astro

@@ -1,14 +1,20 @@
 ---
 import { Icon } from "astro-icon/components";
 import Logo from "./Logo.astro";
+import { Focus } from "../schema.ts";
 
 const links = [
-  { title: "プロジェクト", to: "/projects/" },
-  { title: "記事", to: "/articles/" },
-  { title: "メンバー", to: "/members/" },
-  { title: "参加", to: "/join/" },
-  { title: "お問い合わせ", to: "/contact/" },
+  { title: "プロジェクト", to: "/projects", focus: Focus.projects },
+  { title: "記事", to: "/articles", focus: Focus.articles },
+  { title: "メンバー", to: "/members", focus: Focus.members },
+  { title: "参加", to: "/join", focus: Focus.join },
+  { title: "お問い合わせ", to: "/contact", focus: Focus.contact },
 ];
+
+interface Props {
+  focus: Focus;
+}
+const { focus } = Astro.props;
 ---
 
 <header class="sticky">
@@ -40,7 +46,10 @@ const links = [
           <li>
             <a
               href={link.to}
-              class="flex items-center h-full px-6 hover:bg-gray-100"
+              class:list={[
+                "flex items-center h-full px-6 hover:bg-gray-100 navigation-bar",
+                focus === link.focus && "bg-amber-50",
+              ]}
             >
               {link.title}
             </a>
@@ -57,28 +66,32 @@ const links = [
       <Icon name="feather:menu" class="w-6 h-6 text-gray-600" />
     </button>
   </div>
-</header>
-<div
-  id="navigation_panel"
-  popover
-  class="w-full
+  <div
+    id="navigation_panel"
+    popover
+    class="w-full
     absolute
     top-16
     transition-opacity
     duration-300"
->
-  <ul class="">
-    {
-      links.map((link) => (
-        <li>
-          <a href={link.to} class="block px-4 py-2 hover:bg-gray-100">
-            {link.title}
-          </a>
-        </li>
-      ))
-    }
-  </ul>
-</div>
+  >
+    <ul class="">
+      {
+        links.map((link) => (
+          <li>
+            <a
+              href={link.to}
+              class="block px-4 py-2 hover:bg-gray-100 transition-all duration-300"
+            >
+              {link.title}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</header>
+
 <style>
   /* https://stackoverflow.com/questions/77042256/css-transition-animation-not-working-for-popover-attribute */
   /* TODO: not working now */
@@ -93,4 +106,14 @@ const links = [
       opacity 0.3s,
       display 0.3s allow-discrete;
   }
+
+  .navigation-bar {
+    background: linear-gradient(currentColor 0 0) bottom left/
+      var(--underline-width, 0%) 0.1em no-repeat;
+    text-decoration: none;
+    transition: background-size 0.5s;
+  }
+  .navigation-bar:hover {
+    --underline-width: 100%;
+  }
 </style>

src/components/ProjectList.astro

@@ -3,7 +3,9 @@ import { Image } from "astro:assets";
 import type { Project } from "../schema";
 
 interface Props {
-  projects: Project[];
+  projects: {
+    data: Project;
+  }[];
   class?: string;
 }
 const props = Astro.props;
@@ -36,21 +38,21 @@ const { projects } = props;
       <li class="contents">
         <a
           class="hover:brightness-95 rounded-xl overflow-clip border border-gray-200 bg-white"
-          href={`/projects/${project.slug}/`}
+          href={`/projects/${project.data.slug}/`}
         >
           <Image
-            width="100"
-            height={48 * 4}
+            width="800"
+            height="600"
             alt="プロジェクトのイメージ画像"
-            src={project.image}
-            class="object-cover"
+            src={project.data.image}
+            class="w-full h-[16rem] object-cover"
           />
           <div class="p-4">
-            <h3 class="text-xl font-bold">{project.title}</h3>
+            <h3 class="text-xl font-bold">{project.data.title}</h3>
             <p class="mt-2 prose">
-              {project.description.length < 120
-                ? project.description
-                : project.description.slice(0, 120)}
+              {project.data.description.length < 120
+                ? project.data.description
+                : project.data.description.slice(0, 120)}
             </p>
           </div>
         </a>

src/layouts/GlobalLayout.astro

@@ -2,10 +2,18 @@
 import Meta from "./meta.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+import type { Focus } from "../schema";
+
+interface Props {
+  title: string | null;
+  description: string | null;
+  focus: Focus;
+}
+const { title, description, focus } = Astro.props;
 ---
 
-<Meta title="ut.code();" url="http://localhost:4321">
-  <Header />
+<Meta {title} {description} url="http://localhost:4321">
+  <Header {focus} />
   <slot />
   <Footer />
 </Meta>

src/layouts/meta.astro

@@ -1,16 +1,24 @@
 ---
 // import type { WithContext, Thing } from "schema-dts";
+import { getImage } from "astro:assets";
 import "../global.css";
+import Favicon from "../images/favicon.png";
 
 interface Props {
   title: string | null;
-  description?: string;
+  description: string | null;
   keywords?: string[];
   image?: string; // URL of image
   // linkedData?: WithContext<Thing>;
   url: string; // absolute path starting with /
 }
 const { title, description, keywords = [], image, url } = Astro.props;
+
+const favicon = await getImage({
+  src: Favicon,
+  height: 128,
+  width: 128,
+});
 ---
 
 <html lang="ja" class="min-h-full">
@@ -19,10 +27,10 @@ const { title, description, keywords = [], image, url } = Astro.props;
     <meta charset="utf-8" />
     <meta
       name="description"
-      content={description ||
+      content={description ??
         "東京大学のソフトウェアエンジニアリングコミュニティ"}
     />
-    <link rel="icon" />
+    <link rel="icon" href={favicon.src} />
     <meta property="og:site_name" content="ut.code();" />
     <meta property="og:title" content={title} />
     <!-- TODO: make the origin flexible -->

src/pages/index.astro

@@ -3,6 +3,7 @@ import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
 import { Icon } from "astro-icon/components";
 import nullthrows from "nullthrows";
+import { Focus } from "../schema.ts";
 
 import ActionButton from "../components/ActionButton.astro";
 import SectionHeader from "../components/per-page/SectionHeader.astro";
@@ -18,7 +19,7 @@ const projects = (await getCollection("projects")).slice(0, 6);
 const articles = (await getCollection("articles")).slice(0, 6);
 ---
 
-<GlobalLayout>
+<GlobalLayout title={null} description={null} focus={Focus.none}>
   <div
     class="h-screen grid grid-flow-col"
     style={{ gridTemplateRows: "max-content minmax(0, 1fr)" }}
@@ -117,10 +118,7 @@ const articles = (await getCollection("articles")).slice(0, 6);
   <section>
     <div class="container mx-auto px-4 py-12">
       <SectionHeader title="Projects" subtitle="実施中のプロジェクト" />
-      <ProjectList
-        class="mt-10"
-        projects={projects.map((project) => project.data)}
-      />
+      <ProjectList class="mt-10" {projects} />
       <ActionButton to="/projects/" class="mt-8 ml-auto">
         すべてのプロジェクト
       </ActionButton>

src/pages/members/[member].astro

@@ -1,4 +1,6 @@
 ---
+import GlobalLayout from "../../layouts/GlobalLayout.astro";
+import { Focus } from "../../schema";
 import { getCollection, render } from "astro:content";
 
 export async function getStaticPaths() {
@@ -11,10 +13,13 @@ export async function getStaticPaths() {
 
 const { member } = Astro.props;
 const { Content } = await render(member);
-import GlobalLayout from "../../layouts/GlobalLayout.astro";
 ---
 
-<GlobalLayout>
+<GlobalLayout
+  title={member.data.nameJa}
+  description="ut.code(); のメンバーです。"
+  focus={Focus.members}
+>
   Member!
   <Content />
 </GlobalLayout>

src/pages/projects.astro

@@ -0,0 +1,36 @@
+---
+import GlobalLayout from "../layouts/GlobalLayout.astro";
+import ProjectList from "../components/ProjectList.astro";
+import { getCollection } from "astro:content";
+import { Focus } from "../schema";
+
+`
+  query ProjectsPage {
+    allMdx(
+      filter: {
+        internal: { contentFilePath: { glob: "**/contents/projects/**" } }
+      }
+      sort: [{ frontmatter: { order: ASC } }, { frontmatter: { date: DESC } }]
+    ) {
+      nodes {
+        ...ProjectListProject
+      }
+    }
+  }
+`;
+
+interface Props {}
+
+const projects = await getCollection("projects");
+---
+
+<GlobalLayout
+  title="すべてのプロジェクト"
+  description="ut.code(); で開発を行っているプロジェクト一覧です。"
+  focus={Focus.projects}
+>
+  <main class="container mx-auto px-4 py-24">
+    <h1 class="text-4xl text-center">プロジェクト</h1>
+    <ProjectList class="mt-16" {projects} />
+  </main>
+</GlobalLayout>