fix: modify around markdown posts

.contents/card-links.json

@@ -18,5 +18,40 @@
     "title": "Rick Astley - Never Gonna Give You Up (Official Music Video)",
     "description": "The official video for “Never Gonna Give You Up” by Rick Astley. The new album 'Are We There Yet?' is out now: Download here: https://RickAstley.lnk.to/AreWe...",
     "image": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg"
+  },
+  "https://pagefind.app/": {
+    "title": "Pagefind | Pagefind — Static low-bandwidth search at scale",
+    "description": "Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.",
+    "image": "https://pagefind.app/og.png"
+  },
+  "https://flutter.dev/": {
+    "title": "Flutter - Build apps for any screen",
+    "description": "Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.",
+    "image": "https://storage.googleapis.com/cms-storage-bucket/70760bf1e88b184bb1bc.png"
+  },
+  "https://github.com/oriverk/learn_flutter": {
+    "title": "GitHub - oriverk/learn_flutter",
+    "description": "Contribute to oriverk/learn_flutter development by creating an account on GitHub.",
+    "image": "https://opengraph.githubassets.com/e9ddd51f9d7164eede64b11a742f9ff341c851ef4671c9550c948fad520d4927/oriverk/learn_flutter"
+  },
+  "https://www.publickey1.jp/blog/22/amazon_prime_videowebassemblywasm_vm.html": {
+    "title": "Amazon Prime Videoが動画再生にWebAssemblyを採用。再生デバイス上にWasm VMをデプロイ、高フレームレートなど実現",
+    "description": "Amazon.comは動画サービスのAmazon Prime Videoにおいて、テレビやFire TV、スマートフォンなどの再生デバイス上にWebAssemblyのランタイムをデプロイし、アプリケーションの一部にWebAssemblyを採...",
+    "image": "https://www.publickey1.jp/2022/primevideowasm01.gif"
+  },
+  "https://zenn.dev/oriverk/articles/432f7c2f17b928": {
+    "title": "Rustで作物列画像を二値化処理をする",
+    "description": "",
+    "image": "https://res.cloudinary.com/zenn/image/upload/s--bUnUkMNc--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Rust%25E3%2581%25A7%25E4%25BD%259C%25E7%2589%25A9%25E5%2588%2597%25E7%2594%25BB%25E5%2583%258F%25E3%2582%2592%25E4%25BA%258C%25E5%2580%25A4%25E5%258C%2596%25E5%2587%25A6%25E7%2590%2586%25E3%2582%2592%25E3%2581%2599%25E3%2582%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:oriverk%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pWb1Vhc3I2TG1WZ2ZycnEtRlhNUVhya3VSdm85OWFMWkNtS2xEPXMyNTAtYw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png"
+  },
+  "https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/": {
+    "title": "New Markdown extension: Alerts provide distinctive styling for significant content · GitHub Changelog",
+    "description": "New Markdown extension: Alerts provide distinctive styling for significant content",
+    "image": "https://github.blog/wp-content/uploads/2023/12/290547405-0505deff-ff73-44f4-9f47-1d39b2f1d8cd.png?w=1024"
+  },
+  "https://biomejs.dev/": {
+    "title": "Biome",
+    "description": "Format, lint, and more in a fraction of a second.",
+    "image": "https://biomejs.dev/img/og.png?v=2"
   }
-}
+}

src/components/markdown/AstroLink.astro

@@ -1,23 +1,27 @@
 ---
-import AstroEmbed from "@/components/markdown/AstroEmbed.astro";
+import EmbedTwitter from "./EmbedTwitter.astro";
+import LinkCard from "./LinkCard.astro";
 
 type Props = {
   href: string;
   target: string;
   rel: string;
   class: string;
-  "data-embed": string;
+  "data-embed"?: "ogp" | "twitter";
 };
 
 const props = Astro.props;
+const embedType = !props["data-embed"] ? "link" : props["data-embed"]
 ---
 
-{
-  Object.hasOwn(props, "data-embed") ? (
-    <AstroEmbed {...props} />
-  ) : (
-    <a {...props}>
-      <slot />
-    </a>
-  )
-}
+{embedType === "link" ? (
+  <a {...props}>
+    <slot />
+  </a>
+) : embedType === "ogp" ? (
+  <LinkCard {...props} />
+) : embedType === "twitter" ? (
+  <EmbedTwitter {...props} />
+) : (
+  <p>hoge</p>
+)}

src/components/markdown/EmbedTwitter.astro

