docs: update documentation about completion (#466)

docs/tinymist/book.typ

@@ -15,6 +15,8 @@
     - #chapter("feature/cli.typ")[Command line interface]
     - #chapter("feature/language.typ")[Language and Editor Features]
     - #chapter("feature/preview.typ")[Document Preview]
+    = Guide
+    - #chapter("guide/completion.typ")[Completion]
     = Editor Integration
     #prefix-chapter("configurations.typ")[Common Configurations]
     - #chapter("frontend/main.typ")[Editor Frontends]

docs/tinymist/guide/completion.typ

@@ -0,0 +1,70 @@
+#import "mod.typ": *
+
+#show: book-page.with(title: "Guide: Completion")
+
+#let fg-blue = main-color.mix(rgb("#0074d9"))
+#let pro-tip(content) = locate(loc => {
+  block(
+    width: 100%,
+    breakable: false,
+    inset: (x: 0.65em, y: 0.65em, left: 0.65em * 0.6),
+    radius: 4pt,
+    fill: rgb("#0074d920"),
+    {
+      set text(fill: fg-blue)
+      content
+    },
+  )
+})
+
+== Using LSP-Based Completion
+
+LSP will serve completion if you enter _trigger characters_ in the editor. Currently, the trigger characters are:
++ any valid identifier character, like ```js 'a'``` or ```js 'Z'```.
++ ```js '#'```, ```js '('```, ```js '<'```, ```js '.'```, ```js ':'```, ```js '/'```, ```js '"'```, ```js '@'```, which is configured by LSP server.
+
+#pro-tip[
+  === VSCode:
+  Besides, you can trigger the completion manually by pressing ```js Ctrl+Space``` in the editor.
+
+  If ```js Ctrl+Space``` doesn't work, please check your IME settings or keybindings.
+]
+
+When an item is selected, it will be commited if some character is typed.
+1. press ```js Esc``` to avoid commit.
+1. press ```js Enter``` to commit one.
+2. press ```js '.'``` to commit one for those that can interact with the dot operator.
+3. press ```js ';'``` to commit one in code mode.
+4. press ```js ','``` to commit one in list.
+
+=== Label Completion
+
+The LSP will keep watching and compiling your documents to get available labels for completion. Thus, if it takes a long time to compile your document, there will be an expected delay after each editing labels in document.
+
+A frequently asked question is how to completing labels in sub files when writing in a multiple-file project. By default, you will not get labels from other files, e.g. bibiliography configured in other files. This is because the "main file" will be tracked when your are switching the focused files. Hence, the solution is to set up the main file correctly for the multi-file project.
+
+#pro-tip[
+  === VSCode:
+
+  See #link("https://github.com/Myriad-Dreamin/tinymist/tree/main/editors/vscode#working-with-multiple-file-projects")[VS Code: Working with Multiple File Projects].
+]
+
+#pro-tip[
+  === Neovim:
+
+  See #link("https://github.com/Myriad-Dreamin/tinymist/tree/main/editors/neovim#working-with-multiple-file-projects")[Heovim: Working with Multiple File Projects].
+]
+
+#pro-tip[
+  === Helix:
+
+  See #link("https://github.com/Myriad-Dreamin/tinymist/tree/main/editors/helix#working-with-multiple-file-projects")[Helix: Working with Multiple File Projects].
+]
+
+== Using Snippet-Based Completion
+
+#pro-tip[
+  === VSCode:
+
+  We suggest to use snippet extensions powered by TextMate Scopes. For example, #link("https://github.com/OrangeX4/OrangeX4-HyperSnips")[HyperSnips] provides context-sensitive snippet completion.
+]

docs/tinymist/guide/mod.typ

@@ -0,0 +1 @@
+#import "../mod.typ": *

docs/tinymist/mod.typ

@@ -1,5 +1,6 @@
 
 #import "/docs/tinymist/book.typ": book-page, cross-link
+#import "/typ/templates/page.typ": *
 #import "@preview/fletcher:0.4.4" as fletcher: *
 
 /// This function is to render a text string in monospace style and function

typ/templates/page.typ

@@ -21,11 +21,12 @@
 // Fonts
 #let main-font = (
   "Charter",
-  "Source Han Serif SC",
-  "Source Han Serif TC",
   // shiroa's embedded font
   "Linux Libertine",
+  "Source Han Serif SC",
+  "Source Han Serif TC",
 )
+
 #let code-font = (
   "BlexMono Nerd Font Mono",
   // shiroa's embedded font