vitepress-enhanced-site-links

Vue components for enhanced link cards in VitePress.

npm npm license

vitepress-enhanced-site-links demo

Installation

npm

npm i @miletorix/vitepress-enhanced-site-links

Usage

Configuration

docs/.vitepress/theme/index.ts

typescript

import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import { Card, CardsGroup } from '@miletorix/vitepress-enhanced-site-links'
import '@miletorix/vitepress-enhanced-site-links/style.css'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('Card', Card) 
    ctx.app.component('CardsGroup', CardsGroup) 
  }
}

Single Link Card

example.md

vue

<Card
  title="title..."
  link="https://url.../" 
  desc="desc..."
  logo="path-to-img"
/>

TIP

If description is empty, the URL will be shown

🚧 Attention

When interacting with some sites, it is necessary to specify the logo (favicon) icon manually, because there is a problem with loading.

Cases have been observed:

Sharing links with OneDrive

Multiple Link Cards

example.md

vue

<CardsGroup :cards="[
  { title: 'title...', link: 'https://url.../', desc: 'desc...' },
  { title: 'title...', link: 'https://url.../', desc: 'desc...' },
  { title: 'title...', link: 'https://url.../', desc: 'desc...', logo: 'path-to-url' }
]" />

Examples

Example 1

Input

example.md

vue

<Card title="Github" link="https://github.com/" />

Output

Github

https://github.com/

Example 2

Input

example.md

vue

<Card title="Github" link="https://github.com/" desc="Github Homepage" />

Output

Github

Github Homepage

Example 3

Input

example.md

vue

<Card
  title="YouTube"
  link="https://youtube.com/" 
  desc="YouTube Homepage"
  logo="/img/youtube-logo-1.png"
/>

Output

YouTube

YouTube Homepage

Example 4

Input

example.md

vue

<CardsGroup :cards="[
  { title: 'YouTube', link: 'https://youtube.com/', desc: '' },
  { title: 'Github', link: 'https://github.com/', desc: 'Github Homepage' },
  { 
    title: 'Notepad', 
    link: 'https://apps.microsoft.com/detail/9msmlrh6lzf3?hl=en-US&gl=US', 
    desc: 'MS Store',
    logo: '/img/notepad-logo.png' 
  }
]" />