astro.config.tsでremark-link-cardを実装

1. astro.config.〇〇

Astroの設定ファイルには拡張子が2種類あります。.mjs (JavaScript) と .ts (TypeScript) です。

astro.config.mjsでもastro.config.tsでも、実際書くコードの中身はさほど変わりません。しかし remark link card というプラグインを使ってリンクカードを実装した際、両者の違いのせいか少々つまづいたのでメモとして残しておきます。

あ、リンクカードってこーゆーのです ↓

映像学区

私たちはデザインの概念を主眼に据えた映像制ようこそ映像学区へ。私たちはデザインの概念を主眼に据えた映像制作チュートリアルのほか、カメラやレンズのレビュー、日本を巡る写真旅シリーズなど、多彩なコンテンツを通じて創作活動をしています。

https://eizo-gak.com/

2. remark-link-cardとは？

Markdown記事内のリンクを、OGP画像付きのリンクカードに変換して表示してくれるプラグインです。

GitHub - gladevise/remark-link-card

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

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

なおテキストに併記したURLは変換されない。なんて便利な仕様だ！→ https://github.com/gladevise/remark-link-card

3. remark-link-cardを実装する

Astroを使ったWebサイトに実装していきます。

STEP1. インストール

まず、Powershell等で以下のコマンドを打ち込みます。

npm install remark-link-card

↓

STEP2. astro.config.tsを書き換える

markdown:という項目を頑張って見つける。

import remarkLinkCard from 'remark-link-card'
---
 
export default defineConfig({
  
  markdown: {
    remarkPlugins: [remarkLinkCard],
  },
})

remark系プラグインを複数使っている場合は配列で記述する。キャッシュのオプション設定もできるらしい。

import remarkLinkCard from 'remark-link-card'
---
 
export default defineConfig({
 
  markdown: {
    remarkPlugins: [remarkToc, remarkMath, remarkEmoji, remarkLinkCard],
  },
})

↓

STEP3. ここでエラー発生

このとき単にastro.config.tsを書き換えただけだと、以下のエラーが発生します。

Could not find a declaration file for module 'remark-link-card'. 'c:/astro/eizo-gak/node_modules/remark-link-card/index.js' implicitly has an 'any' type.

これは TypeScript の型エラーで、remark-link-card に型定義 (.d.tsファイル) がないため発生しています。Astroで TypeScript ベースの設定ファイル (astro.config.ts) を使用している場合、「型が見つからないぞ！」と警告を出すことがあるそうです。

↓

STEP4.　【重要】 Typescript 特有の操作？

declare module を定義します。型定義ファイル (.d.ts) を作成して、型エラーを抑える方法です。

src/types/remark-link-card.d.ts を作成し、以下のコードを記述する。

declare module 'remark-link-card' {
  const remarkLinkCard: any;
  export default remarkLinkCard;
}

こうすると、TypeScript は remark-link-card を any 型として認識しエラーが消えます。（ChatGPT:談）

↓

STEP5.　CSS を書く

remark link card には CSS が含まれていないため自前で用意する必要があります。通常のCSSに関してはネット上にたくさん作例がみられるのですが、Tailwind CSSの実装例はいまいち乏しいのでここに置いておきます。

src/styles/global.cssの @layer components に、以下の要領でコードを書き加えました。

@layer components {
 
  article {
    @apply prose-headings:scroll-mt-20 prose-headings:break-words first:prose-headings:mt-0 prose-p:break-words prose-a:!break-words prose-a:!decoration-muted-foreground prose-a:underline-offset-[3px] prose-a:transition-colors hover:prose-a:!decoration-foreground prose-pre:!px-0 prose-img:mx-auto;
 
 
 
    /* リンクカード用に書き加えた */
    .rlc-container {
      @apply border border-gray-300 dark:border-gray-700 rounded-lg no-underline transition-colors duration-150 
             hover:bg-gray-100 dark:hover:bg-gray-800 w-full mb-5 grid gap-2
             grid-cols-[1fr_116px] md:grid-cols-[1fr_220px] ;
    }
  
    .rlc-info {
      @apply ml-1 flex flex-col justify-center px-4 py-3 min-w-full max-w-full;
    }
  
    .rlc-title {
      @apply text-[0.9em] leading-tight text-gray-900 dark:text-gray-100 
             line-clamp-2 overflow-hidden;
    }
  
    .rlc-description {
      @apply mt-1 text-xs text-gray-500 dark:text-gray-500 mb-2 truncate;
    }
  
    .rlc-url-container {
      @apply flex items-center gap-2;
    }
  
    .rlc-favicon {
      @apply -mb-0 mt-[0.15rem] -ml-0 mr-0;
    }
  
    .rlc-url {
      @apply  text-xs text-gray-600 dark:text-gray-400 truncate;
    }
  
    .rlc-image-container {
      @apply -mt-5 -mb-5 aspect-square mr-4 md:aspect-[2.31/1];
    }
  
    .rlc-image {
      @apply object-cover h-full w-full rounded-r-lg;
    }
    /* リンクカードここまで */
 
 
  }
}