sheetjs/docs.sheetjs.com
1
Fork 4
Code Issues 2 Pull Requests 1 Projects Releases Wiki Activity

Nuxt Content Static demo refresh

Browse Source
This commit is contained in:
SheetJS 2024-06-04 00:56:22 -04:00
parent 298297642d
commit 5f443931f8
3 changed files with 73 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
docz/docs/03-demos/12-static/09-nuxtjs.md
View File

@ -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 <<EOF
telemetry.enabled=false
EOF
```
3) For Nuxt 3 sites, set the `telemetry` option in the Nuxt config file (either `nuxt.config.ts` or `nuxt.config.js`):
```js title="nuxt.config.js"
@ -265,18 +273,18 @@ npx create-nuxt-app@4.0.0 sheetjs-nuxt
When prompted, enter the following options:
- `Project name`: press Enter (use default `sheetjs-nuxt`)
- `Programming language`: press Down Arrow (`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
- `Version control system`: select `None`
- `Project name`: press <kbd>Enter</kbd> (use default `sheetjs-nuxt`)
- `Programming language`: press <kbd>↓</kbd> (`TypeScript` selected) then <kbd>Enter</kbd>
- `Package manager`: select `Npm` and press <kbd>Enter</kbd>
- `UI framework`: select `None` and press <kbd>Enter</kbd>
- `Nuxt.js modules`: scroll to `Content`, select with <kbd>Space</kbd>, then press <kbd>Enter</kbd>
- `Linting tools`: press <kbd>Enter</kbd> (do not select any Linting tools)
- `Testing framework`: select `None` and press <kbd>Enter</kbd>
- `Rendering mode`: select `Universal (SSR / SSG)` and press <kbd>Enter</kbd>
- `Deployment target`: select `Static (Static/Jamstack hosting)` and press <kbd>Enter</kbd>
- `Development tools`: press <kbd>Enter</kbd> (do not select any Development tools)
- `What is your GitHub username?`: press <kbd>Enter</kbd> (use default)
- `Version control system`: select `None` and press <kbd>Enter</kbd>
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
<tr><td>Bill Clinton</td> <td>42</td></tr>
```
## 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 (<kbd>CTRL</kbd>+<kbd>C</kbd>) 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 (<kbd>CTRL</kbd>+<kbd>C</kbd>) 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
<tr><td>Bill Clinton</td><td>42</td></tr>
```
[^1]: See [`readFile` in "Reading Files"](/docs/api/parse-options)
[^2]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)

2
docz/docs/03-demos/17-mobile/05-capacitor.md
View File

@ -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.

25
docz/docs/03-demos/42-engines/15-rb.md
View File

@ -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,