NuxtContentで作ったブログにリンクカードを実装した

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

こんな感じです。はい〜。

インストール

npm install remark-link-card

でインストール。

nuxt.config.tsで設定

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        // ...他の設定
        remarkPlugins: {
          'remark-link-card': {}
        },
        // ...他の設定
      }
    }
  }
})

defineNuxtConfig内にcontent>build>markdown>remarkPluginsの中に'remark-link-card'を追加する。(雑)

この状態で適当な.md内にURLをペタって貼ると

画像のような感じでスタイリングもクソもないような状態で出てきます。

スタイリング

今回は以下のようなCSSを書いた。

.rlc-container {
    @apply grid grid-cols-3 w-full border border-gray-400/50 rounded-2xl !no-underline overflow-hidden
}

.rlc-info {
    @apply flex flex-col justify-between col-span-2 p-4
}

.rlc-title {
    @apply font-bold overflow-ellipsis overflow-hidden line-clamp-1
}

.rlc-description {
    @apply text-sm text-gray-600 line-clamp-2 overflow-ellipsis overflow-hidden
}

.rlc-url-container {
    @apply flex flex-row items-center end-0
}

.rlc-favicon {
    @apply !mr-2 !m-0
}

.rlc-url {
    @apply text-xs text-gray-600 overflow-hidden overflow-ellipsis line-clamp-1
}

.rlc-image-container {
    @apply flex flex-col justify-center aspect-video
}

.rlc-image {
    @apply object-cover !m-0 h-full w-full
}

このスタイルを当てると

こうなります。

以上

以上です。

まぁこのremarkのプラグイン、更新がされていないので近いうちに他のプラグインに乗り換えるかもしれん。
ま、メモだからね!!うん。