Astroにおけるremark-link-cardを使ったリンクカード
Astroで、remarkプラグインであるremark-link-cardを使いリンクをカード形式で表示できるようにしました。
remark-link-card
remark-link-card は、remarkプラグインで、リンクをカード形式で表示するためのプラグインです。カード形式のリンクとは、以下のようなものです。
GitHub - gladevise/remark-link-card
Contribute to gladevise/remark-link-card development by creating an account on GitHub.
Astroはデフォルトでremarkプラグインをサポートしているため、この remark-link-card を使ってリンクをカード形式で表示することができます。
実装
1. インストール
GitHubのページを参考にインストールします。ここでは bun を使っていますが、 npm や yarn など、他のパッケージマネージャを使っても構いません。
bun install remark-link-card
2. 設定
astro.config.mjs を以下のように追記します。
astro.config.mjs
import remarkLinkCard from 'remark-link-card';
// https://astro.build/config
export default defineConfig({
// ...
markdown: {
remarkPlugins: [
[
remarkLinkCard,
{
cache: true,
shortenUrl: true,
},
],
],
},
// ...
});
今回は cache と shortenUrl を true にしています。
remark-link-card はデフォルトではAstroの毎コンパイル時にリンク情報を取得しに行きます。リンク先にかける負荷を減らすために、cache を true にして、リンク情報をキャッシュするようにしています。キャッシュは /public/remark-link-card/ に保存されます。
また、shortenUrl を true にすることでリンク先のURLをドメインのみに短縮して表示するようにしています。
remark-link-card ではCSSは提供されていないので、自分でCSSを用意する必要があります。
CSSは以下のようにしました。
remark-link-card.css
/* ブレークポイント: 60ch（Tailwindcss/Typographyのproseのmax-widthを参考に） */
.rlc-container {
--padding-x: 1rem;
--padding-y: 0.7rem;
--border-radius: calc(0.5rem - 1px);
border: 1px solid var(--tw-prose-hr);
border-radius: calc(var(--border-radius) + 1px);
text-decoration: none;
transition: background-color 150ms;
&:hover {
background-color: #f5f5f5;
@media (prefers-color-scheme: dark) {
background-color: #262626;
}
}
width: 100%;
margin-bottom: 1.25em;
display: grid;
grid-template-columns: 1fr 116px;
gap: 1rem;
@media (min-width: 60ch) {
grid-template-columns: 1fr 220px;
}
.rlc-info {
display: flex;
flex-direction: column;
justify-content: center;
font-weight: normal;
grid-column: 1;
padding: var(--padding-y) 0 var(--padding-y) var(--padding-x);
max-width: 100%;
min-width: 100%;
border-radius: var(--border-radius) 0 0 var(--border-radius);
.rlc-title {
font-size: 1rem;
font-weight: bold;
line-height: 1.3;
color: var(--tw-prose-headings);
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.rlc-description {
font-size: 0.8rem;
color: #737373;
@media (prefers-color-scheme: dark) {
color: #a3a3a3;
}
margin-bottom: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-line-clamp: 1;
}
.rlc-url-container {
display: flex;
align-items: center;
gap: 0.5rem;
.rlc-favicon {
margin-top: 0.15rem;
margin-bottom: 0;
}
.rlc-url {
font-size: 0.8rem;
color: #525252;
@media (prefers-color-scheme: dark) {
color: #d4d4d4;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-line-clamp: 1;
}
}
}
.rlc-image-container {
grid-column: 2;
aspect-ratio: 1 / 1;
@media (min-width: 60ch) {
aspect-ratio: 1.91 / 1;
}
.rlc-image {
object-fit: cover;
height: 100%;
width: 100%;
margin: 0;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
}
}
3. 使い方
remark-link-card は生のURLのみに適用されます。以下のように記述すると、リンクがカード形式で表示されます。
https://github.com/gladevise/remark-link-card
GitHub - gladevise/remark-link-card
Contribute to gladevise/remark-link-card development by creating an account on GitHub.
<>で囲っても適用されます。
<https://github.com/gladevise/remark-link-card>
GitHub - gladevise/remark-link-card
Contribute to gladevise/remark-link-card development by creating an account on GitHub.
インライン形式のリンクには適用されません。
[remark-link-card - GitHub](https://github.com/gladevise/remark-link-card)
参考
MarkdownとMDX
AstroでMarkdownやMDXを使ってコンテンツを作成する方法を紹介します。
GitHub - gladevise/remark-link-card
Contribute to gladevise/remark-link-card development by creating an account on GitHub.
Markdownでリンクカードを表示する「remark-link-card」の使い方 - ろぼいんブログ
ブログなどでは、リンクを埋め込む際にリンクカードを表示することがあります。リンクカードは、リンク先のページのタイトルやサムネイル、概要などを一覧表示でき、リンク先の情報を簡単に把握できるため、ユーザーにとって便利な機能です。Markdownでリンクカードを表示するための「remark-link-card」の使い方について解説します。
Astroでremark-link-cardをつかってリンクをカード形式で表示する
Astroでmarkdownで書いた記事をtailwindcss/typographyで表示する際にリンクをカード形式にする
