Developed by Logic Spark team

:sunglasses: Video Demo

DividePage Component Demo

https://github.com/logicspark/vitepress-api-document-theme/assets/135820109/643060a0-94d9-43a6-91f0-bcea95f74bff

Here is the link to the live demo. Have fun exploring!

:building_construction: Built With

:rocket: Getting Started

Learn what is required before using Vitepress API Document theme and how to install it quickly. Let's get started!

Prerequisite

This library is created with Vite + Vue3 + TypeScript. To start using this library, please make sure to install the following external libraries first:

• Node.js
• Vitepress

Support Node.js 18.12.0 (LTS) and above

Installation

There are a few ways you can install Vitepress API Document theme, namely npm, yarn and pnpm. If you install via npm, here is a single cmd to install this library

  npm install vitepress-theme-api

Other options

• yarn

  yarn add vitepress-theme-api

• pnpm

  pnpm add vitepress-theme-api

:fire: Usage

You will need to import component tags and CSS. Without the CSS import, the API Document theme will not display correctly.

Import Component from Theme

You will need to import DividePage component to divide the main content into left and right so that the API document theme can be rendered.

<script setup>import {DividePage} from 'vitepress-theme-api';</script>

Import CSS from Theme

Per Vitepress's Setup Wizard, there are three options

1. Default Theme
2. Default Theme + Customization
3. Custom Theme

Option 1: Default Theme

You can import the file within <style> of each .md file that you plan to use the imported component.

<style>@import './node_modules/vitepress-theme-api/dist/style.css';</style>

Note: Do not add scoped in <style> because the css will not work.

(See example)

Option2: Default Theme + Customization

You must import the style in the CSS file from the theme directory.

@import "../../node_modules/vitepress-theme-api/theme/style.css";

(See example)

Option 3: Custom Theme

Please follow Option 2's instruction

(See example)

Implementation of Tags

There are two tags, namely:

• <template #left> - For the left side of the main content, you can write API descriptions like query parameters or return properties.
• <template #right> - For the right side of the main content, you can add sample codes like API request and response.

<DividePage>

<template #left>

 // Add content here. Both html and markdown are supported.

</template>

<template #right>

 // Add content here. Both html and markdown are supported.

</template>
</DividePage>

Note: When writing markdown, please leave a line so that it displays a markdown instead of text like the example above.

Component Attribute

| Prop | Type | Required | Description | | --------- | -------- | -------- | ----------------------------------------------------------- | | top | number | Optional | Set vertical position of <template #right> Default is 0 |

Implementation of Styled Ordered Number List

If you would like to style ordered number list to make your document easier to read, here is a code example:

Class name is order-list-I.

1. First Item

   1. First Item

      1. First Item

{.order-list-I} // if you omit this, it will display default md style

Implementation of Styled Container of Markdown Extension

If you would like to style custom containers so that users can review your document quickly and easily, here is the selection of unicode representations

i , ⓘ , ⚠ ,❕ and ▶

Add an attribute to customize the container’s color, icon and border

::: warning {icon-type=warning} //add an icon
test
:::

::: warning {icon-type=warning-bordered} //add an icon, color and border
test
:::

Note: If you want to adjust these class, you can can change it in Import css from theme.

For the full sample .md file in accordance with the live demo, please see our example directory.

:books: License

Distributed under the MIT License. See LICENSE for more information.

Vitepress is licensed under MIT License. Click here for more information.

:pray: Acknowledgement

• Vitepress
• Img Shields