diff --git a/docz/docs/03-demos/20-content.md b/docz/docs/03-demos/20-content.md
index 5351cbca..2b31a427 100644
--- a/docz/docs/03-demos/20-content.md
+++ b/docz/docs/03-demos/20-content.md
@@ -537,7 +537,7 @@ function wbLoader(path) {
name: n,
data: utils.sheet_to_json(wb.Sheets[n])
}));
- return { data: res };
+ return { content: res };
}
const site = lume();
@@ -556,7 +556,7 @@ worksheets and the data rows. The example assumes each worksheet has a `name` an
```jsx title="index.jsx"
export default ({sheetjs}) => {
- return (<>{(sheetjs.data).map(sheet => (<>
+ return (<>{(sheetjs).map(sheet => (<>
{sheet.name}
Name | Index |
{sheet.data.map(row => (
@@ -567,3 +567,111 @@ export default ({sheetjs}) => {
>))}>);
};
```
+
+### Lume Demo
+
+Complete Example (click to show)
+
+:::note
+
+This was tested against `lume v1.10.4` on 2022 August 25.
+
+:::
+
+1) Create a stock site:
+
+```bash
+mkdir sheetjs-lume
+cd sheetjs-lume
+deno run -A https://deno.land/x/lume/init.ts
+```
+
+When prompted, enter the following options:
+
+- `Use TypeScript for the configuration file`: press Enter (use default `N`)
+- `Do you want to use plugins`: type `jsx` and press Enter
+
+The project will be configured and modules will be installed.
+
+2) Make the following highlighted changes to `_config.js`:
+
+```js title="_config.js"
+import lume from "lume/mod.ts";
+import jsx from "lume/plugins/jsx.ts";
+
+// highlight-start
+import { readFile, utils } from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
+
+function wbLoader(path) {
+ const wb = readFile(path);
+ const res = wb.SheetNames.map(n => ({
+ name: n,
+ data: utils.sheet_to_json(wb.Sheets[n])
+ }));
+ return { content: res };
+}
+// highlight-end
+
+const site = lume();
+
+site.use(jsx());
+
+// highlight-start
+const exts = [".xlsx", ".numbers", /* ... other supported extensions */];
+site.loadData(exts, wbLoader);
+// highlight-end
+
+export default site;
+```
+
+This instructs Lume to watch for and load `.xlsx` and `.numbers` spreadsheets
+
+3) Download and place in a `_data` folder:
+
+```bash
+mkdir _data
+curl -LO https://sheetjs.com/pres.numbers
+mv pres.numbers _data
+```
+
+4) Create a `index.jsx` file that references the file. Since the file is
+ `pres.numbers`, the parameter name is `pres`:
+
+```jsx title="index.jsx"
+export default ({pres}) => {
+ return (<>{(pres).map(sheet => (<>
+ {sheet.name}
+ Name | Index |
+ {sheet.data.map(row => (
+ {row.Name} |
+ {row.Index} |
+
))}
+
+ >))}>);
+};
+```
+
+5) Run the development server:
+
+```bash
+deno task lume --serve
+```
+
+To verify it works, access http://localhost:3000 from your web browser.
+Adding a new row and saving `pres.numbers` should refresh the data
+
+6) Stop the server (press `CTRL+C` in the terminal window) and run
+
+```bash
+deno task lume
+```
+
+This will create a static site in the `_site` folder, which can be served with:
+
+```bash
+npx http-server _serve
+```
+
+Accessing the page http://localhost:8080 will show the page contents.
+
+
\ No newline at end of file