feat: /about-us, /contact, /linksを実装

src/components/Elements/LinkCard/LinkCard.astro

@@ -4,8 +4,12 @@ import { twMerge } from "tailwind-merge"
 import { unfurl } from "unfurl.js"
 import { Icon } from "../Icon"
 
-type Props = HTMLAttributes<"a">
-const { href, ...props } = Astro.props
+type Props = HTMLAttributes<"a"> & {
+  title?: string
+  description?: string
+  image?: string
+}
+const { href, title, description, image, ...props } = Astro.props
 const url = new URL(href ?? "")
 
 const metadata = await unfurl(url.href).catch(() => undefined)
@@ -23,7 +27,11 @@ const shouldInvertFavicon = url.hostname.includes("github")
   >
     <div class="flex min-w-0 flex-1 flex-col justify-between gap-2 px-5">
       <p class="line-clamp-2 text-xl font-bold">{og?.title ?? href}</p>
-      {og?.description && <p class="truncate text-muted-foreground">{og.description}</p>}
+      {
+        (description || og?.description) && (
+          <p class="truncate text-muted-foreground">{description ?? og?.description}</p>
+        )
+      }
       <div class="flex flex-row items-center gap-2">
         {
           favicon ? (
@@ -32,16 +40,16 @@ const shouldInvertFavicon = url.hostname.includes("github")
             <Icon name="tabler:world-x" class="h-4 w-4" />
           )
         }
