趣味のNote

リンクカードを表示する

作成:
heroimage

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

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

u-photoが自動付与されてるかのテスト
テスト投稿
u-photoが自動付与されてるかのテスト favicon https://ubanis.com/note/ap/2023-1028-1306
u-photoが自動付与されてるかのテスト

上記のリンクカードの実際のMarkdownファイルはこうなっている。

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

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

最後に

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