リンクカード

概要

リンクカードとはリンクの情報をわかりやすくカード形式で表示するもの。

例

はてなブログ:

Zenn:

FBCでの実装

URLからカードの表示に必要なメタデータを取得するAPIを作成し、markdown中で特定の記法を使うことでカードを表示する。

markdownでの記法はFBCで使っているmarkdown-itのプラグインとして実装する。

メタデータAPI

URL: /api/metadata

パラメーター: url: 対象となるページのURL

例: /api/metadata?url=https://xxx.com/xxx

レスポンス:

{
  site_title: "Moeny Forward Developers Blog",
  site_url: "https://xxx.com",
  favicon: "https://xxx.com/favicon.ico",
  url: "https://xxx.com/xxxx",
  title: "ChatGPTのAPIがオープンになったので(略)",
  description: "xxxxxxx",
  image: "https://xxx.com/xxx.png"
}

同じURLの内容は3日キャッシュすること。

リンクカード表示

markdown-itのプラグインとして実装すること。

リンクカード記法:

@[TITLE](URL)

表示HTML:

<div class="link-card">
  <div class="link-card__title">
    <a href="URL" target="_blank">TITLE</a>
  </div>
  <div class="link-card__description">DESCRIPTION</div>
  <div class="link-card__favicon"><img src="FAVICON" /></div>
  <div class="link-card__site-title">
    <a href="SITE URL" target="_blank">SITE TITLE</a>
  </div>
  <div class="link-card__image"><img src="IMAGE" /></div>
</div>

表示できない場合:

普通のリンクとして表示する。