From 6c9437cb983828621c1f2f0969d178cb939a7ff6 Mon Sep 17 00:00:00 2001 From: taga3s Date: Wed, 28 Aug 2024 10:49:38 +0900 Subject: [PATCH 1/3] feat: blogs routing --- app/api/blogs/model.ts | 7 ++++++ app/components/Header.tsx | 1 + app/components/blogs/Blogs.css.ts | 25 +++++++++++++++++++ app/components/blogs/Blogs.tsx | 27 +++++++++++++++++++++ app/components/blogs/BlogsPresenter.tsx | 13 ++++++++++ app/routes/blogs/[id].tsx | 32 +++++++++++++++++++++++++ app/routes/blogs/index.tsx | 26 ++++++++++++++++++++ 7 files changed, 131 insertions(+) create mode 100644 app/api/blogs/model.ts create mode 100644 app/components/blogs/Blogs.css.ts create mode 100644 app/components/blogs/Blogs.tsx create mode 100644 app/components/blogs/BlogsPresenter.tsx create mode 100644 app/routes/blogs/[id].tsx create mode 100644 app/routes/blogs/index.tsx diff --git a/app/api/blogs/model.ts b/app/api/blogs/model.ts new file mode 100644 index 0000000..3752e66 --- /dev/null +++ b/app/api/blogs/model.ts @@ -0,0 +1,7 @@ +type Blog = { + id: number; + title: string; + content: string; +}; + +export type { Blog }; diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 6fc6ee4..96ddcda 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -7,6 +7,7 @@ const Header = () => { diff --git a/app/components/blogs/Blogs.css.ts b/app/components/blogs/Blogs.css.ts new file mode 100644 index 0000000..8f12d80 --- /dev/null +++ b/app/components/blogs/Blogs.css.ts @@ -0,0 +1,25 @@ +import { css } from "hono/css"; + +const blogs = { + wrapper: css` + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 32px; + `, + item: css` + display: flex; + flex-direction: column; + gap: 16px; + width: 100%; + padding: 16px; + border: 1px solid #ccc; + border-radius: 8px; + `, + itemTitle: css` + font-size: 20px; + font-weight: bold; + `, +}; + +export { blogs }; diff --git a/app/components/blogs/Blogs.tsx b/app/components/blogs/Blogs.tsx new file mode 100644 index 0000000..32a0cae --- /dev/null +++ b/app/components/blogs/Blogs.tsx @@ -0,0 +1,27 @@ +import type { FC } from "hono/jsx"; +import type { Blog } from "../../api/blogs/model"; +import { Section } from "../Section"; +import { blogs } from "./Blogs.css"; + +type Props = { + blogPosts: Blog[]; +}; + +const Blogs: FC = ({ blogPosts }) => { + return ( +
+
+ {blogPosts.map((post) => { + return ( + + {post.title} +

説明です。

+ + ); + })} +
+
+ ); +}; + +export { Blogs }; diff --git a/app/components/blogs/BlogsPresenter.tsx b/app/components/blogs/BlogsPresenter.tsx new file mode 100644 index 0000000..695b223 --- /dev/null +++ b/app/components/blogs/BlogsPresenter.tsx @@ -0,0 +1,13 @@ +import type { FC } from "hono/jsx"; +import { Blogs } from "./Blogs"; +import type { Blog } from "../../api/blogs/model"; + +type Props = { + blogPosts: Blog[]; +}; + +const BlogsPresenter: FC = ({ blogPosts }) => { + return ; +}; + +export { BlogsPresenter }; diff --git a/app/routes/blogs/[id].tsx b/app/routes/blogs/[id].tsx new file mode 100644 index 0000000..2b68fd4 --- /dev/null +++ b/app/routes/blogs/[id].tsx @@ -0,0 +1,32 @@ +import { createRoute } from "honox/factory"; +import { ssgParams } from "hono/ssg"; + +const posts = [ + { + id: "1", + title: "Article 1", + }, + { + id: "2", + title: "Article 2", + }, + { + id: "3", + title: "Article 3", + }, +]; + +const getBlogPosts = async () => { + return posts; +}; + +export default createRoute( + ssgParams(async () => { + const blogPosts = await getBlogPosts(); + return blogPosts.map((post) => ({ id: post.id })); + }), + async (c) => { + const id = c.req.param("id"); + return c.render(

{id}

); + }, +); diff --git a/app/routes/blogs/index.tsx b/app/routes/blogs/index.tsx new file mode 100644 index 0000000..e3c079b --- /dev/null +++ b/app/routes/blogs/index.tsx @@ -0,0 +1,26 @@ +import { createRoute } from "honox/factory"; +import { BlogsPresenter } from "../../components/blogs/BlogsPresenter"; + +const posts = [ + { + id: 1, + title: "Article 1", + }, + { + id: 2, + title: "Article 2", + }, + { + id: 3, + title: "Article 3", + }, +]; + +const getBlogPosts = async () => { + return posts; +}; + +export default createRoute(async (c) => { + const blogsPosts = await getBlogPosts(); + return c.render(); +}); From 6cf0d64e2ba395cab973f722e2c8f95ef0b18b70 Mon Sep 17 00:00:00 2001 From: taga3s Date: Sun, 1 Sep 2024 16:31:20 +0900 Subject: [PATCH 2/3] feat: use mdx to handle posts --- app/api/blogs/model.ts | 7 - app/api/posts/model.ts | 7 + app/components/Header.tsx | 2 +- app/components/blogs/Blogs.tsx | 27 - app/components/blogs/BlogsPresenter.tsx | 13 - .../Blogs.css.ts => posts/Posts.css.ts} | 6 +- app/components/posts/Posts.tsx | 27 + app/components/posts/PostsPresenter.tsx | 13 + app/global.d.ts | 9 +- app/routes/_renderer.tsx | 10 +- app/routes/blogs/[id].tsx | 32 - app/routes/blogs/index.tsx | 26 - app/routes/posts.tsx | 20 + app/routes/posts/_renderer.tsx | 9 + biome.json | 3 + package.json | 8 +- pnpm-lock.yaml | 1275 ++++++++++++++++- vite.config.ts | 20 +- 18 files changed, 1377 insertions(+), 137 deletions(-) delete mode 100644 app/api/blogs/model.ts create mode 100644 app/api/posts/model.ts delete mode 100644 app/components/blogs/Blogs.tsx delete mode 100644 app/components/blogs/BlogsPresenter.tsx rename app/components/{blogs/Blogs.css.ts => posts/Posts.css.ts} (86%) create mode 100644 app/components/posts/Posts.tsx create mode 100644 app/components/posts/PostsPresenter.tsx delete mode 100644 app/routes/blogs/[id].tsx delete mode 100644 app/routes/blogs/index.tsx create mode 100644 app/routes/posts.tsx create mode 100644 app/routes/posts/_renderer.tsx diff --git a/app/api/blogs/model.ts b/app/api/blogs/model.ts deleted file mode 100644 index 3752e66..0000000 --- a/app/api/blogs/model.ts +++ /dev/null @@ -1,7 +0,0 @@ -type Blog = { - id: number; - title: string; - content: string; -}; - -export type { Blog }; diff --git a/app/api/posts/model.ts b/app/api/posts/model.ts new file mode 100644 index 0000000..e4c6c75 --- /dev/null +++ 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 index 96ddcda..6aec1fd 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -7,7 +7,7 @@ const Header = () => { diff --git a/app/components/blogs/Blogs.tsx b/app/components/blogs/Blogs.tsx deleted file mode 100644 index 32a0cae..0000000 --- a/app/components/blogs/Blogs.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { FC } from "hono/jsx"; -import type { Blog } from "../../api/blogs/model"; -import { Section } from "../Section"; -import { blogs } from "./Blogs.css"; - -type Props = { - blogPosts: Blog[]; -}; - -const Blogs: FC = ({ blogPosts }) => { - return ( -
-
- {blogPosts.map((post) => { - return ( - - {post.title} -

説明です。

- - ); - })} -
-
- ); -}; - -export { Blogs }; diff --git a/app/components/blogs/BlogsPresenter.tsx b/app/components/blogs/BlogsPresenter.tsx deleted file mode 100644 index 695b223..0000000 --- a/app/components/blogs/BlogsPresenter.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { FC } from "hono/jsx"; -import { Blogs } from "./Blogs"; -import type { Blog } from "../../api/blogs/model"; - -type Props = { - blogPosts: Blog[]; -}; - -const BlogsPresenter: FC = ({ blogPosts }) => { - return ; -}; - -export { BlogsPresenter }; diff --git a/app/components/blogs/Blogs.css.ts b/app/components/posts/Posts.css.ts similarity index 86% rename from app/components/blogs/Blogs.css.ts rename to app/components/posts/Posts.css.ts index 8f12d80..12246b2 100644 --- a/app/components/blogs/Blogs.css.ts +++ b/app/components/posts/Posts.css.ts @@ -1,6 +1,6 @@ import { css } from "hono/css"; -const blogs = { +const postsStyle = { wrapper: css` display: flex; flex-direction: column; @@ -10,7 +10,7 @@ const blogs = { item: css` display: flex; flex-direction: column; - gap: 16px; + gap: 8px; width: 100%; padding: 16px; border: 1px solid #ccc; @@ -22,4 +22,4 @@ const blogs = { `, }; -export { blogs }; +export { postsStyle }; diff --git a/app/components/posts/Posts.tsx b/app/components/posts/Posts.tsx new file mode 100644 index 0000000..37bb54d --- /dev/null +++ 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 = ({ posts }) => { + return ( +
+
+ {posts.map((post) => { + return ( + + {post.publishedAt} + {post.title} + + ); + })} +
+
+ ); +}; + +export { Posts }; diff --git a/app/components/posts/PostsPresenter.tsx b/app/components/posts/PostsPresenter.tsx new file mode 100644 index 0000000..aabeacc --- /dev/null +++ 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 = ({ posts }) => { + return ; +}; + +export { PostsPresenter }; diff --git a/app/global.d.ts b/app/global.d.ts index 81fc51c..28904e8 100644 --- a/app/global.d.ts +++ b/app/global.d.ts @@ -2,12 +2,11 @@ import {} from "hono"; type Head = { title?: string; + description?: string; }; declare module "hono" { - interface Env { - Variables: {}; - Bindings: {}; - } - type ContextRenderer = (content: string | Promise, head?: Head) => Response | Promise; + type ContextRenderer = ( + content: string | Promise, + head?: Head & { frontmatter?: Head; description?: string },) => Response | Promise } diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx index a2a9df4..23fa7e8 100644 --- a/app/routes/_renderer.tsx +++ b/app/routes/_renderer.tsx @@ -23,7 +23,9 @@ const bodyLayout = css` const HeaderMemorized = memo(() =>
); const FooterMemorized = memo(() =>