linhe0x0 / vuepress-theme-api

📦📝🎨 A api-friendly theme for VuePress.

vuepress-theme-api

📦 📝 🎨 A api-friendly theme for VuePress. Inspired by zeit.

Live demo

Built With

• Node.js
• VuePress

Prerequisites

There are some global dependencies you need to set up.

• Node.js
• VuePress

Getting Started

Installing

# Install VuePress
yarn add vuepress # OR npm install vuepress

# Install theme
yarn add vuepress-theme-api # OR npm install vuepress-theme-api

Configuration

Create VuePress config file .vuepress/config.js and provide a theme option.

// .vuepress/config.js
module.exports = {
  title: 'Hello, World.',
  description: '📦 🎨 A api-friendly theme for VuePress.',
  theme: 'api',
}

As Easy as 1, 2, 3

# Create a markdown file and write something
echo '# Hello, World.' > Hello.md

# Start writing
vuepress dev .

# Build to static files
vuepress build .

How to use?

Go to docs to get more details.

Starter kit

A out-of-the-box starter kit for RESTful API document is here.

---

sqrtthree.com  ·  GitHub @sqrthree  ·  Twitter @sqrtthree

vuepress-theme-api's Issues

will support plantuml?

if it can use markdown-it-plantuml to draw the flow , mindmap would be very nice!

Thank you

Add English translation

Your theme is really nice.
I highly encourage you to finish English part of the docs.

Build in error with lastUpdated

In my project, I have a docs/fr/authentication.md page which is in error when I run the npm run build command.

The file has the same content as the example https://github.com/sqrthree/vuepress-theme-api-starter-kit/blob/master/docs/2-endpoints/authentication.md.

wait Rendering static HTML...
[Vue warn]: Error in render: "TypeError: Cannot read property 'lastUpdated' of undefined"

found in

---> <Page>
       <Anonymous>
         <GlobalLayout>
           <Root>
error Error rendering /fr/authentication.html: false
undefined
TypeError: Cannot read property 'lastUpdated' of undefined
    at 2.server-bundle.js:91:18
    at Array.forEach (<anonymous>)
    at exports.modules.397.exports.getDefaultLocales (Users/{user}/Serveur/oak-dev/node_modules/vuepress-theme-api/helpers/locales.js:26:18)
    at Proxy.lastUpdatedText (node_modules/vuepress-theme-api/layouts/Page.vue:79:0)
    at Proxy.computedGetter (/Users/{user}/Serveur/oak-dev/node_modules/vue/dist/vue.runtime.common.dev.js:4846:15)
    at Proxy.render (Users/{user}/Serveur/oak-dev/node_modules/vuepress-theme-api/layouts/Page.vue?bc7c:1:164)
    at VueComponent.Vue._render (/Users/{user}/Serveur/oak-dev/node_modules/vue/dist/vue.runtime.common.dev.js:3559:22)
    at resolve (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:8444:27)
    at waitForServerPrefetch (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:8316:3)
    at renderComponentInner (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:8455:3)
    at renderComponent (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:8412:5)
    at RenderContext.renderNode (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:8323:5)
    at RenderContext.next (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:2611:23)
    at cachedWrite (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:2464:9)
    at renderStringNode$1 (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:8540:5)
    at RenderContext.renderNode (/Users/{user}/Serveur/oak-dev/node_modules/vue-server-renderer/build.dev.js:8321:5)

If I do an npm run dev, the file transpiles correctly.

I tried setting lastUpdated to false in config.js, but it doesn't change anything.

Navbar bug with Spanish tildes

Hi there, I am working with this template but I am building my page in Spanish, so I need to use tildes, for example, introducción, guía, etc. But there is an error in the navbar, when I put these words, the letter next to a tilde changes to uppercase, like this:

As you can see here, this only happens in the navbar (see the red markers and the blue markers).

I wish you can help me with this.

Tabs component

Hey,

is there a built-in tab component that I can use currently in this theme?
I didn't see anything about that in the docs so I just used vue-tabs-component but I had to override the styles.

Thanks

Would you please post a new release?

6bb6438

this commit is not release, I'm having this BUG happening.

thx.

Compatibility with vuepress-next

I was wondering whether there are any plans to make this theme compatible with the upcoming VuePress v2.0 vuepress-next?

