complete /members

Author: aster-void

.helix/languages.toml

@@ -1,6 +1,10 @@
+[language-servers]
+astro-ls = { command = "astro-ls", args = ["--stdio"] }
+
 [[language]]
 name = "astro"
 formatter = { command = "bun", args = ["prettier", "--parser", "astro"] }
+language-servers = ["astro-ls"]
 [[language]]
 name = "typescript"
 formatter = { command = "bun", args = ["prettier", "--parser", "typescript"] }

.vscode/extensions.json

@@ -1,7 +1,5 @@
 {
     "recommendations": [
-        "dbaeumer.vscode-eslint",
-        "apollographql.vscode-apollo",
         "astro-build.astro-vscode"
     ]
 }

_src/pages/join.tsx

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import React from "react";
 import { StaticImage } from "gatsby-plugin-image";
 import GlobalFooter from "../components/GlobalFooter";
@@ -103,3 +104,5 @@ export default function JoinPage() {
 export function Head() {
   return <CommonHead title="ut.code(); に参加する" />;
 }
+=======
+>>>>>>> 9135235 (complete /members)

contents/projects/dull-meshi/index.mdx

@@ -4,6 +4,8 @@ slug: dull-meshi
 image: ./dull-meshi.jpg
 date: 2023-04-05
 description: 質問に答えていくだけで献立を提案してくれるアプリ
-tags: [TypeScript, React] 
+tags: [TypeScript, React]
 github: https://github.com/ut-code/menu
 ---
+
+質問に答えていくだけで献立を提案してくれるアプリです。

contents/projects/learn-braille/index.mdx

@@ -26,4 +26,4 @@ ut.code();が作成した体験型点字学習サイトです。
 
 ## 漢点字を書く
 
-漢字から漢点字への翻訳を実際に画面上で点を打つ練習を通して学べます。
+漢字から漢点字への翻訳を実際に画面上で点を打つ練習を通して学べます。

contents/projects/postput/index.mdx

@@ -1,4 +1,5 @@
 ---
+layout: "../../../layouts/project.astro"
 title: PostPut
 slug: postput
 image: ./image.png
@@ -13,14 +14,15 @@ Slackの代替として使えるようにすることを目指しています。
 
 ## 主な機能
 
-* slackのチャンネル機能の代わりとして、タグでメッセージを振り分けることができます
-* 1つのメッセージに複数のタグをつける(=複数のチャンネルに送信する)ことができます
-* すでに送ったメッセージのタグをつけ直すことができます (間違ったチャンネルに話題を送ってしまっても訂正できる)
-* タグを検索し、選んだタグのついたメッセージのみ表示できます
-* ユーザーごとに頻繁に見るタグをサイドバーに登録しておくことができます(=チャンネルにスターをつける機能)
-* ユーザーごとに後で確認したいメッセージを保存しておくことができます(=ブックマーク機能)
+- slackのチャンネル機能の代わりとして、タグでメッセージを振り分けることができます
+- 1つのメッセージに複数のタグをつける(=複数のチャンネルに送信する)ことができます
+- すでに送ったメッセージのタグをつけ直すことができます (間違ったチャンネルに話題を送ってしまっても訂正できる)
+- タグを検索し、選んだタグのついたメッセージのみ表示できます
+- ユーザーごとに頻繁に見るタグをサイドバーに登録しておくことができます(=チャンネルにスターをつける機能)
+- ユーザーごとに後で確認したいメッセージを保存しておくことができます(=ブックマーク機能)
 
 ## PostPutを試してみる
 
 現在はまだ開発途中ですが、[こちら](https://postput-test-server.onrender.com/)にアクセスすると使ってみることができます。
-* (最初にログイン画面が表示されますが、一度も使われていないユーザー名であれば任意のパスワードでログイン(サインアップ)できるようになっています。)
+
+- (最初にログイン画面が表示されますが、一度も使われていないユーザー名であれば任意のパスワードでログイン(サインアップ)できるようになっています。)

src/components/ArticleList.astro

@@ -6,7 +6,7 @@ import { Image } from "astro:assets";
 
 interface Props {
   variant?: "normal" | "compact";
-  articles: (Article & { body: string })[];
+  articles: { data: Article; body?: string }[];
   class?: string;
 }
 const props = Astro.props;
@@ -53,17 +53,17 @@ const { variant = "normal", articles } = props;
         ? {
             cellClassName: "md:col-span-2 md:row-span-2",
             imageClassName: "h-[350px] md:h-[450px]",
-            excerpt: article.body.slice(0, 120),
+            excerpt: article.body?.slice(0, 120),
           }
         : {
             cellClassName: "",
             imageClassName: "h-[200px]",
-            excerpt: article.body.slice(0, 120),
+            excerpt: article.body?.slice(0, 120),
           };
       return (
         <li class="contents">
           <a
-            href={`/articles/${article.slug}`}
+            href={`/articles/${article.data.slug}`}
             class:list={[
               "block hover:opacity-80",
               additionalProps.cellClassName,
@@ -75,27 +75,19 @@ const { variant = "normal", articles } = props;
                 additionalProps.imageClassName,
               ]}
             >
-              {article.image ? (
-                <Image
-                  alt="カバー画像"
-                  height={48 * 4 * 4}
-                  width={48 * 4 * 4}
-                  src={article.image}
-                  class="w-full h-full object-cover"
-                />
-              ) : (
-                <img
-                  alt="画像なし"
-                  src={noImage.src}
-                  class="w-full h-full object-cover"
-                />
-              )}
+              <Image
+                alt="カバー画像"
+                height={48 * 4 * 4}
+                width={48 * 4 * 4}
+                src={article.data.image}
+                class="w-full h-full object-cover"
+              />
             </div>
             <div class="mt-4">
               <time class="block text-gray-500 text-sm">
-                {format(article.date, "yyyy/MM/dd HH:mm")}
+                {format(article.data.date, "yyyy/MM/dd HH:mm")}
               </time>
-              <h3 class="text-lg font-bold">{article.title}</h3>
+              <h3 class="text-lg font-bold">{article.data.title}</h3>
               <p class="prose max-w-none mt-2">{additionalProps.excerpt}</p>
             </div>
           </a>
@@ -104,5 +96,3 @@ const { variant = "normal", articles } = props;
     })
   }
 </ul>
