Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/presentkim/vuepress-plugin-giscus-comment
Add <Giscus/> component to VuePress@v2
https://github.com/presentkim/vuepress-plugin-giscus-comment
comment comment-system giscus vue vue3 vuejs vuepress vuepress-next vuepress-plugin vuepress2 vuepress2-plugin
Last synced: 6 days ago
JSON representation
Add <Giscus/> component to VuePress@v2
- Host: GitHub
- URL: https://github.com/presentkim/vuepress-plugin-giscus-comment
- Owner: PresentKim
- License: mit
- Created: 2022-03-16T11:08:10.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-25T03:14:33.000Z (over 2 years ago)
- Last Synced: 2024-12-14T01:46:13.473Z (9 days ago)
- Topics: comment, comment-system, giscus, vue, vue3, vuejs, vuepress, vuepress-next, vuepress-plugin, vuepress2, vuepress2-plugin
- Language: TypeScript
- Homepage:
- Size: 94.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuepress-plugin-giscus-comment
[](https://www.npmjs.com/package/vuepress-plugin-giscus-comment) [](https://github.com/PresentKim/vuepress-plugin-giscus-comment/blob/master/LICENSE)
> Note: This plugin is provided for [**VuePress 2**](https://v2.vuepress.vuejs.org/)
[Giscus](https://giscus.app/) plugin for VuePress 2.
This plugin register `` custom element to your VuePress site.
You are free to use it on any theme or page.
## Installation
```bash
yarn add -D vuepress-plugin-giscus-comment
# OR
npm install -D vuepress-plugin-giscus-comment
```
## Usage
> #### **`Method 1`**: Using the simple plugin configuration array
> This method is simple and the most common.
> ```javascript
> module.exports = {
> plugins: [
> ['vuepress-plugin-giscus-comment',{/*options*/}]
> ]
> };
> ```
>
> When using with TypeScript, you can specify the type as shown below.
> ```typescript
> import {GiscusCommentPluginConfig} from 'vuepress-plugin-giscus-comment'
>
> module.exports = {
> plugins: [
> ['vuepress-plugin-giscus-comment', {/*options*/}] as GiscusCommentPluginConfig
> ]
> };
> ```
> #### **`Method 2`**: Using the plugin configuration generator function
> This method is a goes well with TypeScript.
> ```typescript
> import {GiscusCommentPlugin} from 'vuepress-plugin-giscus-comment';
>
> module.exports = {
> plugins: [
> new GiscusCommentPlugin({/*options*/})
> ]
> }
> ```
## :card_file_box: Options
The plugin option has an interface as shown below.
```typscript
interface GiscusCommentPluginOptions{
/** @description The repository name */
repo: `${string}/${string}`;
/** @description The repository id */
repoId: string;
/**
* @description The discussion category name of repository
* Required if 'mapping' value is not 'specific'
*/
category?: string;
/**
* @description The discussion category id of repository
* Required if 'mapping' value is not 'specific'
*/
categoryId?: string;
/**
* @description The mapping method between the embedding page and the embedded discussion
* @default 'pathname'
*/
mapping?: 'url' | 'title' | 'og:title' | 'pathname' | 'specific' | 'number';
/**
* @description Not required by Common mapping method
* Required when 'mapping' value is 'specific' or 'number'
*/
term?: string|number;
/**
* @description Whether to enable reactions for main post
* @default true
*/
reactionsEnabled?: boolean;
/**
* @description Whether to enable emit discussion metadata
* @default false
*/
emitMetadata?: boolean;
/**
* @description The theme name or custom theme css path that apply to giscus
* @default 'light'
*/
theme?:
'light' | 'light_high_contrast' | 'light_protanopia' |
'dark' | 'dark_high_contrast' | 'dark_protanopia' | 'dark_dimmed' |
'transparent_dark' | 'preferred_color_scheme' |
`/${string}` | `https://${string}`;
/**
* @description The location of comment box
* @default 'bottom'
*/
inputPosition?: 'top' | 'bottom';
/**
* @description The language name that apply to giscus
* @default 'en'
*/
lang?:
'de' | 'en' | 'es' | 'fr' | 'gsw' | 'id' | 'it' | 'ja' |
'ko' | 'pl' | 'ro' | 'ru' | 'tr' | 'vi' | 'zh-CN' | 'zh-TW';
/**
* @description Whether to load the comments lazily
* @default true
*/
lazyLoading?: boolean;
}
```
> Example:
> ```typescript
> import {GiscusCommentPlugin} from 'vuepress-plugin-giscus-comment';
>
> module.exports = {
> plugins: [
> new GiscusCommentPlugin({
> repo: '[ENTER REPOSITORY NAME HERE]',
> repoId: '[ENTER REPOSITORY ID HERE]',
> category: '[ENTER CATEGORY NAME HERE]',
> categoryId: '[ENTER CATEGORY ID HERE]',
> mapping: 'url',
> reactionsEnabled: false,
> emitMetadata: true,
> theme: 'dark',
> inputPosition: 'top',
> lang: 'en',
> lazyLoading: false
> })
> ]
> }
> ```
> ### :bulb: How to get my repo and category ids?
>
> You can easily get it from [**Giscus Main page**](https://giscus.app/).