vitepress-linkcard

A VitePress plugin to generate a pretty linkcard 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-linkcard     # npm
yarn add -D vitepress-linkcard  # yarn
pnpm add -D vitepress-linkcard  # pnpm
Copy

Usage

docs/.vitepress/config.ts

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

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

*.md

Generates a linkcard when @: appended.

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

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:

• Border color
• Background color
• Border color when hovered
• Background color when hovered

By default, all colors are set to var(--vp-c-bg-soft).

docs/.vitepress/theme/custom.css

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

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

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

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
}
Copy

Other specifications

.linkcard_cache.json

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

You can move it to root dir if needed.

Special handling for github.com

When the domain is github.com, trimming is performed as shown in the following example to avoid duplication of the title and description.