feat: link preview

Author: RUNFUNRUN

content/astrodb-catchup.mdx

@@ -7,9 +7,7 @@ tags: ['Astro', 'catchup']
 
 ## Astro DBとは
 
-[https://astro.build/db/](https://astro.build/db/)
-
-ドキュメント [https://docs.astro.build/ja/guides/astro-db/](https://docs.astro.build/ja/guides/astro-db/)
+<LinkPreview url='https://docs.astro.build/ja/guides/astro-db/' />
 
 > Astro DB is a fully-managed SQL database designed exclusively for Astro.
 

content/first-blog.mdx

@@ -5,7 +5,7 @@ date: 2024-02-07
 tags: ['Next.js', 'blog']
 ---
 
-[https://fumadocs.vercel.app/](https://fumadocs.vercel.app/)
+<LinkPreview url='https://fumadocs.vercel.app/' />
 
 このFumadocsを使ってブログサイトを立ち上げました。
 

content/getting-started-in-cyber-security.mdx

@@ -11,11 +11,7 @@ tags: ['Linux', 'WSL', 'security']
 
 チャンネルはこちらです。
 
-<Card
-  href="https://www.youtube.com/@tamashiiwoyokose"
-  title="しいたま@サイバーセキュリティ"
-  description="free cybersecurity education and ethical hacking このチャンネルでは、主にサイバーセキュリティの話題に関する解説動画を投稿します。 動画内の技術は、法律の範囲内でのみ使用し、悪用はしないでください"
-/>
+<LinkPreview url='https://www.youtube.com/@tamashiiwoyokose'/>
 
 動画内でKali LinuxというOSと[TryHackMe](https://tryhackme.com/)というWebサイトでハッキングをしていて、とりあえず自分も真似してみたいと思います。
 

content/next-stack.mdx

@@ -22,9 +22,11 @@ Cloudflare Workersにデプロイするとしても、要件によってはSupab
 
 この記事を読むにあたって、今回の構成のサンプルプロジェクトがあるので実際のコードと照らし合わせながら見るとわかりやすいと思います。
 
-Webサイト: [https://next-stack.runfunrun.workers.dev](https://next-stack.runfunrun.workers.dev/)
+- Webサイト  
+  [https://next-stack.runfunrun.workers.dev](https://next-stack.runfunrun.workers.dev/)
 
-リポジトリ: [https://github.com/RUNFUNRUN/next-stack](https://github.com/RUNFUNRUN/next-stack)
+- リポジトリ
+<LinkPreview url='https://github.com/RUNFUNRUN/next-stack'/>
 
 <Callout title='初心者の方へ'>
   この記事ではかなり簡略化して説明しています。
@@ -35,7 +37,7 @@ Webサイト: [https://next-stack.runfunrun.workers.dev](https://next-stack.runf
 
 ## PaaS
 
-[Cloudflare Workers · Cloudflare Workers docs](https://developers.cloudflare.com/workers/)
+<LinkPreview url='https://developers.cloudflare.com/workers/'/>
 
 冒頭でも紹介した通り、Cloudflare Workersを使用します。
 
@@ -44,7 +46,7 @@ Webサイト: [https://next-stack.runfunrun.workers.dev](https://next-stack.runf
 
 ## フレームワーク
 
-[Next.js by Vercel - The React Framework](https://nextjs.org/)
+<LinkPreview url='https://nextjs.org/'/>
 
 タイトルにある通り、Next.jsを使います。バックエンドも含めたフルスタックな使い方をする前提です。
 
@@ -65,7 +67,7 @@ next-on-pagesで言う`getRequestContext`相当になります。
 
 ### バックエンド
 
-[Hono - Web framework built on Web Standards](https://hono.dev/)
+<LinkPreview url='https://hono.dev/'/>
 
 Next.jsのフルスタック構成ですが、API RoutesでHonoを使用します。
 
@@ -118,7 +120,7 @@ Hono RPCの詳細は[ドキュメント](https://hono.dev/docs/guides/rpc)をご
 
 ## ORM
 
-[Drizzle ORM - next gen TypeScript ORM.](https://orm.drizzle.team/)
+<LinkPreview url='https://orm.drizzle.team/'/>
 
 今回はDrizzleを使用します。容量が小さいのでWorkersと相性が良いです。
 
@@ -136,7 +138,7 @@ export default defineConfig({
 
 ## DB
 
-[Cloudflare D1 · Cloudflare D1 docs](https://developers.cloudflare.com/d1/)
+<LinkPreview url='https://developers.cloudflare.com/d1/'/>
 
 こちらも冒頭でも話しましたが、Cloudflare D1を使用します。
 
@@ -154,7 +156,7 @@ bunx wrangler d1 execute next-stack --file=./drizzle/migrations/0000_calm_shocke
 
 ## 認証
 
-[Better Auth](https://www.better-auth.com/)
+<LinkPreview url='https://www.better-auth.com/'/>
 
 個人的に今TypeScriptで一番アツい認証ライブラリです。
 
@@ -256,7 +258,11 @@ export const authMiddleware = createMiddleware<{
 実際のコード例を出しつつ紹介しました。  
 サンプルプロジェクトに全てコードはあるので、そちらを見てもらうとわかりやすいとは思います。
 
-また、決済に関してはOpenNextのドキュメントに[Stripeについての記述](https://opennext.js.org/cloudflare/howtos/stripeAPI)があるので、そちらをご覧ください。
+また、決済に関してはOpenNextやBetter AuthドキュメントにStripeについての記述があるので、そちらをご覧ください。
+
+<LinkPreview url='https://www.better-auth.com/docs/plugins/stripe' />
+
+<LinkPreview url='https://opennext.js.org/cloudflare/howtos/stripeAPI' />
 
 もしよろしければ、この構成を試してみてください。
 

content/nvim-funny-plugins.mdx

@@ -10,11 +10,17 @@ tags: ['Neovim']
 今回は全く必要ないけど、あるとちょっと楽しいプラグインを3つ紹介したいと思います。  
 以下の3つなります。
 
-- [andweeb/presence.nvim](https://github.com/andweeb/presence.nvim)
+- andweeb/presence.nvim
 
-- [sphamba/smear-cursor.nvim](https://github.com/sphamba/smear-cursor.nvim)
+<LinkPreview url='https://github.com/andweeb/presence.nvim'/>
 
-- [nvzone/showkeys](https://github.com/nvzone/showkeys)
+- sphamba/smear-cursor.nvim
+
+<LinkPreview url='https://github.com/sphamba/smear-cursor.nvim'/>
+
+- nvzone/showkeys
+
+<LinkPreview url='https://github.com/nvzone/showkeys'/>
 
 設定はLazyVimの場合を書いています。
 皆さんが使ってる各種プラグインマネージャー・ディストリビューションに合わせて読み替えてください。

content/nvim-japanese-win.mdx

@@ -9,11 +9,7 @@ tags: ['Neovim', 'Windows', 'WSL']
 
 前回の記事の続きになります。読んでない方はぜひお読みください。
 
-<Card
-  title='Neovimオススメ設定② 日本語入力を快適にするim-select.nvimのすすめ'
-  description='Neovimのオススメ設定シリーズ第2弾。'
-  href='/posts/nvim-japanese'
-/>
+<LinkPreview url='/posts/nvim-japanese'/>
 
 Macではかなり理想な状態でした。  
 この記事でわかるように、WindowsまたはWSLでの日本語入力には大きな課題があります。

content/nvim-japanese.mdx

@@ -16,11 +16,7 @@ tags: ['Neovim']
 
 <Callout title='WindowsまたはWSLの方はこちらもご覧ください。'>
   ※ 追記
-  <Card
-    title='Neovimオススメ設定③ Windows or WSLでも快適に日本語入力がしたい'
-    description='Neovimのオススメ設定シリーズ第3弾。'
-    href='/posts/nvim-japanese-win'
-  />
+  <LinkPreview url='/posts/nvim-japanese-win'/>
 </Callout>
 
 ## im-select.nvim

content/tailscale-ssh.mdx

@@ -7,7 +7,7 @@ tags: ['Tailscale', 'security', 'catchup']
 
 ## tailscaleについて
 
-[https://tailscale.com/](https://tailscale.com/)
+<LinkPreview url='https://tailscale.com/' />
 
 ![about](https://i.gyazo.com/a5f4ec3808b421f3c189b7f5f9c2675c.png)
 

next.config.mjs

@@ -10,6 +10,10 @@ const config = {
         protocol: 'https',
         hostname: 'i.gyazo.com',
       },
+      {
+        protocol: 'https',
+        hostname: 't1.gstatic.com',
+      },
     ],
   },
   reactStrictMode: true,

src/actions/fetch-og-metadata.ts

@@ -0,0 +1,46 @@
+'use server';
+
+import { cache } from 'react';
+
+type OGData = {
+  title: string;
+  description: string;
+  image: string;
+  url: string;
+};
+
+export const getOGData = cache(
+  async (url: string): Promise<Partial<OGData>> => {
+    try {
+      const response = await fetch(url, {
+        headers: {
+          'User-Agent': 'RUNFUNRUN.dev',
+        },
+      });
+
+      const html = await response.text();
+
+      const getMetaContent = (property: string): string | undefined => {
+        const regex = new RegExp(
+          `<meta[^>]+(?:property|name)="${property}"[^>]+content="([^"]+)"`,
+          'i',
+        );
+        return regex.exec(html)?.[1].replaceAll('amp;', '');
+      };
+
+      const titleMatch = /<title>(.*?)<\/title>/i.exec(html);
+
+      return {
+        title: getMetaContent('og:title') || titleMatch?.[1] || '',
+        description:
+          getMetaContent('og:description') ||
+          getMetaContent('description') ||
+          '',
+        image: getMetaContent('og:image') || '',
+        url,
+      };
+    } catch (error) {
+      return { url };
+    }
+  },
+);

src/app/posts/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { PostJsonLd } from '@/components/json-ld';
+import { LinkPreview } from '@/components/link-preview';
 import { TagCard } from '@/components/tag-card';
 import { getPost, getPosts } from '@/lib/source';
 import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
@@ -79,6 +80,7 @@ const Page = async (props: { params: Promise<{ slug: string }> }) => {
                 <Pre>{props.children}</Pre>
               </CodeBlock>
             ),
+            LinkPreview,
           }}
         />
       </DocsBody>

src/components/image-with-fallback.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { cn } from 'fumadocs-ui/components/api';
+import Image from 'next/image';
+import { useState } from 'react';
+
+export const ImageWithFallback = ({
+  src,
+  alt,
+  className,
+}: {
+  src?: string;
+  alt: string;
+  className?: string;
+}) => {
+  const [error, setError] = useState(false);
+
+  if (!src || error) {
+    return (
+      <div className='flex h-full w-full items-center justify-center bg-fd-card'>
+        <span className='text-4xl text-fd-card-foreground'>🔗</span>
+      </div>
+    );
+  }
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      className={cn('object-cover', className)}
+      fill
+      sizes='240px'
+      onError={() => setError(true)}
+      unoptimized={src.startsWith('http')}
+    />
+  );
+};