Repo Card

A repository information card plugin that displays detailed GitHub/Gitee repository cards in your Markdown. Supports embed syntax for individual cards and container syntax for multi-card grid layouts.

Installation

pnpm

pnpm add vitepress-plugin-repo-card

npm

npm install vitepress-plugin-repo-card

bun

bun add vitepress-plugin-repo-card

deno

deno add vitepress-plugin-repo-card

yarn

yarn add vitepress-plugin-repo-card

Usage

vitepress-tuck Mode Recommended

.vitepress/config.ts

import { defineConfig } from 'vitepress-tuck'
import repoCard from 'vitepress-plugin-repo-card'

export default defineConfig({
  plugins: [repoCard()],
})

Learn more about vitepress-tuck

Native Mode

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { repoCardMarkdownPlugin } from 'vitepress-plugin-repo-card'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(repoCardMarkdownPlugin)
    },
  },
})

.vitepress/theme/index.ts

import type { Theme } from 'vitepress'
import { enhanceAppWithRepoCard } from 'vitepress-plugin-repo-card/client'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceAppWithRepoCard(ctx)
  },
} satisfies Theme

Syntax

Embed Syntax

Use the @[repo]() syntax to embed individual repository cards. Defaults to GitHub if register is omitted.

@[repo](owner/name)
@[repo github](owner/name)
@[repo gitee](owner/name)

Display Full Name

Use the fullname parameter to show the owner/name full path. For organization-owned repositories, the full name is displayed automatically.

@[repo fullname github](pengzhanbo/vitepress-tuck)

Container Syntax

Use the ::: repo container to display multiple repository cards in a responsive grid layout.

::: repo
@[repo github](vuejs/vitepress)
@[repo github](vuejs/core)
:::

Examples

Single Repository Card

GitHub repository:

@[repo github](vuejs/vitepress)

Gitee repository:

@[repo gitee](openharmony/kernel_liteos_a)

Display full name:

@[repo fullname](pengzhanbo/vitepress-tuck)

Multi-Card Grid Layout

::: repo
@[repo fullname](pengzhanbo/vitepress-tuck)
@[repo](pengzhanbo/vite-plugin-mock-dev-server)
@[repo](pengzhanbo/utils)
@[repo](pengzhanbo/vuepress-theme-plume)
:::

Card Information

Each repository card displays the following:

Field	Description
Name	Repository name or owner/name full
Visibility	Public / Private badge
Archived	Warning badge if archived
Description	Repository description text
Language	Primary language with color dot
Stars	Formatted count (e.g. 1.2k)
Forks	Formatted count (e.g. 1.2k)
License	License name (if available)

Component Usage

You can also use the VPRepoCard component directly:

<script setup lang="ts">
import { VPRepoCard } from 'vitepress-plugin-repo-card/client'
</script>

<template>
  <VPRepoCard repo="vuejs/vitepress" register="github" />
  <VPRepoCard repo="owner/name" register="gitee" fullname />
</template>

Props

Prop	Type	Default	Description
repo	string	(required)	Repository in owner/name format
register	'github' | 'gitee'	'github'	Repository platform
fullname	boolean	-	Display full name (owner/name)