add: document by vitepress

.gitignore

@@ -38,3 +38,7 @@ next-env.d.ts
 
 # log
 app.log
+
+# doc
+doc/.vitepress/dist
+doc/.vitepress/cache

doc/.vitepress/config.mts

@@ -0,0 +1,40 @@
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: "SparkHome",
+    description: "The official documentation of SparkHome",
+    themeConfig: {
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            { text: "Home", link: "/" },
+            { text: "Examples", link: "/markdown-examples" }
+        ],
+
+        sidebar: [
+            {
+                text: "Examples",
+                items: [
+                    { text: "Markdown Examples", link: "/markdown-examples" },
+                    { text: "Runtime API Examples", link: "/api-examples" }
+                ]
+            }
+        ],
+
+        socialLinks: [{ icon: "github", link: "https://github.com/alikia2x/sparkhome" }],
+
+        logo: "/favicon.ico"
+    },
+    locales: {
+        root: {
+            label: "English",
+            lang: "en"
+        },
+        zh: {
+            label: "中文",
+            lang: "zh-CN",
+            link: "/zh/"
+        }
+    },
+    head: [['link', { rel: 'icon', href: '/favicon.ico' }]]
+});

doc/.vitepress/theme/NotFoundLayout.vue

@@ -0,0 +1,118 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import { useData } from 'vitepress'
+import { ref } from 'vue'
+const currentLanguage = ref("");
+const rootPage = ref("")
+
+const { lang, localeIndex, site } = useData()
+
+if (localeIndex.value === "root") {
+    rootPage.value = "/"
+} else {
+    if (site.value.locales[localeIndex.value].link != undefined) {
+        rootPage.value = site.value.locales[localeIndex.value].link
+    }
+    else {
+        rootPage.value = "/" + localeIndex.value + "/"
+    }
+}
+currentLanguage.value = lang.value;
+
+console.log(currentLanguage);
+
+const i18nStrings = {
+    "zh-CN": {
+        notFoundTitle: "页面未找到",
+        notFoundQuote: "抱歉，但我们无法找到对应的页面。",
+        notFoundActionLink: "回到主页",
+    },
+    "en": {
+        notFoundTitle: "PAGE NOT FOUND",
+        notFoundQuote: "Sorry, the page you are looking for does not exist.",
+        notFoundActionLink: "Go Home",
+    }
+};
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+    <Layout>
+        <template #not-found>
+            <div class="notFound">
+                <p class="NotFoundCode">404</p>
+                <h1 class="NotFoundTitle">{{ i18nStrings[currentLanguage].notFoundTitle }}</h1>
+                <div class="NotFoundDivider"></div>
+                <blockquote class="NotFoundQuote">
+                    <p>
+                        {{ i18nStrings[currentLanguage].notFoundQuote }}
+                    </p>
+                </blockquote>
+                <div class="NotFoundAction">
+                    <a class="NotFoundLink" :href="rootPage" :aria-label="i18nStrings[currentLanguage].notFoundActionLink">
+                        {{ i18nStrings[currentLanguage].notFoundActionLink }}
+                    </a>
+                </div>
+            </div>
+        </template>
+    </Layout>
+</template>
+
+
+<style>
+.NotFoundCode {
+    font-size: 4rem;
+    line-height: 4rem;
+    font-weight: 600;
+}
+
+.NotFoundTitle {
+    padding-top: 12px;
+    letter-spacing: 2px;
+    line-height: 20px;
+    font-size: 20px;
+    font-weight: 700;
+}
+
+.NotFoundDivider {
+    margin: 24px auto 18px;
+    width: 64px;
+    height: 1px;
+    background-color: var(--vp-c-divider);
+}
+
+.notFound {
+    text-align: center;
+    padding: 64px 24px 96px;
+}
+
+.NotFoundQuote {
+    margin: 0 auto;
+    max-width: 256px;
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(60, 60, 67, .78);
+}
+
+.NotFoundLink {
+    display: inline-block;
+    border: 1px solid var(--vp-c-brand-1);
+    border-radius: 16px;
+    padding: 3px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--vp-c-brand-1);
+    transition: border-color .25s, color .25s;
+}
+
+.NotFoundAction{
+    padding-top: 20px;
+}
+
+@media (min-width: 768px) {
+    .notFound {
+        padding: 96px 32px 168px;
+    }
+}
+</style>

doc/.vitepress/theme/index.ts

@@ -0,0 +1,18 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from "vue";
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import "./style.css";
+import NotFoundLayout from "./NotFoundLayout.vue";
+
+export default {
+    extends: DefaultTheme,
+    Layout() {
+        return h(DefaultTheme.Layout, null, {
+            "not-found": () => h(NotFoundLayout)
+        });
+    },
+    enhanceApp({ app, router, siteData }) {
+        // ...
+    }
+} satisfies Theme;

doc/.vitepress/theme/style.css

@@ -0,0 +1,139 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+

doc/index.md

@@ -0,0 +1,32 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "SparkHome"
+  text: "The final browser homepage."
+  tagline: Everything you want, in a magic searchbox.
+  actions:
+    - theme: brand
+      text: Get started
+      link: /intro
+    - theme: alt
+      text: Doc
+      link: /ref
+---
+
+<script setup>
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+const { isDark } = useData();
+const dark = ref(isDark);
+</script>
+
+# Why SparkHome?
+
+## Simple UI
+
+SparkHome's intuitive design creates a seamless user experience, allowing you to effortlessly access all the information and resources you need from one place. The sleek and modern interface features a simple search box that becomes your one-stop place for navigating the web, getting answers to questions, and leveling up your productivity with our powerful toolbox.
+
+<img src="./img/homepage.dark.png" v-if="isDark">
+<img src="./img/homepage.png" v-else>

doc/zh/index.md

@@ -0,0 +1,32 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "星火主页"
+  text: "你的终浏览器主页."
+  tagline: 想要的一切，尽在一个搜索框中
+  actions:
+    - theme: brand
+      text: 即刻开始
+      link: ./intro
+    - theme: alt
+      text: 文档
+      link: ./ref
+---
+
+<script setup>
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+const { isDark } = useData();
+const dark = ref(isDark);
+</script>
+
+# 我们的优势
+
+## 极简的界面
+
+SparkHome 的直观设计打造出无缝的用户体验，让你可以毫不费力地从一个地方访问到所有需要的信息和资源。其精致现代的界面设计了一个简易的搜索框，成为您一站式解决网络导航、获取问题的答案和利用我们强大的工具箱提高生产力的地方。
+
+<img src="./img/homepage.dark.png" v-if="isDark">
+<img src="./img/homepage.png" v-else>

package.json

@@ -7,7 +7,10 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest"
+    "test": "jest",
+    "docs:dev": "vitepress dev doc",
+    "docs:build": "vitepress build doc",
+    "docs:preview": "vitepress preview doc"
   },
   "dependencies": {
     "@nextui-org/react": "^2.3.6",
@@ -45,6 +48,8 @@
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vitepress": "^1.2.3",
+    "vue": "^3.4.29"
   }
 }