diff --git a/docz/docs/03-demos/11-static/10-astro.md b/docz/docs/03-demos/11-static/10-astro.md index 92b7f56..38f5b00 100644 --- a/docz/docs/03-demos/11-static/10-astro.md +++ b/docz/docs/03-demos/11-static/10-astro.md @@ -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(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(wb.Sheets[wb.SheetNames[0]]); +--- + + +

Presidents

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

Presidents

+ + + + + + + + + + + + + + + +
NameIndex
Bill Clinton42
GeorgeW Bush43
Barack Obama44
Donald Trump45
Joseph Biden46
+ +``` \ No newline at end of file