diff --git a/.spelling b/.spelling
index 0513a27..f23f296 100644
--- a/.spelling
+++ b/.spelling
@@ -160,6 +160,7 @@ GBK
GatsbyJS
GitLab
Goja
+GraphiQL
HTML
HTML5
HTTP
diff --git a/docz/docs/03-demos/06-content.md b/docz/docs/03-demos/06-content.md
index 8030167..1b3fcca 100644
--- a/docz/docs/03-demos/06-content.md
+++ b/docz/docs/03-demos/06-content.md
@@ -2,6 +2,8 @@
title: Content and Site Generation
---
+import current from '/version.js';
+
With the advent of server-side frameworks and content management systems, it is
possible to build sites whose source of truth is a spreadsheet! This demo
explores a number of approaches.
@@ -100,6 +102,268 @@ in the parsing logic, issues should then be raised with the SheetJS project.
:::
+GraphQL details (click to show)
+
+`gatsby-transformer-excel` generates nodes for each data row of each worksheet.
+Under the hood, it uses [`sheet_to_json`](/docs/api/utilities#array-output)
+to generate row objects using the headers in the first row as keys.
+
+
+
+Assuming the file name is `pres.xlsx` and the data is stored in "Sheet1", the
+following nodes will be created:
+
+```js
+[
+ { Name: "Bill Clinton", Index: 42, type: "PresXlsxSheet1" },
+ { Name: "GeorgeW Bush", Index: 43, type: "PresXlsxSheet1" },
+ { Name: "Barack Obama", Index: 44, type: "PresXlsxSheet1" },
+ { Name: "Donald Trump", Index: 45, type: "PresXlsxSheet1" },
+ { Name: "Joseph Biden", Index: 46, type: "PresXlsxSheet1" },
+]
+```
+
+The type is a proper casing of the file name concatenated with the sheet name.
+
+The following query pulls the `Name` and `Index` fields from each row:
+
+```graphql
+{
+ allPresXlsxSheet1 { # "all" followed by type
+ edges {
+ node { # each line in this block should be a field in the data
+ Name
+ Index
+ }
+ }
+ }
+}
+```
+
+{`\
+{
+ "overrides": {
+ "xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
+ }
+}`}
+
+
+:::
+
+Complete Example (click to show)
+
+:::note
+
+This demo was tested on 2022 November 11 against `create-gatsby@3.0.0`. The
+generated project used `gatsby@5.0.0` and `react@18.2.0`.
+
+:::
+
+1) Run `npm init gatsby -- -y sheetjs-gatsby` to create the template site.
+
+2) Follow the on-screen instructions for starting the local development server:
+
+```bash
+cd sheetjs-gatsby
+npm run develop
+```
+
+Open a web browser to the displayed URL (typically `http://localhost:8000/`)
+
+3) Edit `package.json` and add the highlighted lines in the JSON object:
+
+{`\
+{
+ // highlight-start
+ "overrides": {
+ "xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
+ },
+ // highlight-end
+ "name": "sheetjs-gatsby",
+ "version": "1.0.0",
+`}
+
+
+4) Install the library and plugins:
+
+{`\
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
+npm i --save gatsby-transformer-excel gatsby-source-filesystem
+`}
+
+
+5) Edit `gatsby-config.js` and add the following lines to the `plugins` array:
+
+```js
+ plugins: [
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `data`,
+ path: `${__dirname}/src/data/`,
+ },
+ },
+ `gatsby-transformer-excel`,
+ ],
+```
+
+Stop and restart the development server process (`npm run develop`).
+
+6) Make a `src/data` directory, download , and
+move the downloaded file into the new folder:
+
+```bash
+mkdir -p src/data
+curl -LO https://sheetjs.com/pres.xlsx
+mv pres.xlsx src/data
+```
+
+7) To verify, open the GraphiQL editor at `http://localhost:8000/___graphql`.
+
+There is an editor in the left pane. Paste the following query into the editor:
+
+```graphql
+{
+ allPresXlsxSheet1 {
+ edges {
+ node {
+ Name
+ Index
+ }
+ }
+ }
+}
+```
+
+Press the Execute Query button and data should show up in the right pane:
+
+
+
+8) Create a new file `src/pages/pres.js` that uses the query and displays the result:
+
+```jsx title="src/pages/pres.js"
+import { graphql } from "gatsby"
+import * as React from "react"
+
+export const query = graphql`query {
+ allPresXlsxSheet1 {
+ edges {
+ node {
+ Name
+ Index
+ }
+ }
+ }
+}`;
+
+const PageComponent = ({data}) => {
+ return ( {JSON.stringify(data, 2, 2)});
+};
+export default PageComponent;
+```
+
+After saving the file, access `http://localhost:8000/pres`. The displayed JSON
+is the data that the component receives:
+
+```js
+{
+ "allPresXlsxSheet1": {
+ "edges": [
+ {
+ "node": {
+ "Name": "Bill Clinton",
+ "Index": 42
+ }
+ },
+ // ....
+```
+
+9) Change `PageComponent` to display a table based on the data:
+
+```jsx title="src/pages/pres.js"
+import { graphql } from "gatsby"
+import * as React from "react"
+
+export const query = graphql`query {
+ allPresXlsxSheet1 {
+ edges {
+ node {
+ Name
+ Index
+ }
+ }
+ }
+}`;
+
+// highlight-start
+const PageComponent = ({data}) => {
+ const rows = data.allPresXlsxSheet1.edges.map(r => r.node);
+ return (
+ | Name | Index |
|---|
+ {rows.map(row => (
+ | {row.Name} |
+ {row.Index} |
+
))}
+
);
+};
+// highlight-end
+
+export default PageComponent;
+```
+
+Going back to the browser, `http://localhost:8000/pres` will show a table:
+
+
+
+10) Open the file `src/data/pres.xlsx` in Excel or LibreOffice or Numbers.
+Add a new row at the end of the file:
+
+
+
+Save the file and notice that the table has refreshed with the new data:
+
+
+
+11) Stop the development server and run `npm run build`. Once the build is
+finished, the display will confirm that the `/pres` route is static:
+
+```
+Pages
+
+┌ src/pages/404.js
+│ ├ /404/
+│ └ /404.html
+├ src/pages/index.js
+│ └ /
+└ src/pages/pres.js
+ └ /pres/
+
+ ╭────────────────────────────────────────────────────────────────╮
+ │ │
+ │ (SSG) Generated at build time │
+ │ D (DSG) Deferred static generation - page generated at runtime │
+ │ ∞ (SSR) Server-side renders at runtime (uses getServerData) │
+ │ λ (Function) Gatsby function │
+ │ │
+ ╰────────────────────────────────────────────────────────────────╯
+```
+
+The built page will be placed in `public/pres/index.html`. Open the page with a
+text editor and search for "SheetJS" to verify raw HTML was generated:
+
+```html
+| SheetJS Dev | 47 |
+```
+
+