-        <p class="truncate">{url.hostname}</p>
+        <p class="truncate">{title ?? url.hostname}</p>
       </div>
     </div>
     {
-      og?.images && (
+      (image || og?.images) && (
         <div class="flex-shrink-0">
           <img
-            src={og.images[0].url}
+            src={image ?? og?.images?.[0].url}
             class="roundjed-r-lg h-36 w-36 object-cover md:w-fit"
-            alt={og.images[0].alt ?? og.title ?? href}
+            alt={og?.images?.[0].alt ?? og?.title ?? url.href}
             loading="lazy"
           />
         </div>

src/content/config.ts

@@ -2,7 +2,7 @@ import { z, defineCollection } from "astro:content"
 import { categories } from "./categories"
 import { zodEnumFromObj } from "@/lib/zod"
 
-export const postSchema = z
+export const postsSchema = z
   .object({
     title: z.string(),
     draft: z.boolean(),
@@ -11,19 +11,9 @@ export const postSchema = z
     categories: z.array(zodEnumFromObj(categories)),
     tags: z.array(z.string()).optional(),
     icon: z.string(),
-    links: z
-      .array(
-        z.object({
-          title: z.string().optional(),
-          description: z.string().optional(),
-          website: z.string().url(),
-          image: z.string().url().optional(),
-        }),
-      )
-      .optional(),
   })
   .strict()
-export type PostSchema = z.infer<typeof postSchema>
+export type PostsSchema = z.infer<typeof postsSchema>
 
 export const membersSchema = z.object({
   name: z.string(),
@@ -40,14 +30,32 @@ export const membersSchema = z.object({
 })
 export type MembersSchema = z.infer<typeof membersSchema>
 
-const postColection = defineCollection({
+export const pagesSchema = z.object({
+  title: z.string(),
+  draft: z.boolean(),
+  date: z.date().optional(),
+  lastmod: z.date().optional(),
+  links: z
+    .array(
+      z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+        website: z.string().url(),
+        image: z.string().url().optional(),
+      }),
+    )
+    .optional(),
+})
+export type PagesSchema = z.infer<typeof pagesSchema>
+
+const postsCollection = defineCollection({
   type: "content",
-  schema: postSchema,
+  schema: postsSchema,
 })
 
 const pagesCollection = defineCollection({
   type: "content",
-  schema: postSchema,
+  schema: pagesSchema,
 })
 
 const membersCollection = defineCollection({
@@ -56,7 +64,7 @@ const membersCollection = defineCollection({
 })
 
 export const collections = {
-  post: postColection,
+  post: postsCollection,
   pages: pagesCollection,
   members: membersCollection,
 }

src/content/pages/about-us/index.mdx

@@ -1,7 +1,8 @@
 ---
 title: RICORAについて
-date: "2022-02-15"
-lastmod: "2022-02-15"
+draft: false
+date: 2022-02-15
+lastmod: 2022-02-15
 slug: about-us
 ---
 

src/content/pages/contact/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: お問い合わせ
+draft: false
 date: 2022-03-15T00:00:00+09:00
 lastmod: 2023-06-16T00:00:00+09:00
 slug: contact

src/content/pages/links/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: リンク
+draft: false
 links:
   - title: RICORA
     description: Music TeamとProgramming Teamを合わせた、RICORA全体のホームページです。

src/layouts/PageLayout/PageLayout.astro

@@ -0,0 +1,36 @@
+---
+import "@/styles/katex.css"
+import { BaseLayout, type BaseLayoutProps } from "@/layouts/BaseLayout"
+import type { CollectionEntry } from "astro:content"
+import { mdxComponents } from "@/lib/mdx"
+import { LinkCard } from "@/components/Elements/LinkCard"
+
+export type Props = BaseLayoutProps & {
+  page: CollectionEntry<"pages">
+}
+const { page, ...props } = Astro.props
+
+const { Content } = await page.render()
+---
+
+<BaseLayout {...props}>
+  <main class="my-12 flex-1">
+    <article class="mx-auto max-w-screen-md">
+      <header class="flex flex-col items-center gap-6">
+        <h1 class="text-4xl font-bold">{page.data.title}</h1>
+      </header>
+      <section class="prose mt-12 max-w-full dark:prose-invert">
+        {
+          page.data.links && (
+            <div class="flex flex-col gap-6">
+              {page.data.links.map((link) => (
+                <LinkCard title={link.title} href={link.website} description={link.description} image={link.image} />
+              ))}
+            </div>
+          )
+        }
+        <Content components={mdxComponents} />
+      </section>
+    </article>
+  </main>
+</BaseLayout>

src/layouts/PageLayout/index.ts

@@ -0,0 +1 @@
+export { default as PageLayout } from "./PageLayout.astro"

src/layouts/PostLayout/PostLayout.astro

@@ -1,4 +1,5 @@
 ---
+import "@/styles/katex.css"
 import { Icon, type IconName } from "@/components/Elements/Icon"
 import { BaseLayout, type BaseLayoutProps } from "@/layouts/BaseLayout"
 import { formatDate } from "@/lib/date"
@@ -15,7 +16,7 @@ const { Content } = await post.render()
 
 const date = formatDate(post.data.date)
 const lastmod = post.data.lastmod ? formatDate(post.data.lastmod) : undefined
-const readingTime = calculateReadingTime(post.data.content)
+const readingTime = calculateReadingTime(post.body)
 ---
 
 <BaseLayout {...props}>
@@ -54,9 +55,3 @@ const readingTime = calculateReadingTime(post.data.content)
     </article>
   </main>
 </BaseLayout>
-
-<style is:global>
-  .katex {
-    font-size: 1.1rem !important;
-  }
-</style>

src/pages/[...slug]/index.astro

@@ -0,0 +1,26 @@
+---
+import "katex/dist/katex.min.css"
+import { isDev } from "@/lib/runtime"
+import { getCollection } from "astro:content"
+import type { CollectionEntry } from "astro:content"
+import { PageLayout } from "@/layouts/PageLayout"
+
+export const getStaticPaths = async () => {
+  const postEntries = await getCollection("pages", ({ data }) => (isDev ? true : !data.draft))
+  return postEntries.map((page) => ({
+    params: {
+      slug: page.slug,
+    },
+    props: {
+      page,
+    },
+  }))
+}
+
+type Props = {
+  page: CollectionEntry<"pages">
+}
+const { page } = Astro.props
+---
+
+<PageLayout title={page.data.title + " - RICORA Programming Team"} page={page} />

src/styles/katex.css

@@ -0,0 +1,3 @@
+.katex {
+  font-size: 1.1rem !important;
+}