AstroブログでMarkdown内のリンクをカード形式で表示する

はじめに

先日、Markdown内のリンクをカード化するremarkプラグインのremark-link-card-plusをリリースした。

この記事では、このプラグインを使ってAstroブログでMarkdown内のリンクをカード形式で表示する方法を紹介する。

設定方法

まずはプラグインをインストールする。

npm i remark-link-card-plus

次にastro.config.mjsremarkPluginsに設定を追加する。

// astro.config.mjs
import { defineConfig } from 'astro/config';
import remarkLinkCard from 'remark-link-card-plus';

export default defineConfig({
  markdown: {
    remarkPlugins: [
      [
        remarkLinkCard, {
          cache: true,
          shortenUrl: true,
          thumbnailPosition: "right",
        },
      ],
    ],
  },
});

v0.2.0時点ではオプションは以下の3つがある。

オプションデフォルト説明
cachebooleanfalseリンク先のOG画像とfaviconをキャッシュし、サーバー負荷を軽減します。
shortenUrlbooleantrueカード内のURLをホスト名だけで表示します。
thumbnailPositionstring"right"カード内のサムネイル画像を右または左に表示します。

この設定を追加するだけでMarkdown内のリンクはカード化される。しかし、この状態ではスタイルは適用されていないので、スタイルは自分で用意する必要がある。

以下のCSSを作成する。TailwindCSSを使っている。

.remark-link-card-plus__container {
  @apply mb-4;
}

.remark-link-card-plus__card {
  @apply h-32 flex bg-white overflow-hidden rounded-xl border border-slate-300 hover:bg-slate-100 hover:border-slate-500 transition-colors !no-underline;
}

.remark-link-card-plus__main {
  @apply flex flex-col flex-1 p-4;
}

.remark-link-card-plus__content {
}

.remark-link-card-plus__title {
  @apply text-lg font-semibold leading-6 line-clamp-2 text-gray-900 hover:!text-gray-900;
}

.remark-link-card-plus__description {
  @apply mt-1 text-sm text-gray-500 line-clamp-1;
}

.remark-link-card-plus__meta {
  @apply flex items-center mt-auto;
}

.remark-link-card-plus__favicon {
  @apply !my-0 mr-1 h-4 w-4;
}

.remark-link-card-plus__url {
  @apply text-xs text-gray-600;
}

.remark-link-card-plus__thumbnail {
  @apply h-32 w-1/3 md:max-w-64;
}

.remark-link-card-plus__image {
  @apply h-full w-full !my-0 object-cover;
}

このCSSを記事ページで読み込む。

---
import "../styles/index.css";
---

<!-- 記事ページ -->

以上で記事内のリンクカードにスタイルを適用させることができた。以下はスタイルが適用されたリンクカードのサンプル。

LinkCardPreview

カード化されるリンクにはいくつか条件があるので注意が必要となる。

カード化されるケース

リンクだけで構成された行

(空行)
https://example.com
(空行)

テキストとリンクが同じ文字列のとき

[https://example.com](https://example.com)

カード化されないケース

リンクと同じ行にテキストがあるとき

リンクと同じ行にテキストがある場合はカード化されない: https://example.com

同じ行内に複数のリンクがあるとき

https://github.com https://example.com

リスト内のリンク

* list
  * https://example.com

おわり

astro.config.mjsへのプラグインの指定と、スタイルさえあれば簡単にリンクをカード化できるのでぜひ使ってみてほしい。

ソースコードはGitHubに公開しているので不具合や改善案などがあれば気軽にイシューを作成していただきたい。また、もし気に入っていただけたらスターをつけていただけると嬉しい。

関連記事