@@ -8,7 +8,7 @@ type Props = {
   target: string;
   rel: string;
   class: string;
-  "data-embed": string;
+  "data-embed"?: "ogp" | "twitter";
 };
 
 type ResponseType = {

src/components/markdown/LinkCard.astro

@@ -9,7 +9,7 @@ type Props = {
   target: string;
   rel: string;
   class: string;
-  "data-embed": string;
+  "data-embed"?: "ogp" | "twitter";
 };
 
 const { href, class: className, ...restProps } = Astro.props;

src/content/blog/20221205-next13-app.md

@@ -159,8 +159,7 @@ export default async function Page() {
 
 #### 投稿詳細ページ
 
-v12 までの投稿詳細ページでは [dynamic routes の Catch all routes
-](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes) を利用し、`/pages/entry/[...slug].tsx` となっていた。v13 からの `app/` 下では `/pages/entry/[...slug]/page.tsx` となる。
+v12 までの投稿詳細ページでは [dynamic routes の Catch all routes](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes) を利用し、`/pages/entry/[...slug].tsx` となっていた。v13 からの `app/` 下では `/pages/entry/[...slug]/page.tsx` となる。
 
 ```js title=/app/posts/[...slug]/page.jsx
 export default function Page({ params, searchParams }) {

src/content/blog/20240300-gfm-alerts.md → src/content/blog/20240300-gfm-alerts.mdx

@@ -11,7 +11,7 @@ GitHub で `> [!NOTE]` といったアラート記法を使えるようになっ
 
 ## アラートについて
 
-[New Markdown extension: Alerts provide distinctive styling for significant content - The GitHub Blog](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/)
+https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/
 
 > [!NOTE]
 > Useful information that users should know, even when skimming content.
@@ -109,6 +109,4 @@ GitHub で `> [!NOTE]` といったアラート記法を使えるようになっ
 
 ## remark plugin
 
-markdown を処理する際の remark plugin として、`remark-github-alerts` を利用した。
-
-[hyoban/remark-github-alerts: Support GitHub-style alerts for remark](https://github.com/hyoban/remark-github-alerts)
+markdown を処理する際の remark plugin として、[hyoban/remark-github-alerts](https://github.com/hyoban/remark-github-alerts) を利用した。

src/content/blog/20240300-use-biome.md → src/content/blog/20240300-use-biome.mdx

@@ -9,6 +9,8 @@ published: true
 
 Astro と Svelte 製のサイトで、コードリンター＆フォーマッターを Eslint・Prettier から Biome に変更しました。
 
+https://biomejs.dev/
+
 ## サイトについて
 
 - built with
@@ -28,7 +30,8 @@ Astro と Svelte 製のサイトで、コードリンター＆フォーマッタ
     - prettier-plugin-astro
     - prettier-plugin-svelte
 
-<details><summary><code>.eslintrc.yml</code></summary>
+<details>
+<summary><code>.eslintrc.yml</code></summary>
 
 ```yml
 extends:
@@ -74,7 +77,8 @@ rules: {
 
 </details>
 
-<details><summary><code>.pretterrc.yml</code></summary>
+<details>
+<summary><code>.pretterrc.yml</code></summary>
 
 ```yml
 trailingComma: es5

src/content/blog/20240812-flutter.md → src/content/blog/20240812-flutter.mdx

@@ -12,6 +12,8 @@ published: true
 
 [![Image from Gyazo](https://i.gyazo.com/be4cd4904180fda733f325b17e8f0fc5.png)](https://gyazo.com/be4cd4904180fda733f325b17e8f0fc5)
 
+https://flutter.dev/
+
 ## 感想・まとめ
 
 - RAM 16GB では足りない
@@ -31,7 +33,7 @@ published: true
 
 [Flutter Learn](https://flutter.dev/learn) を手を動かしながら読み終えましたが、Widget に何があるか、Flutter/Dart 特有の書き方といったものを更に理解するため、Zenn や Google Codelab 等のチュートリアルをやりました。
 
-[oriverk/learn_flutter](https://github.com/oriverk/learn_flutter)
+https://github.com/oriverk/learn_flutter
 
 - [いちから始めるFlutterモバイルアプリ開発](https://zenn.dev/heyhey1028/books/flutter-basics)
   - http, webview_flutter

src/content/blog/20240922-pagefind.md → src/content/blog/20240922-pagefind.mdx

@@ -9,11 +9,9 @@ noindex: true
 
 ## はじめに
 
-今までサイト内検索では Algolia を使用していたのですが、検索 API の実行アクセス回数が少ないために無効にされてしまったので、サイト内検索機能を全文検索ライブラリの Pagefind で置換しました。
+今までサイト内検索では [Algolia](https://www.algolia.com/) を使用していたのですが、検索 API の実行アクセス回数が少ないために無効にされてしまったので、サイト内検索機能を全文検索ライブラリの [Pagefind](https://pagefind.app/) で置換しました。
 
-- [Pagefind | Pagefind — Static low-bandwidth search at scale](https://pagefind.app/)
-  - [CloudCannon/pagefind: Static low-bandwidth search at scale](https://github.com/cloudcannon/pagefind)
-- [AI search that understands | Algolia](https://www.algolia.com/)
+https://pagefind.app/
 
 ## Pagefind とは
 
@@ -103,9 +101,9 @@ Pagefind はデフォルトで `<body>` 内にあるすべての要素をイン
 
 Pagefind は各ページ中の各要素からメタデータを自動的に取得します。
 
-- title: <= h1
-- image: <= h1以降、最初の画像の src
-- image_alt: <= h1以降、最初の画像の alt
+- title: h1
+- image: h1以降、最初の画像の src
+- image_alt: h1以降、最初の画像の alt
 
 ```html title=example.html
 <h1 data-pagefind-meta="title">Hello World</h1>

src/styles/markdown.css

@@ -87,7 +87,7 @@
     color: gray;
   }
 
-  & *:has(> img) {
+  & *:has(> img):not(.info, .ogimage) {
     display: inline-block;
     padding: 1rem 1.3rem;
     border: 2px solid rgba(var(--color-hover));