diff --git a/docz/docs/03-demos/20-content.md b/docz/docs/03-demos/20-content.md index 5351cbc..2b31a42 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}

{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}

+
NameIndex
+ {sheet.data.map(row => ( + + + ))} +
NameIndex
{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