リンクカードを表示する

よく見るリンクカードをAstroでも表示したい

いろんなサイトで見かけるリンクカードを記事の中で簡単に表示できるようにプラグインを導入することにした。すでに他の記事でもリンクカードが表示されている。

u-photoが自動付与されてるかのテスト

テスト投稿

https://ubanis.com/note/ap/2023-1028-1306

上記のリンクカードの実際の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;
}

.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;
}

最後に

カード画像のスタイルシート調整が厄介だと思った。