Replace sandboxes with code blocks

Author: crandmck

.gitignore

@@ -8,6 +8,7 @@
 .docusaurus
 .cache-loader
 /docs/js-sdk/api
+/docs/js-sdk/examples
 /docs/c2patool/*.md
 /docs/c2patool/docs/*.md
 /docs/c2pa-node/*.md

docs/js-sdk/getting-started/quick-start.mdx

@@ -5,7 +5,6 @@ title: Quick start
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Sandbox from '../../../src/components/Sandbox';
 
 ## Prerequisites
 
@@ -37,19 +36,17 @@ The quickest way to get up and running is to use a CDN such as [jsDelivr](https:
 Static assets include the following, as seen in the config passed to [`createC2pa`](../../js-sdk/api/c2pa.createc2pa):
 
 ```js
+const version = '0.24.2';
 {
   wasmSrc: `https://cdn.jsdelivr.net/npm/c2pa@${version}/dist/assets/wasm/toolkit_bg.wasm`,
   workerSrc: `https://cdn.jsdelivr.net/npm/c2pa@${version}/dist/c2pa.worker.min.js`,
 }
 ```
 
 :::caution
-The version numbers provided in the CDN URLs _must_ match in all of the places you reference the
-library. To make it easy, use a variable that provides the version as shown in the example.
+The version numbers provided in the CDN URLs _must_ be the same in all of the places you reference the library. To make it easy, use a variable that provides the version as shown in the example.
 :::
 
-<Sandbox file="/examples/cdn/main.ts" displayType="preview" />
-
 ### Using a package manager
 
 You can also bring in the library with a package manager, such as `npm`, `pnpm`, or `yarn`. This way, all of the client side code is hosted with your app and there are no external dependencies. For example, using `npm`:
@@ -71,24 +68,33 @@ Be sure to configure your server to send proper `Content-Type` headers for these
 
 Examples for common build systems are shown below. They are also available in the [c2pa-js-examples repository](https://github.com/contentauth/c2pa-js-examples).
 
-export const ExampleLink = ({ example }) => {
-  const linkText = `examples/${example}`;
-  const link = `https://github.com/contentauth/c2pa-js/tree/main/${linkText}`;
-  return (
-    <div className="example-link">
-      An example project is available here: <a href={link}>{linkText}</a>
-    </div>
-  );
-};
+import CodeBlock from '@theme/CodeBlock';
+import ViteExample from '!!raw-loader!../examples/quickstart/vite-main.ts';
+import RollupExample from '!!raw-loader!../examples/quickstart/rollup-main.ts';
+import WebPackExample from '!!raw-loader!../examples/quickstart/webpack-main.ts';
 
 <Tabs lazy>
   <TabItem value="vite" label="Vite" default>
-    <Sandbox file="/examples/quick-start/main.ts" />
+
+This example is from [c2pa-js-examples/minimal-ts-vite/](https://github.com/contentauth/c2pa-js-examples/blob/main/minimal-ts-vite/).
+
+<CodeBlock language="ts">{ViteExample}</CodeBlock>
+
   </TabItem>
+
   <TabItem value="rollup" label="Rollup">
-    <Sandbox example="minimal-ts-rollup" file="/src/main.ts" browserPath="/" />
+
+This example is from [c2pa-js-examples/minimal-ts-rollup/](https://github.com/contentauth/c2pa-js-examples/blob/main/minimal-ts-rollup/).
+
+<CodeBlock language="ts">{RollupExample}</CodeBlock>
+
   </TabItem>
+
   <TabItem value="webpack" label="Webpack">
-    <Sandbox example="minimal-ts-webpack" file="/src/main.ts" browserPath="/" />
+
+This example is from [c2pa-js-examples/minimal-ts-webpack/](https://github.com/contentauth/c2pa-js-examples/blob/main/minimal-ts-webpack/).
+
+<CodeBlock language="ts">{WebPackExample}</CodeBlock>
+
   </TabItem>
 </Tabs>

docs/js-sdk/guides/sandbox-qs-rollup.mdx

@@ -0,0 +1,11 @@
+---
+id: sandbox-rollup
+title: 'Code Sandbox: Rollup example'
+hide_table_of_contents: true
+---
+
+import Sandbox from '../../../src/components/Sandbox';
+
+The source code for this example is in the [c2pa-js-examples repo](https://github.com/contentauth/c2pa-js-examples/tree/main/minimal-ts-rollup).
+
+<Sandbox file="../examples/quickstart/rollup-main.ts" browserPath="/" />

docs/js-sdk/guides/sandbox-qs-vite.mdx

@@ -0,0 +1,11 @@
+---
+id: sandbox-vite
+title: 'Code Sandbox: Vite example'
+hide_table_of_contents: true
+---
+
+import Sandbox from '../../../src/components/Sandbox';
+
+The source code for this example is in the [c2pa-js-examples repo](https://github.com/contentauth/c2pa-js-examples/blob/main/minimal-ts-vite/).
+
+<Sandbox file="../examples/quickstart/vite-main.ts" browserPath="/" />

docs/js-sdk/guides/sandbox-qs-webpack.mdx

@@ -0,0 +1,11 @@
+---
+id: sandbox-webpack
+title: 'Code Sandbox: Webpack example'
+hide_table_of_contents: true
+---
+
+import Sandbox from '../../../src/components/Sandbox';
+
+The source code for this example is in the [c2pa-js-examples repo](https://github.com/contentauth/c2pa-js-examples/tree/main/minimal-ts-webpack).
+
+<Sandbox file="../examples/quickstart/webpack-main.ts" browserPath="/" />

docs/js-sdk/guides/sandbox-view-manifest.mdx

@@ -0,0 +1,11 @@
+---
+id: sandbox-viewing-manifest
+title: 'Code Sandbox: Viewing manifest data'
+hide_table_of_contents: true
+---
+
+import Sandbox from '../../../src/components/Sandbox';
+
+The source code for this example is in the [c2pa-js-examples repo](https://github.com/contentauth/c2pa-js-examples/blob/main/minimal-ts-vite/examples/active-manifest/main.ts).
+
+<Sandbox file="/examples/active-manifest/main.ts" displayType="preview" />

docs/js-sdk/guides/viewing-provenance.mdx

@@ -1,11 +1,8 @@
 ---
 id: viewing-manifest-data
 title: Viewing manifest data
-hide_table_of_contents: true
 ---
 
-import Sandbox from '../../../src/components/Sandbox';
-
 ## Initializing the library
 
 The way that you import `wasmSrc` and `workerSrc` varies depending on the build system you use. For more information, see [Quick start](../getting-started/quick-start#bringing-in-the-library).
@@ -20,10 +17,35 @@ The [`manifestStore`](../../js-sdk/api/c2pa.c2pareadresult.manifeststore) object
 - **activeManifest**: A pointer to the latest [`manifest`](../../js-sdk/api/c2pa.manifest) in the manifest store. Effectively the "parent" manifest, this is the likely starting point when inspecting an asset's C2PA data.
 - **validationStatus**: A list of any validation errors the library generated when processing an asset. See [Validation](./validation) for more information.
 
-[`Manifest`](../../js-sdk/api/c2pa.manifest) objects contain properties pertaining to an asset's provenance, along with convenient interfaces for [accessing assertion data](../../js-sdk/api/c2pa.assertionaccessor) and [generating a thumbnail](../../js-sdk/api/c2pa.thumbnail). The example in this sandbox demonstrates a basic workflow: reading a sample image, checking for the presence of a manifest store, and displaying the data in the active manifest:
+[`Manifest`](../../js-sdk/api/c2pa.manifest) objects contain properties pertaining to an asset's provenance, along with convenient interfaces for [accessing assertion data](../../js-sdk/api/c2pa.assertionaccessor) and [generating a thumbnail](../../js-sdk/api/c2pa.thumbnail).
+
+## Example
 
-<Sandbox file="/examples/active-manifest/main.ts" displayType="preview" />
+This example from the [c2pa-js-examples repo](https://github.com/contentauth/c2pa-js-examples/blob/main/minimal-ts-vite/examples/active-manifest/) demonstrates a basic workflow:
 
-The source code for this example is in the [c2pa-js-examples repo](https://github.com/contentauth/c2pa-js-examples/blob/main/minimal-ts-vite/examples/active-manifest/main.ts).
+- Reading an image.
+- Checking for the presence of a manifest store.
+- Displaying the data in the active manifest.
 
 This example also features the use of the [`selectProducer`](../../js-sdk/api/c2pa.selectproducer) selector function. See [Selectors](./selectors) for more information.
+
+To view and execute this example in a live [code sandbox](https://codesandbox.io/docs/learn/legacy-sandboxes/overview), see [Sandbox: Viewing manifest data](./sandbox-viewing-manifest).
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import CodeBlock from '@theme/CodeBlock';
+import ViewManifestExampleTS from '!!raw-loader!../examples/view-manifest/main.ts';
+import ViewManifestExampleHTML from '!!raw-loader!../examples/view-manifest/index.html';
+
+<Tabs lazy>
+  <TabItem value="ts" label="main.ts" default>
+    <CodeBlock language="ts">{ViewManifestExampleTS}</CodeBlock>
+  </TabItem>
+
+{' '}
+<TabItem value="html" label="index.html">
+  <CodeBlock language="html">{ViewManifestExampleHTML}</CodeBlock>
+</TabItem>
+
+</Tabs>

scripts/fetch-readme.js

@@ -19,6 +19,45 @@ $ touch .gitkeep
 */
 
 const readmes = [
+  // js-sdk examples - View manifest
+  {
+    dest: resolve(
+      __dirname,
+      '../docs/js-sdk/examples/view-manifest/index.html',
+    ),
+    repo: 'contentauth/c2pa-js',
+    path: 'examples/minimal-ts-vite/examples/active-manifest/index.html',
+  },
+  {
+    dest: resolve(__dirname, '../docs/js-sdk/examples/view-manifest/main.ts'),
+    repo: 'contentauth/c2pa-js',
+    path: 'examples/minimal-ts-vite/examples/active-manifest/main.ts',
+  },
+  // Vite Quickstart
+  {
+    dest: resolve(__dirname, '../docs/js-sdk/examples/quickstart/vite-main.ts'),
+    repo: 'contentauth/c2pa-js',
+    path: 'examples/minimal-ts-vite/examples/cdn/main.ts',
+  },
+  // Rollup Quickstart
+  {
+    dest: resolve(
+      __dirname,
+      '../docs/js-sdk/examples/quickstart/rollup-main.ts',
+    ),
+    repo: 'contentauth/c2pa-js',
+    path: 'examples/minimal-ts-rollup/src/main.ts',
+  },
+  // WebPack Quickstart
+  {
+    dest: resolve(
+      __dirname,
+      '../docs/js-sdk/examples/quickstart/webpack-main.ts',
+    ),
+    repo: 'contentauth/c2pa-js',
+    path: 'examples/minimal-ts-webpack/src/index.ts',
+  },
+
   // c2patool
   {
     dest: resolve(__dirname, '../docs/c2patool/readme.md'),