Nólëbase Integrations

https://nolebase-integrations.ayaka.io
Admin
Nólëbase Integrations is a collection of diverse documentation engineering tools, plugins,...
Tokens:54,045
Snippets:818
Trust Score:5.1
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install as a Vue plugin

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-enhanced-readabilities/index.html

Import the plugin and styles for manual configuration.

```typescript
import {
  
NolebaseEnhancedReadabilitiesPlugin
 
} from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
```

--------------------------------

### Install @nolebase/markdown-it-bi-element-transform

Source: https://nolebase-integrations.ayaka.io/integrations/markdown-it-element-transform/index.html

Commands to add the plugin as a development dependency using various package managers.

```shell
ni @nolebase/markdown-it-bi-element-transform -D
```

```shell
pnpm add @nolebase/markdown-it-bi-element-transform -D
```

```shell
npm install @nolebase/markdown-it-bi-element-transform -D
```

```shell
yarn add @nolebase/markdown-it-bi-element-transform -D
```

--------------------------------

### Install the plugin

Source: https://nolebase-integrations.ayaka.io/integrations/markdown-it-bi-directional-links/getting-started.html

Commands to add the package as a development dependency using various package managers.

```shell
ni @nolebase/markdown-it-bi-directional-links -D
```

```shell
pnpm add @nolebase/markdown-it-bi-directional-links -D
```

```shell
npm install @nolebase/markdown-it-bi-directional-links -D
```

```shell
yarn add @nolebase/markdown-it-bi-directional-links -D
```

--------------------------------

### Install @nolebase/ui dependency

Source: https://nolebase-integrations.ayaka.io/pages/en/ui/index

Use these commands to add the @nolebase/ui package as a development dependency to your project.

```shell
pnpm add @nolebase/ui -D
```

```shell
npm install @nolebase/ui -D
```

```shell
yarn add @nolebase/ui -D
```

--------------------------------

### Install @nolebase/vitepress-plugin-meta

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-meta/index.html

Commands to add the plugin as a development dependency using different package managers.

```shell
ni @nolebase/vitepress-plugin-meta -D
```

```shell
pnpm add @nolebase/vitepress-plugin-meta -D
```

```shell
npm install @nolebase/vitepress-plugin-meta -D
```

```shell
yarn add @nolebase/vitepress-plugin-meta -D
```

--------------------------------

### Install Rive Canvas package

Source: https://nolebase-integrations.ayaka.io/pages/en/ui/lazy-teleport-rive-canvas/index

Commands to install the @nolebase/ui-rive-canvas package using various package managers.

```shell
ni @nolebase/ui-rive-canvas
```

```shell
pnpm add @nolebase/ui-rive-canvas
```

```shell
npm install @nolebase/ui-rive-canvas
```

```shell
yarn add @nolebase/ui-rive-canvas
```

--------------------------------

### Install Nolebase Enhanced Mark Plugin

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-enhanced-mark/index.html

Commands to install the plugin as a development dependency using various package managers.

```shell
ni @nolebase/vitepress-plugin-enhanced-mark -D
```

```shell
pnpm add @nolebase/vitepress-plugin-enhanced-mark -D
```

```shell
npm install @nolebase/vitepress-plugin-enhanced-mark -D
```

```shell
yarn add @nolebase/vitepress-plugin-enhanced-mark -D
```

--------------------------------

### Project Directory Structure Examples

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-git-changelog/getting-started.html

Visual representation of where the root directory is located relative to .vitepress.

```shell
.
├── docs
│   ├── .vitepress
│   │   ├── config.ts
│   │   └── theme
│   │       └── index.ts
│   └── README.md
```

```shell
.
├── .vitepress
│   ├── config.ts
│   └── theme
│       └── index.ts
└── README.md
```

--------------------------------

### Install @nolebase/vitepress-plugin-og-image

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-og-image/index.html

Use these commands to add the plugin as a development dependency to your project.

```shell
ni @nolebase/vitepress-plugin-og-image -D
```

```shell
pnpm add @nolebase/vitepress-plugin-og-image -D
```

```shell
npm install @nolebase/vitepress-plugin-og-image -D
```

```shell
yarn add @nolebase/vitepress-plugin-og-image -D
```

--------------------------------

### Install @nolebase/ui-asciinema

