Add external article link support to blog list

src/components/BlogCard.tsx

@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
 import member from '@/data/member';
 import type { CollectionEntry } from 'astro:content';
 import MemberIcon from '@/components/MemberIcon';
+import { ExternalLink } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 type Props = {
@@ -12,24 +13,36 @@ type Props = {
 
 const BlogCard = ({ blog, color }: Props) => {
   const author = member.find(m => m.name === blog.data.author);
+  const isExternal = !!blog.data.externalUrl;
+  const href = isExternal ? blog.data.externalUrl : `/blog/${blog.slug}`;
+  const linkProps = isExternal
+    ? { target: '_blank', rel: 'noopener noreferrer' }
+    : {};
 
   return (
     <Card className="relative bg-transparent transition hover:opacity-70">
       <a
-        href={`/blog/${blog.slug}`}
+        href={href}
         className="absolute block size-full"
         aria-label={`${blog.data.title} を読む`}
+        {...linkProps}
       >
         &nbsp;
       </a>
       <div className="p-6">
         <CardTitle
           className={cn(
-            'text-xl md:text-2xl',
+            'flex items-center gap-2 text-xl md:text-2xl',
             color === 'white' && 'text-white'
           )}
         >
           {blog.data.title}
+          {isExternal && (
+            <ExternalLink
+              className="h-5 w-5 flex-shrink-0"
+              aria-label="外部記事"
+            />
+          )}
         </CardTitle>
         <div className="mt-3 flex flex-col gap-3">
           <CardDescription>
@@ -38,6 +51,14 @@ const BlogCard = ({ blog, color }: Props) => {
             </time>
           </CardDescription>
           <div className="flex flex-wrap gap-1">
+            {isExternal && (
+              <Badge
+                variant="default"
+                className={`${color === 'white' && 'text-white'}`}
+              >
+                外部記事
+              </Badge>
+            )}
             {blog.data.tags.map(tag => {
               return (
                 <a

src/components/BlogList.tsx

@@ -48,23 +48,29 @@ const BlogList = ({ blogs }: Props) => {
   }, []);
 
   return (
-    <>
+    <div className="flex flex-col items-center gap-4">
+      {totalPages > 1 && (
+        <BlogPagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+        />
+      )}
+
       <div className="flex flex-col gap-3">
         {currentBlogs.map(blog => (
           <BlogCard key={blog.slug} blog={blog} />
         ))}
       </div>
 
       {totalPages > 1 && (
-        <div className="mt-8">
-          <BlogPagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={handlePageChange}
-          />
-        </div>
+        <BlogPagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+        />
       )}
-    </>
+    </div>
   );
 };
 

src/content/blog/note-naoki-job-change-web-production-company-to-business-company.md

@@ -0,0 +1,8 @@
+---
+title: 【フロントエンドエンジニア】私がWeb制作会社から事業会社に転職した理由
+description: Web制作会社から事業会社に転職した理由を綴ります。
+pubDate: '2025-03-09'
+author: Naoki
+tags: [note]
+externalUrl: 'https://note.com/imnaoki/n/ne80875d1d14a'
+---

src/content/blog/qiita-naoki-generate-mock-based-openapi-for-proto.md

@@ -0,0 +1,8 @@
+---
+title: protoから生成したAPIドキュメントをもとにモックサーバーを自動生成する
+description: protoファイルから生成したAPIドキュメントをもとに、モックサーバーを自動生成する方法について紹介します。
+pubDate: '2025-05-18'
+author: Naoki
+tags: [Qiita]
+externalUrl: 'https://qiita.com/naoki-00-ito/items/1db7e5ad34f42e3000eb'
+---

src/content/blog/qiita-naoki-qiita-hackathon-2024.md

@@ -0,0 +1,8 @@
+---
+title: ハッカソンへ初参加し、待ち時間を楽しくするサービス NANIMACHI を開発した話［Qiita Hackathon 2024］
+description: Qiita Hackathon 2024 の参加記事です。
+pubDate: '2024-09-25'
+author: Naoki
+tags: [Qiita]
+externalUrl: 'https://qiita.com/naoki-00-ito/items/214fb4f050ae809fe713'
+---

src/content/blog/qiita-naoki-taikisato-portfolio.md

@@ -0,0 +1,8 @@
+---
+title: Astro,GSAP,Reactで友人デザイナーのポートフォリオ開発をして、複数のギャラリーサイトに掲載された話
+description: 友人デザイナーのポートフォリオサイトをAstro, GSAP, Reactで開発し、複数のギャラリーサイトに掲載された経験について紹介します。
+pubDate: '2025-01-27'
+author: Naoki
+tags: [Qiita]
+externalUrl: 'https://qiita.com/naoki-00-ito/items/cdcf623aa79efdde1ffb'
+---

src/content/config.ts

@@ -8,6 +8,7 @@ const blogCollection = defineCollection({
     description: z.string(),
     author: z.string(),
     tags: z.array(z.string()),
+    externalUrl: z.string().url().optional(),
   }),
 });
 

src/lib/getBlog.ts

@@ -2,13 +2,13 @@ import { getCollection } from 'astro:content';
 
 const getBlog = async () => {
   const blogs = await getCollection('blog');
-  const sortesBlogs = blogs.sort((a, b) => {
+  const sortsBlogs = blogs.sort((a, b) => {
     const dateA = new Date(a.data.pubDate).getTime();
     const dateB = new Date(b.data.pubDate).getTime();
     return dateB - dateA;
   });
 
-  return sortesBlogs;
+  return sortsBlogs;
 };
 
 export default getBlog;