first commit

2026-03-03 13:23:14 +08:00
commit 3b7c1d558a
161 changed files with 28120 additions and 0 deletions
--- a/xterminal/docs/.vitepress/config.ts
+++ b/xterminal/docs/.vitepress/config.ts
@@ -0,0 +1,123 @@
+import { defineConfig } from "vitepress";
+
+const TITLE = "XTerminal";
+const DESCRIPTION = "Build web-based command line interfaces";
+const IMAGE = "/logo.svg";
+const LINK = "https://henryhale.github.io/xterminal";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    base: "/",
+
+    // metadata
+    lang: "en-US",
+    title: TITLE,
+    description: DESCRIPTION,
+
+    head: [
+        // favicon
+        ["link", { rel: "shortcut icon", href: IMAGE }],
+
+        // open graph - facebook
+        ["meta", { property: "og:type", content: "website" }],
+        ["meta", { property: "og:url", content: LINK }],
+        ["meta", { property: "og:title", content: TITLE }],
+        ["meta", { property: "og:description", content: DESCRIPTION }],
+        ["meta", { property: "og:image", content: IMAGE }],
+
+        // twitter
+        ["meta", { property: "twitter:card", content: "summary_large_image" }],
+        ["meta", { property: "twitter:url", content: LINK }],
+        ["meta", { property: "twitter:title", content: TITLE }],
+        ["meta", { property: "twitter:description", content: DESCRIPTION }],
+        ["meta", { property: "twitter:image", content: IMAGE }]
+    ],
+
+    // theme
+    themeConfig: {
+        // https://vitepress.dev/reference/default-theme-config
+
+        siteTitle: TITLE,
+        logo: IMAGE,
+
+        search: {
+            provider: "local"
+        },
+
+        nav: [
+            { text: "Home", link: "/" },
+            { text: "Guide", link: "/guide/" },
+            { text: "Demo", link: "/demo/" },
+            { text: "Showcase", link: "/showcase/" },
+            {
+                text: "About",
+                items: [
+                    { text: "Team", link: "/about/team" },
+                    { text: "History", link: "/about/history" },
+                    { text: "Code of Conduct", link: "/about/coc" }
+                ]
+            }
+        ],
+
+        sidebar: [
+            {
+                text: "Guide",
+                items: [{ text: "Introduction", link: "/guide/" }]
+            },
+            {
+                text: "Getting Started",
+                items: [
+                    { text: "Installation", link: "/guide/installation" },
+                    { text: "Quick Start", link: "/guide/quick-start" }
+                ]
+            },
+            {
+                text: "Essentials",
+                collapsed: false,
+                items: [
+                    { text: "Initialization", link: "/guide/initialization" },
+                    { text: "Output", link: "/guide/output" },
+                    { text: "Events", link: "/guide/events" },
+                    { text: "Input", link: "/guide/prompt" },
+                    { text: "History", link: "/guide/history" },
+                    { text: "Key Bindings", link: "/guide/keybindings" }
+                ]
+            },
+            {
+                text: "Advanced",
+                collapsed: true,
+                items: [
+                    { text: "AutoComplete", link: "/guide/autocomplete" },
+                    { text: "Batch Mode", link: "/guide/batchmode" },
+                    { text: "Disposal", link: "/guide/disposal" },
+                    { text: "Theme", link: "/guide/theme" }
+                ]
+            },
+            {
+                text: "API Reference",
+                link: "/api/",
+                items: []
+            }
+        ],
+
+        socialLinks: [
+            { icon: "github", link: "https://github.com/henryhale/xterminal" }
+        ],
+
+        editLink: {
+            text: "Edit this page on GitHub",
+            pattern:
+                "https://github.com/henryhale/xterminal/edit/master/docs/:path"
+        },
+
+        footer: {
+            message:
+                'Released under the <a href="https://github.com/henryhale/xterminal/blob/master/LICENSE.txt">MIT License</a>.',
+            copyright: `Copyright © 2023-present, <a href="https://github.com/henryhale">Henry Hale</a>.`
+        },
+
+        outline: {
+            level: [2, 3]
+        }
+    }
+});
--- a/xterminal/docs/.vitepress/theme/assets/styles.css
+++ b/xterminal/docs/.vitepress/theme/assets/styles.css
@@ -0,0 +1,24 @@
+:root {
+    --vp-c-brand-1: var(--vp-c-green-1);
+    --vp-c-brand-2: var(--vp-c-green-2);
+    --vp-button-brand-bg: var(--vp-c-brand-2);
+    --vp-home-hero-image-background-image: linear-gradient(180deg, var(--vp-home-hero-name-color) 50%,#272b33 50%);
+    --vp-home-hero-image-filter: blur(40px);
+}
+
+.VPImage {
+    border-radius: 5px;
+}
+
+.VPImage.image-src {
+    width: min(25vw, 200px);
+    height: min(25vw, 200px);
+}
+
+.image-src {
+    border-radius: 20px;
+}
+
+.dark .vp-doc .custom-block a {
+    transition: color 0.25s;
+}
--- a/xterminal/docs/.vitepress/theme/components/BrowserPreview.vue
+++ b/xterminal/docs/.vitepress/theme/components/BrowserPreview.vue
@@ -0,0 +1,95 @@
+<script setup>
+const props = defineProps({
+    hidelabel: {
+        type: Boolean,
+        default: () => false
+    }
+})
+</script>
+
+<template>
+    <div>
+        <div v-if="!props.hidelabel" class="bp-preview">
+            <b>Result: </b>
+        </div>
+        <div class="bp-container">
+            <header class="bp-header">
+                <div class="bp-dots">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <div class="bp-title">My First Terminal</div>
+            </header>
+            <main class="bp-main">
+                <slot></slot>
+            </main>
+        </div>
+    </div>
+</template>
+
+<style>
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+}
+
+.bp-preview {
+    margin-bottom: 1rem;
+}
+
+.bp-container {
+    display: flex;
+    flex-direction: column;
+    border-radius: 6px;
+    background-color: var(--vp-code-block-bg);
+    color: var(--vp-c-text-1);
+    overflow: hidden;
+    border: 1px solid var(--vp-c-divider);
+}
+
+.bp-header {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-bottom: 1px solid var(--vp-c-divider);
+}
+.bp-header > .bp-title {
+    flex-grow: 1;
+    text-align: right;
+    font-size: min(15px, calc(1.5vw + 7px));
+}
+.bp-header .bp-dots > * {
+    display: inline-block;
+    width: min(0.65rem, calc(2.25vw));
+    height: min(0.65rem, calc(2.25vw));
+    border-radius: 50%;
+    margin-right: min(0.25rem, calc(1vw));
+}
+.bp-header .bp-dots > *:first-child {
+    background-color: rgba(255, 91, 82, 1);;
+}
+.bp-header .bp-dots > *:nth-child(2) {
+    background-color: rgba(83, 195, 43, 1);
+}
+.bp-header .bp-dots > *:last-child {
+    background-color: rgba(230, 192, 41, 1);
+}
+
+.bp-main {
+    display: flex;
+    flex-direction: column;
+    max-height: 400px;
+    overflow-y: hidden;
+    padding: 0 min(15px, calc(1.5vw + 5px));
+    background-color: rgba(225,225,225,0.05);
+}
+
+html.dark .bp-main {
+    background-color: rgb(41, 40, 40);
+}
+html.dark .bp-container {
+    color: rgba(239, 239, 239, 0.85);
+}
+</style>
--- a/xterminal/docs/.vitepress/theme/components/ProjectCards.vue
+++ b/xterminal/docs/.vitepress/theme/components/ProjectCards.vue
@@ -0,0 +1,73 @@
+<script setup>
+const props = defineProps(["projects"]);
+</script>
+
+<template>
+    <div class="grid">
+        <div class="intro">
+            <h1><b>Showcase</b></h1>
+            <p>Below is a list of projects that are using XTerminal.</p>
+            <p>
+                To add yours, edit this
+                <a
+                    href="https://github.com/henryhale/xterminal/blob/master/docs/showcase/index.md"
+                    >file</a
+                >.
+            </p>
+        </div>
+        <div v-for="(p, i) in projects" :key="i" class="row">
+            <div class="grow">
+                <div class="row">
+                    <img :src="p.logo" :alt="p.name" width="45" />
+                    <span>
+                        {{ p.name }}<br />{{ p.desc }}<br />
+                        <a :href="p?.author.link">@{{ p?.author.username }}</a>
+                    </span>
+                </div>
+            </div>
+            <div>
+                <a :href="p.link">Visit &RightArrow;</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.grid {
+    display: flex;
+    flex-direction: column;
+    padding: 4rem 1rem;
+}
+
+.grid > * {
+    margin-bottom: 2rem;
+    width: 100%;
+    max-width: 720px;
+    margin: 0 auto;
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    padding: 1rem 0;
+}
+
+.row > *:not(:last-child) {
+    margin-right: 1rem;
+}
+
+.grow {
+    flex-grow: 1;
+}
+
+a {
+    color: var(--vp-c-brand);
+}
+
+.intro h1 {
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    margin: 1rem 0;
+}
+</style>
--- a/xterminal/docs/.vitepress/theme/index.ts
+++ b/xterminal/docs/.vitepress/theme/index.ts
@@ -0,0 +1,16 @@
+import DefaultTheme from "vitepress/theme";
+
+// @ts-ignore
+import BrowserPreview from "./components/BrowserPreview.vue";
+// @ts-ignore
+import ProjectCards from "./components/ProjectCards.vue";
+
+import "./assets/styles.css";
+
+export default {
+    extends: DefaultTheme,
+    enhanceApp(ctx) {
+        ctx.app.component('BrowserPreview', BrowserPreview);
+        ctx.app.component('ProjectCards', ProjectCards);
+    }
+};