Add tabs to docs

Begin with example tabs in Local Manga page
This commit is contained in:
Soitora 2023-08-18 16:03:09 +02:00
parent c7003d46e0
commit 29cb6ad739
No known key found for this signature in database
GPG Key ID: A6D711EB4F2CCD97
5 changed files with 24 additions and 8 deletions

View File

@ -57,6 +57,7 @@
"stylus": "^0.59.0",
"vite-plugin-eslint": "^1.8.1",
"vitepress": "^1.0.0-rc.4",
"vitepress-plugin-tabs": "^0.3.0",
"vue": "^3.3.4",
"vue-eslint-parser": "^9.3.1"
},

13
website/pnpm-lock.yaml generated
View File

@ -94,6 +94,9 @@ devDependencies:
vitepress:
specifier: ^1.0.0-rc.4
version: 1.0.0-rc.4(@algolia/client-search@4.19.1)(axios@1.4.0)(search-insights@2.7.0)(stylus@0.59.0)
vitepress-plugin-tabs:
specifier: ^0.3.0
version: 0.3.0(vitepress@1.0.0-rc.4)(vue@3.3.4)
vue:
specifier: ^3.3.4
version: 3.3.4
@ -4114,6 +4117,16 @@ packages:
engines: {node: ^14.13.1 || ^16.7.0 || >=18}
dev: false
/vitepress-plugin-tabs@0.3.0(vitepress@1.0.0-rc.4)(vue@3.3.4):
resolution: {integrity: sha512-3dKsBuP6PDzcFHgUtNCwwCs3bYoZduj7AcQkT9JfAKTRAKPCNmjiNInPT3IZ7AihL0SJNoQ3liz/e97z8oo+XA==}
peerDependencies:
vitepress: ^1.0.0-beta.2
vue: ^3.3.4
dependencies:
vitepress: 1.0.0-rc.4(@algolia/client-search@4.19.1)(axios@1.4.0)(search-insights@2.7.0)(stylus@0.59.0)
vue: 3.3.4
dev: true
/vitepress@1.0.0-rc.4(@algolia/client-search@4.19.1)(axios@1.4.0)(search-insights@2.7.0)(stylus@0.59.0):
resolution: {integrity: sha512-JCQ89Bm6ECUTnyzyas3JENo00UDJeK8q1SUQyJYou+4Yz5BKEc/F3O21cu++DnUT2zXc0kvQ2Aj4BZCc/nioXQ==}
hasBin: true

View File

@ -6,7 +6,7 @@ import { imgLazyload } from "@mdit/plugin-img-lazyload";
import { imgMark } from "@mdit/plugin-img-mark";
import { imgSize } from "@mdit/plugin-img-size";
import { include } from "@mdit/plugin-include";
import { tab } from "@mdit/plugin-tab";
import { tabsMarkdownPlugin } from "vitepress-plugin-tabs";
import mdi from "markdown-it-mdi";
const markdown: MarkdownOptions = {
@ -19,9 +19,7 @@ const markdown: MarkdownOptions = {
md.use(include, {
currentPath: (env) => env.filePath,
}),
md.use(tab, {
name: "tab",
}),
md.use(tabsMarkdownPlugin),
md.use(mdi);
},
};

View File

@ -7,6 +7,8 @@ import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/dark/css-vars.css";
import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client";
export default {
extends: Theme,
Layout: () => {
@ -16,5 +18,6 @@ export default {
},
enhanceApp({ app, router, siteData }) {
app.use(ElementPlus);
enhanceAppWithTabs(app);
},
};

View File

@ -33,8 +33,10 @@ Images will then go into the chapter folder.
See below for more information on archive files.
You can refer to the following example:
#### Example <Badge type="info" text="SD Card" /> {#example-sd-card}
#### Example
:::tabs
== Device Storage
<div class="tree">
<ul>
<img src="/img/folder.svg" class="tree-icon icon-folder">
@ -75,9 +77,7 @@ You can refer to the following example:
</li>
</ul>
</div>
#### Example <Badge type="info" text="Phone storage" /> {#example-phone-storage}
== SD Card
<div class="tree">
<ul>
<img src="/img/folder.svg" class="tree-icon icon-folder">
@ -118,6 +118,7 @@ You can refer to the following example:
</li>
</ul>
</div>
:::
Tachiyomi will see four chapters in a single manga.
The path to the folder with images must contain both the manga title and the chapter name (as seen above).