Source: https://nolebase-integrations.ayaka.io/pages/en/ui/asciinema-player/index

Commands to add the package to your project dependencies using various package managers.

```shell
ni @nolebase/ui-asciinema
```

```shell
pnpm add @nolebase/ui-asciinema
```

```shell
npm install @nolebase/ui-asciinema
```

```shell
yarn add @nolebase/ui-asciinema
```

--------------------------------

### VitePress Version Output Example

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-enhanced-readabilities/index.html

Sample console output showing the current VitePress version.

```shell
> @nolebase/integrations-docs@ docs:dev /nolebase/integrations/docs
> vitepress dev


  vitepress v1.0.0-rc.12

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
```

--------------------------------

### Install @nolebase/vitepress-plugin-index

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-index/index.html

Commands to add the plugin as a development dependency using various package managers.

```shell
ni @nolebase/vitepress-plugin-index -D
```

```shell
pnpm add @nolebase/vitepress-plugin-index -D
```

```shell
npm install @nolebase/vitepress-plugin-index -D
```

```shell
yarn add @nolebase/vitepress-plugin-index -D
```

--------------------------------

### Configure plugin with options

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-enhanced-readabilities/index.html

Register the plugin with custom locale configuration during installation.

```typescript
import type { 
Theme
 as ThemeConfig } from 'vitepress'
import 
DefaultTheme
 from 'vitepress/theme'

import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
import { 
NolebaseEnhancedReadabilitiesPlugin
 } from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'

export const 
Theme
: ThemeConfig = {
  
extends
: 
DefaultTheme
,
  
Layout
: () => {
    // Rest of the code...
  },
  
enhanceApp
({ 
app
 }) {
    
app
.
use
(
NolebaseEnhancedReadabilitiesPlugin
, {  
      
locales
: {  
        'zh-CN': {  
          
title
: {  
            
title
: '阅读增强插件',  
          }  
        },  
        'en': {  
          
title
: {  
            
title
: 'Enhanced Readabilities Plugin',  
          }  
        }  
      }  
    } as Options) 
  },
}

export default 
Theme
```

--------------------------------

### Install @nolebase/markdown-it-unlazy-img

Source: https://nolebase-integrations.ayaka.io/integrations/markdown-it-unlazy-img/index.html

Commands to add the package as a development dependency using various package managers.

```shell
ni @nolebase/markdown-it-unlazy-img -D
```

```shell
pnpm add @nolebase/markdown-it-unlazy-img -D
```

```shell
npm install @nolebase/markdown-it-unlazy-img -D
```

```shell
yarn add @nolebase/markdown-it-unlazy-img -D
```

--------------------------------

### Configure GitChangelogMarkdownSection in Vite

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-git-changelog/configure-vite-plugins.html

Basic setup for the plugin within the Vite configuration file.

```typescript
import { 
defineConfig
 } from 'vite'
import { 
  
GitChangelogMarkdownSection
, 
} from '@nolebase/vitepress-plugin-git-changelog/vite'

export default 
defineConfig
({
  
plugins
: [
    
GitChangelogMarkdownSection
(), 
  ],
  // other vite configurations...
})
```

--------------------------------

### Install Page Properties plugin

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-page-properties/index.html

Commands to add the plugin as a development dependency using different package managers.

```shell
ni @nolebase/vitepress-plugin-page-properties -D
```

```shell
pnpm add @nolebase/vitepress-plugin-page-properties -D
```

```shell
npm install @nolebase/vitepress-plugin-page-properties -D
```

```shell
yarn add @nolebase/vitepress-plugin-page-properties -D
```

--------------------------------

### Check VitePress Version

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-enhanced-readabilities/index.html

Commands to run the development server to verify the installed VitePress version.

```shell
pnpm docs:dev
```

```shell
npm run docs:dev
```

```shell
yarn docs:dev
```

--------------------------------

### Full VitePress configuration migration

Source: https://nolebase-integrations.ayaka.io/pages/en/releases/migrations/v1-to-v2

Example of a complete configuration file showing the transition from the old element transform logic to the new plugin.

