From b4dd38c0678368566d805ef26a3ba553f0e0660b Mon Sep 17 00:00:00 2001 From: taga3s Date: Thu, 5 Sep 2024 17:19:18 +0900 Subject: [PATCH] feat: update post styling --- .../posts/detail/PostDetailHeader.css.ts | 23 +++++++++++++++++++ .../posts/detail/PostDetailHeader.tsx | 22 ++++++++++++++++++ app/global.d.ts | 2 +- app/routes/_renderer.tsx | 6 ++--- app/routes/posts/_renderer.tsx | 2 ++ app/routes/posts/md_test.mdx | 6 ++--- 6 files changed, 54 insertions(+), 7 deletions(-) create mode 100644 app/components/posts/detail/PostDetailHeader.css.ts create mode 100644 app/components/posts/detail/PostDetailHeader.tsx diff --git a/app/components/posts/detail/PostDetailHeader.css.ts b/app/components/posts/detail/PostDetailHeader.css.ts new file mode 100644 index 0000000..f0b95fa --- /dev/null +++ b/app/components/posts/detail/PostDetailHeader.css.ts @@ -0,0 +1,23 @@ +import { css } from "hono/css"; + +const postDetailHeaderWrapper = css` + margin-bottom: 32px; +`; + +const postDetailHeaderTitle = css` + font-size: 32px; + font-weight: bold; +`; + +const postDetailHeaderDivider = css` + margin-top: 16px; + margin-bottom: 12px; + background: transparent; + border-bottom: 1px solid #d0d7de; + height: 1px; + padding: 0; + background-color: #d0d7de; + border: 0; +`; + +export { postDetailHeaderWrapper, postDetailHeaderTitle, postDetailHeaderDivider }; diff --git a/app/components/posts/detail/PostDetailHeader.tsx b/app/components/posts/detail/PostDetailHeader.tsx new file mode 100644 index 0000000..2069c94 --- /dev/null +++ b/app/components/posts/detail/PostDetailHeader.tsx @@ -0,0 +1,22 @@ +import type { FC } from "hono/jsx"; +import { postDetailHeaderDivider, postDetailHeaderTitle, postDetailHeaderWrapper } from "./PostDetailHeader.css"; + +type Props = { + title: string; + publishedAt: string; +}; + +const PostDetailHeader: FC = ({ title, publishedAt }) => { + return ( +
+

{title}

+
+ +
+ ); +}; + +export { PostDetailHeader }; diff --git a/app/global.d.ts b/app/global.d.ts index 6d6eb25..b1db101 100644 --- a/app/global.d.ts +++ b/app/global.d.ts @@ -2,7 +2,7 @@ import {} from "hono"; type Head = { title?: string; - description?: string; + publishedAt?: string; }; declare module "hono" { diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx index aad8073..3c239df 100644 --- a/app/routes/_renderer.tsx +++ b/app/routes/_renderer.tsx @@ -52,11 +52,11 @@ export default jsxRenderer(({ children, title }) => { {_title} - Sorry, Out of Service.

}> - + + Sorry, something wrong with this page.

}>
{children}
- + ); diff --git a/app/routes/posts/_renderer.tsx b/app/routes/posts/_renderer.tsx index a383184..35e7f7e 100644 --- a/app/routes/posts/_renderer.tsx +++ b/app/routes/posts/_renderer.tsx @@ -1,8 +1,10 @@ import { jsxRenderer } from "hono/jsx-renderer"; +import { PostDetailHeader } from "../../components/posts/detail/PostDetailHeader"; export default jsxRenderer(({ children, Layout, frontmatter }) => { return ( +
{children}
 ); diff --git a/app/routes/posts/md_test.mdx b/app/routes/posts/md_test.mdx index aad4099..90d5082 100644 --- a/app/routes/posts/md_test.mdx +++ b/app/routes/posts/md_test.mdx @@ -3,11 +3,11 @@ title: "Markdown試し打ち" publishedAt: "2024-09-XX" --- -# # Markdown試し打ち +# # Section1 これはMarkdownの試し打ちです。適宜チューニングしていきたい。以下、怪文書が続きます。 -## ## Section 1 +## ## Section 2 **以下は、法学部の生徒が学ぶ代表的な法律の分野です。** @@ -24,7 +24,7 @@ publishedAt: "2024-09-XX" > > Shakespeare -### ### Section 2 +### ### Section 3 ~ねこ~ いぬ（w300 * h200）