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

2025年1月8日

はじめに

少し前にブログをGatsbyからAstroで作り直した。

blog.okaryo.studio

その際に記事内のリンクをカード化するに際してremark-link-cardというプラグインを使ったのだが、リスト内のリンクもカード化処理が実行されてしまい、その際に記事の最初のNodeがカード化されるという問題があった。イシューもあげたが、前回のリリースから大分期間が空いているようだったので自分でプラグインを作成することにした。

どんなプラグインか

マークダウン内のリンクをカード化するremarkプラグイン。remark-link-cardを元にして作り直した。オリジナルとの共通点と違いは以下。

共通点
- オプションであるcacheやshortenUrlは引き続き使用可能
- カードのスタイルは提供していないが、カードのHTMLタグのクラスに対してCSSを適用することでスタイルをカスタマイズすることが可能(クラス名はオリジナルから変更した)
違う点
- TypeScriptで作り直した
- リンクのaタグにはtarget="_blank"を付与、これによって別タブでリンクを開くようにした
- リスト内のリンクはカード化対象から外した
  - これによってマークダウン内の最初の要素がカード化される問題は解消された
- サムネイル画像の位置を右と左で選べるようにした

以下で詳しく見ていく。

まずは基本的な使い方。remarkに対して他のプラグイン同様にuse(remarkLinkCard[, options])するとマークダウン内のリンクをカード化する。

import { remark } from "remark";
import remarkLinkCard from "remark-link-card-plus";

const exampleMarkdown = `
## Example

https://github.com

Inline links like [GitHub](https://github.com) will **not** be converted.
contents
`;

(async () => {
  const result = await remark()
    .use(remarkLinkCard, { cache: true, shortenUrl: true })
    .process(exampleMarkdown);

  console.log(result.value);
})();

上記のように使用すると以下のマークダウンに変換する。

## Example

<div class="remark-link-card-plus__container">
  <a href="https://github.com/" target="_blank" rel="noreferrer noopener" class="remark-link-card-plus__card">
    <div class="remark-link-card-plus__main">
      <div class="remark-link-card-plus__content">
        <div class="remark-link-card-plus__title">GitHub · Build and ship software on a single, collaborative platform</div>
        <div class="remark-link-card-plus__description">Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.</div>
      </div>
      <div class="remark-link-card-plus__meta">
        <img src="https://www.google.com/s2/favicons?domain=github.com" class="remark-link-card-plus__favicon" width="14" height="14" alt="favicon">
        <span class="remark-link-card-plus__url">github.com</span>
      </div>
    </div>
    <div class="remark-link-card-plus__thumbnail">
      <img src="https://github.githubassets.com/assets/home24-5939032587c9.jpg" class="remark-link-card-plus__image" alt="ogImage">
    </div>
  </a>
</div>

Inline links like [GitHub](https://github.com) will **not** be converted.
contents

具体的な使用用途としては、Astroで作ったブログ内のリンクをカード化するときに便利だ。astro.config.mjsのremarkPluginsに指定するだけで、記事内のリンクがカード化される。

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import remarkLinkCard from 'remark-link-card-plus';

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

その際は、カード化されたHTMLタグにはスタイルは付与されていないので自分でスタイルを適用する必要がある。以下のクラスにスタイルを適用することで、カードのスタイルをカスタマイズできる。

.remark-link-card-plus__container {}

.remark-link-card-plus__card {}

.remark-link-card-plus__main {}

.remark-link-card-plus__content {}

.remark-link-card-plus__title {}

.remark-link-card-plus__description {}

.remark-link-card-plus__meta {}

.remark-link-card-plus__favicon {}

.remark-link-card-plus__url {}

.remark-link-card-plus__thumbnail {}

.remark-link-card-plus__image {}

また、v0.2.0時点では以下の3つのオプションを用意している。

cache
- リンク先のOG画像とfaviconをprocess.cwd()/public/remark-link-card-plus/ディレクトリにキャッシュすることで、リンク先のサーバー負荷を避けることができる。
- CloudflarePagesなどデプロイできるファイル数に制限があるプラットフォームもあるので注意が必要。
- デフォルトはfalse
shortenUrl
- カード内に表示するURLをホスト名で表示するかどうかを制御するフラグ。
- デフォルトはtrue
thumbnailPosition
- リンク先のOG画像をカードの左右どちらに表示するかを制御するオプション。
- デフォルトは"right"