vitepress-linkcards

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
Copy

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
      })
    }
  }
  // ...
})
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:

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

.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.