Vitepress Valence

Installation

1. Download the package from NPM:

npm

npm i @cynber/vitepress-valence

pnpm

pnpm add @cynber/vitepress-valence

yarn

yarn add @cynber/vitepress-valence

2. Add the styles to your project's index.ts file:

docs/.vitepress/theme/index.ts

// ...
import './style.css'
import '@cynber/vitepress-valence/style.css'
// ...

3. Modify your Vite config to not externalize the package:

docs/.vitepress/config.ts

export default defineConfig({
  // ...
  vite: { 
    ssr: { noExternal: ['@cynber/vitepress-valence']} 
  }, 
  // ...
})

Usage

You can now import and use the components in your project. Please see the following pages for detailed information on how to use each component:

• Article Components: For blog posts, announcements, and similar content.
• Table Components: A highly customizable component for dynamically displaying data in a table format, with options for icons, images, links, tags, and more/projects
• Image & Gallery Components: A component for displaying images and galleries in your documentation
• Components for embedding content:
  • Embed from Lemmy: Embed threadiverse posts from Lemmy instances.
  • Embed from Mailchimp: Embed a subscription form from Mailchimp.
• Miscellaneous:
  • Card & Container Components: The cards from the article setup can also be used independently wherever you want.