Add tabs to docs

Begin with example tabs in Local Manga page

website/package.json

@@ -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"
 	},

website/pnpm-lock.yaml

@@ -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

website/src/.vitepress/config/markdown.ts

@@ -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, {
+			md.use(tabsMarkdownPlugin),
-				name: "tab",
-			}),
 			md.use(mdi);
 	},
 };

website/src/.vitepress/theme/index.ts

@@ -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);
 	},
 };

website/src/docs/guides/local-manga.md

@@ -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>
-
+== SD Card
-#### Example <Badge type="info" text="Phone storage" /> {#example-phone-storage}
-
 <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).