docs: saber hooks

website/pages/docs/node-apis.md

@@ -5,57 +5,16 @@ layout: docs
 
 ## Usage
 
-Implement any of these APIs by exporting them from a file named `saber-node.js` in the root of your project.
+Implement any of [Saber Hooks](saber-instance.md#hooks) by exporting them from a file named `saber-node.js` in the root of your project.
 
 During developing, you need to restart the server if you made any changes in this file.
 
-## APIs
-
-### onCreatePage
-
-- Type: `(this: SaberInstance, page: Page) => void`
-
-Called when a new page is added.
+For example:
 
 ```js
-exports.onCreatePage = function(page) {
-  // Add an addtional field on the page
-  page.foo = 'foo'
-}
-```
-
-### onCreatePages
-
-- Type: `(this: SaberInstance) => void | Promise<void>`
-
-Called when Saber finished adding pages. If you want to create a page from other pages, do it in this hook.
-
-### chainWebpack
-
-- Type: `(this: SaberInstance, config: WebpackChain, context: Context) => void`
-
-Called when creating [webpack-chain](https://github.com/neutrinojs/webpack-chain) instance which is used to create webpack config.
-
-```typescript
-interface Context {
-  type: 'client' | 'server'
+exports.onCreatePage = function (page) {
+  page.attributes.foo = true
 }
 ```
 
-### beforeRun
-
-- Type: `(this: SaberInstance) => void | Promise<void>`
-
-Before running the webpack build process.
-
-### afterBuild
-
-- Type: `(this: SaberInstance) => void | Promise<void>`
-
-Called when webpack build is finished.
-
-### afterGenerate
-
-- Type: `(this: SaberInstance) => void | Promise<void>`
-
-Called when static HTML files are generated.
+You can access [Saber Instance](saber-instance.md) via `this`.

website/pages/docs/saber-instance.md

@@ -92,20 +92,151 @@ pages.getMatchedLocalePath('/cn/about')
 
 ## hooks
 
-Hooks are also known as the [Saber Nodes APIs](./node-apis.md), you can use hooks in a plugin like this:
+Hooks are called during Saber's build process. When developing a plugin for Saber, you might want to know where each hook is called. To learn this, search for `hooks.<hook name>.call` across the Saber source.
+
+The following lifecycle hooks are exposed by the `api` and can be accessed as such:
 
 ```js
-api.hooks.chainWebpack.tap('disable-sourcemap', config => {
-  config.devtool(false)
+api.hooks.someHook.tap('MyPlugin', (...params) => {
+  // Do something
 })
 ```
 
-This is equivalent to following code in `saber-node.js`:
+Depending on the hook type, `tapAsync` and `tapPromise` may also be available. Hooks are [Tapable](https://github.com/webpack/tapable) instances.
 
-```js
-exports.chainWebpack = config => {
-  config.devtool(false)
+### `filterPlugins`
+
+- Hook Type: `SyncWaterfallHook`
+- Params:
+  - `plugins`: `Plugin[]`
+
+Called to filter plugins.
+
+```ts
+interface Plugin {
+  name: string
+  apply: (api: SaberInstance, options?: any) => void
+  options?: any
 }
 ```
 
-Hooks are [Tapable](https://github.com/webpack/tapable) instances.
+### `afterPlugins`
+
+- Hook Type: `SyncHook`
+
+Called after the `apply` methods of all plugins are executed.
+
+### `initPages`
+
+- Hook Type: `AsyncSeriesHook`
+
+Called before starting creating pages for the first time.
+
+### `onCreatePage`
+
+- Hook Type: `AsyncSeriesHook`
+- Params:
+  - `page`: `PageInterface`
+
+Called after creating a page.
+
+### `chainMarkdown`
+
+- Hook Type: `SyncHook`
+- Params:
+  - `config`: `MarkdownItChain`
+
+Called when creating a page to get the plugins and options for `markdown-it`.
+
+### `onCreatePages`
+
+- Hook Type: `AsyncSeriesHook`
+
+Called after creating all pages.
+
+### `beforeRun`
+
+- Hook Type: `AsyncSeriesHook`
+
+Called before emitting the routes file for the first time.
+
+### `emitRoutes`
+
+- Hook Type: `AsyncSeriesHook`
+
+Called after emitting the routes file.
+
+### `chainWebpack`
+
+- Hook Type: `SyncHook`
+- Params:
+  - `config`: `WebpackChain`
+  - `opts`: `{ type: 'client' | 'server' }`
+
+Called to get the webpack config before creating webpack compiler.
+
+### `onCreateServer`
+
+- Hook Type: `SyncHook`
+- Params:
+  - `server`: `PolkaInstance`
+
+Called after creating the server.
+
+### `getDocumentData`
+
+- Hook Type: `SyncWaterfallHook`
+- Params:
+  - `documentData`: `DocumentData`
+  - `context`: SSR context.
+
+Called to get the document data.
+
+### `getDocument`
+
+- Hook Type: `SyncWaterfallHook`
+- Params:
+  - `document`: `string`
+  - `context`: SSR context.
+
+Called to get the document html.
+
+### `afterBuild`
+
+- Hook Type: `AsyncSeriesHook`
+
+Called after running webpack (in production mode).
+
+### `beforeExportPage`
+
+- Hook Type: `AsyncSeriesHook`
+- Params:
+  - `context`: SSR context.
+  - `exportedPage`: `ExportedPage`
+
+Called before exporting a page to static HTML file.
+
+```ts
+interface ExportedPage {
+  // Output file content
+  content: string
+  // Output file path
+  path: string
+}
+```
+
+### `afterExportPage`
+
+- Hook Type: `AsyncSeriesHook`
+- Params:
+  - `context`: SSR context.
+  - `exportedPage`: `ExportedPage`
+
+Called after exporting a page to static HTML file.
+
+### `afterGenerate`
+
+- Hook Type: `AsyncSeriesHook`
+
+Called after generating static HTML files (in production mode).
+

website/src/css/page.css

@@ -89,6 +89,7 @@
   }
 
   & code {
+    font-size: .875rem;
     background: #f5f7fa;
     border-radius: 3px;
     padding: 3px 5px;