docs: add document preview feature documentations for non-vscode clients (#560)

* docs: add document preview feature documentations for non-vscode clients

* chore: add suggestion

docs/tinymist/feature/preview.typ

@@ -2,9 +2,58 @@
 
 #show: book-page.with(title: "Tinymist Preview Feature")
 
+Two ways of previewing a Typst document are provided:
+- PDF Preview: let lsp export your PDF on typed, and open related PDF by your favorite PDF viewer.
+- Web (SVG) Preview: use builtin preview feature.
+
+Whenever you can get a web preview feature, it is recomended since it is much faster than PDF preview and provides bidirectional navigation feature, allowing jumping between the source code and the preview by clicking or lsp commands.
+
+== PDF Preview
+
+For non-vscode clients, neovim client as an example. One who uses `nvim-lspconfig` can place their configuration in the `servers.tinymist.settings` section. If you want to export PDF on typing and output files in `$root_dir/target` directory, please configure it like that:
+
+```lua
+return {
+  -- add tinymist to lspconfig
+  {
+    "neovim/nvim-lspconfig",
+    opts = {
+      servers = {
+        tinymist = {
+          settings = {
+            exportPdf = "onType",
+            outputPath = "$root/target/$dir/$name",
+          }
+        },
+      },
+    },
+  },
+}
+```
+
+#pro-tip[
+  === VSCode:
+
+  The corresponding configuration should be placed in the `settings.json` file. For example:
+
+  ```json
+  {
+    "tinymist.exportPdf": "onType",
+    "tinymist.outputPath": "$root/target/$dir/$name"
+  }
+  ```
+]
+
+Also see:
+
+- #link("https://github.com/Myriad-Dreamin/tinymist/blob/main/editors/vscode/Configuration.md")[VS Cod(e,ium): Tinymist Server Configuration]
+- #link("https://github.com/Myriad-Dreamin/tinymist/blob/main/editors/neovim/Configuration.md")[Neovim: Tinymist Server Configuration]
+
+== Builtin Preview Feature
+
 See #link("https://enter-tainer.github.io/typst-preview/arch.html")[Typst-Preview Developer Guide].
 
-== CLI Integration
+=== CLI Integration
 
 ```bash
 typst-preview /abs-path/to/main.typ --partial-rendering
@@ -16,7 +65,27 @@ is equivalent to
 tinymist preview /abs-path/to/main.typ --partial-rendering
 ```
 
-== `sys.inputs`
+=== Editor Integration
+
+#pro-tip[
+  === VSCode:
+
+  The preview feature is also integrated into the LSP server. You can use the preview feature like when you were using it in `mgt19937.typst-preview` extension.
+]
+
+#pro-tip[
+  === Neovim:
+
+  You may seek #link("https://github.com/chomosuke/typst-preview.nvim")[typst-preview.nvim] for the preview feature.
+]
+
+#pro-tip[
+  === Emacs:
+
+  You may seek #link("https://github.com/havarddj/typst-preview.el")[typst-preview.el] for the preview feature.
+]
+
+=== `sys.inputs`
 
 If the document is compiled by lsp, you can use `sys.inputs` to get the preview arguments:
 
@@ -33,26 +102,10 @@ There is a `version` field in the `preview-args` object, which will increase whe
 }
 ```
 
-=== Theme-aware template
+==== Theme-aware template
 
 The only two abstracted theme kinds are supported: `light` and `dark`. You can use the following code to get the theme:
 
 ```typ
 #let preview-theme = preview-args.at("theme", default: "light")
 ```
-
-== LSP Integration
-
-The preview feature is also integrated into the LSP server. You can use the preview feature like when you were using it in `mgt19937.typst-preview` extension.
-
-// The preview command accept a list of string arguments. And
-
-// ```js
-// vscode.executeCommand('tinymist.startPreview', ['/abs-path/to/main.typ', '--partial-rendering']);
-// ```
-
-// is equivalent to
-
-// ```bash
-// tinymist preview /abs-path/to/main.typ --partial-rendering
-// ```

docs/tinymist/guide/completion.typ

@@ -2,21 +2,6 @@
 
 #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:

docs/tinymist/mod.typ

@@ -22,3 +22,18 @@
 
 #let colors = (blue.lighten(10%), olive, eastern)
 #import fletcher.shapes: diamond
+
+#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
+    },
+  )
+})