feat: Editボタン追加

yossydev · Oct 14, 2024 · d2363f2 · d2363f2
1 parent d2806c9
commit d2363f2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/app/global.d.ts b/app/global.d.ts
@@ -3,6 +3,9 @@ import {} from "hono";
 type Head = {
   title?: string;
   description?: string;
+  date?: string;
+  updatedAt?: string;
+  path?: string;
 };
 
 declare module "hono" {

diff --git a/app/islands/SnsButton.tsx b/app/islands/SnsButton.tsx
@@ -1,7 +1,12 @@
 import type { FC } from "hono/jsx";
 import { LINK } from "../constants";
 
-const SnsButton: FC<{ title: string }> = ({ title }) => {
+type Props = {
+  title: string;
+  path: string;
+};
+
+const SnsButton: FC<Props> = ({ title, path }) => {
   if (typeof window === "undefined") {
     return (
       <div class="flex items-center justify-center mt-10 gap-3 ">
@@ -37,6 +42,14 @@ const SnsButton: FC<{ title: string }> = ({ title }) => {
       >
         Follow @yossydev
       </a>
+      <a
+        href={`${LINK.GITHUB}/blog/blob/main/app/routes/posts/${path}.mdx`}
+        target={"_blank"}
+        rel={"noreferrer"}
+        class="bg-blue-200 flex items-center text-sm rounded-3xl py-3 px-4"
+      >
+        ✏ Edit
+      </a>
     </div>
   );
 };

diff --git a/app/routes/posts/_renderer.tsx b/app/routes/posts/_renderer.tsx
@@ -8,10 +8,20 @@ export default jsxRenderer(({ children, Layout, frontmatter }) => {
     <Layout title={_title} description={frontmatter?.description}>
       <div class="markdown">
         <h1>{frontmatter?.title}</h1>
+        <dl class="flex items-center gap-3">
+          <div class="flex items-center gap-1">
+            <dt>publishedAt: </dt>
+            <dd>{frontmatter?.date}</dd>
+          </div>
+          <div class="flex items-center gap-1">
+            <dt>updatedAt: </dt>
+            <dd>{frontmatter?.updatedAt}</dd>
+          </div>
+        </dl>
         {children}
       </div>
       <LikeButton />
-      <SnsButton title={_title} />
+      <SnsButton title={_title} path={frontmatter?.path ?? ""} />
     </Layout>
   );
 });
diff --git a/app/routes/posts/css-nesting-improves-with-cssnesteddeclarations.mdx b/app/routes/posts/css-nesting-improves-with-cssnesteddeclarations.mdx
@@ -3,6 +3,7 @@ title: "Chrome 130でのCSSネスティング改善: CSSNestedDeclarationsの詳
 description: "web.devが先日、CSS nesting improves with CSSNestedDeclarationsというブログを公開しました。このブログでは、CSSネスティングの仕様にCSSNestedDeclarationsが追加されたことについて書かれています。導入背景やCSSOMの動きなどが少し面白かったのでブログにまとめました。"
 date: "2024/10/13"
 updatedAt: "2024/10/13"
+path: "css-nesting-improves-with-cssnesteddeclarations"
 published: true
 ---