forked from sheetjs/docs.sheetjs.com
		
	upgrade docusaurus to 3.2.1
This commit is contained in:
		
							parent
							
								
									2e44e0c2c8
								
							
						
					
					
						commit
						0fda6d46ab
					
				| @ -119,8 +119,8 @@ function SheetJSTestDropbox() { | ||||
| 
 | ||||
| ## Other Notes | ||||
| 
 | ||||
| `src/theme/Admonition` was swizzled from 2.4.1 to enable `pass` for hiding | ||||
| `src/theme/Admonition` was swizzled from 3.2.1 to enable `pass` for hiding | ||||
| header text. See Docusaurus issue 8568 for more details. | ||||
| 
 | ||||
| `src/theme/prism-include-languages.js` was swizzled from 2.4.1 to support the | ||||
| `src/theme/prism-include-languages.js` was swizzled from 3.2.1 to support the | ||||
| Liquid language. See Docusaurus issue 6872 for more details. | ||||
| @ -50,7 +50,7 @@ Once installed, the library can be imported under the name `xlsx`: | ||||
| import { read, writeFileXLSX } from "xlsx"; | ||||
| ``` | ||||
| 
 | ||||
| The ["Bundlers" demo](/docs/demos/bundler) includes examples for specific tools. | ||||
| The ["Bundlers" demo](/docs/demos/frontend/bundler) includes complete examples. | ||||
| 
 | ||||
| :::tip pass | ||||
| 
 | ||||
| @ -203,7 +203,7 @@ var XLSX = require("xlsx"); | ||||
| var read = XLSX.read, utils = XLSX.utils; | ||||
| ``` | ||||
| 
 | ||||
| The ["Bundlers" demo](/docs/demos/bundler) includes examples for specific tools. | ||||
| The ["Bundlers" demo](/docs/demos/frontend/bundler) includes complete examples. | ||||
| 
 | ||||
| ### Dynamic Imports | ||||
| 
 | ||||
|  | ||||
| @ -19,8 +19,8 @@ The ["Common Spreadsheet Format"](/docs/csf/general) is a simple object | ||||
| representation of the core concepts of a workbook. [Utilities](/docs/api/utilities/) | ||||
| provide low-level tools for working with the object. | ||||
| 
 | ||||
| For friendly JS processing, there are utility functions for converting parts of | ||||
| a worksheet to/from an Array of Arrays.  The [Tutorial](/docs/getting-started/example) | ||||
| SheetJS provides convenient methods for processing common JavaScript data | ||||
| structures. The [Export Tutorial](/docs/getting-started/examples/export) | ||||
| combines powerful JS Array methods with a network request library to download | ||||
| data, select the information we want and create a workbook file. | ||||
| 
 | ||||
|  | ||||
| @ -66,7 +66,9 @@ The idiomatic JavaScript representation of the dataset is an array of objects. | ||||
| Variable names are typically taken from the first row. Those names are used as | ||||
| keys in each observation. | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>JS Data</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>JS Data</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
| @ -518,47 +520,83 @@ for(var n = 1, mean = 0; n <= x.length; ++n) mean += (x[n-1] - mean)/n; | ||||
| 
 | ||||
| Let $M[x;m] = \frac{1}{m}\sum_{i=1}^{m}x_m$ be the mean of the first $m$ elements. Then: | ||||
| 
 | ||||
| <table style={bs}><tbody style={bs}><tr style={bs}><td style={bs}> | ||||
| <table style={bs}> | ||||
|   <tbody style={bs}> | ||||
| <tr style={bs}> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $M[x;m+1]$ | ||||
| 
 | ||||
| </td><td style={bs}> | ||||
|   </td> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $= \frac{1}{m+1}\sum_{i=1}^{m+1} x_i$ | ||||
| 
 | ||||
| </td></tr><tr style={bs}><td style={bs}> </td><td style={bs}> | ||||
|   </td> | ||||
| </tr> | ||||
| <tr style={bs}> | ||||
|   <td style={bs}> </td> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $= \frac{1}{m+1}\sum_{i=1}^{m} x_i + \frac{x_{m+1}}{m+1}$ | ||||
| 
 | ||||
| </td></tr><tr style={bs}><td style={bs}> </td><td style={bs}> | ||||
|   </td> | ||||
| </tr> | ||||
| <tr style={bs}> | ||||
|   <td style={bs}> </td> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $= \frac{m}{m+1}(\frac{1}{m}\sum_{i=1}^{m} x_i) + \frac{x_{m+1}}{m+1}$ | ||||
| 
 | ||||
| </td></tr><tr style={bs}><td style={bs}> </td><td style={bs}> | ||||
|   </td> | ||||
| </tr> | ||||
| <tr style={bs}> | ||||
|   <td style={bs}> </td> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $= \frac{m}{m+1}M[x;m] + \frac{x_{m+1}}{m+1}$ | ||||
| 
 | ||||
| </td></tr><tr style={bs}><td style={bs}> </td><td style={bs}> | ||||
|   </td> | ||||
| </tr> | ||||
| <tr style={bs}> | ||||
|   <td style={bs}> </td> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $= (1 - \frac{1}{m+1})M[x;m] + \frac{x_{m+1}}{m+1}$ | ||||
| 
 | ||||
| </td></tr><tr style={bs}><td style={bs}> </td><td style={bs}> | ||||
|   </td> | ||||
| </tr> | ||||
| <tr style={bs}> | ||||
|   <td style={bs}> </td> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $= M[x;m] + \frac{x_{m+1}}{m+1} - \frac{1}{m+1}M[x;m]$ | ||||
| 
 | ||||
| </td></tr><tr style={bs}><td style={bs}> </td><td style={bs}> | ||||
|   </td> | ||||
| </tr> | ||||
| <tr style={bs}> | ||||
|   <td style={bs}> </td> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $= M[x;m] + \frac{1}{m+1}(x_{m+1}-M[x;m])$ | ||||
| 
 | ||||
| </td></tr><tr style={bs}><td style={bs}> | ||||
|   </td> | ||||
| </tr> | ||||
| <tr style={bs}> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $new\_mean$ | ||||
| 
 | ||||
| </td><td style={bs}> | ||||
|   </td> | ||||
|   <td style={bs}> | ||||
| 
 | ||||
| $= old\_mean + (x_{m+1}-old\_mean) / (m+1)$ | ||||
| 
 | ||||
| </td></tr></tbody></table> | ||||
|   </td> | ||||
| </tr> | ||||
| 
 | ||||
|   </tbody> | ||||
| </table> | ||||
| 
 | ||||
| Switching to zero-based indexing, the relation matches the following expression: | ||||
| 
 | ||||
|  | ||||
| @ -42,7 +42,9 @@ The DanfoJS `DataFrame`[^1] represents two-dimensional tabular data. It is the | ||||
| starting point for most DanfoJS data processing tasks. A `DataFrame` typically | ||||
| corresponds to one SheetJS worksheet[^2]. | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>DanfoJS DataFrame</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>DanfoJS DataFrame</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
| @ -294,11 +296,11 @@ function DanfoToXLS() { | ||||
| [^1]: See ["Dataframe"](https://danfo.jsdata.org/api-reference/dataframe) in the DanfoJS documentation | ||||
| [^2]: See ["Sheet Objects"](/docs/csf/sheet) | ||||
| [^3]: See ["danfo.readExcel"](https://danfo.jsdata.org/api-reference/input-output/danfo.read_excel) in the DanfoJS documentation. | ||||
| [^4]: See ["Reading Files"](/docs/api/parse-options/#parsing-options) for the full list of parsing options. | ||||
| [^4]: See ["Reading Files"](/docs/api/parse-options#parsing-options) for the full list of parsing options. | ||||
| [^5]: See ["File API" in "Local File Access"](/docs/demos/local/file#file-api) for more details. | ||||
| [^6]: See ["danfo.toExcel"](https://danfo.jsdata.org/api-reference/input-output/danfo.to_excel) in the DanfoJS documentation. | ||||
| [^7]: See [`writeFile` in "Writing Files"](/docs/api/write-options) | ||||
| [^8]: See ["Writing Files"](/docs/api/write-options/#writing-options) for the full list of writing options. | ||||
| [^8]: See ["Writing Files"](/docs/api/write-options#writing-options) for the full list of writing options. | ||||
| [^9]: See ["Creating a DataFrame"](https://danfo.jsdata.org/api-reference/dataframe/creating-a-dataframe) in the DanfoJS documentation. | ||||
| [^10]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output) | ||||
| [^11]: See ["danfo.toJSON"](https://danfo.jsdata.org/api-reference/input-output/danfo.to_json) in the DanfoJS documentation. | ||||
|  | ||||
| @ -22,8 +22,8 @@ results back to spreadsheets. | ||||
| - ["CSV Data Interchange"](#csv-data-interchange) uses SheetJS to process sheets | ||||
|   and generate CSV data that TF.js can import. | ||||
| 
 | ||||
| - ["JSON Data Interchange"](#json-data-interchange) uses SheetJS to process | ||||
|   sheets and generate rows of objects that can be post-processed. | ||||
| - ["JS Array Interchange"](#js-array-interchange) uses SheetJS to process sheets | ||||
|   and generate rows of objects that can be post-processed. | ||||
| 
 | ||||
| :::info pass | ||||
| 
 | ||||
|  | ||||
| @ -219,7 +219,9 @@ const petal_length = Float64Array.from(aoa.map(row => row[C]).slice(1)); | ||||
| Some datasets are stored in tables where each row represents a variable and each | ||||
| column represents an observation: | ||||
| 
 | ||||
| <table><thead><tr><th>JavaScript</th><th>Spreadsheet</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>JavaScript</th><th>Spreadsheet</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
| ```js | ||||
| var aoa = [ | ||||
| @ -332,7 +334,9 @@ function SheetJSeriesToRows() { return (<button onClick={() => { | ||||
| A single typed array can be converted to a pure JS array with `Array.from`. For | ||||
| columns, each value should be individually wrapped in an array: | ||||
| 
 | ||||
| <table><thead><tr><th>JavaScript</th><th>Spreadsheet</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>JavaScript</th><th>Spreadsheet</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
| ```js | ||||
| var data = [ | ||||
|  | ||||
| @ -58,7 +58,9 @@ The example [presidents sheet](https://sheetjs.com/pres.xlsx) has one header row | ||||
| with "Name" and "Index" columns. The natural JS representation is an object for | ||||
| each row, using the values in the first rows as keys: | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>State</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
|  | ||||
| @ -61,7 +61,9 @@ The example [presidents sheet](https://sheetjs.com/pres.xlsx) has one header row | ||||
| with "Name" and "Index" columns. The natural JS representation is an object for | ||||
| each row, using the values in the first rows as keys: | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>State</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
|  | ||||
| @ -91,7 +91,9 @@ The example [presidents sheet](https://sheetjs.com/pres.xlsx) has one header row | ||||
| with "Name" and "Index" columns. The natural JS representation is an object for | ||||
| each row, using the values in the first rows as keys: | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>State</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
|  | ||||
| @ -60,7 +60,9 @@ The example [presidents sheet](https://sheetjs.com/pres.xlsx) has one header row | ||||
| with "Name" and "Index" columns. The natural JS representation is an object for | ||||
| each row, using the values in the first rows as keys: | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>State</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
|  | ||||
| @ -171,7 +171,9 @@ The example [presidents sheet](https://sheetjs.com/pres.xlsx) has one header row | ||||
| with "Name" and "Index" columns. The natural JS representation is an object for | ||||
| each row, using the values in the first rows as keys: | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>State</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
|  | ||||
| @ -65,7 +65,7 @@ The following demos are in separate pages: | ||||
|     <a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)} | ||||
|   </li>); | ||||
| })} | ||||
| <li><a href="/docs/demos/frontend/bundler#dojo">Dojo Toolkit</a></li> | ||||
| <li><a href="/docs/demos/frontend/bundler#snowpack">Snowpack</a></li> | ||||
| <li><a href="/docs/demos/frontend/bundler#wmr">WMR</a></li> | ||||
| <li><a href="/docs/demos/frontend/bundler/#dojo">Dojo Toolkit</a></li> | ||||
| <li><a href="/docs/demos/frontend/bundler/#snowpack">Snowpack</a></li> | ||||
| <li><a href="/docs/demos/frontend/bundler/#wmr">WMR</a></li> | ||||
| </ul> | ||||
|  | ||||
| @ -69,7 +69,7 @@ AstroJS has introduced a number of breaking changes in minor releases. | ||||
| 
 | ||||
| :::info pass | ||||
| 
 | ||||
| This demo uses ["Base64 Loader"](/docs/demos/static/vitejs#base64-loader) | ||||
| This demo uses ["Base64 Loader"](/docs/demos/static/vitejs#base64-plugin) | ||||
| from the ViteJS demo. | ||||
| 
 | ||||
| The ViteJS demo used the query `?b64` to identify files. To play nice with | ||||
|  | ||||
| @ -69,7 +69,9 @@ imported from any component or script in the app. | ||||
| 
 | ||||
| For simplicity, this demo uses an "Array of Arrays"[^2] as the internal state. | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>Array of Arrays</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>Array of Arrays</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
|  | ||||
| @ -47,9 +47,9 @@ projects that can use community modules.  However, its "lean core" approach | ||||
| forces developers to learn iOS/Android programming or use community modules to | ||||
| provide basic app features. | ||||
| 
 | ||||
| The original Web View framework was PhoneGap/Cordova.  The modern frameworks | ||||
| are built atop Cordova.  Cordova is waning in popularity but it has a deep | ||||
| library of community modules to solve many problems. | ||||
| The original Web View framework was PhoneGap/Cordova. The modern frameworks are | ||||
| built atop Cordova. Cordova is waning in popularity but it has a deep library of | ||||
| community modules to solve many problems. | ||||
| 
 | ||||
| Before creating a new app, it is important to identify what features the app | ||||
| should support and investigate community modules.  If there are popular modules | ||||
|  | ||||
| @ -84,7 +84,9 @@ imported from any component or script in the app. | ||||
| 
 | ||||
| For simplicity, this demo uses an "Array of Arrays"[^2] as the internal state. | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>Array of Arrays</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>Array of Arrays</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
|  | ||||
| @ -9,6 +9,11 @@ sidebar_custom_props: | ||||
| import Tabs from '@theme/Tabs'; | ||||
| import TabItem from '@theme/TabItem'; | ||||
| 
 | ||||
| Structured Query Language ("SQL") is a popular declarative language for issuing | ||||
| commands to database servers. | ||||
| 
 | ||||
| ## Raw SQL Operations | ||||
| 
 | ||||
| ### Generating Tables | ||||
| 
 | ||||
| This example will fetch https://sheetjs.com/data/cd.xls, scan the columns of the | ||||
| @ -148,7 +153,7 @@ types and other database minutiae. | ||||
| 
 | ||||
| ### Other SQL Databases | ||||
| 
 | ||||
| The `generate_sql` function from ["Building Schemas from Worksheets"](#building-schemas-from-worksheets) | ||||
| The `generate_sql` function from ["Generating Tables"](#generating-tables) | ||||
| can be adapted to generate SQL statements for a variety of databases, including: | ||||
| 
 | ||||
| **PostgreSQL** | ||||
|  | ||||
| @ -21,8 +21,8 @@ libraries in production applications. | ||||
| ::: | ||||
| 
 | ||||
| The IndexedDB API provides an in-browser sandboxed local data store for JSON | ||||
| objects. Like the [Local Storage API](/docs/demos/data/storageapi), IndexedDB is | ||||
| a popular choice for offline storage. | ||||
| objects. Like the [Local Storage API](/docs/demos/local/storageapi), IndexedDB | ||||
| is a popular choice for offline storage. | ||||
| 
 | ||||
| ## Wrapper Libraries | ||||
| 
 | ||||
|  | ||||
| @ -26,7 +26,7 @@ of code that are run in NodeJS or other server-side JS platforms. While SheetJS | ||||
| libraries can run in server-side environments, the cloud platforms can corrupt | ||||
| form data.  This can be disabled with cloud-specific configuration: | ||||
| 
 | ||||
| - [AWS Lambda Functions](/docs/demos/cloud/aws#aws-lambda-functions) | ||||
| - [AWS Lambda Functions](/docs/demos/cloud/aws#lambda-functions) | ||||
| - [Azure Functions](/docs/demos/cloud/azure#azure-functions) | ||||
| - [GitHub Actions](/docs/demos/cloud/github) | ||||
| - [Deno Deploy](/docs/demos/cloud/deno) | ||||
| @ -38,7 +38,7 @@ files typically contain binary characters.  Cloud storage APIs can corrupt | ||||
| 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) | ||||
| - [Azure Blob Storage](/docs/demos/cloud/azure#blob-storage) | ||||
| 
 | ||||
| ### File Hosting | ||||
| 
 | ||||
|  | ||||
| @ -64,9 +64,9 @@ npx office-addin-usage-data list | ||||
| The [SheetJS NodeJS module](/docs/getting-started/installation/nodejs) can be | ||||
| imported from scripts in an Excel Custom Functions project. | ||||
| 
 | ||||
| The [`sheet_to_json`](/docs/api/utilities#json) helper function can generate | ||||
| arrays of arrays of values based on the worksheet data.  Excel custom functions | ||||
| transparently treat these as Dynamic Arrays. | ||||
| The [`sheet_to_json`](/docs/api/utilities/array#array-output) helper function | ||||
| can generate arrays of arrays of values based on the worksheet data. Excel | ||||
| custom functions transparently treat these as Dynamic Arrays. | ||||
| 
 | ||||
| This example fetches a file, parses the data, and extracts the first worksheet: | ||||
| 
 | ||||
|  | ||||
| @ -19,8 +19,9 @@ to a remote server. | ||||
| The following diagrams show the normal and Web Worker flows when exporting a | ||||
| dataset. The regions with a red background mark when the browser is frozen. | ||||
| 
 | ||||
| <table><thead><tr><th>Normal Export</th><th>Web Worker Export</th></tr> | ||||
|   </thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Normal Export</th><th>Web Worker Export</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
| ```mermaid | ||||
| sequenceDiagram | ||||
| @ -497,7 +498,7 @@ self.addEventListener('message', (e) => { | ||||
| ### Streaming Write | ||||
| 
 | ||||
| A more general discussion, including row-oriented processing demos, is included | ||||
| in the ["Large Datasets"](/docs/demos/stream#browser) demo. | ||||
| in the ["Large Datasets"](/docs/demos/bigdata/stream#browser) demo. | ||||
| 
 | ||||
| `XLSX.stream.to_csv` incrementally generates CSV rows. | ||||
| 
 | ||||
|  | ||||
| @ -21,10 +21,11 @@ Since many of the techniques only work in a few engines, they are not embedded | ||||
| in the library. They are recommended only when traditional approaches falter. | ||||
| 
 | ||||
| <ul>{useCurrentSidebarCategory().items.map((item, index) => { | ||||
|   const listyle = (item.customProps?.icon) ? { | ||||
|   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)} | ||||
|     <a href={item.href}>{item.label}</a> | ||||
|     <span>{item.customProps?.summary && (" - " + item.customProps.summary)}</span> | ||||
|   </li>); | ||||
| })}</ul> | ||||
|  | ||||
| @ -19,8 +19,8 @@ more performant engine like [`v8`](/docs/demos/engines/v8#rust) | ||||
| [SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing | ||||
| data from spreadsheets. | ||||
| 
 | ||||
| The ["Complete Example"](#integration-example) section creates a command-line | ||||
| tool for reading data from spreadsheets and generating CSV rows. | ||||
| The ["Complete Example"](#complete-example) section creates a command-line tool | ||||
| for reading data from spreadsheets and generating CSV rows. | ||||
| 
 | ||||
| ## Integration Details | ||||
| 
 | ||||
|  | ||||
| @ -171,6 +171,6 @@ NodeJS and Deno, Adobe UXP and other platforms. | ||||
| This demo has been moved [to a dedicated page](/docs/demos/engines/v8). | ||||
| The demo includes examples in C++ and Rust. | ||||
| 
 | ||||
| The ["Python + Pandas" demo](/docs/demos/engines/pandas) uses V8 with Python. | ||||
| The ["Python + Pandas" demo](/docs/demos/math/pandas) uses V8 with Python. | ||||
| 
 | ||||
| [^1]: See ["Initialize Hermes"](/docs/demos/engines/hermes#initialize-hermes) in the Hermes demo. | ||||
| @ -23,8 +23,8 @@ in the [issue tracker](https://git.sheetjs.com/sheetjs/docs.sheetjs.com/issues) | ||||
| - [`Web Workers`](/docs/demos/bigdata/worker) | ||||
| - [`Typed Arrays`](/docs/demos/math) | ||||
| - [`Local File Access`](/docs/demos/local/file) | ||||
| - [`LocalStorage and SessionStorage`](/docs/demos/data/storageapi) | ||||
| - [`Web SQL Database`](/docs/demos/data/websql) | ||||
| - [`LocalStorage and SessionStorage`](/docs/demos/local/storageapi) | ||||
| - [`Web SQL Database`](/docs/demos/local/websql) | ||||
| - [`IndexedDB`](/docs/demos/local/indexeddb) | ||||
| 
 | ||||
| ### Web Frameworks | ||||
| @ -44,8 +44,8 @@ in the [issue tracker](https://git.sheetjs.com/sheetjs/docs.sheetjs.com/issues) | ||||
| - [`react-data-grid`](/docs/demos/grid/rdg) | ||||
| - [`glide-data-grid`](/docs/demos/grid/gdg) | ||||
| - [`vue3-table-lite`](/docs/demos/grid/vtl) | ||||
| - [`angular-ui-grid`](/docs/demos/grid#angular-ui-grid) | ||||
| - [`material ui`](/docs/demos/grid#material-ui-table) | ||||
| - [`angular-ui-grid`](/docs/demos/grid/#angular-ui-grid) | ||||
| - [`material ui`](/docs/demos/grid/mui) | ||||
| 
 | ||||
| ### iOS and Android Mobile Apps | ||||
| 
 | ||||
| @ -107,8 +107,8 @@ in the [issue tracker](https://git.sheetjs.com/sheetjs/docs.sheetjs.com/issues) | ||||
| ### Platforms and Integrations | ||||
| 
 | ||||
| - [`Command-Line Tools`](/docs/demos/cli) | ||||
| - [`NodeJS Server-Side Processing`](/docs/demos/net/server#nodejs) | ||||
| - [`Deno Server-Side Processing`](/docs/demos/net/server#deno) | ||||
| - [`NodeJS Server-Side Processing`](/docs/demos/net/server/#nodejs) | ||||
| - [`Deno Server-Side Processing`](/docs/demos/net/server/#deno) | ||||
| - [`Headless Automation`](/docs/demos/net/headless) | ||||
| - [`Databases and Structured Data Stores`](/docs/demos/data) | ||||
| - [`NoSQL and Unstructured Data Stores`](/docs/demos/data) | ||||
| @ -116,18 +116,17 @@ in the [issue tracker](https://git.sheetjs.com/sheetjs/docs.sheetjs.com/issues) | ||||
| 
 | ||||
| ### Bundlers and Tooling | ||||
| 
 | ||||
| - [`browserify`](/docs/demos/frontend/bundler#browserify) | ||||
| - [`bun`](/docs/demos/frontend/bundler#bun) | ||||
| - [`browserify`](/docs/demos/frontend/bundler/browserify) | ||||
| - [`bun`]((/docs/getting-started/installation/bun#bundling) | ||||
| - [`esbuild`](/docs/demos/frontend/bundler/esbuild) | ||||
| - [`parcel`](/docs/demos/frontend/bundler#parcel) | ||||
| - [`parcel`](/docs/demos/frontend/bundler/parcel) | ||||
| - [`requirejs`](/docs/demos/frontend/bundler/requirejs) | ||||
| - [`rollup`](/docs/demos/frontend/bundler#rollup) | ||||
| - [`snowpack`](/docs/demos/frontend/bundler#snowpack) | ||||
| - [`swc`](/docs/demos/frontend/bundler#swc) | ||||
| - [`rollup`](/docs/demos/frontend/bundler/rollup) | ||||
| - [`swc`](/docs/demos/frontend/bundler/swcpack) | ||||
| - [`systemjs`](/docs/demos/frontend/bundler/systemjs) | ||||
| - [`vite`](/docs/demos/frontend/bundler#vite) | ||||
| - [`vite`](/docs/demos/frontend/bundler/vitejs) | ||||
| - [`webpack`](/docs/demos/frontend/bundler/webpack) | ||||
| - [`wmr`](/docs/demos/frontend/bundler#wmr) | ||||
| - [`wmr`](/docs/demos/frontend/bundler/#wmr) | ||||
| 
 | ||||
| ### Other Programming Languages | ||||
| 
 | ||||
|  | ||||
| @ -99,13 +99,13 @@ var XLSX = require("xlsx"); | ||||
| var workbook = XLSX.readFile(path); | ||||
| ``` | ||||
| 
 | ||||
| Electron APIs have changed over time.  The [`electron` demo](/docs/demos/desktop#electron) | ||||
| Electron APIs have changed over time.  The [`electron` demo](/docs/demos/desktop/electron) | ||||
| shows a complete example and details the required version-specific settings. | ||||
| 
 | ||||
|   </TabItem> | ||||
|   <TabItem value="reactnative" label="React Native"> | ||||
| 
 | ||||
| [The React Native Demo](/docs/demos/mobile#rn-file-plugins) covers tested plugins. | ||||
| [The React Native Demo](/docs/demos/mobile/reactnative#rn-file-plugins) covers tested plugins. | ||||
| 
 | ||||
|   </TabItem> | ||||
|   <TabItem value="extendscript" label="Photoshop"> | ||||
| @ -130,7 +130,8 @@ var thisFile = File.openDialog("Select a spreadsheet"); | ||||
| var workbook = XLSX.readFile(thisFile.absoluteURI); | ||||
| ``` | ||||
| 
 | ||||
| The [`extendscript` demo](/docs/demos/extendscript) includes a more complex example. | ||||
| The [`extendscript` demo](/docs/demos/extensions/extendscript) includes complete | ||||
| examples for Photoshop and InDesign. | ||||
| 
 | ||||
|   </TabItem> | ||||
|   <TabItem value="deno" label="Deno"> | ||||
| @ -330,7 +331,7 @@ const server = http.createServer((req, res) => { | ||||
| }).listen(process.env.PORT || 7262); | ||||
| ``` | ||||
| 
 | ||||
| The [`server` demo](/docs/demos/server) has more advanced examples. | ||||
| The [`server` demo](/docs/demos/net/server) includes more advanced examples. | ||||
| 
 | ||||
|   </TabItem> | ||||
|   <TabItem value="deno" label="Deno"> | ||||
| @ -434,7 +435,8 @@ req.onload = function(e) { | ||||
| req.send(); | ||||
| ``` | ||||
| 
 | ||||
| The [`xhr` demo](/docs/demos/network) includes a longer discussion and more examples. | ||||
| The [HTTP Downloads demo](/docs/demos/net/network) includes examples using | ||||
| browser APIs and wrapper libraries. | ||||
| 
 | ||||
| https://oss.sheetjs.com/sheetjs/ajax.html shows fallback approaches for IE6+. | ||||
| 
 | ||||
| @ -727,7 +729,7 @@ var worksheet = XLSX.utils.aoa_to_sheet([ | ||||
| ]); | ||||
| ``` | ||||
| 
 | ||||
| ["Array of Arrays Input"](/docs/api/utilities#array-of-arrays-input) describes | ||||
| ["Array of Arrays Input"](/docs/api/utilities/array#array-of-arrays-input) describes | ||||
| the function and the optional `opts` argument in more detail. | ||||
| 
 | ||||
| 
 | ||||
| @ -742,7 +744,7 @@ generating a worksheet object.  By default, it will generate a header row and | ||||
| one row per object in the array.  The optional `opts` argument has settings to | ||||
| control the column order and header output. | ||||
| 
 | ||||
| ["Array of Objects Input"](/docs/api/utilities#array-of-objects-input) describes | ||||
| ["Array of Objects Input"](/docs/api/utilities/array#array-of-objects-input) describes | ||||
| the function and the optional `opts` argument in more detail. | ||||
| 
 | ||||
| #### Examples | ||||
| @ -798,7 +800,7 @@ is missing or no options are specified, the default name `Sheet1` is used. | ||||
| 
 | ||||
| #### Examples | ||||
| 
 | ||||
| The [Headless Demo](/docs/demos/headless) includes examples of | ||||
| The [Headless Demo](/docs/demos/net/headless) includes examples of | ||||
| server-side spreadsheet generation from HTML TABLE elements using headless | ||||
| Chromium ("Puppeteer") and other browsers ("Playwright") | ||||
| 
 | ||||
| @ -856,8 +858,8 @@ var workbook = XLSX.read(htmlstr, {type:"string"}); | ||||
| <details> | ||||
|   <summary><b>Chrome/Chromium Extension</b> (click to show)</summary> | ||||
| 
 | ||||
| The [`chrome` demo](/docs/demos/chromium/) shows a complete example and details | ||||
| the required permissions and other settings. | ||||
| The ["Chrome and Chromium" demo](/docs/demos/extensions/chromium/) includes a | ||||
| complete example and enumerates the required permissions and other settings. | ||||
| 
 | ||||
| In an extension, it is recommended to generate the workbook in a content script | ||||
| and pass the object back to the extension: | ||||
|  | ||||
| @ -155,7 +155,7 @@ XLSX.utils.sheet_add_aoa(worksheet, [ | ||||
| ], { origin: "B3" }); | ||||
| ``` | ||||
| 
 | ||||
| ["Array of Arrays Input"](/docs/api/utilities#array-of-arrays-input) describes the | ||||
| ["Array of Arrays Input"](/docs/api/utilities/array#array-of-arrays-input) describes the | ||||
| function and the optional `opts` argument in more detail. | ||||
| 
 | ||||
| #### Examples | ||||
|  | ||||
| @ -237,13 +237,13 @@ var XLSX = require("xlsx"); | ||||
| XLSX.writeFile(workbook, "out.xlsb"); | ||||
| ``` | ||||
| 
 | ||||
| Electron APIs have changed over time.  The [`electron` demo](/docs/demos/desktop#electron) | ||||
| Electron APIs have changed over time.  The [`electron` demo](/docs/demos/desktop/electron) | ||||
| shows a complete example and details the required version-specific settings. | ||||
| 
 | ||||
|   </TabItem> | ||||
|   <TabItem value="reactnative" label="React Native"> | ||||
| 
 | ||||
| [The React Native Demo](/docs/demos/mobile#rn-file-plugins) covers tested plugins. | ||||
| [The React Native Demo](/docs/demos/mobile/reactnative#rn-file-plugins) covers tested plugins. | ||||
| 
 | ||||
|   </TabItem> | ||||
|   <TabItem value="extendscript" label="Photoshop"> | ||||
| @ -260,12 +260,13 @@ var thisFile = File.saveDialog("Select an output file", "*.xlsx;*.xls"); | ||||
| XLSX.writeFile(workbook, thisFile.absoluteURI); | ||||
| ``` | ||||
| 
 | ||||
| The [`extendscript` demo](/docs/demos/extendscript) includes a more complex example. | ||||
| The [`extendscript` demo](/docs/demos/extensions/extendscript) includes complete | ||||
| examples for Photoshop and InDesign. | ||||
| 
 | ||||
|   </TabItem> | ||||
|   <TabItem value="headless" label="Headless"> | ||||
| 
 | ||||
| The [`headless` demo](/docs/demos/headless) includes complete | ||||
| The [`headless` demo](/docs/demos/net/headless) includes complete | ||||
| examples of converting HTML TABLE elements to XLSB workbooks using Puppeteer | ||||
| and other headless automation tools. | ||||
| 
 | ||||
| @ -502,8 +503,8 @@ is to adjust the server process or Lambda function to accept Base64 strings. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| A complete example using XHR is [included in the XHR demo](/docs/demos/network), | ||||
| along with examples for fetch and wrapper libraries. | ||||
| The [HTTP Uploads demo](/docs/demos/net/upload) includes examples using browser | ||||
| APIs and wrapper libraries. | ||||
| 
 | ||||
| Under normal circumstances, a `Blob` can be generated from the `array` output: | ||||
| 
 | ||||
| @ -592,7 +593,8 @@ var aoa = XLSX.utils.sheet_to_json(worksheet, {...opts, header: 1}); | ||||
| The `sheet_to_json` utility function walks a workbook in row-major order, | ||||
| generating an array of objects.  The second `opts` argument controls a number of | ||||
| export decisions including the type of values (JS values or formatted text). The | ||||
| ["JSON"](/docs/api/utilities#json) section describes the argument in more detail. | ||||
| ["Array Output"](/docs/api/utilities/array#array-output) section describes | ||||
| supported options. | ||||
| 
 | ||||
| By default, `sheet_to_json` scans the first row and uses the values as headers. | ||||
| With the `header: 1` option, the function exports an array of arrays of values. | ||||
| @ -845,4 +847,4 @@ Readable Stream. | ||||
| - `XLSX.stream.to_html` is the streaming version of `XLSX.utils.sheet_to_html`. | ||||
| - `XLSX.stream.to_json` is the streaming version of `XLSX.utils.sheet_to_json`. | ||||
| 
 | ||||
| Examples are included in ["Large Datasets"](/docs/demos/stream#streaming-write) | ||||
| Examples are included in ["Large Datasets"](/docs/demos/bigdata/stream#streaming-write) | ||||
|  | ||||
| @ -44,10 +44,9 @@ expected to be an array of row metadata objects. | ||||
| This example creates a workbook that includes custom row heights, hidden rows, | ||||
| and row outline levels. | ||||
| 
 | ||||
| <table><thead><tr> | ||||
|   <th>Excel for Windows</th> | ||||
|   <th>Excel for Mac</th> | ||||
| </tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Excel for Windows</th><th>Excel for Mac</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
|  | ||||
| @ -27,11 +27,13 @@ The ["Functions"](#functions) section describes the related functions. | ||||
| 
 | ||||
| The spiritual equivalent of the grid in JavaScript is an array of arrays: | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>Array of Arrays</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>Array of Arrays</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
| </td><td> | ||||
|   </td><td> | ||||
| 
 | ||||
| ```js | ||||
| [ | ||||
| @ -44,7 +46,8 @@ The spiritual equivalent of the grid in JavaScript is an array of arrays: | ||||
| ] | ||||
| ``` | ||||
| 
 | ||||
| </td></tr></tbody></table> | ||||
|   </td></tr></tbody> | ||||
| </table> | ||||
| 
 | ||||
| Each array within the structure corresponds to one row. Individual data points | ||||
| can be read by indexing by row index and by column index: | ||||
| @ -67,11 +70,13 @@ var value_at_A2 = aoa[1][0]; // Bill Clinton | ||||
| 
 | ||||
| Arrays of objects are commonly used to represent rows from a database: | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>Array of Objects</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>Array of Objects</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
| </td><td> | ||||
|   </td><td> | ||||
| 
 | ||||
| ```js | ||||
| [ | ||||
| @ -83,7 +88,8 @@ Arrays of objects are commonly used to represent rows from a database: | ||||
| ] | ||||
| ``` | ||||
| 
 | ||||
| </td></tr></tbody></table> | ||||
|    </td></tr></tbody> | ||||
| </table> | ||||
| 
 | ||||
| Each object within the structure corresponds to one data row. The first row of | ||||
| the spreadsheet is interpreted as the header row. | ||||
| @ -141,7 +147,7 @@ The function takes an options argument: | ||||
| |`sheetStubs` |  false  | Create cell objects of type `z` for `null` values    | | ||||
| |`nullError`  |  false  | If true, emit `#NULL!` error cells for `null` values | | ||||
| |`UTC`        |  false  | If true, dates are interpreted using UTC methods **  | | ||||
| |`dense`      |  false  | Emit [dense sheet object](docs/csf/sheet#dense-mode) | | ||||
| |`dense`      |  false  | Emit [dense sheets](/docs/csf/sheet#dense-mode)      | | ||||
| 
 | ||||
| [UTC option is explained in "Dates"](/docs/csf/features/dates#utc-option) | ||||
| 
 | ||||
| @ -202,7 +208,9 @@ accepts an options argument: | ||||
| 
 | ||||
| The [example worksheet](#example-sheet) can be built up in the following order: | ||||
| 
 | ||||
| <table><thead><tr><th>Spreadsheet</th><th>Operations</th></tr></thead><tbody><tr><td> | ||||
| <table> | ||||
|   <thead><tr><th>Spreadsheet</th><th>Operations</th></tr></thead> | ||||
|   <tbody><tr><td> | ||||
| 
 | ||||
| <table> | ||||
| <tr {...r}><td>S</td><td>h</td><td>e</td><td>e</td><td>t</td><td>J</td><td>S</td></tr> | ||||
| @ -288,7 +296,7 @@ default column order is determined by the first appearance of the field using | ||||
| |`skipHeader` |  false  | If true, do not include header row in output         | | ||||
| |`nullError`  |  false  | If true, emit `#NULL!` error cells for `null` values | | ||||
| |`UTC`        |  false  | If true, dates are interpreted using UTC methods **  | | ||||
| |`dense`      |  false  | Emit [dense sheet object](docs/csf/sheet#dense-mode) | | ||||
| |`dense`      |  false  | Emit [dense sheets](/docs/csf/sheet#dense-mode)      | | ||||
| 
 | ||||
| [UTC option is explained in "Dates"](/docs/csf/features/dates#utc-option) | ||||
| 
 | ||||
|  | ||||
| @ -65,7 +65,7 @@ The generated table will include special data attributes on each `TD` element: | ||||
| 
 | ||||
| | Attribute | Description                                                  | | ||||
| |:----------|:-------------------------------------------------------------| | ||||
| | `data-t`  | Override [Cell Type](/docs/csf/cell#data-types)              | | ||||
| | `data-t`  | Override [Cell Type](/docs/csf/cell#cell-types)              | | ||||
| | `data-v`  | Override Cell Value                                          | | ||||
| | `data-z`  | Override [Number Format](/docs/csf/features/nf)              | | ||||
| 
 | ||||
|  | ||||
| @ -332,7 +332,7 @@ The `fs` module is automatically loaded in scripts using `require`: | ||||
| var XLSX = require("xlsx"); // automatically loads `fs` | ||||
| ``` | ||||
| 
 | ||||
| Using the [ESM import](/docs/getting-started/installation/nodejs/#esm-import), | ||||
| Using the [ESM import](/docs/getting-started/installation/nodejs#esm-import), | ||||
| the `fs` module must be imported and passed to the library: | ||||
| 
 | ||||
| ```js | ||||
|  | ||||
| @ -1,15 +1,19 @@ | ||||
| import {themes as prismThemes} from 'prism-react-renderer'; | ||||
| const math = require('remark-math'); | ||||
| const katex = require('rehype-katex'); | ||||
| 
 | ||||
| // @ts-check
 | ||||
| // Note: type annotations allow type checking and IDEs autocompletion
 | ||||
| 
 | ||||
| /** @typedef { import('prism-react-renderer').PrismTheme['styles'] } PrismThemeStyle */ | ||||
| /** @typedef { import('prism-react-renderer').PrismTheme['styles'][number]['style'] } PrismThemeEntry */ | ||||
| 
 | ||||
| /**  | ||||
| /** | ||||
|   Updates styles array from prisma theme based off token type | ||||
|   @type {(theme: PrismThemeStyle, replace: Record<string, PrismThemeEntry>) => PrismThemeStyle}  | ||||
|   @type {(theme: PrismThemeStyle, replace: Record<string, PrismThemeEntry>) => PrismThemeStyle} | ||||
| */ | ||||
| const updateThemeStyles = (styles, replace) => { | ||||
| 	const copy = structuredClone(styles)  | ||||
| 	const copy = structuredClone(styles); | ||||
| 
 | ||||
| 	const types = Object.keys(replace) | ||||
| 	copy.forEach(style => { | ||||
| @ -23,11 +27,8 @@ const updateThemeStyles = (styles, replace) => { | ||||
| 	return copy | ||||
| } | ||||
| 
 | ||||
| const lightCodeTheme = require('prism-react-renderer/themes/github'); | ||||
| const darkCodeTheme = require('prism-react-renderer/themes/dracula'); | ||||
| 
 | ||||
| const math = require('remark-math'); | ||||
| const katex = require('rehype-katex'); | ||||
| const lightCodeTheme = prismThemes.github; | ||||
| const darkCodeTheme = prismThemes.dracula; | ||||
| 
 | ||||
| /** @type {import('@docusaurus/types').Config} */ | ||||
| const config = { | ||||
|  | ||||
| @ -13,25 +13,30 @@ | ||||
|     "write-translations": "docusaurus write-translations", | ||||
|     "write-heading-ids": "docusaurus write-heading-ids" | ||||
|   }, | ||||
|   "overrides": { | ||||
|     "@cmfcmf/docusaurus-search-local": { | ||||
|       "@docusaurus/core": "3.2.1" | ||||
|     } | ||||
|   }, | ||||
|   "dependencies": { | ||||
|     "@cmfcmf/docusaurus-search-local": "0.11.0", | ||||
|     "@docusaurus/core": "2.4.1", | ||||
|     "@docusaurus/plugin-client-redirects": "2.4.1", | ||||
|     "@docusaurus/preset-classic": "2.4.1", | ||||
|     "@docusaurus/theme-common": "2.4.1", | ||||
|     "@docusaurus/theme-live-codeblock": "2.4.1", | ||||
|     "@docusaurus/theme-mermaid": "2.4.1", | ||||
|     "@mdx-js/react": "1.6.22", | ||||
|     "clsx": "1.2.1", | ||||
|     "prism-react-renderer": "1.3.5", | ||||
|     "react": "17.0.2", | ||||
|     "react-dom": "17.0.2", | ||||
|     "rehype-katex": "4.0.0", | ||||
|     "remark-math": "3.0.1", | ||||
|     "@cmfcmf/docusaurus-search-local": "1.1.0", | ||||
|     "@docusaurus/core": "3.2.1", | ||||
|     "@docusaurus/plugin-client-redirects": "3.2.1", | ||||
|     "@docusaurus/preset-classic": "3.2.1", | ||||
|     "@docusaurus/theme-common": "3.2.1", | ||||
|     "@docusaurus/theme-live-codeblock": "3.2.1", | ||||
|     "@docusaurus/theme-mermaid": "3.2.1", | ||||
|     "@mdx-js/react": "3.0.1", | ||||
|     "clsx": "2.1.0", | ||||
|     "prism-react-renderer": "2.3.1", | ||||
|     "react": "18.2.0", | ||||
|     "react-dom": "18.2.0", | ||||
|     "rehype-katex": "7.0.0", | ||||
|     "remark-math": "6.0.0", | ||||
|     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz" | ||||
|   }, | ||||
|   "devDependencies": { | ||||
|     "@docusaurus/module-type-aliases": "2.4.1" | ||||
|     "@docusaurus/module-type-aliases": "3.2.1" | ||||
|   }, | ||||
|   "browserslist": { | ||||
|     "production": [ | ||||
|  | ||||
							
								
								
									
										39
									
								
								docz/src/theme/Admonition/Layout/index.js
									
									
									
									
									
										Normal file
									
								
							
							
								
								
								
								
								
									
									
								
							
						
						
									
										39
									
								
								docz/src/theme/Admonition/Layout/index.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,39 @@ | ||||
| import React from 'react'; | ||||
| import clsx from 'clsx'; | ||||
| import {ThemeClassNames} from '@docusaurus/theme-common'; | ||||
| import styles from './styles.module.css'; | ||||
| function AdmonitionContainer({type, className, children}) { | ||||
|   return ( | ||||
|     <div | ||||
|       className={clsx( | ||||
|         ThemeClassNames.common.admonition, | ||||
|         ThemeClassNames.common.admonitionType(type), | ||||
|         styles.admonition, | ||||
|         className, | ||||
|       )}> | ||||
|       {children} | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| function AdmonitionHeading({icon, title}) { | ||||
|   return ( | ||||
|     <div className={styles.admonitionHeading}> | ||||
|       <span className={styles.admonitionIcon}>{icon}</span> | ||||
|       {title} | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| function AdmonitionContent({children}) { | ||||
|   return children ? ( | ||||
|     <div className={styles.admonitionContent}>{children}</div> | ||||
|   ) : null; | ||||
| } | ||||
| export default function AdmonitionLayout(props) { | ||||
|   const {type, icon, title, children, className} = props; | ||||
|   return ( | ||||
|     <AdmonitionContainer type={type} className={className}> | ||||
|       {title != "pass" && <AdmonitionHeading title={title} icon={icon} />} | ||||
|       <AdmonitionContent>{children}</AdmonitionContent> | ||||
|     </AdmonitionContainer> | ||||
|   ); | ||||
| } | ||||
| @ -6,6 +6,10 @@ | ||||
|   font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) / | ||||
|     var(--ifm-heading-line-height) var(--ifm-heading-font-family); | ||||
|   text-transform: uppercase; | ||||
| } | ||||
| 
 | ||||
| /* Heading alone without content (does not handle fragment content) */ | ||||
| .admonitionHeading:not(:last-child) { | ||||
|   margin-bottom: 0.3rem; | ||||
| } | ||||
| 
 | ||||
| @ -1,180 +1,18 @@ | ||||
| import React from 'react'; | ||||
| import clsx from 'clsx'; | ||||
| import {ThemeClassNames} from '@docusaurus/theme-common'; | ||||
| import Translate from '@docusaurus/Translate'; | ||||
| import styles from './styles.module.css'; | ||||
| function NoteIcon() { | ||||
|   return ( | ||||
|     <svg viewBox="0 0 14 16"> | ||||
|       <path | ||||
|         fillRule="evenodd" | ||||
|         d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" | ||||
|       /> | ||||
|     </svg> | ||||
|   ); | ||||
| } | ||||
| function TipIcon() { | ||||
|   return ( | ||||
|     <svg viewBox="0 0 12 16"> | ||||
|       <path | ||||
|         fillRule="evenodd" | ||||
|         d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z" | ||||
|       /> | ||||
|     </svg> | ||||
|   ); | ||||
| } | ||||
| function DangerIcon() { | ||||
|   return ( | ||||
|     <svg viewBox="0 0 12 16"> | ||||
|       <path | ||||
|         fillRule="evenodd" | ||||
|         d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z" | ||||
|       /> | ||||
|     </svg> | ||||
|   ); | ||||
| } | ||||
| function InfoIcon() { | ||||
|   return ( | ||||
|     <svg viewBox="0 0 14 16"> | ||||
|       <path | ||||
|         fillRule="evenodd" | ||||
|         d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" | ||||
|       /> | ||||
|     </svg> | ||||
|   ); | ||||
| } | ||||
| function CautionIcon() { | ||||
|   return ( | ||||
|     <svg viewBox="0 0 16 16"> | ||||
|       <path | ||||
|         fillRule="evenodd" | ||||
|         d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z" | ||||
|       /> | ||||
|     </svg> | ||||
|   ); | ||||
| } | ||||
| // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 | ||||
| const AdmonitionConfigs = { | ||||
|   note: { | ||||
|     infimaClassName: 'secondary', | ||||
|     iconComponent: NoteIcon, | ||||
|     label: ( | ||||
|       <Translate | ||||
|         id="theme.admonition.note" | ||||
|         description="The default label used for the Note admonition (:::note)"> | ||||
|         note | ||||
|       </Translate> | ||||
|     ), | ||||
|   }, | ||||
|   tip: { | ||||
|     infimaClassName: 'success', | ||||
|     iconComponent: TipIcon, | ||||
|     label: ( | ||||
|       <Translate | ||||
|         id="theme.admonition.tip" | ||||
|         description="The default label used for the Tip admonition (:::tip)"> | ||||
|         tip | ||||
|       </Translate> | ||||
|     ), | ||||
|   }, | ||||
|   danger: { | ||||
|     infimaClassName: 'danger', | ||||
|     iconComponent: DangerIcon, | ||||
|     label: ( | ||||
|       <Translate | ||||
|         id="theme.admonition.danger" | ||||
|         description="The default label used for the Danger admonition (:::danger)"> | ||||
|         danger | ||||
|       </Translate> | ||||
|     ), | ||||
|   }, | ||||
|   info: { | ||||
|     infimaClassName: 'info', | ||||
|     iconComponent: InfoIcon, | ||||
|     label: ( | ||||
|       <Translate | ||||
|         id="theme.admonition.info" | ||||
|         description="The default label used for the Info admonition (:::info)"> | ||||
|         info | ||||
|       </Translate> | ||||
|     ), | ||||
|   }, | ||||
|   caution: { | ||||
|     infimaClassName: 'warning', | ||||
|     iconComponent: CautionIcon, | ||||
|     label: ( | ||||
|       <Translate | ||||
|         id="theme.admonition.caution" | ||||
|         description="The default label used for the Caution admonition (:::caution)"> | ||||
|         caution | ||||
|       </Translate> | ||||
|     ), | ||||
|   }, | ||||
| }; | ||||
| // Legacy aliases, undocumented but kept for retro-compatibility
 | ||||
| const aliases = { | ||||
|   secondary: 'note', | ||||
|   important: 'info', | ||||
|   success: 'tip', | ||||
|   warning: 'danger', | ||||
| }; | ||||
| function getAdmonitionConfig(unsafeType) { | ||||
|   const type = aliases[unsafeType] ?? unsafeType; | ||||
|   const config = AdmonitionConfigs[type]; | ||||
|   if (config) { | ||||
|     return config; | ||||
| import {processAdmonitionProps} from '@docusaurus/theme-common'; | ||||
| import AdmonitionTypes from '@theme/Admonition/Types'; | ||||
| function getAdmonitionTypeComponent(type) { | ||||
|   const component = AdmonitionTypes[type]; | ||||
|   if (component) { | ||||
|     return component; | ||||
|   } | ||||
|   console.warn( | ||||
|     `No admonition config found for admonition type "${type}". Using Info as fallback.`, | ||||
|     `No admonition component found for admonition type "${type}". Using Info as fallback.`, | ||||
|   ); | ||||
|   return AdmonitionConfigs.info; | ||||
|   return AdmonitionTypes.info; | ||||
| } | ||||
| // Workaround because it's difficult in MDX v1 to provide a MDX title as props
 | ||||
| // See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
 | ||||
| function extractMDXAdmonitionTitle(children) { | ||||
|   const items = React.Children.toArray(children); | ||||
|   const mdxAdmonitionTitle = items.find( | ||||
|     (item) => | ||||
|       React.isValidElement(item) && | ||||
|       item.props?.mdxType === 'mdxAdmonitionTitle', | ||||
|   ); | ||||
|   const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>; | ||||
|   return { | ||||
|     mdxAdmonitionTitle, | ||||
|     rest, | ||||
|   }; | ||||
| export default function Admonition(unprocessedProps) { | ||||
|   const props = processAdmonitionProps(unprocessedProps); | ||||
|   const AdmonitionTypeComponent = getAdmonitionTypeComponent(props.type); | ||||
|   return <AdmonitionTypeComponent {...props} />; | ||||
| } | ||||
| function processAdmonitionProps(props) { | ||||
|   const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children); | ||||
|   return { | ||||
|     ...props, | ||||
|     title: props.title ?? mdxAdmonitionTitle, | ||||
|     children: rest, | ||||
|   }; | ||||
| } | ||||
| export default function Admonition(props) { | ||||
|   const {children, type, title, icon: iconProp} = processAdmonitionProps(props); | ||||
|   const typeConfig = getAdmonitionConfig(type); | ||||
|   const titleLabel = title ?? typeConfig.label; | ||||
|   const {iconComponent: IconComponent} = typeConfig; | ||||
|   const icon = iconProp ?? <IconComponent />; | ||||
|   return ( | ||||
|     <div | ||||
|       className={clsx( | ||||
|         ThemeClassNames.common.admonition, | ||||
|         ThemeClassNames.common.admonitionType(props.type), | ||||
|         'alert', | ||||
|         `alert--${typeConfig.infimaClassName}`, | ||||
|         styles.admonition, | ||||
|       )}> | ||||
|       {titleLabel == "pass" ? void 0 : ( | ||||
|         <div className={styles.admonitionHeading}> | ||||
|         <span className={styles.admonitionIcon}>{icon}</span> | ||||
|         {titleLabel} | ||||
|       </div> | ||||
|       )} | ||||
|       <div className={styles.admonitionContent}>{children}</div> | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| /* See docusaurus issue 8568 -- this was swizzled against 2.4.1 */ | ||||
| @ -4,22 +4,26 @@ | ||||
|  * This source code is licensed under the MIT license found in the | ||||
|  * LICENSE file in the root directory of this source tree. | ||||
|  */ | ||||
|  import siteConfig from '@generated/docusaurus.config'; | ||||
|  export default function prismIncludeLanguages(PrismObject) { | ||||
|    const { | ||||
|      themeConfig: {prism}, | ||||
|    } = siteConfig; | ||||
|    const {additionalLanguages} = prism; | ||||
|    // Prism components work on the Prism instance on the window, while prism-
 | ||||
|    // react-renderer uses its own Prism instance. We temporarily mount the
 | ||||
|    // instance onto window, import components to enhance it, then remove it to
 | ||||
|    // avoid polluting global namespace.
 | ||||
|    // You can mutate PrismObject: registering plugins, deleting languages... As
 | ||||
|    // long as you don't re-assign it
 | ||||
|    globalThis.Prism = PrismObject; | ||||
|    additionalLanguages.forEach((lang) => { | ||||
|      // eslint-disable-next-line global-require, import/no-dynamic-require
 | ||||
|      require(`prismjs/components/prism-${lang}`); | ||||
|    }); | ||||
|    //delete globalThis.Prism; // <-- If this line is not commented, `liquid` will fail.
 | ||||
| import siteConfig from '@generated/docusaurus.config'; | ||||
| export default function prismIncludeLanguages(PrismObject) { | ||||
|   const { | ||||
|     themeConfig: {prism}, | ||||
|   } = siteConfig; | ||||
|   const {additionalLanguages} = prism; | ||||
|   // Prism components work on the Prism instance on the window, while prism-
 | ||||
|   // react-renderer uses its own Prism instance. We temporarily mount the
 | ||||
|   // instance onto window, import components to enhance it, then remove it to
 | ||||
|   // avoid polluting global namespace.
 | ||||
|   // You can mutate PrismObject: registering plugins, deleting languages... As
 | ||||
|   // long as you don't re-assign it
 | ||||
|   globalThis.Prism = PrismObject; | ||||
|   additionalLanguages.forEach((lang) => { | ||||
|     if (lang === 'php') { | ||||
|       // eslint-disable-next-line global-require
 | ||||
|       require('prismjs/components/prism-markup-templating.js'); | ||||
|     } | ||||
|     // eslint-disable-next-line global-require, import/no-dynamic-require
 | ||||
|     require(`prismjs/components/prism-${lang}`); | ||||
|   }); | ||||
|   //delete globalThis.Prism; // <-- If this line is not commented, `liquid` will fail.
 | ||||
| } | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user