forked from sheetjs/docs.sheetjs.com
astro
This commit is contained in:
parent
e90036e9fd
commit
93e7abd146
@ -2,7 +2,6 @@
|
||||
title: Salesforce LWC
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/grid
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
Salesforce apps can use third-party libraries in "Lightning Web Components".
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
title: Amazon Web Services
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/grid
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
AWS is a Cloud Services platform which includes traditional virtual machine
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Google Sheets
|
||||
pagination_prev: demos/static/index
|
||||
pagination_next: demos/cli
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/grid
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
@ -2,7 +2,6 @@
|
||||
title: NetSuite
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/grid
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
This demo discusses the key SheetJS operations. Familiarity with SuiteScript 2
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Dropbox
|
||||
pagination_prev: demos/ml
|
||||
pagination_next: solutions/input
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/grid
|
||||
---
|
||||
|
||||
<head>
|
||||
@ -45,8 +45,17 @@ When a file is selected, the `success` callback will receive an array of files
|
||||
(even if `multiselect` is disabled). Each file object has a `link` file which
|
||||
corresponds to a temporary URL that can be fetched.
|
||||
|
||||
If the live demo shows a message about `Dropbox` being undefined, please reload
|
||||
this demo page.
|
||||
:::caution
|
||||
|
||||
If the live demo shows a message
|
||||
|
||||
```
|
||||
ReferenceError: Dropbox is not defined
|
||||
```
|
||||
|
||||
please refresh the page. This is a known bug in the documentation generator.
|
||||
|
||||
:::
|
||||
|
||||
```jsx live
|
||||
function SheetJSChoisissez() {
|
||||
@ -105,8 +114,17 @@ URI by writing with the `base64` type and prepending the URI metadata.
|
||||
This demo seeds data by fetching a file and writing to HTML table. The generated
|
||||
table is scraped to create a new workbook that is written to XLS.
|
||||
|
||||
If the live demo shows a message about `Dropbox` being undefined, please reload
|
||||
this demo page.
|
||||
:::caution
|
||||
|
||||
If the live demo shows a message
|
||||
|
||||
```
|
||||
ReferenceError: Dropbox is not defined
|
||||
```
|
||||
|
||||
please refresh the page. This is a known bug in the documentation generator.
|
||||
|
||||
:::
|
||||
|
||||
```jsx live
|
||||
function SheetJSEnregistrez() {
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Airtable
|
||||
pagination_prev: demos/static/index
|
||||
pagination_next: demos/cli
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/grid
|
||||
---
|
||||
|
||||
At the time of writing (2023 February 15), Airtable recommends Personal Access
|
||||
@ -2,7 +2,6 @@
|
||||
title: Azure Cloud Services
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/grid
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
Azure is a Cloud Services platform which includes traditional virtual machine
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: GitHub
|
||||
pagination_prev: demos/ml
|
||||
pagination_next: solutions/input
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/grid
|
||||
---
|
||||
|
||||
Many official data releases by governments and organizations include XLSX or
|
||||
@ -37,3 +37,19 @@ binary data, so special care must be taken.
|
||||
|
||||
- [Amazon Simple Storage Service (S3)](/docs/demos/cloud/aws#s3-storage)
|
||||
- [Azure Blob Storage](/docs/demos/cloud/azure#azure-blob-storage)
|
||||
|
||||
### File Hosting
|
||||
|
||||
File hosting services provide simple solutions for storing data, synchronizing
|
||||
files across devices, and sharing with specific users or customers. Demos:
|
||||
|
||||
- [Dropbox](/docs/demos/cloud/dropbox)
|
||||
- [Github](/docs/demos/cloud/github)
|
||||
|
||||
## Cloud Data
|
||||
|
||||
Cloud Data Platforms are popular storage media for structured data, typically
|
||||
offering APIs for programmatic data ingress and egress. Demos:
|
||||
|
||||
- [Google Sheets](/docs/demos/cloud/gsheet)
|
||||
- [Airtable](/docs/demos/cloud/airtable)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Lume
|
||||
pagination_prev: demos/extensions/index
|
||||
pagination_next: demos/cloudata/index
|
||||
pagination_next: demos/cli
|
||||
sidebar_custom_props:
|
||||
type: native
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: GatsbyJS
|
||||
pagination_prev: demos/extensions/index
|
||||
pagination_next: demos/cloudata/index
|
||||
pagination_next: demos/cli
|
||||
sidebar_custom_props:
|
||||
type: native
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: ViteJS
|
||||
pagination_prev: demos/extensions/index
|
||||
pagination_next: demos/cloudata/index
|
||||
pagination_next: demos/cli
|
||||
sidebar_custom_props:
|
||||
type: bundler
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: NextJS
|
||||
pagination_prev: demos/extensions/index
|
||||
pagination_next: demos/cloudata/index
|
||||
pagination_next: demos/cli
|
||||
---
|
||||
|
||||
:::note
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: NuxtJS
|
||||
pagination_prev: demos/extensions/index
|
||||
pagination_next: demos/cloudata/index
|
||||
pagination_next: demos/cli
|
||||
---
|
||||
|
||||
`@nuxt/content` is a file-based CMS for Nuxt, enabling static-site generation
|
||||
|
||||
120
docz/docs/03-demos/11-static/10-astro.md
Normal file
120
docz/docs/03-demos/11-static/10-astro.md
Normal file
@ -0,0 +1,120 @@
|
||||
---
|
||||
title: AstroJS
|
||||
pagination_prev: demos/extensions/index
|
||||
pagination_next: demos/cli
|
||||
---
|
||||
|
||||
:::note
|
||||
|
||||
This demo uses ["Base64 Loader"](/docs/demos/static/vitejs#base64-loader)
|
||||
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!
|
||||
|
||||
## Integration
|
||||
|
||||
:::note
|
||||
|
||||
The ViteJS demo used the query `?b64` to identify files. To play nice with
|
||||
Astro, this demo matches the file extensions directly.
|
||||
|
||||
:::
|
||||
|
||||
Since Astro performs per-page heavy lifting at build time, it is recommended to
|
||||
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
|
||||
|
||||
The loader should be added to `astro.config.mjs` under the `vite` key.
|
||||
|
||||
```js title="astro.config.mjs"
|
||||
import { readFileSync } from 'fs';
|
||||
import { defineConfig } from 'astro/config';
|
||||
export default defineConfig({
|
||||
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}'`;
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### Types
|
||||
|
||||
For VSCodium integration, types can be specified in `src/env.d.ts`.
|
||||
|
||||
This data loader returns Base64 strings:
|
||||
|
||||
```ts title="src/env.d.ts"
|
||||
/// <reference types="astro/client" />
|
||||
declare module '*.numbers' {
|
||||
const data: string;
|
||||
export default data;
|
||||
}
|
||||
declare module '*.xlsx' {
|
||||
const data: string;
|
||||
export default data;
|
||||
}
|
||||
```
|
||||
|
||||
#### 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
|
||||
|
||||
```js
|
||||
import b64 from "../data/pres.numbers"
|
||||
```
|
||||
|
||||
will return a Base64 string which can be parsed in the frontmatter. The workbook
|
||||
object can be post-processed using utility functions. The following example
|
||||
uses `sheet_to_json` to generate row objects that are rendered as table rows:
|
||||
|
||||
```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>
|
||||
{/* Display each row object as a TR within the TBODY element */}
|
||||
<tbody>{data.map(row => (
|
||||
<tr><td>{row.Name}</td><td>{row.Index}</td></tr>
|
||||
))}</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
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!
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Content and Static Sites
|
||||
pagination_prev: demos/extensions/index
|
||||
pagination_next: demos/cloudata/index
|
||||
pagination_next: demos/cli
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"label": "Cloud Data Platforms",
|
||||
"position": 19,
|
||||
"collapsed": false
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
---
|
||||
title: Cloud Data Platforms
|
||||
pagination_prev: demos/static/index
|
||||
pagination_next: demos/cli
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
|
||||
|
||||
Cloud Data Platforms are popular storage media for structured data, typically
|
||||
offering APIs for programmatic data ingress and egress. Demos:
|
||||
|
||||
<ul>{useCurrentSidebarCategory().items.map(item => {
|
||||
const listyle = (item.customProps?.icon) ? {
|
||||
listStyleImage: `url("${item.customProps.icon}")`
|
||||
} : {};
|
||||
return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
|
||||
<a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
|
||||
</li>);
|
||||
})}</ul>
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Command-Line Tools
|
||||
pagination_prev: demos/cloudata/index
|
||||
pagination_prev: demos/static/index
|
||||
pagination_next: demos/engines/index
|
||||
---
|
||||
|
||||
|
||||
@ -313,6 +313,18 @@ async function workbook_dl_axios(url) {
|
||||
This demo uses `axios` to download <https://sheetjs.com/pres.numbers> and show
|
||||
the data in an HTML table.
|
||||
|
||||
:::caution
|
||||
|
||||
If the live demo shows a message
|
||||
|
||||
```
|
||||
ReferenceError: axios is not defined
|
||||
```
|
||||
|
||||
please refresh the page. This is a known bug in the documentation generator.
|
||||
|
||||
:::
|
||||
|
||||
```jsx live
|
||||
function SheetJSAxiosDL() {
|
||||
const [__html, setHTML] = React.useState("");
|
||||
@ -404,6 +416,18 @@ superagent.get(url).responseType('arraybuffer').end(function(err, res) {
|
||||
This demo uses `superagent` to download <https://sheetjs.com/pres.numbers> and
|
||||
show the data in an HTML table.
|
||||
|
||||
:::caution
|
||||
|
||||
If the live demo shows a message
|
||||
|
||||
```
|
||||
ReferenceError: superagent is not defined
|
||||
```
|
||||
|
||||
please refresh the page. This is a known bug in the documentation generator.
|
||||
|
||||
:::
|
||||
|
||||
```jsx live
|
||||
function SheetJSSuperAgentDL() {
|
||||
const [__html, setHTML] = React.useState("");
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Typed Arrays and ML
|
||||
pagination_next: demos/hosting/index
|
||||
---
|
||||
|
||||
<head>
|
||||
@ -48,6 +47,18 @@ fetching [an XLSX export of the example dataset](https://sheetjs.com/data/bht.xl
|
||||
|
||||
<details><summary><b>TF CSV Demo using XLSX files</b> (click to show)</summary>
|
||||
|
||||
:::caution
|
||||
|
||||
If the live demo shows a message
|
||||
|
||||
```
|
||||
ReferenceError: tf is not defined
|
||||
```
|
||||
|
||||
please refresh the page. This is a known bug in the documentation generator.
|
||||
|
||||
:::
|
||||
|
||||
```jsx live
|
||||
function SheetJSToTFJSCSV() {
|
||||
const [output, setOutput] = React.useState("");
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"label": "File Hosting Services",
|
||||
"position": 44,
|
||||
"collapsed": false
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
---
|
||||
title: File Hosting Services
|
||||
pagination_prev: demos/ml
|
||||
pagination_next: solutions/input
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
|
||||
|
||||
File hosting services provide simple solutions for storing data, synchronizing
|
||||
files across devices, and sharing with specific users or customers.
|
||||
|
||||
<ul>{useCurrentSidebarCategory().items.map(item => {
|
||||
const listyle = (item.customProps?.icon) ? {
|
||||
listStyleImage: `url("${item.customProps.icon}")`
|
||||
} : {};
|
||||
return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
|
||||
<a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
|
||||
</li>);
|
||||
})}</ul>
|
||||
@ -80,13 +80,13 @@ run in the web browser, demos will include interactive examples.
|
||||
|
||||
### File Hosting Services
|
||||
|
||||
- [`Dropbox`](/docs/demos/hosting/dropbox)
|
||||
- [`GitHub`](/docs/demos/hosting/github)
|
||||
- [`Dropbox`](/docs/demos/cloud/dropbox)
|
||||
- [`GitHub`](/docs/demos/cloud/github)
|
||||
|
||||
### Cloud Data Services
|
||||
|
||||
- [`Google Sheets`](/docs/demos/cloudata/gsheet)
|
||||
- [`Airtable`](/docs/demos/cloudata/airtable)
|
||||
- [`Google Sheets`](/docs/demos/cloud/gsheet)
|
||||
- [`Airtable`](/docs/demos/cloud/airtable)
|
||||
|
||||
### Platforms and Integrations
|
||||
|
||||
|
||||
@ -172,7 +172,7 @@ const config = {
|
||||
{ from: '/docs/getting-started/demos/', to: '/docs/demos/' },
|
||||
{ from: '/docs/getting-started/demos/excel', to: '/docs/demos/' },
|
||||
{ from: '/docs/demos/content', to: '/docs/demos/static/' },
|
||||
{ from: '/docs/demos/git', to: '/docs/demos/hosting/github/' },
|
||||
{ from: '/docs/demos/git', to: '/docs/demos/cloud/github/' },
|
||||
{ from: '/docs/demo/grid', to: '/docs/demos/grid/' },
|
||||
/* frontend */
|
||||
{ from: '/docs/demos/angular', to: '/docs/demos/frontend/angular/' },
|
||||
@ -186,13 +186,18 @@ const config = {
|
||||
{ from: '/docs/demos/aws', to: '/docs/demos/cloud/aws/' },
|
||||
{ from: '/docs/demos/azure', to: '/docs/demos/cloud/azure/' },
|
||||
{ from: '/docs/demos/netsuite', to: '/docs/demos/cloud/netsuite/' },
|
||||
{ from: '/docs/demos/gsheet', to: '/docs/demos/cloud/gsheet/' },
|
||||
{ from: '/docs/demos/airtable', to: '/docs/demos/cloud/airtable/' },
|
||||
/* extensions */
|
||||
{ from: '/docs/demos/extendscript', to: '/docs/demos/extensions/extendscript/' },
|
||||
{ from: '/docs/demos/excelapi', to: '/docs/demos/extensions/excelapi/' },
|
||||
{ from: '/docs/demos/chromium', to: '/docs/demos/extensions/chromium/' },
|
||||
/* cloudata */
|
||||
{ from: '/docs/demos/gsheet', to: '/docs/demos/cloudata/gsheet/' },
|
||||
{ from: '/docs/demos/airtable', to: '/docs/demos/cloudata/airtable/' },
|
||||
{ from: '/docs/demos/cloudata/gsheet', to: '/docs/demos/cloud/gsheet/' },
|
||||
{ from: '/docs/demos/cloudata/airtable', to: '/docs/demos/cloud/airtable/' },
|
||||
/* hosting */
|
||||
{ from: '/docs/demos/hosting/dropbox', to: '/docs/demos/cloud/dropbox/' },
|
||||
{ from: '/docs/demos/hosting/github', to: '/docs/demos/cloud/github/' },
|
||||
]
|
||||
}]
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user