Merge pull request #40 from unplugin/docs

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "references.preferredLocation": "peek"
+}

docs/.vitepress/components/HomePage.vue

@@ -0,0 +1,11 @@
+<template>
+  <div flex="~ col wrap" mt8 items-center>
+    <h2 text="center lg" mt-5 font-bold>
+      💕 Thanks to all the contributors
+    </h2>
+
+    <a mt-8 mb-15 target="_blank" href="https://github.com/unplugin/unplugin-turbo-console/graphs/contributors">
+      <img src="https://contrib.rocks/image?repo=unplugin/unplugin-turbo-console">
+    </a>
+  </div>
+</template>

docs/.vitepress/config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vitepress'
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+import { zhCN } from './zhCN'
+import { enUS } from './enUS'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  locales: {
+    'root': {
+      label: 'English',
+      lang: 'en-US',
+      ...enUS,
+    },
+    'zh-CN': {
+      label: '简体中文',
+      lang: 'zh-CN',
+      link: '/zh-CN/',
+      ...zhCN,
+    },
+  },
+  themeConfig: {
+    search: {
+      provider: 'local',
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/unplugin/unplugin-turbo-console' },
+    ],
+  },
+  markdown: {
+    codeTransformers: [
+      transformerTwoslash(),
+    ],
+    image: {
+      lazyLoading: true,
+    },
+  },
+})

docs/.vitepress/enUS.ts