```ts
import { defineConfig } from 'vitepress'
import { ElementTransform } from '@nolebase/markdown-it-element-transform'
import type { Options as ElementTransformOptions } from '@nolebase/markdown-it-element-transform'
import { InlineLinkPreviewElementTransform } from '@nolebase/vitepress-plugin-inline-link-preview/markdown-it'

export default defineConfig({
  // ...
  markdown: {
    // ...
    config: (md) => {
      md.use(ElementTransform, (() => {
        let transformNextLinkCloseToken = false
        return { 
          transform(token) { 
            switch (token.type) { 
              case 'link_open': 
                if (token.attrGet('class') !== 'header-anchor') { 
                  token.tag = 'VPNolebaseInlineLinkPreview'
                  transformNextLinkCloseToken = true
                }
                break
              case 'link_close': 
                if (transformNextLinkCloseToken) { 
                  token.tag = 'VPNolebaseInlineLinkPreview'
                  transformNextLinkCloseToken = false
                } 
                break
            } 
          }, 
        } as ElementTransformOptions
      })()) 

      md.use(InlineLinkPreviewElementTransform) 
    },
  },
})
```

--------------------------------

### Extended TypeScript Configuration

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-breadcrumbs/index.html

Recommended compiler options for advanced project setups.

```jsonc
{
  "compilerOptions": {
    "jsx": "preserve",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "strict": true,
    "strictNullChecks": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noEmit": true,
    "removeComments": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true
  },
  "include": [
    "**/.vitepress/**/*.ts",
    "**/.vitepress/**/*.mts",
    "**/.vitepress/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

--------------------------------

### Configure mixed sidebar settings

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-sidebar/index.html

Example of mixing string-based and object-based configurations to control sidebar directory behavior.

```typescript
calculateSidebar([
  'Notes',
  'Tweets', .
  { folderName: 'Articles', separate: true },
])
```

--------------------------------

### Plugin Repository URL

Source: https://nolebase-integrations.ayaka.io/integrations/obsidian-plugin-unocss/index.html

The GitHub repository URL required for installation via the BRAT plugin.

```text
https://github.com/nolebase/obsidian-plugin-unocss
```

--------------------------------

### Configure GitChangelog Plugin

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-git-changelog/configure-vite-plugins.html

Basic setup for the GitChangelog and GitChangelogMarkdownSection plugins in a Vite configuration file.

```typescript
import { 
join
 } from 'node:path'
import { 
defineConfig
 } from 'vite'
import {
  
GitChangelog
,
  
GitChangelogMarkdownSection
,
} from '@nolebase/vitepress-plugin-git-changelog/vite'

export default 
defineConfig
(() => {
  return {
    
plugins
: [
      
GitChangelog
({ 
        // Fill in your repository URL here
        
repoURL
: () => 'https://github.com/nolebase/integrations', 
      }), 
      
GitChangelogMarkdownSection
(),
    ]
    // other vite configurations...
  }
})
```

--------------------------------

### Install as a Vue plugin

Source: https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-git-changelog/configure-ui

Importing and registering the Git Changelog plugin within the VitePress theme configuration.

```typescript
import {
  
NolebaseGitChangelogPlugin
 
} from '@nolebase/vitepress-plugin-git-changelog/client'
```

```typescript
import type { 
Theme
 as ThemeConfig } from 'vitepress'
import 
DefaultTheme
 from 'vitepress/theme'

import { 
NolebaseGitChangelogPlugin
 } from '@nolebase/vitepress-plugin-git-changelog/client'

// Rest of the code...

export const 
Theme
: ThemeConfig = {
  
extends
: 
DefaultTheme
,
  
Layout
: () => {
    // Rest of the code...
  },
  
enhanceApp
({ 
app
 }) {
    
app
.
use
(
NolebaseGitChangelogPlugin
) 
  },
}

export default 
Theme
```

--------------------------------

### Configure via Vue plugin installation

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-git-changelog/configure-ui.html

Use the app.use method within the enhanceApp function to register the plugin and provide configuration options.

```typescript
import type { 
Theme
 as ThemeConfig } from 'vitepress'
import 
DefaultTheme
 from 'vitepress/theme'

import { 
NolebaseGitChangelogPlugin
 } from '@nolebase/vitepress-plugin-git-changelog/client'

