Skip to content

Commit

Permalink
feat: add flexsearch
Browse files Browse the repository at this point in the history
  • Loading branch information
Deuscx committed Sep 14, 2023
1 parent 4acbda5 commit 3a4bebc
Show file tree
Hide file tree
Showing 11 changed files with 649 additions and 252 deletions.
15 changes: 14 additions & 1 deletion docs/.vuepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,20 @@ import SearchPlugin from '../../dist/node/index'
export default defineUserConfig({
lang: 'zh-CN',
title: '你好, VuePress !',
description: '这是我的第一个 VuePress 站点',
description: '这是我的第一个 VuePress 站点',
// site-level locales config
locales: {
'/': {
lang: 'en-US',
title: 'VuePress',
description: 'Vue-powered Static Site Generator',
},
'/zh/': {
lang: 'zh-CN',
title: 'VuePress',
description: 'Vue 驱动的静态网站生成器',
},
},
plugins: [
SearchPlugin()
]
Expand Down
28 changes: 28 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
home: true
title: Home
actions:
- text: Get Started
link: /guide/getting-started.html
type: primary
- text: Introduction
link: /guide/
type: secondary
features:
- title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
- title: Themes
details: Providing a default theme out of the box. You can also choose a community theme or create your own one.
- title: Plugins
details: Flexible plugin API, allowing plugins to provide lots of plug-and-play features for your site.
- title: Bundlers
details: Default bundler is Vite, while Webpack is also supported. Choose the one you like!
footer: MIT Licensed | Copyright © 2018-present Evan You
---

### As Easy as 1, 2, 3

40 changes: 40 additions & 0 deletions docs/guide/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@

# Introduction

VuePress is a markdown-centered static site generator. You can write your content (documentations, blogs, etc.) in [Markdown](https://en.wikipedia.org/wiki/Markdown), then VuePress will help you to generate a static site to host them.

The purpose of creating VuePress was to support the documentation of Vue.js and its sub-projects, but now it has been helping a large amount of users to build their documentation, blogs, and other static sites.

## How It Works

A VuePress site is in fact a single-page application (SPA) powered by [Vue](https://vuejs.org/) and [Vue Router](https://router.vuejs.org).

Routes are generated according to the relative path of your markdown files. Each Markdown file is compiled into HTML with [markdown-it](https://github.com/markdown-it/markdown-it) and then processed as the template of a Vue component. This allows you to directly use Vue inside your Markdown files and is great when you need to embed dynamic content.

During development, we start a normal dev-server, and serve the VuePress site as a normal SPA. If you’ve used Vue before, you will notice the familiar development experience when you are writing and developing with VuePress.

During build, we create a server-rendered version of the VuePress site and render the corresponding HTML by virtually visiting each route. This approach is inspired by [Nuxt](https://nuxtjs.org/)'s `nuxt generate` command and other projects like [Gatsby](https://www.gatsbyjs.org/).

## Why Not ...?

### Nuxt

Nuxt is an outstanding Vue SSR framework, and it is capable of doing what VuePress does. But Nuxt is designed for building applications, while VuePress is more lightweight and focused on content-centric static sites.

### VitePress

VitePress is the little brother of VuePress. It's also created and maintained by our Vue.js team. It's even more lightweight and faster than VuePress. However, as a tradeoff, it's more opinionated and less configurable. For example, it does not support plugins. But VitePress is powerful enough to make your content online if you don't need advanced customizations.

It might not be an appropriate comparison, but you can take VuePress and VitePress as Laravel and Lumen.

### Docsify / Docute

Both are great projects and also Vue-powered. Except they are both fully runtime-driven and therefore not SEO-friendly. If you don’t care for SEO and don’t want to mess with installing dependencies, these are still great choices.

### Hexo

Hexo has been serving the Vue 2.x docs well. The biggest problem is that its theming system is static and string-based - we want to take advantage of Vue for both the layout and the interactivity. Also, Hexo’s Markdown rendering isn’t the most flexible to configure.

### GitBook

We’ve been using GitBook for most of our sub project docs. The primary problem with GitBook is that its development reload performance is intolerable with a large amount of files. The default theme also has a pretty limiting navigation structure, and the theming system is, again, not Vue based. The team behind GitBook is also more focused on turning it into a commercial product rather than an open-source tool.
39 changes: 39 additions & 0 deletions docs/zh/guide/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# 介绍

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 [Markdown](https://zh.wikipedia.org/wiki/Markdown) 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。

VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

## 它是如何工作的?

一个 VuePress 站点本质上是一个由 [Vue](https://vuejs.org/)[Vue Router](https://router.vuejs.org) 驱动的单页面应用 (SPA)。

路由会根据你的 Markdown 文件的相对路径来自动生成。每个 Markdown 文件都通过 [markdown-it](https://github.com/markdown-it/markdown-it) 编译为 HTML ,然后将其作为 Vue 组件的模板。因此,你可以在 Markdown 文件中直接使用 Vue 语法,便于你嵌入一些动态内容。

在开发过程中,我们启动一个常规的开发服务器 (dev-server) ,并将 VuePress 站点作为一个常规的 SPA。如果你以前使用过 Vue 的话,你在使用时会感受到非常熟悉的开发体验。

在构建过程中,我们会为 VuePress 站点创建一个服务端渲染 (SSR) 的版本,然后通过虚拟访问每一条路径来渲染对应的 HTML 。这种做法的灵感来源于 [Nuxt](https://nuxtjs.org/)`nuxt generate` 命令,以及其他的一些项目,比如 [Gatsby](https://www.gatsbyjs.org/)

## 为什么不是 ...?

### Nuxt

Nuxt 是一套出色的 Vue SSR 框架, VuePress 能做的事情,Nuxt 实际上也同样能够胜任。但 Nuxt 是为构建应用程序而生的,而 VuePress 则更为轻量化并且专注在以内容为中心的静态网站上。

### VitePress

VitePress 是 VuePress 的孪生兄弟,它同样由 Vue.js 团队创建和维护。 VitePress 甚至比 VuePress 要更轻更快,但它在灵活性和可配置性上作出了一些让步,比如它不支持插件系统。当然,如果你没有进阶的定制化需求, VitePress 已经足够支持你将你的内容部署到线上。

这个比喻可能不是很恰当,但是你可以把 VuePress 和 VitePress 的关系看作 Laravel 和 Lumen 。

### Docsify / Docute

这两个项目同样都是基于 Vue,然而它们都是完全的运行时驱动,因此对 SEO 不够友好。如果你并不关注 SEO,同时也不想安装大量依赖,它们仍然是非常好的选择!

### Hexo

Hexo 一直驱动着 Vue 2.x 的文档。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串,而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互。同时,Hexo 在配置 Markdown 渲染方面的灵活性也不是最佳的。

### GitBook

过去我们的子项目文档一直都在使用 GitBook 。 GitBook 最大的问题在于当文件很多时,每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性,并且,主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。
18 changes: 11 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"dist"
],
"scripts": {
"dev": "nodemon --watch src --exec npm run build -e ts,tsx,vue",
"clean": "rimraf dist",
"build": "npm run clean && tsc && npm run copy",
"copy": "copyfiles -u 1 \"src/**/*.vue\" dist",
Expand All @@ -35,21 +36,29 @@
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"dependencies": {
"@vuepress/utils": "2.0.0-beta.67",
"@vueuse/core": "^10.4.1",
"chokidar": "^3.5.3",
"flexsearch": "0.7.21"
},
"devDependencies": {
"@antfu/eslint-config": "^0.41.2",
"@vuepress/client": "2.0.0-beta.66",
"@types/flexsearch": "^0.7.3",
"@vuepress/client": "2.0.0-beta.67",
"bumpp": "^9.2.0",
"copyfiles": "^2.4.1",
"cpx": "^1.5.0",
"eslint": "^8.49.0",
"lint-staged": "^14.0.1",
"nodemon": "^3.0.1",
"rimraf": "^5.0.1",
"tsup": "^7.2.0",
"tsx": "^3.12.9",
"typescript": "^5.2.2",
"vitest": "^0.34.4",
"vue": "^3.3.4",
"vuepress": "2.0.0-beta.66"
"vuepress": "2.0.0-beta.67"
},
"simple-git-hooks": {
"pre-commit": "npx lint-staged"
Expand All @@ -58,10 +67,5 @@
"*.{js,ts,tsx,vue,md}": [
"eslint --fix"
]
},
"dependencies": {
"@vuepress/utils": "2.0.0-beta.67",
"chokidar": "^3.5.3",
"flexsearch": "^0.7.31"
}
}
Loading

0 comments on commit 3a4bebc

Please sign in to comment.