{"id":13449511,"url":"https://github.com/logicspark/vitepress-theme-api","last_synced_at":"2025-09-07T17:41:56.727Z","repository":{"id":183657021,"uuid":"666336957","full_name":"logicspark/vitepress-theme-api","owner":"logicspark","description":"Simple Vitepress Theme for API Documentation","archived":false,"fork":false,"pushed_at":"2023-10-11T09:05:01.000Z","size":31337,"stargazers_count":39,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T04:01:37.479Z","etag":null,"topics":["vite","vitepress","vitepress-blog","vitepress-doc","vitepress-theme","vuejs3","vuepress","vuepress-theme"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/logicspark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-14T09:05:54.000Z","updated_at":"2025-03-28T17:30:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"e7492e89-5c4d-4834-9092-4c0ed64d986a","html_url":"https://github.com/logicspark/vitepress-theme-api","commit_stats":{"total_commits":141,"total_committers":6,"mean_commits":23.5,"dds":0.3829787234042553,"last_synced_commit":"b0fae20c749f44b4aaac1f9d4fefa943c6668988"},"previous_names":["logicspark/vitepress-api-document-theme"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logicspark%2Fvitepress-theme-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logicspark%2Fvitepress-theme-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logicspark%2Fvitepress-theme-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logicspark%2Fvitepress-theme-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logicspark","download_url":"https://codeload.github.com/logicspark/vitepress-theme-api/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246880479,"owners_count":20848868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vite","vitepress","vitepress-blog","vitepress-doc","vitepress-theme","vuejs3","vuepress","vuepress-theme"],"created_at":"2024-07-31T06:00:40.834Z","updated_at":"2025-04-02T19:33:30.225Z","avatar_url":"https://github.com/logicspark.png","language":"CSS","funding_links":[],"categories":[":art: Themes"],"sub_categories":["Community Themes"],"readme":"\u003ca id=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eVitepress Theme API\u003c/h1\u003e\n\nDeveloped by [Logic Spark](https://logicspark.com) team\n\n[![npm](https://img.shields.io/npm/v/vitepress-theme-api)][package-url]\n[![VueJS](https://img.shields.io/badge/VueJS-3.0.x-%2341B883)][vue-url]\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/logicspark/awesome-social-button/blob/main/LICENSE)\n\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"#sunglasses_video-demo\"\u003eVideo Demo\u003c/a\u003e - \n  \u003ca href=\"#building_construction-built-with\"\u003eBuilt With\u003c/a\u003e - \n  \u003ca href=\"#rocket-getting-started\"\u003eGetting Started\u003c/a\u003e - \n  \u003ca href=\"#fire-usage\"\u003eUsage\u003c/a\u003e -\n  \u003ca href=\"#books-license\"\u003eLicense\u003c/a\u003e -\n  \u003ca href=\"#pray-acknowledgement\"\u003eAcknowledgement\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n## :sunglasses: Video Demo\n\nDividePage Component Demo\n\nhttps://github.com/logicspark/vitepress-api-document-theme/assets/135820109/643060a0-94d9-43a6-91f0-bcea95f74bff\n\nHere is the link to the live [demo](https://docs.logicspark.com). Have fun exploring!\n\n## :building_construction: Built With\n\n1. [![Typescript][typescript]][typescript-url]\n2. [![Vue][vue]][vue-url]\n3. [![HTML][html]][html-url]\n4. [![CSS][css]][css-url]\n5. [![Vite][vite]][vite-url]\n\n## :rocket: Getting Started\n\nLearn what is required before using Vitepress API Document theme and how to install it quickly. Let's get started!\n\n### Prerequisite\n\nThis library is created with Vite + Vue3 + TypeScript. To start using this library, please make sure to install the following external libraries first:\n\n- [Node.js](https://nodejs.org/en)\n- [Vitepress](https://vitepress.dev/)\n\n_Support Node.js 18.12.0 (LTS) and above_\n\n### Installation\n\nThere 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\n\n```sh\n  npm install vitepress-theme-api\n```\n\n#### Other options\n\n- yarn\n\n```sh\n  yarn add vitepress-theme-api\n```\n\n- pnpm\n\n```sh\n  pnpm add vitepress-theme-api\n```\n\n## :fire: Usage\n\nYou will need to import component tags and CSS. Without the CSS import, the API Document theme will not display correctly.\n\n### Import Component from Theme\n\nYou will need to import `DividePage` component to divide the main content into left and right so that the API document theme can be rendered.\n\n```js\n\u003cscript setup\u003eimport {DividePage} from 'vitepress-theme-api';\u003c/script\u003e\n```\n\n### Import CSS from Theme\n\nPer Vitepress's [Setup Wizard](https://vitepress.dev/guide/getting-started#setup-wizard), there are three options\n\n1. Default Theme\n2. Default Theme + Customization\n3. Custom Theme\n\n#### Option 1: Default Theme\n\nYou can import the file within `\u003cstyle\u003e` of each .md file that you plan to use the imported component.\n\n```js\n\u003cstyle\u003e@import './node_modules/vitepress-theme-api/dist/style.css';\u003c/style\u003e\n```\n\n_Note_: Do not add `scoped` in `\u003cstyle\u003e` because the css will not work.\n\n\u003cdiv align=\"right\"\u003e\n\n([See example](example/default-theme/index.md))\n\n\u003c/div\u003e\n\n#### Option2: Default Theme + Customization\n\nYou must import the style in the CSS file from the theme directory.\n\n```css\n@import \"../../node_modules/vitepress-theme-api/theme/style.css\";\n```\n\n\u003cdiv align=\"right\"\u003e\n\n([See example](example/default-theme-and-custom/))\n\n\u003c/div\u003e\n\n#### Option 3: Custom Theme\n\nPlease follow Option 2's instruction\n\n\u003cdiv align=\"right\"\u003e\n\n([See example](example/custom-theme/))\n\n\u003c/div\u003e\n\n### Implementation of Tags\n\nThere are two tags, namely:\n\n- `\u003ctemplate #left\u003e` - For the left side of the main content, you can write API descriptions like query parameters or return properties.\n- `\u003ctemplate #right\u003e` - For the right side of the main content, you can add sample codes like API request and response.\n\n```js\n\u003cDividePage\u003e\n\n\u003ctemplate #left\u003e\n\n // Add content here. Both html and markdown are supported.\n\n\u003c/template\u003e\n\n\u003ctemplate #right\u003e\n\n // Add content here. Both html and markdown are supported.\n\n\u003c/template\u003e\n\u003c/DividePage\u003e\n```\n\n_Note_: When writing markdown, please leave a line so that it displays a markdown instead of text like the example above.\n\n### Component Attribute\n\n| Prop      | Type     | Required | Description                                                 |\n| --------- | -------- | -------- | ----------------------------------------------------------- |\n| **`top`** | `number` | Optional | Set vertical position of `\u003ctemplate #right\u003e` Default is `0` |\n\n## Implementation of Styled Ordered Number List\n\nIf you would like to style ordered number list to make your document easier to read, here is a code example:\n\nClass name is order-list-I.\n\n```md\n1. First Item\n\n   1. First Item\n\n      1. First Item\n\n{.order-list-I} // if you omit this, it will display default md style\n```\n\n## Implementation of Styled Container of Markdown Extension\n\nIf you would like to style custom containers so that users can review your document quickly and easily, here is the selection of unicode representations\n\n\u003e i , ⓘ , ⚠ ,❕ and ▶\n\nAdd an attribute to customize the container’s color, icon and border\n\n```md\n::: warning {icon-type=warning} //add an icon\ntest\n:::\n\n::: warning {icon-type=warning-bordered} //add an icon, color and border\ntest\n:::\n```\n\n_Note_: If you want to adjust these class, you can can change it in \u003ca href=\"#import-css-from-theme\"\u003eImport css from theme\u003c/a\u003e.\n\nFor the full sample .md file in accordance with the live demo, please see our [example](example/default-theme-and-custom/index.md) directory.\n\n## :books: License\n\nDistributed under the MIT License. See [`LICENSE`](https://github.com/logicspark/vitpress-theme-api/blob/main/LICENSE) for more information.\n\nVitepress is licensed under MIT License. Click [here](https://github.com/vuejs/vitepress/blob/main/LICENSE) for more information.\n\n## :pray: Acknowledgement\n\n- [Vitepress](https://vitepress.dev/)\n- [Img Shields](https://shields.io)\n\n[Vitepress-url]: https://vitepress.dev/\n[TypeScript]: https://img.shields.io/badge/typescript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\n[typescript-url]: https://www.typescriptlang.org/\n[Html]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white\n[html-url]: https://www.w3schools.com/html/\n[Css]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white\n[css-url]: https://www.w3schools.com/css/\n[Vue]: https://img.shields.io/badge/vue.js-42B883?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=white\n[Vue-url]: https://vuejs.org/\n[Vite]: https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white\n[vite-url]: https://vitejs.dev/\n[package-url]: https://www.npmjs.com/package/vitepress-theme-api\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogicspark%2Fvitepress-theme-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogicspark%2Fvitepress-theme-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogicspark%2Fvitepress-theme-api/lists"}