docs.sheetjs.com/docz/docs/03-demos/04-static/index.md

88 lines
3.2 KiB
Markdown
Raw Normal View History

2023-01-15 03:36:13 +00:00
---
title: Content and Static Sites
2023-02-28 11:40:44 +00:00
pagination_prev: demos/net/index
pagination_next: demos/mobile/index
2023-01-15 03:36:13 +00:00
---
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
With the advent of server-side frameworks and content management systems, it is
possible to build sites whose source of truth is a spreadsheet! This demo
explores a number of approaches.
## Flow
At its core, the site generators provide a structure for supplying content and
templates. During a publish step, the generators will analyze the content and
generate web pages by applying the template to the content. It is spiritually
similar to "Mail Merge".
This separation of content and presentation makes it easy for analysts and other
spreadsheet users to generate files with their data and quickly update websites!
#### Live Reload
Many frameworks offer a development flow which watches files for changes. When
using a spreadsheet as the data source, this allows the content creators to see
updates in a preview environment as they make changes to the spreadsheet!
The following GIF animation shows a static site generator in development mode.
The user is editing a spreadsheet with Numbers. Every time the page is saved,
the browser refreshes to show the new content.
![Live example](pathname:///static/live.gif)
## Ecosystem
:::note Recommendation
2023-10-09 01:13:21 +00:00
It is strongly recommended to use a telemetry-free framework that provides an
official plugin for working with SheetJS.
2023-06-25 19:57:03 +00:00
Lume is a great choice for lightweight sites.
2023-01-15 03:36:13 +00:00
:::
### Official
2023-06-25 19:57:03 +00:00
Some frameworks provide official extensions. They are strongly recommended for
greenfield projects.
2023-01-15 03:36:13 +00:00
<ul>{useCurrentSidebarCategory().items.filter(item => item.customProps?.type == "native").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>
### Bundlers
Bundlers can run JS code and process assets during development and during site
2023-06-25 19:57:03 +00:00
builds. Custom plugins can extract data from spreadsheets.
2023-01-15 03:36:13 +00:00
<ul>{useCurrentSidebarCategory().items.filter(item => item.customProps?.type == "bundler").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>
### Workarounds
Other site generators require workarounds for various limitations and assumptions:
<ul>{useCurrentSidebarCategory().items.filter(item => !item?.customProps?.type).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>