feat: update post styling

taga3s · Sep 5, 2024 · f8c9e0a · f8c9e0a
1 parent a92deb6
commit f8c9e0a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 7 deletions.
diff --git a/app/components/posts/detail/PostDetailHeader.css.ts b/app/components/posts/detail/PostDetailHeader.css.ts
@@ -0,0 +1,27 @@
+import { css } from "hono/css";
+
+const postDetailHeaderWrapper = css`
+  margin-bottom: 32px;
+`;
+
+const postDetailHeaderTitle = css`
+  font-size: 36px;
+  font-weight: bold;
+`;
+
+const postDetailHeaderDivider = css`
+  margin-top: 16px;
+  margin-bottom: 12px;
+
+
+  box-sizing: content-box;
+  overflow: hidden;
+  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
@@ -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<Props> = ({ title, publishedAt }) => {
+  return (
+    <div class={postDetailHeaderWrapper}>
+      <h1 class={postDetailHeaderTitle}>{title}</h1>
+      <hr class={postDetailHeaderDivider} />
+      <time>
+        <span>Posted at </span>
+        {publishedAt}
+      </time>
+    </div>
+  );
+};
+
+export { PostDetailHeader };
diff --git 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
@@ -52,11 +52,11 @@ export default jsxRenderer(({ children, title }) => {
         <title>{_title}</title>
       </head>
       <body class={bodyLayout}>
-        <ErrorBoundary fallback={<p>Sorry, Out of Service.</p>}>
-          <HeaderMemorized />
+        <HeaderMemorized />
+        <ErrorBoundary fallback={<p>Sorry, something wrong with this page.</p>}>
           <main>{children}</main>
-          <FooterMemorized />
         </ErrorBoundary>
+        <FooterMemorized />
       </body>
     </html>
   );

diff --git 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 (
     <Layout title={frontmatter?.title}>
+      <PostDetailHeader title={frontmatter?.title ?? ""} publishedAt={frontmatter?.publishedAt ?? ""} />
       <article class="markdown-body">{children}</article>
     </Layout>
   );

diff --git 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）
 <img width="300" height="200" src="https://images.dog.ceo/breeds/terrier-welsh/lucy.jpg" />