A VitePress plugin to generate pretty linkcards with OGP.

You can see: A blog generated with this plugin | Docs by TypeDoc

This plugin was forked from markdown-it-link-to-card.

Getting started

Install

npm i -D vitepress-linkcards    # npm
yarn add -D vitepress-linkcards # yarn
pnpm add -D vitepress-linkcards # pnpm

Usage

docs/.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { linkToCardPlugin } from 'vitepress-linkcards'
import type { LinkToCardPluginOptions } from 'vitepress-linkcards'

export default defineConfig({
  // ...
  markdown: {
    config: (md) => {
      md.use<LinkToCardPluginOptions>(linkToCardPlugin, {
        // target: "_self" // if needed
      })
    }
  }
  // ...
})

*.md

Generates a linkcard when @: appended.

[example](@:https://example.com)

Supported options

Target

As shown in Usage, you can specify the target window in which to open a link.

• _blank (default)
• _self
• _top
• _parent

Color theme

You can customize:

| Property | default | | :---------------------------- | --------------------- | | Border color | var(--vp-c-bg) | | Background color | var(--vp-c-bg-soft) | | Border color when hovered | none | | Background color when hovered | none |

docs/.vitepress/theme/custom.css

/* For example: like "Features" in VitePress */

.vitepress-linkcards-container {
  border-color: #00000000 !important;
  background-color: var(--vp-c-bg-soft) !important;
}

.vitepress-linkcards-container:hover {
  border-color: var(--vp-c-brand-1) !important;
  background-color: var(--vp-c-bg-soft) !important;
}

docs/.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme-without-fonts'
import type { Theme as ThemeConfig } from 'vitepress'
import './custom.css'

const Theme: ThemeConfig = {
  extends: DefaultTheme
}

export default {
  ...Theme
}

Other specifications

.linkcards_cache.json

It is generated automatically in docs/ and cache all the parsed metadata.

You can move it to root dir if needed.

Special handlings for github.com and zenn.dev

This plugin has special handling for github.com and zenn.dev to display their metadata correctly.