forked from sheetjs/docs.sheetjs.com
lume
This commit is contained in:
parent
eb096bf09c
commit
33778a63bb
@ -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>
|
Loading…
Reference in New Issue
Block a user