export const 
Theme
: ThemeConfig = {
  
extends
: 
DefaultTheme
,
  
Layout
: () => {
    // Rest of the code...
  },
  
enhanceApp
({ 
app
 }) {
    // Rest of the code...

    
app
.
use
(
NolebaseGitChangelogPlugin
, { 
      // Configuration...
    }) 

    // Rest of the code...
  },
}
```

--------------------------------

### Identify VitePress Root Directory

Source: https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-git-changelog/getting-started

Examples of project structures to identify the root directory for creating vite.config.ts.

```shell
.
├── docs
│   ├── .vitepress
│   │   ├── config.ts
│   │   └── theme
│   │       └── index.ts
│   └── README.md
```

```shell
.
├── .vitepress
│   ├── config.ts
│   └── theme
│       └── index.ts
└── README.md
```

```shell
touch vite.config.ts
```

--------------------------------

### View Build Error Output

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-enhanced-readabilities/index.html

Example of a syntax error indicating missing exports from the vitepress module.

```shell
build error:
file://Docs/dist/index.js:2
import { useData as Fe, withBase as tt, useRoute as nt } from "vitepress";
         ^^^^^^^
SyntaxError: The requested module 'vitepress' does not provide an export named 'useData'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
```

--------------------------------

### Install Breadcrumbs Plugin

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-breadcrumbs/index.html

Commands to add the breadcrumbs plugin to your project using different package managers.

```shell
ni @nolebase/vitepress-plugin-breadcrumbs
```

```shell
pnpm add @nolebase/vitepress-plugin-breadcrumbs
```

```shell
npm install @nolebase/vitepress-plugin-breadcrumbs
```

```shell
yarn add @nolebase/vitepress-plugin-breadcrumbs
```

```shell
bun install @nolebase/vitepress-plugin-breadcrumbs
```

--------------------------------

### Plugin Directory Structure

Source: https://nolebase-integrations.ayaka.io/integrations/obsidian-plugin-unocss/index.html

The expected file layout within the Obsidian plugins directory after manual installation.

```shell
❯ tree
.
├── main.js
├── manifest.json
```

--------------------------------

### Example Git Commit Logs

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-git-changelog/configure-vite-plugins.html

Sample git log output showing multiple commits from the same author with different email addresses.

```plaintext
commit 1
Author: John Doe <john.doe@example.com>
Date:   Fri Oct 1 12:00:00 2021 +0800

    Add a new feature

commit 2
Author: John Doe <john.doe@anothersite.com>

    Fix a bug
```

--------------------------------

### Configure Locales for Git Changelog

Source: https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-git-changelog/configure-ui

Example configuration for internationalizing the changelog UI using the locales option.

```ts
{
  locales: {
    'en': {
      changelog: {
        title: 'Changelog',
        noData: 'No recent changes',
        lastEdited: 'This page was last edited {{daysAgo}}',
        lastEditedDateFnsLocaleName: 'enUS',
        viewFullHistory: 'View full history',
        committedOn: ' on {{date}}',
      }
    },
    'zh-CN': {
       changelog: {
         title: '页面历史',
         noData: '暂无最近变更历史',
         lastEdited: '本页面最后编辑于 {{daysAgo}}',
         lastEditedDateFnsLocaleName: 'zhCN',
         viewFullHistory: '查看完整历史',
         committedOn: '于 {{date}} 提交',
       }
     },
   }
}
```

--------------------------------

### Create Vite Configuration File

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-git-changelog/getting-started.html

Command to initialize a separate vite.config.ts file in the project root.

```shell
touch vite.config.ts
```

--------------------------------

### Import spotlight components

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-enhanced-readabilities/index.html

Import spotlight components for use in custom layouts.

```typescript
import {
  
Spotlight
,  
  
ScreenSpotlight
, 
} from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
```

--------------------------------

### Import NolebaseInlineLinkPreviewPlugin

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-inline-link-preview/configuration.html

Import the plugin from the client package.

```typescript
import {
  
NolebaseInlineLinkPreviewPlugin
 
} from '@nolebase/vitepress-plugin-inline-link-preview/client'
```

--------------------------------

### Install as a Vue plugin

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-inline-link-preview/configuration.html

Register the plugin within the VitePress theme configuration using the enhanceApp hook.

```typescript
import type { 
Theme
 as ThemeConfig } from 'vitepress'
import 
DefaultTheme
 from 'vitepress/theme'

