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

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

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

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

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

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

| | Title | Description | | ------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | Before | GitHub - asumo-1xts/vitepress-linkcard: A VitePress plugin to generate a pretty linkcard. | A VitePress plugin to generate a pretty linkcard. Contribute to asumo-1xts/vitepress-linkcard development by creating an account on GitHub. | | After | asumo-1xts/vitepress-linkcard | A VitePress plugin to generate a pretty linkcard. |