diff --git a/docz/docs/03-demos/11-static/09-nuxtjs.md b/docz/docs/03-demos/11-static/09-nuxtjs.md index 2193838..4fd6a75 100644 --- a/docz/docs/03-demos/11-static/09-nuxtjs.md +++ b/docz/docs/03-demos/11-static/09-nuxtjs.md @@ -357,6 +357,7 @@ Two files must be written: - `sheetformer.ts` (the raw transformer module): ```ts title="sheetformer.ts" +// @ts-ignore import { defineTransformer } from "@nuxt/content/transformers/utils"; import { read, utils } from "xlsx"; import { readFileSync } from "node:fs"; @@ -434,7 +435,7 @@ Loading http://localhost:3000/pres should show some JSON data: 5) Create a page. Save the following content to `pages/pres.vue`: -```html +```html title="pages/pres.vue" diff --git a/docz/docs/03-demos/42-headless.md b/docz/docs/03-demos/42-headless.md index 6c8fa16..c768ba0 100644 --- a/docz/docs/03-demos/42-headless.md +++ b/docz/docs/03-demos/42-headless.md @@ -1,5 +1,5 @@ --- -title: Headless Automation +title: Browser Automation --- import Tabs from '@theme/Tabs'; @@ -19,7 +19,37 @@ back to the automation script. This demo focuses on exporting table data to a workbook. Headless browsers do not generally support passing objects between the browser context and the automation script, so the file data must be generated in the browser context -and sent back to the automation script for saving in the file system. Steps: +and sent back to the automation script for saving in the file system. + +```mermaid +sequenceDiagram + autonumber off + actor U as User + participant C as Controller + participant B as Browser + U->>C: run script + rect rgba(255, 0, 0, 0.25) + C->>B: launch browser + B->>C: ready + C->>B: load URL + B->>C: site loaded + end + rect rgba(0, 127, 0, 0.25) + C->>B: add SheetJS script + B->>C: script loaded + end + rect rgba(255, 0, 0, 0.25) + C->>B: ask for file + Note over B: scrape tables + Note over B: generate workbook + B->>C: file bytes + end + rect rgba(0, 127, 0, 0.25) + C->>U: save file + end +``` + +Steps: 1) Launch the headless browser and load the target site.