How one would go about beginning to ensure compatibility? I'd be happy to contribut, but I'm fairly new to VuePress ecosystem, so would love a pointer or two th get going.

Currently, I get the following output when trying to boot a simple project running on vuepress-next and vuepress-theme-api.

yarn run v1.22.15
$ vuepress dev docs
Error: Cannot find module '@vuepress/shared-utils'
Require stack:
- /vuepress-docs/node_modules/@vuepress/plugin-active-header-links/index.js
- /vuepress-docs/node_modules/@vuepress/core/lib/app/resolvePluginModule.js
- /vuepress-docs/node_modules/@vuepress/core/lib/app/resolvePlugin.js
- /vuepress-docs/node_modules/@vuepress/core/lib/app/appUse.js
- /vuepress-docs/node_modules/@vuepress/core/lib/app/index.js
- /vuepress-docs/node_modules/@vuepress/core/lib/index.js
- /vuepress-docs/node_modules/@vuepress/cli/lib/commands/build/createBuild.js
- /vuepress-docs/node_modules/@vuepress/cli/lib/commands/build/index.js
- /vuepress-docs/node_modules/@vuepress/cli/lib/commands/index.js
- /vuepress-docs/node_modules/@vuepress/cli/lib/index.js
- /vuepress-docs/node_modules/vuepress-vite/bin/vuepress.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/mmorek/Projects/vuepress-docs/node_modules/@vuepress/plugin-active-header-links/index.js:1:18)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
error Command failed with exit code 1.

Installing required dependencies clearly doesn't solve the problem, so I deem it needs to be adapted to become compatible with vuepress-next theme api.

兄弟，咋有两个滚动条

Search

Hi,

I would like to know how to enable search in this theme. Thanks!

Cannot resolve theme: api with vuepress 1.0.3

There seems to be some issues with the new vuepress version, at least i can't use the starter kit.
Can anyone provide me in a direction what is going wrong?

Error: Cannot resolve theme: api.
    at resolveTheme (/Users/linusboehm/.config/yarn/global/node_modules/@vuepress/core/lib/node/loadTheme.js:109:13)
    at loadTheme (/Users/linusboehm/.config/yarn/global/node_modules/@vuepress/core/lib/node/loadTheme.js:35:17)
    at App.process (/Users/linusboehm/.config/yarn/global/node_modules/@vuepress/core/lib/node/App.js:100:21)
    at dev (/Users/linusboehm/.config/yarn/global/node_modules/@vuepress/core/lib/index.js:14:13)
    at args (/Users/linusboehm/.config/yarn/global/node_modules/vuepress/lib/util.js:35:12)
    at CAC.cli.command.option.option.option.option.option.option.option.option.option.action (/Users/linusboehm/.config/yarn/global/node_modules/vuepress/lib/registerCoreCommands.js:38:23)
    at CAC.runMatchedCommand (/Users/linusboehm/.config/yarn/global/node_modules/cac/dist/index.js:700:38)
    at CAC.parse (/Users/linusboehm/.config/yarn/global/node_modules/cac/dist/index.js:620:18)
    at CLI (/Users/linusboehm/.config/yarn/global/node_modules/vuepress/lib/util.js:23:7)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I tried both local and global install of vuepress & theme

Unexpected title format

The regexp used at https://github.com/sqrthree/vuepress-theme-api/blob/99fbb2c464be321f2d2138c71f8f9412fd153808/helpers/title.js#L2 does not take accented letters into account.

Example: If you use the French word Schéma, it will result in SchéMa which is weird.

Would it be possible to let the user override this function?

Thanks for the good work by the way 👏

Send Request Sidepanel

Hi! Great theme. The README makes it look like you can utilize a sidepanel to send requests. I didn't see any configuration for that in your docs. Is this an actual feature? If so, how is it enabled?

请问有做搜索框的打算吗

API 文档方面非常好用和漂亮，不过我在使用的时候发现缺少了 NavBar，我比较需要 LOGO、搜索框（支持 algolia）和导航菜单
请问有做这个的打算吗？😊

Will there be support for mobile devices?

It seems that support for mobile devices isn't good...

My implantation: https://wnr.scris.top/guide/1-basic-usage.html

Thanks.