Merge pull request #16 from taga3s/feat/blogs-page

feat: posts
taga3s · Sep 3, 2024 · ee59ebd · ee59ebd
2 parents 3e7a8a7 + b0c56a2
commit ee59ebd
Show file tree

Hide file tree

Showing 15 changed files with 2,600 additions and 27 deletions.
diff --git a/app/api/posts/model.ts b/app/api/posts/model.ts
@@ -0,0 +1,7 @@
+type Post = {
+  id: string;
+  title: string;
+  publishedAt: string;
+};
+
+export type { Post };
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -7,6 +7,7 @@ const Header = () => {
         <nav class={headerNav}>
           <a href="/">about me</a>
           <a href="/history">history</a>
+          <a href="/posts">posts</a>
           <a href="/works">works</a>
         </nav>
       </div>

diff --git a/app/components/posts/Posts.css.ts b/app/components/posts/Posts.css.ts
@@ -0,0 +1,25 @@
+import { css } from "hono/css";
+
+const postsStyle = {
+  wrapper: css`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-top: 32px;
+  `,
+  item: css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    padding: 16px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+  `,
+  itemTitle: css`
+    font-size: 20px;
+    font-weight: bold;
+  `,
+};
+
+export { postsStyle };
diff --git a/app/components/posts/Posts.tsx b/app/components/posts/Posts.tsx
@@ -0,0 +1,27 @@
+import type { FC } from "hono/jsx";
+import type { Post } from "../../api/posts/model";
+import { Section } from "../Section";
+import { postsStyle } from "./Posts.css";
+
+type Props = {
+  posts: Post[];
+};
+
+const Posts: FC<Props> = ({ posts }) => {
+  return (
+    <Section title="Posts">
+      <div class={postsStyle.wrapper}>
+        {posts.map((post) => {
+          return (
+            <a key={post.id} href={`/${post.id}`} class={postsStyle.item}>
+              <span>{post.publishedAt}</span>
+              <span class={postsStyle.itemTitle}>{post.title}</span>
+            </a>
+          );
+        })}
+      </div>
+    </Section>
+  );
+};
+
+export { Posts };
diff --git a/app/components/posts/PostsPresenter.tsx b/app/components/posts/PostsPresenter.tsx
@@ -0,0 +1,13 @@
+import type { FC } from "hono/jsx";
+import { Posts } from "./Posts";
+import type { Post } from "../../api/posts/model";
+
+type Props = {
+  posts: Post[];
+};
+
+const PostsPresenter: FC<Props> = ({ posts }) => {
+  return <Posts posts={posts} />;
+};
+
+export { PostsPresenter };
diff --git a/app/global.d.ts b/app/global.d.ts
@@ -2,12 +2,14 @@ import {} from "hono";
 
 type Head = {
   title?: string;
+  description?: string;
 };
 
 declare module "hono" {
-  interface Env {
-    Variables: {};
-    Bindings: {};
+  interface ContextRenderer {
+    (
+      content: string | Promise<string>,
+      head?: Head & { frontmatter?: Head; description?: string },
+    ): Response | Promise<Response>;
   }
-  type ContextRenderer = (content: string | Promise<string>, head?: Head) => Response | Promise<Response>;
 }
diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx
@@ -23,7 +23,9 @@ const bodyLayout = css`
 const HeaderMemorized = memo(() => <Header />);
 const FooterMemorized = memo(() => <Footer />);
 
-export default jsxRenderer(({ children }) => {
+export default jsxRenderer(({ children, title }) => {
+  const _title = title ?? "taga3s-dev";
+
   return (
     <html lang="ja" class={htmlLayout}>
       <head>
@@ -39,11 +41,15 @@ export default jsxRenderer(({ children }) => {
 
         {/* reset css */}
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/destyle.css" />
+
+        {/* global css */}
+        <link rel="stylesheet" href="/static/markdown-styles.css" />
         <Style />
+
         <Script src="/app/client.ts" async />
 
         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes" />
-        <title>taga3s-dev</title>
+        <title>{_title}</title>
       </head>
       <body class={bodyLayout}>
         <ErrorBoundary fallback={<p>Sorry, Out of Service.</p>}>

diff --git a/app/routes/posts.tsx b/app/routes/posts.tsx
@@ -0,0 +1,20 @@
+import { createRoute } from "honox/factory";
+import { PostsPresenter } from "../components/posts/PostsPresenter";
+
+export type Meta = {
+  title: string;
+  publishedAt: string;
+};
+
+export default createRoute(async (c) => {
+  const rawPosts = import.meta.glob<{ frontmatter: Meta }>("./posts/*.mdx", {
+    eager: true,
+  });
+  const posts = Object.entries(rawPosts).map(([id, module]) => ({
+    id: id.replace(/\.mdx$/, ""),
+    title: module.frontmatter.title ?? "",
+    publishedAt: module.frontmatter.publishedAt ?? "",
+  }));
+
+  return c.render(<PostsPresenter posts={posts} />);
+});
diff --git a/app/routes/posts/_renderer.tsx b/app/routes/posts/_renderer.tsx
@@ -0,0 +1,9 @@
+import { jsxRenderer } from "hono/jsx-renderer";
+
+export default jsxRenderer(({ children, Layout, frontmatter }) => {
+  return (
+    <Layout title={frontmatter?.title}>
+      <article class="markdown-body">{children}</article>
+    </Layout>
+  );
+});
diff --git a/app/routes/posts/md_test.mdx b/app/routes/posts/md_test.mdx
@@ -0,0 +1,35 @@
+---
+title: "Markdown試し打ち"
+publishedAt: "2024-09-XX"
+---
+
+# # Markdown試し打ち
+
+これはMarkdownの試し打ちです。適宜チューニングしていきたい。以下、怪文書が続きます。
+
+## ## Section 1
+
+**以下は、法学部の生徒が学ぶ代表的な法律の分野です。**
+
+- 刑法
+- 民法
+  - 民法総則
+  - 債権総論
+  - etc...
+- 憲法
+
+とある法学部の学生が、法律の勉強をしているときに、次のような名言を思い出しました。
+
+> Sweet are the uses of adversity, Which, like the toad, ugly and venomous, Wears yet a precious jewel in his head.
+>
+> Shakespeare
+
+### ### Section 2
+
+~ねこ~ いぬ（w300 * h200）
+<img width="300" height="200" src="https://images.dog.ceo/breeds/terrier-welsh/lucy.jpg" />  
+
+動物の画像を表示してみました。
+- [ ] 犬はkawaii
+- [x] 猫もkawaii
+
diff --git a/biome.json b/biome.json
@@ -15,7 +15,8 @@
       "complexity": {
         "noBannedTypes": "warn"
       }
-    }
+    },
+    "ignore": ["app/global.d.ts"]
   },
   "formatter": {
     "enabled": true,

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "taga3s-dev",
+  "name": "taga3s-dev-website",
   "type": "module",
   "version": "1.0.1",
   "license": "MIT",
@@ -22,8 +22,12 @@
     "@hono/vite-cloudflare-pages": "^0.4.2",
     "@hono/vite-dev-server": "^0.14.0",
     "@hono/vite-ssg": "^0.1.0",
+    "@mdx-js/rollup": "^3.0.1",
     "husky": "^9.1.1",
     "lint-staged": "^15.2.7",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
     "vite": "^5.4.2",
     "wrangler": "^3.72.2"
   },