@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitepress'
+
+export const enUS = defineConfig({
+  lang: 'en-US',
+  title: 'Unplugin Turbo Console',
+  description: 'Improve the Developer Experience of console',
+  themeConfig: {
+    nav: [
+      { text: 'Guide', link: '/guide/getting-started', activeMatch: '/guide' },
+      { text: 'Features', link: '/features/hightlight', activeMatch: '/features' },
+    ],
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Configurations', link: '/guide/configurations' },
+        ],
+      },
+      {
+        text: 'Features',
+        items: [
+          { text: 'Highlight Output', link: '/features/highlight' },
+          { text: 'Custom Prefix and Suffix', link: '/features/custom-prefix' },
+          { text: 'Launch Editor', link: '/features/launch-editor' },
+          { text: 'Pass Logs', link: '/features/pass-logs' },
+        ],
+      },
+      {
+        text: 'Others',
+        items: [
+          { text: 'Troubleshooting', link: '/troubleshooting' },
+        ],
+      },
+    ],
+    footer: {
+      message: 'Made with ❤️',
+      copyright:
+        'MIT License © 2023-PRESENT <a href="https://github.com/yuyinws">yuyinws</a>',
+    },
+    search: {
+      provider: 'local',
+    },
+  },
+})

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+
+import HomePage from '../components/HomePage.vue'
+
+const { isDark } = useData()
+
+function enableTransitions() {
+  return 'startViewTransition' in document
+    && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+}
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y),
+    )}px at ${x}px ${y}px)`,
+  ]
+
+  await (document as any).startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 300,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
+    },
+  )
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #home-features-after>
+      <HomePage />
+    </template>
+  </DefaultTheme.Layout>
+</template>
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+.VPSwitchAppearance {
+  width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+  transform: none !important;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -0,0 +1,17 @@
+import Theme from 'vitepress/theme'
+import './style.css'
+import 'uno.css'
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import '@shikijs/vitepress-twoslash/style.css'
+import type { EnhanceAppContext } from 'vitepress'
+// eslint-disable-next-line ts/ban-ts-comment, ts/prefer-ts-expect-error
+// @ts-ignore
+import Layout from './Layout.vue'
+
+export default {
+  ...Theme,
+  Layout,
+  enhanceApp({ app }: EnhanceAppContext) {
+    app.use(TwoslashFloatingVue)
+  },
+}

docs/.vitepress/theme/style.css

@@ -0,0 +1,55 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-brand: #0e7490;
+  --vp-c-brand-light: #0891b2;
+  --vp-c-brand-lighter: #22d3ee;
+  --vp-c-brand-lightest: #67e8f9;
+  --vp-c-brand-dark: #0e7490;
+  --vp-c-brand-darker: #164e63;
+  --vp-c-brand-dimm: rgba(145, 71, 150, 0.08);
+
+  --vp-local-search-highlight-bg: var(--vp-c-brand-light);
+  --vp-local-search-highlight-text: var(--vp-c-bg);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+  --vp-button-brand-text: #eee;
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #4FC08D 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #4FC08D 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);
+  }
+}

docs/.vitepress/zhCN.ts

@@ -0,0 +1,68 @@
+import { defineConfig } from 'vitepress'
+
+export const zhCN = defineConfig({
+  lang: 'zh-CN',
+  title: 'Unplugin Turbo Console',
+  description: '增强 Console 的开发者体验',
+  themeConfig: {
+    nav: [
+      { text: '指南', link: '/zh-CN/guide/getting-started', activeMatch: '/zh-CN/guide' },
+      { text: '特性', link: '/zh-CN/features/hightlight', activeMatch: '/zh-CN/features' },
+    ],
+    sidebar: [
+      {
+        text: '指南',
+        items: [
+          { text: '入门', link: '/zh-CN/guide/getting-started' },
+          { text: '配置', link: '/zh-CN/guide/configurations' },
+        ],
+      },
+      {
+        text: '特性',
+        items: [
+          { text: '高亮输出', link: '/zh-CN/features/highlight' },
+          { text: '自定义前后缀', link: '/zh-CN/features/custom-prefix' },
+          { text: '编辑器跳转', link: '/zh-CN/features/launch-editor' },
+          { text: '传递日志', link: '/zh-CN/features/pass-logs' },
+        ],
+      },
+      {
+        text: '其他',
+        items: [
+          { text: '常见问题', link: '/zh-CN/troubleshooting' },
+        ],
+      },
+    ],
+    search: {
+      provider: 'local',
+      options: {
+        translations: {
+          button: {
+            buttonText: '搜索文档',
+            buttonAriaLabel: '搜索文档',
+          },
+          modal: {
+            noResultsText: '没有找到结果',
+            footer: {
+              selectText: '选择',
+              navigateText: '切换',
+              closeText: '关闭',
+            },
+          },
+        },
+      },
+    },
+    footer: {
+      message: '用 ❤️ 发电',
+      copyright:
+        'MIT License © 2023-PRESENT <a href="https://github.com/yuyinws">yuyinws</a>',
+    },
+    docFooter: {
+      prev: '上一页',
+      next: '下一页',
+    },
+    outline: {
+      label: '页面导航',
+    },
+  },
+})

docs/features/custom-prefix.md

@@ -0,0 +1,13 @@
+# Custom Prefix and Suffix
+
+By configuring the `prefix` and `suffix` options, you can customize the prefix and suffix in the Console output:
+
+```js
+TurboConsole({
+  prefix: '👇👇👇👇👇',
+  suffix: '👆👆👆👆👆'
+})
+```
+![custom-prefix](/features/prefix.png)
+
+> The feature takes effect at build time.

docs/features/highlight.md

@@ -0,0 +1,26 @@
+# Highlight Output
+
+Highlight Console output based on file types (such as `.js(x)`, `.ts(x)`, `.vue`, `.svelte`, `.astro`). It includes filename, line number, variable name.
+
+![feature-highlight](/features/highlight.png)
+
+> You can disable this feature by setting `disableHighlight: true`.
+>
+> This feature will be automatically disabled on build time.
+
+## Expand path file name
+
+Consider having a project file directory as follows:
+
+```
+pages
+├── bar
+│   └── index.vue
+├── foo
+│   └── index.vue
+└── index.vue
+```
+
+Additionally, in every `index.vue`, there is a console statement. By default, the highlighted output will have the filename as `index.vue`, which can reduce the readability of the output. By configuring `extendedPathFileNames: ['index']`, the output can include the path information:
+
+![extend-name](/features/extend-name.png)