docs: custom component support

www/.vuepress/components/ManualSearch.vue

@@ -0,0 +1,9 @@
+<template>
+	<h3>Hello from ManualSearch</h3>
+</template>
+
+<script lang="ts">
+export default {}
+</script>
+
+<style></style>

www/.vuepress/config.ts

@@ -1,14 +1,21 @@
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineUserConfig } from "vuepress/cli";
 import { defaultTheme } from "@vuepress/theme-default";
 import { viteBundler } from "@vuepress/bundler-vite";
 import { seoPlugin } from "@vuepress/plugin-seo";
 import { sitemapPlugin } from "@vuepress/plugin-sitemap";
+import { registerComponentsPlugin } from "@vuepress/plugin-register-components";
 import "dotenv/config";
 import rootPkgJson from "../../package.json";
 import { navbarEn, sidebarEn } from "./configs/index.js";
 
 const verMajor = Number(rootPkgJson.version.split(".")![0]);
 
+const customComponents = [
+  "ManualSearch",
+];
+
 export default defineUserConfig({
   lang: "en-US",
   base: process.env.HOST_HOMEPAGE === "true" ? `/v${verMajor}/docs/` : "/",
@@ -28,5 +35,11 @@ export default defineUserConfig({
     sitemapPlugin({
       hostname: "https://api.sv443.net",
     }),
-  ]
+    registerComponentsPlugin({
+      components: customComponents.reduce((a, c) => {
+        a[c] = join(dirname(fileURLToPath(import.meta.url)), `./components/${c}.vue`);
+        return a;
+      }, {}),
+    }),
+  ],
 });

www/.vuepress/configs/navbar/en.ts

@@ -11,6 +11,10 @@ export const navbarEn: NavbarOptions = [
       },
     ],
   },
+  {
+    text: "Try It",
+    link: "/docs/manual-search.md",
+  },
   {
     text: "GitHub",
     link: "https://github.com/Sv443/geniURL",

www/.vuepress/configs/sidebar/en.ts

@@ -4,9 +4,7 @@ export const sidebarEn: SidebarOptions = {
   "/docs/": [
     {
       text: "Getting started",
-      children: [
-        "/docs/README.md",
-      ],
+      link: "/docs/README.md",
     },
     {
       text: "Routes",
@@ -17,6 +15,10 @@ export const sidebarEn: SidebarOptions = {
         "/docs/routes/album.md",
       ],
     },
+    {
+      text: "Try It",
+      link: "/docs/manual-search.md",
+    },
   ],
   /*'/advanced/': [
     {

www/README.md

@@ -1,16 +1,14 @@
 ---
 home: true
 title: Home
-heroImage: https://vuejs.press/images/hero.png
+# heroImage: https://vuejs.press/images/hero.png
 actions:
   - text: Documentation
     link: /docs/
     type: primary
-
-  - text: Try it
-    link: /manual-search.html
+  - text: Try It
+    link: /docs/manual-search.html
     type: secondary
-
 features:
   - title: Free and easy to use
     details: The API is free to use and doesn't require authentication. You can use it for any purpose, even commercially. Note that rate limits apply.
@@ -18,6 +16,5 @@ features:
     details: geniURL can convert the original JSON data to XML if that's easier to use in your environment.
   - title: Open source
     details: The source code for geniURL is available on GitHub. You can use it as a reference or contribute to the project.
-
 footer: "MIT License | Copyright © 2024 Sv443"
 ---

www/docs/manual-search.md

@@ -0,0 +1,7 @@
+---
+lang: en-US
+title: Manual Search
+description: Try out geniURL by manually searching for lyrics metadata
+---
+
+<ManualSearch />

www/get-started.md

@@ -1,46 +0,0 @@
-# Get Started
-
-This is a normal page, which contains VuePress basics.
-
-## Pages
-
-You can add markdown files in your vuepress directory, every markdown file will be converted to a page in your site.
-
-See [routing][] for more details.
-
-## Content
-
-Every markdown file [will be rendered to HTML, then converted to a Vue SFC][content].
-
-VuePress support basic markdown syntax and [some extensions][synatex-extensions], you can also [use Vue features][vue-feature] in it.
-
-## Configuration
-
-VuePress use a `.vuepress/config.js`(or .ts) file as [site configuration][config], you can use it to config your site.
-
-For [client side configuration][client-config], you can create `.vuepress/client.js`(or .ts).
-
-Meanwhile, you can also add configuration per page with [frontmatter][].
-
-## Layouts and customization
-
-Here are common configuration controlling layout of `@vuepress/theme-default`:
-
-- [navbar][]
-- [sidebar][]
-
-Check [default theme docs][default-theme] for full reference.
-
-You can [add extra style][style] with `.vuepress/styles/index.scss` file.
-
-[routing]: https://vuejs.press/guide/page.html#routing
-[content]: https://vuejs.press/guide/page.html#content
-[synatex-extensions]: https://vuejs.press/guide/markdown.html#syntax-extensions
-[vue-feature]: https://vuejs.press/guide/markdown.html#using-vue-in-markdown
-[config]: https://vuejs.press/guide/configuration.html#client-config-file
-[client-config]: https://vuejs.press/guide/configuration.html#client-config-file
-[frontmatter]: https://vuejs.press/guide/page.html#frontmatter
-[navbar]: https://vuejs.press/reference/default-theme/config.html#navbar
-[sidebar]: https://vuejs.press/reference/default-theme/config.html#sidebar
-[default-theme]: https://vuejs.press/reference/default-theme/
-[style]: https://vuejs.press/reference/default-theme/styles.html#style-file

www/package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "devDependencies": {
         "@vuepress/bundler-vite": "^2.0.0-rc.7",
+        "@vuepress/plugin-register-components": "^2.0.0-rc.54",
         "@vuepress/theme-default": "^2.0.0-rc.11",
         "dotenv": "^16.4.7",
         "sass": "^1.81.0",
@@ -1888,6 +1889,57 @@
         "vuepress": "2.0.0-rc.18"
       }
     },
+    "node_modules/@vuepress/plugin-register-components": {
+      "version": "2.0.0-rc.54",
+      "resolved": "https://registry.npmjs.org/@vuepress/plugin-register-components/-/plugin-register-components-2.0.0-rc.54.tgz",
+      "integrity": "sha512-3EXVijNTZv8D33X1zKfP05CYSkkwYhzh+fsVlUMyScot2qUGGxcK1eFktjfueJmYuZpZmSXL82mVWtF2TkHE9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.6.0"
+      },
+      "peerDependencies": {
+        "vuepress": "2.0.0-rc.18"
+      }
+    },
+    "node_modules/@vuepress/plugin-register-components/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/@vuepress/plugin-register-components/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/@vuepress/plugin-seo": {
       "version": "2.0.0-rc.65",
       "resolved": "https://registry.npmjs.org/@vuepress/plugin-seo/-/plugin-seo-2.0.0-rc.65.tgz",

www/package.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@vuepress/bundler-vite": "^2.0.0-rc.7",
+    "@vuepress/plugin-register-components": "^2.0.0-rc.54",
     "@vuepress/theme-default": "^2.0.0-rc.11",
     "dotenv": "^16.4.7",
     "sass": "^1.81.0",