lume

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 => (<>
     <h2>{sheet.name}</h2>
     <table><thead><th>Name</th><th>Index</th></thead>
     <tbody>{sheet.data.map(row => (<tr>
@@ -567,3 +567,111 @@ export default ({sheetjs}) => {
   </>))}</>);
 };
 ```
+
+### Lume Demo
+
+<details><summary><b>Complete Example</b> (click to show)</summary>
+
+:::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 <https://sheetjs.com/pres.numbers> 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 => (<>
+    <h2>{sheet.name}</h2>
+    <table><thead><th>Name</th><th>Index</th></thead>
+    <tbody>{sheet.data.map(row => (<tr>
+      <td>{row.Name}</td>
+      <td>{row.Index}</td>
+    </tr>))}</tbody>
+    </table>
+  </>))}</>);
+};
+```
+
+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.
+
+</details>