リンクカードを表示する

よく見るリンクカードをAstroでも表示したい
いろんなサイトで見かけるリンクカードを記事の中で簡単に表示できるようにプラグインを導入することにした。すでに他の記事でもリンクカードが表示されている。
u-photoが自動付与されてるかのテスト
テスト投稿

上記のリンクカードの実際のMarkdownファイルはこうなっている。
<https://ubanis.com/note/ap/2023-1028-1306>
remark-link-cardの導入
npm install remark-link-card
astro.config.mjs
に以下のように追記する。
import remarkLinkCard from 'remark-link-card';// 中略export default defineConfig({ markdown: { remarkPlugins: [remarkLinkCard] },// 中略})
これだけで記事の純粋なURLだけの行を以下のようなリンクカードにしてくれる。
<a class="rlc-container" href="https://ubanis.com/note/ap/2023-1028-1306"> <div class="rlc-info"> <div class="rlc-title">u-photoが自動付与されてるかのテスト</div> <div class="rlc-description">テスト投稿</div> <div class="rlc-url-container"> <img class="rlc-favicon" src="https://www.google.com/s2/favicons?domain=ubanis.com" alt="u-photoが自動付与されてるかのテスト favicon" width="16" height="16"> <span class="rlc-url">https://ubanis.com/note/ap/2023-1028-1306</span> </div> </div> <div class="rlc-image-container"> <img class="rlc-image" src="https://ubanis.com/img/nyan4.jpg" alt="u-photoが自動付与されてるかのテスト"> </div></a>
スタイルシートは以下のようにした。
.rlc-container { display: grid; overflow: hidden; grid-template-columns: 3fr 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; align-items: streatch; width: 100%; max-width: 800px; margin: 0 auto 2rem; padding: 0.25rem; text-decoration: none; border-color: black; border: 1px solid; border-color: gray !important; border-radius: 0.5rem; transition: background 200ms ease-in-out 0s, box-shadow 200ms ease-in-out 0s;}
.rlc-container:link,.rlc-container:visited { color: #333;}
@media (hover: hover) {.rlc-container:hover { background-color: rgba(80, 80, 80, 0.1); box-shadow: 0 4px 5px 2px rgba(80, 80, 80, 0.2);} }
.rlc-info { grid-area: 1 / 1 / 2 / 2; display: flex; flex-direction: column; overflow: hidden; justify-content: space-between; padding: 0.5rem; text-align: left;}
.rlc-title { overflow: hidden; text-overflow: ellipsis; font-size: 1.25rem; white-space: nowrap;}
.rlc-description { overflow: hidden; font-size: 0.875rem; line-height: 1rem; height: 2rem;}
.rlc-url-container { display: flex; align-items: bottom;}
.rlc-favicon { display: flex; flex-direction: column; align-items: bottom; margin-right: 4px; width: 16px; height: 16px;}
.rlc-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem;}
.rlc-image-container { display: grid; grid-area: 1 / 2 / 2 / 3; align-items: center; height: 8rem;}
.rlc-image { object-fit: contain; margin: auto; overflow: hidden; width: 100%; max-width: 100%; min-height: 8rem; max-height: 8rem; border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem;}
最後に
カード画像のスタイルシート調整が厄介だと思った。