-); }
-

src/components/Header.astro

@@ -2,6 +2,7 @@
 import { Icon } from "astro-icon/components";
 import Logo from "./Logo.astro";
 import { Focus } from "../schema.ts";
+import { ClientRouter } from "astro:transitions";
 
 const links = [
   { title: "プロジェクト", to: "/projects", focus: Focus.projects },
@@ -17,6 +18,7 @@ interface Props {
 const { focus } = Astro.props;
 ---
 
+<ClientRouter />
 <header class="sticky">
   {
     /* <div class="flex gap-4 justify-center items-center px-1 py-3 md:py-1 bg-green-400">
@@ -47,8 +49,8 @@ const { focus } = Astro.props;
             <a
               href={link.to}
               class:list={[
-                "flex items-center h-full px-6 hover:bg-gray-100 navigation-bar",
-                focus === link.focus && "bg-amber-50",
+                "flex items-center h-full px-6 navigation-bar",
+                focus === link.focus && "text-amber-500",
               ]}
             >
               {link.title}

src/content.config.ts

@@ -6,7 +6,7 @@ import { glob } from "astro/loaders";
 import {
   CreateArticleSchema,
   CreateProjectSchema,
-  MemberSchema,
+  CreateMemberSchema,
 } from "./schema.ts";
 
 const articles = defineCollection({
@@ -16,7 +16,7 @@ const articles = defineCollection({
 
 const members = defineCollection({
   loader: glob({ base: "./contents/members", pattern: "*/index.{md,mdx}" }),
-  schema: MemberSchema,
+  schema: CreateMemberSchema,
 });
 const projects = defineCollection({
   loader: glob({ base: "./contents/projects", pattern: "*/index.{md,mdx}" }),

src/pages/articles.astro

@@ -0,0 +1,36 @@
+---
+import GlobalLayout from "../layouts/GlobalLayout.astro";
+import ArticleList from "../components/ArticleList.astro";
+import { Focus } from "../schema";
+import { getCollection } from "astro:content";
+
+`
+  query ArticlesPage {
+    allMdx(
+      filter: {
+        internal: { contentFilePath: { glob: "**/contents/articles/**" } }
+      }
+      sort: { frontmatter: { date: DESC } }
+    ) {
+      nodes {
+        ...ArticleListArticle
+      }
+    }
+  }
+`;
+
+const articles = (await getCollection("articles")).sort(
+  (a, b) => b.data.date.getTime() - a.data.date.getTime(),
+);
+---
+
+<GlobalLayout
+  title="すべての記事"
+  description="ut.code(); からの最新情報"
+  focus={Focus.articles}
+>
+  <main class="container mx-auto px-4 py-24">
+    <h1 class="text-4xl text-center">すべての記事</h1>
+    <ArticleList class="mt-16" {articles} />
+  </main>
+</GlobalLayout>