Merge pull request #15 from KokiSakano/fix/blog

ブログのレスポンシブ対応リファクタ

src/app/blog/components/blog-card/blog-card.tsx

@@ -8,35 +8,65 @@ export const BlogCard = <T extends string>({
   title,
   tags,
 }: {
-  link: Route<T>;
+  link: string;
   emotion: string;
   title: string;
   tags: [string?, string?, string?, string?, string?];
 }) => {
+  const isExternal = link.startsWith('http');
   return (
     <section className="h-40 rounded-md bg-white shadow-md">
-      <Link href={link}>
-        <div className="flex gap-6 p-4">
-          <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-md bg-gray-200 text-7xl">
-            {emotion}
+      {isExternal ? (
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <div className="flex gap-6 p-4">
+            <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-md bg-gray-200 text-7xl">
+              {emotion}
+            </div>
+            <div className="flex w-full flex-col justify-around">
+              <h3 className="line-clamp-3 text-2xl font-medium">
+                {title}
+              </h3>
+              {tags.length > 0 && (
+                <div className="hidden justify-end gap-2 md:flex">
+                  {tags.map((tag) => {
+                    if (!tag) {
+                      return null;
+                    }
+                    return <TextTag key={tag} text={tag} />;
+                  })}
+                </div>
+              )}
+            </div>
           </div>
-          <div className="flex w-full flex-col justify-around">
-            <h3 className="line-clamp-3 text-2xl font-medium">
-              {title}
-            </h3>
-            {tags.length > 0 && (
-              <div className="hidden justify-end gap-2 md:flex">
-                {tags.map((tag) => {
-                  if (!tag) {
-                    return null;
-                  }
-                  return <TextTag key={tag} text={tag} />;
-                })}
-              </div>
-            )}
+        </a>
+      ) : (
+        <Link
+          href={link as Route<T>}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div className="flex gap-6 p-4">
+            <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-md bg-gray-200 text-7xl">
+              {emotion}
+            </div>
+            <div className="flex w-full flex-col justify-around">
+              <h3 className="line-clamp-3 text-2xl font-medium">
+                {title}
+              </h3>
+              {tags.length > 0 && (
+                <div className="hidden justify-end gap-2 md:flex">
+                  {tags.map((tag) => {
+                    if (!tag) {
+                      return null;
+                    }
+                    return <TextTag key={tag} text={tag} />;
+                  })}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      </Link>
+        </Link>
+      )}
     </section>
   );
 };

src/components/anchor/anchor.tsx

@@ -10,16 +10,25 @@ export const Anchor = ({
   children: ReactNode;
 }) => {
   const isExternal = href.startsWith('http');
-  const Component = isExternal ? 'a' : Link;
   return (
-    <Component
-      className="cursor-pointer text-blue-600 hover:underline"
-      // TODO: 手動キャストせずに判別できる方法が出たら直す
-      href={href as Route}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noopener noreferrer' : undefined}
-    >
-      {children}
-    </Component>
+    <>
+      {isExternal ? (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="cursor-pointer text-blue-600 hover:underline"
+        >
+          {children}
+        </a>
+      ) : (
+        <Link
+          href={href as Route}
+          className="cursor-pointer text-blue-600 hover:underline"
+        >
+          {children}
+        </Link>
+      )}
+    </>
   );
 };

src/mdx-components.tsx

@@ -45,7 +45,10 @@ export function useMDXComponents(
     },
     pre: ({ children, ...rest }) => {
       return (
-        <pre {...rest} className="my-4 rounded-xl bg-slate-900 p-4">
+        <pre
+          {...rest}
+          className="my-4 overflow-x-auto rounded-xl bg-slate-900 p-4"
+        >
           {children}
         </pre>
       );