vitepress-linkcard

Getting started

$3

``shell
npm i -D vitepress-linkcard # npm
yarn add -D vitepress-linkcard # yarn
pnpm add -D vitepress-linkcard # pnpm
`

$3

#### docs/.vitepress/config.ts

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

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

#### *.md

Generates a linkcard when @: appended.

`md
example
`

Supported options

$3

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

- _blank (default)
- _self
- _top
- _parent

$3

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

`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

`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

$3

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

You can move it to root dir if needed.

$3

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