vitepress-enhanced-site-links

Vue components for enhanced link cards in VitePress.

Live Demo and more information

See it in action:
👉 https://miletorix.github.io/vitepress-enhanced-site-links/

Installation

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

Usage

Configuration

// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import { Card, CardsGroup } from '@miletorix/vitepress-enhanced-site-links' // [!code ++]
import '@miletorix/vitepress-enhanced-site-links/style.css' // [!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('Card', Card) // [!code ++]
    ctx.app.component('CardsGroup', CardsGroup) // [!code ++]
  }
}

Single Link Card

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

Multiple Link Cards

<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

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

Output

Example 2

Input

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

Output

Example 3

Input

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

Output

Example 4

Input

<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' 
  }
]" />  

Output