diff --git a/docz/docs/03-demos/12-static/02-gatsbyjs.md b/docz/docs/03-demos/12-static/02-gatsbyjs.md index d61401c..aedfed5 100644 --- a/docz/docs/03-demos/12-static/02-gatsbyjs.md +++ b/docz/docs/03-demos/12-static/02-gatsbyjs.md @@ -13,6 +13,9 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock'; +export const r = {style: {color:"red"}}; +export const R = {style: {backgroundColor:"darkred"}}; + GatsbyJS is a framework for creating websites. It uses React components for page templates and GraphQL for loading data. @@ -176,7 +179,7 @@ This demo was tested in the following environments: | GatsbyJS | Date | |:---------|:-----------| -| `5.12.1` | 2023-12-04 | +| `5.13.4` | 2024-05-04 | | `4.25.8` | 2024-03-27 | ::: @@ -189,6 +192,25 @@ This demo was tested in the following environments: npx gatsby telemetry --disable ``` +:::info pass + +In NodeJS 22, the process displayed an error: + +
+ ERROR  UNKNOWN
+{`\n`}
+{`\n`}
+(node:25039) [DEP0040] DeprecationWarning: The `punycode` module is deprecated.
+Please use a userland alternative instead.
+(Use `node --trace-deprecation ...` to show where the warning was created)
+
+ +**This is a false report!** + +The error can be safely ignored. + +::: + 1) Create a template site: ```bash @@ -333,11 +355,60 @@ Press the Execute Query button (`▶`) and data should show up in the right pane ![GraphiQL Screenshot](pathname:///gatsby/graphiql.png) +
+ Sample Output (click to show) + +In GatsbyJS version `5.13.4`, the raw output was: + +```json title="GraphQL query result from GatsbyJS 5.13.4" +{ + "data": { + "allPresXlsxSheet1": { + "edges": [ + { + "node": { + "Name": "Bill Clinton", + "Index": 42 + } + }, + { + "node": { + "Name": "GeorgeW Bush", + "Index": 43 + } + }, + { + "node": { + "Name": "Barack Obama", + "Index": 44 + } + }, + { + "node": { + "Name": "Donald Trump", + "Index": 45 + } + }, + { + "node": { + "Name": "Joseph Biden", + "Index": 46 + } + } + ] + } + }, + "extensions": {} +} +``` + +
+ ### React page 8) Create a new file `src/pages/pres.js` that uses the query and displays the result: -```jsx title="src/pages/pres.js" +```jsx title="src/pages/pres.js (create new file)" import { graphql } from "gatsby" import * as React from "react" diff --git a/docz/docs/03-demos/23-data/29-pouchdb.md b/docz/docs/03-demos/23-data/29-pouchdb.md index a296480..1d399c9 100644 --- a/docz/docs/03-demos/23-data/29-pouchdb.md +++ b/docz/docs/03-demos/23-data/29-pouchdb.md @@ -29,8 +29,12 @@ This demo was tested in the following environments: | PouchDB | Date | |:--------|:----------:| -| `7.3.1` | 2023-12-04 | -| `8.0.1` | 2023-12-04 | +| `8.0.1` | 2024-05-04 | +| `7.3.1` | 2024-05-04 | +| `6.4.3` | 2024-05-04 | +| `5.4.5` | 2024-05-04 | +| `4.0.3` | 2024-05-04 | +| `3.6.0` | 2024-05-04 | ::: @@ -131,11 +135,25 @@ The ZIP file should have `MD5` checksum `ac4da7cb0cade1be293ba222462f109c`: ```bash curl -LO https://github.com/nickcolley/getting-started-todo/archive/master.zip md5sum master.zip || md5 master.zip -### the checksum will be printed ``` +:::note pass + If the download is unavailable, a mirror is available at -https://docs.sheetjs.com/pouchdb/master.zip +https://docs.sheetjs.com/pouchdb/master.zip : + +```bash +curl -LO https://docs.sheetjs.com/pouchdb/master.zip +md5sum master.zip || md5 master.zip +``` + +::: + +The second command will display the checksum: + +```bash +ac4da7cb0cade1be293ba222462f109c master.zip +``` 1) Unzip the `master.zip` file and enter the folder: @@ -146,7 +164,7 @@ cd getting-started-todo-master 2) Edit `index.html` to reference the SheetJS library and add a button: -{`\ +{`\ @@ -157,19 +175,19 @@ cd getting-started-todo-master 3) Near the end of `index.html`, look for a script tag referencing a CDN: -```html title="index.html" +```html title="index.html (find line)" ``` Upgrade PouchDB by changing the `src` attribute to the production build[^10]: -```html +```html title="index.html (replace line)" ``` 4) Just before the end of `js/app.js`, add a `click` event listener: -```js title="js/app.js" +```js title="js/app.js (add highlighted lines)" if (remoteCouch) { sync(); } @@ -219,7 +237,7 @@ opened in a web browser. 6) Access the URL from step 5 with a web browser. -7) Add two items "Sheet" and "js". Mark "Sheet" as completed. The page should +7) Add two items "js" and "Sheet". Mark "Sheet" as completed. The page should look like the following screenshot: ![todos screenshot](pathname:///pouchdb/todos.png) @@ -230,7 +248,7 @@ export named "SheetJSPouch.xlsx" 9) Open the file in a spreadsheet editor. It should match the following table: | title | completed | -|:------|:----------| +|:------|:---------:| | Sheet | TRUE | | js | FALSE | diff --git a/docz/docs/03-demos/30-cloud/22-airtable.md b/docz/docs/03-demos/30-cloud/22-airtable.md index c6a320c..4a55951 100644 --- a/docz/docs/03-demos/30-cloud/22-airtable.md +++ b/docz/docs/03-demos/30-cloud/22-airtable.md @@ -199,15 +199,15 @@ Local files can be read using the SheetJS `readFile` method[^7]: const wb = XLSX.readFile("SheetJSAirtableTest.xlsb"); (async() => { await airtable_load_workbook(table, wb); -}); +})(); ``` ## Complete Example :::note Tested Deployments -This demo was last tested on 2023 September 03. At the time, free accounts -included limited API access. +This demo was last tested on 2024 May 04. At the time, free accounts included +limited API access. ::: @@ -217,8 +217,8 @@ included limited API access. :::note pass -In the past, Airtable offered API keys. They are slated to deprecate API keys -in January 2024. They recommend "Personal Access Tokens" for operations. +In the past, Airtable offered API keys. They were officially deprecated on 2024 +February 1. They recommend "Personal Access Tokens" for operations. ::: @@ -226,7 +226,14 @@ API actions will require a PAT, which must be created through the developer hub: 1) Click on account icon (topright area of the page) and select "Developer Hub". -2) Click "Create Token". +:::caution pass + +The email address associated with the account must be verified before attempting +to create a token. + +::: + +2) Click the blue "Create Token" button. 3) In the form, make the following selections: @@ -234,7 +241,7 @@ API actions will require a PAT, which must be created through the developer hub: - Scopes: `data.records:read` and `data.records:write` (adding 2 scopes) - Access: "All current and future bases in all current and future workspaces" -The form will look like the screenshot below: +The form will look like the following screenshot: ![Airtable PAT Form](pathname:///airtable/pat.png) @@ -246,21 +253,39 @@ For the purposes of this demo, a sample workspace should be created: 5) Download https://docs.sheetjs.com/pres.xlsx -6) Create a project in Airtable using "Quickly upload". Select "Microsoft Excel" +6) Click "Back to Home" to return to the home page. + +7) Create a project in Airtable using "Quickly upload". Select "Microsoft Excel" and select the downloaded file from step 1. Click "Upload", then "Import". -7) A workspace will be created. The name will be found in the URL. For example: +8) A workspace will be created. The name will be found in the URL. For example: ``` https://airtable.com/appblahblah/tblblahblah/blahblah --------------------/^^^^^^^^^^^/ workspace name ``` -the first part after the `.com` will be the workspace name. +The first part after the `.com` will be the workspace name. Copy the name. + +### New Project + +9) Create a new project: + +```bash +mkdir -p sheetjs-airtable +cd sheetjs-airtable +npm init -y +``` + +10) Install dependencies: + +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz airtable`} + ### Exporting Data -8) Save the following to `SheetJSAirtableRead.js`: +11) Save the following to `SheetJSAirtableRead.js`: ```js title="SheetJSAirtableRead.js" const Airtable = require("airtable"), XLSX = require("xlsx"); @@ -282,15 +307,9 @@ const base = "app..."; })(); ``` -9) Replace the values in the highlighted lines with the PAT and workspace name. +12) Replace the values in the highlighted lines with the PAT and workspace name. -10) Install dependencies: - -{`\ -npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz airtable`} - - -11) Run the script: +13) Run the script: ```bash node SheetJSAirtableRead.js @@ -300,19 +319,14 @@ The script should write `SheetJSAirtable.xlsb`. The file can be opened in Excel. ### Importing Data -12) Create a file `SheetJSAirpend.xlsx` with some new records in sheet `Sheet1`: +14) Download [`SheetJSAirpend.xlsx`](pathname:///airtable/SheetJSAirpend.xlsx) +to the project folder: -![Records to append](pathname:///airtable/airpend.png) - -`npx xlsx-cli SheetJSAirpend.xlsx` should print the following data: - -```csv -Sheet1 -Name,Index -Someone Else,47 +```bash +curl -LO https://docs.sheetjs.com/airtable/SheetJSAirpend.xlsx ``` -13) Save the following to `SheetJSAirtableWrite.js`: +15) Save the following to `SheetJSAirtableWrite.js`: ```js title="SheetJSAirtableWrite.js" const Airtable = require("airtable"), XLSX = require("xlsx"); @@ -332,15 +346,9 @@ const base = "app..."; })(); ``` -14) Replace the values in the highlighted lines with the PAT and workspace name. +16) Replace the values in the highlighted lines with the PAT and workspace name. -15) Install dependencies: - -{`\ -npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz airtable`} - - -16) Run the script: +17) Run the script: ```bash node SheetJSAirtableWrite.js diff --git a/docz/static/airtable/SheetJSAirpend.xlsx b/docz/static/airtable/SheetJSAirpend.xlsx new file mode 100644 index 0000000..8fa557b Binary files /dev/null and b/docz/static/airtable/SheetJSAirpend.xlsx differ diff --git a/docz/static/airtable/airpend.png b/docz/static/airtable/airpend.png deleted file mode 100644 index 19978a1..0000000 Binary files a/docz/static/airtable/airpend.png and /dev/null differ diff --git a/docz/static/airtable/post.png b/docz/static/airtable/post.png index 89ca5fb..bfc3147 100644 Binary files a/docz/static/airtable/post.png and b/docz/static/airtable/post.png differ