From 5f443931f8694aa63009a43ec0f5e1d3747bfe97 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Tue, 4 Jun 2024 00:56:22 -0400 Subject: [PATCH] Nuxt Content Static demo refresh --- docz/docs/03-demos/12-static/09-nuxtjs.md | 79 +++++++++++++------- docz/docs/03-demos/17-mobile/05-capacitor.md | 2 +- docz/docs/03-demos/42-engines/15-rb.md | 25 ++++++- 3 files changed, 73 insertions(+), 33 deletions(-) diff --git a/docz/docs/03-demos/12-static/09-nuxtjs.md b/docz/docs/03-demos/12-static/09-nuxtjs.md index 3e8705a..fc3a03e 100644 --- a/docz/docs/03-demos/12-static/09-nuxtjs.md +++ b/docz/docs/03-demos/12-static/09-nuxtjs.md @@ -48,8 +48,8 @@ This demo was tested in the following environments: | Nuxt Content | Nuxt | Date | |:-------------|:---------|:-----------| -| `1.15.1` | `2.17.2` | 2023-12-04 | -| `2.9.0` | `3.8.2` | 2023-12-04 | +| `1.15.1` | `2.17.3` | 2024-06-04 | +| `2.12.1` | `3.11.2` | 2024-06-04 | ::: @@ -61,7 +61,7 @@ Nuxt embeds telemetry. According to the docs, it can be disabled with: npx nuxt telemetry disable ``` -**At the time the demo was last tested, this command did not work.** +**When the demo was last tested, this command did not work.** Disabling telemetry requires a few steps: @@ -100,6 +100,14 @@ Click "OK" in each window (3 windows) and restart your computer. telemetry.enabled=false ``` +The following command can be run in the Linux / MacOS terminal: + +```bash +cat >~/.nuxtrc <Enter (use default `sheetjs-nuxt`) +- `Programming language`: press ↓ (`TypeScript` selected) then Enter +- `Package manager`: select `Npm` and press Enter +- `UI framework`: select `None` and press Enter +- `Nuxt.js modules`: scroll to `Content`, select with Space, then press Enter +- `Linting tools`: press Enter (do not select any Linting tools) +- `Testing framework`: select `None` and press Enter +- `Rendering mode`: select `Universal (SSR / SSG)` and press Enter +- `Deployment target`: select `Static (Static/Jamstack hosting)` and press Enter +- `Development tools`: press Enter (do not select any Development tools) +- `What is your GitHub username?`: press Enter (use default) +- `Version control system`: select `None` and press Enter The project will be configured and modules will be installed. @@ -306,7 +314,7 @@ curl -L -o content/pres.xlsx https://docs.sheetjs.com/pres.xlsx - Add the following to the top of the script: -```js +```js title="nuxt.config.js (add to top)" import { readFile, utils } from 'xlsx'; // This will be called when the files change @@ -327,7 +335,7 @@ const parseSheet = (file, { path }) => { Replace the property with the following definition: -```js +```js title="nuxt.config.js (replace content key in object)" // content.extendParser allows us to hook into the parsing step content: { extendParser: { @@ -399,15 +407,23 @@ The page should automatically refresh with the new content: npm run generate ``` -This will create a static site in the `dist` folder, which can be served with: +This will create a static site in the `dist` folder. + +9) Serve the static site: ```bash npx http-server dist ``` -Accessing the page `http://localhost:8080` will show the page contents. Verifying -the static nature is trivial: make another change in Excel and save. The page -will not change. +Access the displayed URL (typically `http://localhost:8080`) in a web browser. + +To confirm that the spreadsheet data is added to the site, view the page source. + +Searching for `Bill Clinton` reveals the following encoded HTML row: + +```html +Bill Clinton 42 +``` ## Nuxt Content v2 @@ -593,7 +609,7 @@ The recommended solution is to switch to Node 18. 1) Create a stock app and install dependencies: ```bash -npx -y nuxi init -t content sheetjs-nc2 +npx -y nuxi init -t content --packageManager yarn --no-gitInit sheetjs-nc2 cd sheetjs-nc2 npx -y yarn install npx -y yarn add --dev @types/node @@ -653,7 +669,7 @@ export default defineNuxtConfig({ }); ``` -Restart the dev server by exiting the process (Control+C) and running: +Stop the dev server (CTRL+C) and run the following: ```bash npx -y nuxi clean @@ -686,7 +702,8 @@ Loading `http://localhost:3000/pres` should show some JSON data: ```bash curl -o pages/pres.vue https://docs.sheetjs.com/nuxt/3/pres.vue ``` -Restart the dev server by exiting the process (Control+C) and running: + +Stop the dev server (CTRL+C) and run the following: ```bash npx -y nuxi clean @@ -697,7 +714,7 @@ npx -y yarn run dev The browser should now display an HTML table. 6) To verify that hot loading works, open `pres.xlsx` from the `content` folder -with Excel or another spreadsheet editor. +with a spreadsheet editor. Set cell `A7` to "SheetJS Dev" and set `B7` to `47`. Save the spreadsheet. @@ -717,9 +734,15 @@ This will create a static site in `.output/public`, which can be served with: npx -y http-server .output/public ``` -Accessing `http://localhost:8080/pres` will show the page contents. Verifying -the static nature is trivial: make another change in Excel and save. The page -will not change. +Access the displayed URL (typically `http://localhost:8080`) in a web browser. + +To confirm that the spreadsheet data is added to the site, view the page source. + +Searching for `Bill Clinton` reveals the following encoded HTML row: + +```html +Bill Clinton42 +``` [^1]: See [`readFile` in "Reading Files"](/docs/api/parse-options) [^2]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output) diff --git a/docz/docs/03-demos/17-mobile/05-capacitor.md b/docz/docs/03-demos/17-mobile/05-capacitor.md index fb427e2..987679d 100644 --- a/docz/docs/03-demos/17-mobile/05-capacitor.md +++ b/docz/docs/03-demos/17-mobile/05-capacitor.md @@ -490,6 +490,6 @@ When prompted to select a target device, select the real device in the list. [^1]: See [`read` in "Reading Files"](/docs/api/parse-options) [^2]: See [`sheet_to_html` in "Utilities"](/docs/api/utilities/html#html-table-output) [^3]: See ["Workbook Object"](/docs/csf/book) -[^4]: See [the "base64" type in "Writing Files"](/docs/api/write-options#input-type) +[^4]: See [the "base64" type in "Writing Files"](/docs/api/write-options#output-type) [^5]: See [`table_to_book` in "HTML" Utilities](/docs/api/utilities/html#create-new-sheet) [^6]: See ["Environment Setup"](https://capacitorjs.com/docs/getting-started/environment-setup) in the CapacitorJS documentation. \ No newline at end of file diff --git a/docz/docs/03-demos/42-engines/15-rb.md b/docz/docs/03-demos/42-engines/15-rb.md index 46baa48..747d193 100644 --- a/docz/docs/03-demos/42-engines/15-rb.md +++ b/docz/docs/03-demos/42-engines/15-rb.md @@ -9,12 +9,29 @@ import CodeBlock from '@theme/CodeBlock'; ExecJS is a Ruby abstraction over a number of JS runtimes including V8. -The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone) -can be parsed and evaluated in every supported runtime. +[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing +data from spreadsheets. + +This demo uses ExecJS and SheetJS to pull data from sheets and print CSV rows. +We'll explore how to load SheetJS in ExecJS contexts and process data in Ruby. + +The ["Complete Example"](#complete-example) section includes a complete Ruby +script for reading data from files. ## Integration Details -_Load SheetJS Scripts_ +The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone) +can be parsed and evaluated in every supported runtime. + +### Initialize ExecJS + +The `require` command performs the required initialization steps: + +```rb +require "execjs" +``` + +### Load SheetJS Scripts The main library can be loaded and compiled in a new context: @@ -32,7 +49,7 @@ To confirm the library is loaded, `XLSX.version` can be inspected: puts context.eval("XLSX.version"); ``` -_Reading and Writing Files_ +### Reading and Writing Files The architecture of ExecJS forces users to combine reading and writing in one function step. Base64 strings should be used for interchange. For example,