feat: x関連のボタンを追加

yossydev · Mar 5, 2024 · cc78295 · cc78295
1 parent 6492ef1
commit cc78295
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 12 deletions.
diff --git a/app/islands/share.tsx b/app/islands/share.tsx
@@ -0,0 +1,38 @@
+import { LINK } from "../constants";
+
+export default function Share({ title }: { title: string }) {
+  if (typeof window === "undefined") {
+    return (
+      <div class="flex items-center justify-center mt-10 gap-3 ">
+        <div role="status" class="max-w-sm animate-pulse w-full">
+          <div class="h-11 bg-gray-200 rounded-3xl w-full" />
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div class="flex items-center justify-center mt-10 gap-3">
+      <a
+        href={`https://twitter.com/share?url=${window.location.href}&text=${title}`}
+        target={"_blank"}
+        rel={"noreferrer"}
+        class="bg-[#0f1419] text-white flex items-center text-sm rounded-3xl py-3 px-4"
+      >
+        <img
+          src="/static/twitter-alt.svg"
+          alt="xにシェアする"
+          class="w-4 h-4 mr-1"
+        />
+        Post
+      </a>
+      <a
+        href={LINK.X}
+        target={"_blank"}
+        rel={"noreferrer"}
+        class="bg-gray-200 flex items-center text-sm rounded-3xl py-3 px-4"
+      >
+        Follow @yossydev
+      </a>
+    </div>
+  );
+}
diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx
@@ -1,6 +1,6 @@
 import { Style } from "hono/css";
 import { jsxRenderer } from "hono/jsx-renderer";
-import { Script } from "honox/server";
+import { HasIslands, Script } from "honox/server";
 import { LINK } from "../constants";
 
 export default jsxRenderer(({ children, title, description }) => {
@@ -27,14 +27,13 @@ export default jsxRenderer(({ children, title, description }) => {
         ) : (
           <link href="/app/style.css" rel="stylesheet" />
         )}
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.css"
+        />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" />
+        <script>hljs.highlightAll();</script>
       </head>
-      <link
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.css"
-      />
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" />
-      <script>hljs.highlightAll();</script>
-
       <body class="main-container">
         <header class="mt-3 bg-black">
           <div class="max-w-screen-2xl mx-auto flex h-16 items-center justify-between px-6">

diff --git a/app/routes/posts/_renderer.tsx b/app/routes/posts/_renderer.tsx
@@ -1,12 +1,12 @@
 import { jsxRenderer } from "hono/jsx-renderer";
+import Share from "../../islands/share";
 
 export default jsxRenderer(({ children, Layout, frontmatter }) => {
+  const _title = `${frontmatter?.title} | yossy.dev`;
   return (
-    <Layout
-      title={`${frontmatter?.title} | yossy.dev`}
-      description={frontmatter?.description}
-    >
+    <Layout title={_title} description={frontmatter?.description}>
       <div class="markdown">{children}</div>
+      <Share title={_title} />
     </Layout>
   );
 });
diff --git a/app/routes/posts/index.tsx b/app/routes/posts/index.tsx
@@ -0,0 +1,11 @@
+import { createRoute } from "honox/factory";
+import Share from "../../islands/share";
+
+export default createRoute((c) => {
+  return c.render(
+    <div>
+      <h1>Hello</h1>
+    </div>,
+    {},
+  );
+});