remark-link-cardを導入した

2024-04-13

外部サイトへのリンクにリンクカードを表示させるため、「remark-link-card」を導入した。↓こういうやつ。

Contribute to gladevise/remark-link-card development by creating an account on GitHub.

https://github.com/gladevise/remark-link-card

導入はnpmで。

npm install remark-link-card

astro.config.mjsに設定を追加する。

import { defineConfig } from 'astro/config';
//（略）
import rlc from 'remark-link-card';

// https://astro.build/config
export default defineConfig({
  site: 'https://bblo-blog.com',
  markdown: {
    syntaxHighlight: false,
    remarkPlugins: [rlc]
  },
  //（略）
});

MarkdownファイルへはURLのみ記載または<>で囲うことでリンクカードが表示される。ただしMDXファイルは<>で書くとエラーになるので注意。

https://bblo-blog.com

<https://bblo-blog.com>

なおこのプラグインはCSSを自分で用意する必要がある。このサイトはTailwind CSSを使っているので、プラグイン配布ページにあるCSSを以下のように書き直した。一部classを独自実装しているので、tailwind.config.mjsに設定を足している

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      flex: {
        '1-100': '1 1 100px',
        '4-100': '4 1 100px'
      }
    }
  },
  //（略）
}

.rlc-container {
  @apply text-gray-600 border border-solid border-slate-400 rounded w-full flex items-stretch transition-all delay-75 hover:opacity-75;
}

.rlc-info {
  @apply p-2 text-left flex-4-100 flex flex-col justify-between overflow-hidden;
}

.rlc-title {
  @apply text-xl leading-10 whitespace-nowrap text-ellipsis overflow-hidden;
}

.rlc-description {
  @apply text-sm h-10 overflow-hidden;
}

.rlc-url-container {
  @apply flex items-center;
}

.rlc-favicon {
  @apply mr-1 w-4 h-4;
}

.rlc-url {
  @apply text-base whitespace-nowrap text-ellipsis overflow-hidden;
}

.rlc-image-container {
  @apply flex-1-100 relative;
}

.rlc-image {
  @apply rounded-tr rounded-br w-full h-full object-cover;
}