forked from sheetjs/docs.sheetjs.com
astro-demo
This commit is contained in:
parent
ad5220e146
commit
f11ac3bbaf
@ -11,9 +11,9 @@ from the ViteJS demo.
|
||||
|
||||
:::
|
||||
|
||||
Astro is a site generator. Astro projects use ViteJS under the hood, and Astro
|
||||
exposes project configuration through the `vite` property in `astro.config.mjs`.
|
||||
The [ViteJS demo](/docs/demos/static/vitejs) examples work as expected!
|
||||
Astro is a site generator. Astro projects use ViteJS under the hood. They expose
|
||||
project configuration through the `vite` property in `astro.config.mjs`. The
|
||||
[ViteJS demo](/docs/demos/static/vitejs) examples work as expected!
|
||||
|
||||
## Integration
|
||||
|
||||
@ -29,7 +29,7 @@ use the Base64 string loader to get file data and parse with the SheetJS library
|
||||
in the relevant pages. If the SheetJS operations are performed in frontmatter,
|
||||
only the results will be added to the generated pages!
|
||||
|
||||
#### Loader
|
||||
### Loader
|
||||
|
||||
The loader should be added to `astro.config.mjs` under the `vite` key.
|
||||
|
||||
@ -73,7 +73,7 @@ declare module '*.xlsx' {
|
||||
}
|
||||
```
|
||||
|
||||
#### Astro Frontmatter
|
||||
### Astro Frontmatter
|
||||
|
||||
Typically projects store files in `src/pages`. Assuming `pres.numbers` is stored
|
||||
in the `src/data` directory in the project, the relative import
|
||||
@ -118,3 +118,150 @@ const data = utils.sheet_to_json<IPresident>(wb.Sheets[wb.SheetNames[0]]);
|
||||
|
||||
When built using `npx astro build`, Astro will perform the conversion and emit
|
||||
a simple HTML table without any reference to the existing spreadsheet file!
|
||||
|
||||
## Complete Example
|
||||
|
||||
:::note
|
||||
|
||||
This demo was tested on 2023 February 21 using AstroJS `v2.0.14`
|
||||
|
||||
:::
|
||||
|
||||
0) Disable Astro telemetry:
|
||||
|
||||
```bash
|
||||
npx astro telemetry disable
|
||||
```
|
||||
|
||||
1) Create a new site using the `docs` template:
|
||||
|
||||
```bash
|
||||
npm create astro@latest -- --template docs --yes ./sheetjs-astro
|
||||
cd sheetjs-astro
|
||||
```
|
||||
|
||||
2) Fetch the example file [`pres.numbers`](https://sheetjs.com/pres.numbers):
|
||||
|
||||
```bash
|
||||
mkdir -p src/data
|
||||
curl -Lo src/data/pres.numbers https://sheetjs.com/pres.numbers
|
||||
```
|
||||
|
||||
3) Install the SheetJS library:
|
||||
|
||||
```bash
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
|
||||
```
|
||||
|
||||
4) Replace `src/pages/index.astro` with the following:
|
||||
|
||||
```jsx title="src/pages/index.astro"
|
||||
---
|
||||
/* -- the code in the frontmatter is only run at build time -- */
|
||||
import { read, utils } from "xlsx";
|
||||
|
||||
/* parse workbook */
|
||||
import b64 from "../data/pres.numbers";
|
||||
const wb = read(b64, {type: "base64"});
|
||||
|
||||
/* generate row objects */
|
||||
interface IPresident {
|
||||
Name: string;
|
||||
Index: number;
|
||||
}
|
||||
const data = utils.sheet_to_json<IPresident>(wb.Sheets[wb.SheetNames[0]]);
|
||||
---
|
||||
<html>
|
||||
<body>
|
||||
<h3>Presidents</h3>
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Index</th></tr></thead>
|
||||
<tbody>
|
||||
{data.map(row => (<tr>
|
||||
<td>{row.Name}</td><td>{row.Index}</td>
|
||||
</tr>))}
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
5) Append the following lines to `src/env.d.ts`:
|
||||
|
||||
```ts title="src/env.d.ts"
|
||||
/* add to the end of the file */
|
||||
declare module '*.numbers' {
|
||||
const data: string;
|
||||
export default data;
|
||||
}
|
||||
declare module '*.xlsx' {
|
||||
const data: string;
|
||||
export default data;
|
||||
}
|
||||
```
|
||||
|
||||
6) Add the highlighted lines to `astro.config.mjs`:
|
||||
|
||||
```js title="astro.config.mjs"
|
||||
export default defineConfig({
|
||||
// highlight-start
|
||||
vite: {
|
||||
// this tells astro which extensions to handle
|
||||
assetsInclude: ['**/*.numbers', '**/*.xlsx'],
|
||||
|
||||
plugins: [
|
||||
{ // this plugin presents the data as a Base64 string
|
||||
name: "sheet-base64",
|
||||
transform(code, id) {
|
||||
if(!id.match(/\.(numbers|xlsx)$/)) return;
|
||||
var data = readFileSync(id, "base64");
|
||||
return `export default '${data}'`;
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// highlight-end
|
||||
integrations: [
|
||||
```
|
||||
|
||||
7) Build the static site:
|
||||
|
||||
```bash
|
||||
npx astro build
|
||||
```
|
||||
|
||||
AstroJS will place the generated site in the `dist` subfolder.
|
||||
|
||||
8) Start a web server to host the static site:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
```
|
||||
|
||||
Open a web browser and access the displayed URL (usually http://localhost:8080).
|
||||
View the webpage source and confirm that no JS was added to the page. It only
|
||||
contains the content from the file in an HTML table:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<h3>Presidents</h3>
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Index</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bill Clinton</td><td>42</td>
|
||||
</tr><tr>
|
||||
<td>GeorgeW Bush</td><td>43</td>
|
||||
</tr><tr>
|
||||
<td>Barack Obama</td><td>44</td>
|
||||
</tr><tr>
|
||||
<td>Donald Trump</td><td>45</td>
|
||||
</tr><tr>
|
||||
<td>Joseph Biden</td><td>46</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body></html>
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user