import { 
NolebaseInlineLinkPreviewPlugin
 } from '@nolebase/vitepress-plugin-inline-link-preview/client'

// Rest of the code...

export const 
Theme
: ThemeConfig = {
  
extends
: 
DefaultTheme
,
  
Layout
: () => {
    // Rest of the code...
  },
  
enhanceApp
({ 
app
 }) {
    
app
.
use
(
NolebaseInlineLinkPreviewPlugin
) 
  },
}

export default 
Theme
```

--------------------------------

### provide(InjectionKey, Options)

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-enhanced-readabilities/index.html

Configures the plugin by providing an Options object via Vue's dependency injection within the VitePress enhanceApp function.

```APIDOC
## provide(InjectionKey, Options)

### Description
Injects the plugin configuration into the VitePress application instance.

### Parameters
- **InjectionKey** (InjectionKey) - Required - The key used to identify the plugin configuration.
- **Options** (Object) - Required - The configuration object containing locales, layoutSwitch, and spotlight settings.

### Usage Example
```ts
import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities/client'

// Inside enhanceApp({ app })
app.provide(InjectionKey, {
  layoutSwitch: {
    disableHelp: true
  }
} as Options)
```
```

--------------------------------

### Customize Rive Canvas Size

Source: https://nolebase-integrations.ayaka.io/pages/en/ui/lazy-teleport-rive-canvas/index

Example of setting custom canvas resolution using data-rive-canvas-props-canvas-width and data-rive-canvas-props-canvas-height attributes.

```html
<span
  class="rive-canvas"
  data-rive-canvas="true"
  data-rive-src="/icons/star-emoji-animated.riv"
  data-rive-canvas-props-canvas-width="25"
  data-rive-canvas-props-canvas-height="25"
>
</span>
```

--------------------------------

### Example Thumbhash base64 string

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-thumbnail-hash/index.html

A sample base64 string generated by the Thumbhash algorithm for use in image rendering.

```plaintext
HikOLYh4eXepiHecd/d3eoaAdwh4
```

--------------------------------

### Integrate on-demand

Source: https://nolebase-integrations.ayaka.io/pages/en/integrations/markdown-it-bi-directional-links/getting-started

Manual integration for environments where you have direct access to the markdown-it instance.

```typescript
import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'
```

```typescript
import MarkdownIt from 'markdown-it'
let markdownIt: MarkdownIt = null as unknown as MarkdownIt
// ---cut---
import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'

// Rest of the code...
// @noErrors
markdownIt.use(BiDirectionalLinks())
```

--------------------------------

### Configure mapAuthors

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-git-changelog/configure-vite-plugins.html

Initial import structure for configuring the GitChangelog plugin with author mapping capabilities.

```typescript
import { 
join
 } from 'node:path'
import { 
defineConfig
 } from 'vite'
import {
  
GitChangelog
,
  
GitChangelogMarkdownSection
,
} from '@nolebase/vitepress-plugin-git-changelog/vite'
```

--------------------------------

### Configure via Vue dependency injection

Source: https://nolebase-integrations.ayaka.io/integrations/vitepress-plugin-git-changelog/configure-ui.html

Use the app.provide method with the InjectionKey within the enhanceApp function to supply configuration options.

```typescript
import type { 
Theme
 as ThemeConfig } from 'vitepress'
import 
DefaultTheme
 from 'vitepress/theme'

import { 
InjectionKey
 } from '@nolebase/vitepress-plugin-git-changelog/client'

export const 
Theme
: ThemeConfig = {
  
extends
: 
DefaultTheme
,
  
Layout
: () => {
    // Rest of the code...
  },
  
enhanceApp
({ 
app
 }) {
    // Rest of the code...

    
app
.
provide
(
InjectionKey
, { 
      // Configuration...
    }) 

    // Rest of the code...
  },
}
```

--------------------------------

### Integrate on-demand with markdown-it

Source: https://nolebase-integrations.ayaka.io/integrations/markdown-it-unlazy-img/index.html

Import and register the plugin with a markdown-it instance.

```typescript
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
```

```typescript
import MarkdownIt from 'markdown-it'
let markdownIt: MarkdownIt = null as unknown as MarkdownIt
// ---cut---
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
```
Tokens:
Raw