Getting Started

A VitePress Plugin to Easily generate, update and display repository Contributors.

This package includes two components that can be use together or individually.

1. get-contributors - script to generate the contributors.json file.
2. Contributors.vue - component to display the contributors in VitePress.

Start by installing the package, configuring the script and setting up the plugin.

Top 6 VP Contributors

<Contributors :contributors="$contributors" heading="Top 6 VP Contributors" max-users="6" margin="36px 0 0" />

Install

Install or Download from NPM npmjs.com

Install directly to your VitePress from npmjs with the following command.

npm

npm i @cssnr/vitepress-plugin-contributors

pnpm

pnpm i @cssnr/vitepress-plugin-contributors

yarn

yarn add @cssnr/vitepress-plugin-contributors

bun

bun i @cssnr/vitepress-plugin-contributors

Note: you can also copy the source file to your project. WIP

Configure

You need to configure the get-contributors script to run.

1. Add the get-contributors script to your package.json.

{
  "scripts": {
    "get-contributors": "npx get-contributors user/repo", 
    "postinstall": "npm run get-contributors"
  }
}

If you don't add the postinstall script you need to add get-contributors to your build.

2. Add the contributors.json file location to your .gitignore.

.vitepress/contributors.json

3. Generate the contributors.json file.

Script

npm run get-contributors

Without Script

npx get-contributors user/repo

See the Get Contributors Documentation for usage details.

Setup

Add these 3-5 lines to your index.[js,ts].

If you don't have a .vitepress/theme/index.js file, create one.

.vitepress/theme/index.js

import DefaultTheme, { VPBadge } from 'vitepress/theme'

import Contributors from '@cssnr/vitepress-plugin-contributors'
import '@cssnr/vitepress-plugin-contributors/style.css'

import contributors from '../contributors.json'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Badge', VPBadge) 

    app.component('Contributors', Contributors) 

    app.config.globalProperties.$contributors = contributors 
  },
}

If you are unsure about this usage, add these lines for simplicity. Global

Only required if you are using the VitePress Badge. VPBadge

Usage

To use, simply add the <Contributors> tag to your markdown file (or component).

Global

<Contributors :contributors="$contributors" />

Without Global

<script setup>
import contributors from '../.vitepress/contributors.json'
</script>

<Contributors :contributors="contributors" />

See the Contributors Documentation for usage details and more examples.