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 6fc6ee4..6aec1fd 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -7,6 +7,7 @@ const Header = () => { diff --git a/app/components/posts/Posts.css.ts b/app/components/posts/Posts.css.ts new file mode 100644 index 0000000..12246b2 --- /dev/null +++ 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 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(() =>