diff --git a/.gitignore b/.gitignore index 8b6ebee5..f77c4dd5 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,8 @@ /docs/js-sdk/examples/quickstart/*.ts /docs/js-sdk/examples/view-manifest/*.ts /docs/js-sdk/examples/view-manifest/*.html +/docs/c2pa-js/*.md +/docs/c2pa-js/docs/*.md /docs/c2patool/*.md /docs/c2patool/docs/*.md /docs/c2pa-node/*.md diff --git a/docs/c2pa-js/.gitkeep b/docs/c2pa-js/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/docs/js-sdk/deprecation-notice.md b/docs/js-sdk/deprecation-notice.md new file mode 100644 index 00000000..45c135f5 --- /dev/null +++ b/docs/js-sdk/deprecation-notice.md @@ -0,0 +1,5 @@ +:::warning Warning +The legacy JavaScript library is deprecated and the repository has been renamed to [c2pa-js-legacy](https://github.com/contentauth/c2pa-js-legacy). The new JavaScript web library is now in the repository. The old package will no longer be updated or supported. + +If you're starting a new application, use the new library instead. +::: \ No newline at end of file diff --git a/docs/js-sdk/getting-started/architecture.mdx b/docs/js-sdk/getting-started/architecture.mdx index 1cd19c6c..eda15d02 100644 --- a/docs/js-sdk/getting-started/architecture.mdx +++ b/docs/js-sdk/getting-started/architecture.mdx @@ -5,6 +5,9 @@ hide_table_of_contents: true --- import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'; +import Deprecation from '../deprecation-notice.md'; + + :::tip Zoom in by double-clicking or scrolling with your mouse or trackpad. Move the diagram by clicking and dragging. diff --git a/docs/js-sdk/getting-started/overview.mdx b/docs/js-sdk/getting-started/overview.mdx index a8a8a371..33488f49 100644 --- a/docs/js-sdk/getting-started/overview.mdx +++ b/docs/js-sdk/getting-started/overview.mdx @@ -1,8 +1,12 @@ --- -id: overview -title: JavaScript library +id: old-js-overview +title: Legacy JavaScript library --- +import Deprecation from '../deprecation-notice.md'; + + + The CAI JavaScript library (sometimes referred to as the "JavaScript SDK") enables client JavaScript applications to view and verify [C2PA](https://c2pa.org/) data. It performs only **read** operations on C2PA manifests, unlike the [Rust library](../../rust-sdk/), and the [prerelease libraries](../../other-langs) which can both read and write manifests. ## What you should already know diff --git a/docs/js-sdk/getting-started/quick-start.mdx b/docs/js-sdk/getting-started/quick-start.mdx index af38dcf9..cb4617b7 100644 --- a/docs/js-sdk/getting-started/quick-start.mdx +++ b/docs/js-sdk/getting-started/quick-start.mdx @@ -5,6 +5,9 @@ title: Quick start import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Deprecation from '../deprecation-notice.md'; + + ## Prerequisites diff --git a/docs/js-sdk/guides/examples.md b/docs/js-sdk/guides/examples.mdx similarity index 51% rename from docs/js-sdk/guides/examples.md rename to docs/js-sdk/guides/examples.mdx index 9370b7ac..78744028 100644 --- a/docs/js-sdk/guides/examples.md +++ b/docs/js-sdk/guides/examples.mdx @@ -3,23 +3,27 @@ id: examples title: JavaScript examples --- +import Deprecation from '../deprecation-notice.md'; + + + JavaScript examples are in **[contentauth/c2pa-js-examples](https://github.com/contentauth/c2pa-js-examples)**. The examples are mirrored from the [examples directory in the contentauth/c2pa-js repository](https://github.com/contentauth/c2pa-js/tree/main/examples). :::note As noted in the [overview](../getting-started/overview#technologies-that-the-library-uses), the JavaScript library uses a number of modern JavaScript technologies such as WebAssembly (Wasm) and Web Workers. To understand the JavaScript examples, you should be familiar with these technologies, [TypeScript](https://www.typescriptlang.org/) and at least one bundler tool such as [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), or [Vite](https://vitejs.dev/). ::: -Additionally, the JavaScript examples use TypeScript for type safety. +Additionally, the JavaScript examples use TypeScript for type safety. ## Examples -| Example | Tooling | UI framework | Notes | -|---------|------------------------|--------------|-------| -| [esm-imports](https://github.com/contentauth/c2pa-js/tree/main/examples/esm-imports) | None | None | The simplest example using vanilla JavaScript (ECMAScript).| -| [minimal-ts-webpack](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-webpack) | [Webpack](https://webpack.js.org/) | None | Uses TypeScript. | -| [minimal-ts-rollup](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-rollup) | [Rollup](https://rollupjs.org/) | None | Uses TypeScript. | -| [minimal-ts-vite](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-vite) | [Vite](https://vitejs.dev/)| None | Uses TypeScript.
Includes multiple examples; see [below](#examples-in-minimal-ts-vite). | -| [react-ts-vite](https://github.com/contentauth/c2pa-js/tree/main/examples/react-ts-vite) | [Vite](https://vitejs.dev/) | [React](https://react.dev/) | Uses TypeScript. | +| Example | Tooling | UI framework | Notes | +| -------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------- | +| [esm-imports](https://github.com/contentauth/c2pa-js/tree/main/examples/esm-imports) | None | None | The simplest example using vanilla JavaScript (ECMAScript). | +| [minimal-ts-webpack](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-webpack) | [Webpack](https://webpack.js.org/) | None | Uses TypeScript. | +| [minimal-ts-rollup](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-rollup) | [Rollup](https://rollupjs.org/) | None | Uses TypeScript. | +| [minimal-ts-vite](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-vite) | [Vite](https://vitejs.dev/) | None | Uses TypeScript.
Includes multiple examples; see [below](#examples-in-minimal-ts-vite). | +| [react-ts-vite](https://github.com/contentauth/c2pa-js/tree/main/examples/react-ts-vite) | [Vite](https://vitejs.dev/) | [React](https://react.dev/) | Uses TypeScript. | ### Minimal-ts-vite examples @@ -29,5 +33,4 @@ The `minimal-ts-vite` example directory contains these examples: - cdn: Illustrates loading the JavaScript library from a content delivery network (CDN). - check-provenance: Illustrates how to determine whether asset files have provenance. - quick-start: Dumps the manifest store and active manifest to the JavaScript developer console. -- web-components: Displays a test image with the Content Credentials pin, using c2pa-wc - +- web-components: Displays a test image with the Content Credentials pin, using c2pa-wc diff --git a/docs/js-sdk/guides/hosting.mdx b/docs/js-sdk/guides/hosting.mdx index 18501eec..c730b917 100644 --- a/docs/js-sdk/guides/hosting.mdx +++ b/docs/js-sdk/guides/hosting.mdx @@ -3,6 +3,10 @@ id: hosting title: Hosting C2PA assets --- +import Deprecation from '../deprecation-notice.md'; + + + ## Cross-origin (CORS) support Processing images from a URL or DOM selector requires the diff --git a/docs/js-sdk/guides/selectors.mdx b/docs/js-sdk/guides/selectors.mdx index 1bbb7033..b02bd353 100644 --- a/docs/js-sdk/guides/selectors.mdx +++ b/docs/js-sdk/guides/selectors.mdx @@ -3,6 +3,10 @@ id: selectors title: Selectors --- +import Deprecation from '../deprecation-notice.md'; + + + [Selectors](https://github.com/contentauth/c2pa-js/tree/main/packages/c2pa/src/selectors) are convenience functions that return useful data from manifest objects. The selector functions are: - [`selectEditsAndActivity`](../../js-sdk/api/c2pa.selecteditsandactivity) - Returns a formatted list of manifest edits and activity. @@ -42,19 +46,19 @@ The result is an `editsAndActivity` object such as this: id: 'COLOR_ADJUSTMENTS', icon: 'https://cai-assertions.adobe.com/icons/color-palette-dark.svg', label: 'Color adjustments', - description: 'Changed tone, saturation, etc.' + description: 'Changed tone, saturation, etc.', }, { id: 'IMPORT', icon: 'https://cai-assertions.adobe.com/icons/import-dark.svg', label: 'Imported assets', - description: 'Added images, videos, etc.' + description: 'Added images, videos, etc.', }, { id: 'TRANSFORM', icon: 'https://cai-assertions.adobe.com/icons/group-dark.svg', label: 'Size and position adjustments', - description: 'Changed size, orientation, direction, or position' - } -] + description: 'Changed size, orientation, direction, or position', + }, +]; ``` diff --git a/docs/js-sdk/guides/validation.mdx b/docs/js-sdk/guides/validation.mdx index d1415481..2555a698 100644 --- a/docs/js-sdk/guides/validation.mdx +++ b/docs/js-sdk/guides/validation.mdx @@ -3,6 +3,10 @@ id: validation title: Validation & errors --- +import Deprecation from '../deprecation-notice.md'; + + + Part of processing an asset involves [validating the manifests](https://c2pa.org/specifications/specifications/1.4/specs/C2PA_Specification.html#_validation) that it contains. During validation, errors can occur in the active manifest and in ingredients. ## Validation errors in the active manifest diff --git a/docs/js-sdk/guides/viewing-provenance.mdx b/docs/js-sdk/guides/viewing-provenance.mdx index d14d2f91..be66a38f 100644 --- a/docs/js-sdk/guides/viewing-provenance.mdx +++ b/docs/js-sdk/guides/viewing-provenance.mdx @@ -3,6 +3,10 @@ id: viewing-manifest-data title: Viewing manifest data --- +import Deprecation from '../deprecation-notice.md'; + + + ## 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). diff --git a/docs/js-sdk/js-landing.md b/docs/js-sdk/js-landing.md new file mode 100644 index 00000000..5dc192e4 --- /dev/null +++ b/docs/js-sdk/js-landing.md @@ -0,0 +1,6 @@ +--- +id: js-landing +title: JavaScript library +--- + +A new JavaScript library has been released. You can continue to [install and use the old library](getting-started/quick-start.mdx) the same was as before (for example, with `npm install c2pa`) but you're encouraged to move to the new library. The old library will continue to be available [along with its documentation](getting-started/overview.mdx). \ No newline at end of file diff --git a/docs/js-sdk/sidebars.js b/docs/js-sdk/sidebars.js index c230bfd0..f4b65aa7 100644 --- a/docs/js-sdk/sidebars.js +++ b/docs/js-sdk/sidebars.js @@ -1,44 +1,71 @@ -const api = require('./api/api-sidebar'); +// const api = require('./api/api-sidebar'); const sidebars = { docs: [ - { - type: 'doc', - label: 'Quick start', - id: 'js-sdk/getting-started/quick-start', - }, - { - type: 'doc', - label: 'Examples', - id: 'js-sdk/guides/examples', - }, - { - type: 'doc', - label: 'Architecture', - id: 'js-sdk/getting-started/architecture', - }, - { - type: 'doc', - label: 'Hosting assets', - id: 'js-sdk/guides/hosting', - }, { type: 'category', - label: 'Viewing manifest data', - link: { type: 'doc', id: 'js-sdk/guides/viewing-manifest-data' }, - items: ['js-sdk/guides/selectors', 'js-sdk/guides/validation'], - collapsed: true, + label: 'New JavaScript library', + link: { type: 'doc', id: 'js-sdk/js-lib-v2' }, + items: [ + { + type: 'doc', + label: 'C2PA web library', + id: 'c2pa-js/readme', + }, + { + type: 'link', + label: 'GitHub', + href: 'https://github.com/contentauth/c2pa-js', + }, + ], }, { type: 'category', - label: 'API documentation', - items: api('js-sdk/api'), + label: 'Legacy JavaScript library', + link: { type: 'doc', id: 'js-sdk/getting-started/old-js-overview' }, collapsed: true, - }, - { - type: 'link', - label: 'GitHub', - href: 'https://github.com/contentauth/c2pa-js', + items: [ + { + type: 'doc', + label: 'Quick start', + id: 'js-sdk/getting-started/quick-start', + }, + { + type: 'doc', + label: 'Examples', + id: 'js-sdk/guides/examples', + }, + { + type: 'doc', + label: 'Architecture', + id: 'js-sdk/getting-started/architecture', + }, + { + type: 'doc', + label: 'Hosting assets', + id: 'js-sdk/guides/hosting', + }, + { + type: 'category', + label: 'Viewing manifest data', + link: { type: 'doc', id: 'js-sdk/guides/viewing-manifest-data' }, + items: ['js-sdk/guides/selectors', 'js-sdk/guides/validation'], + collapsed: true, + }, + /* + { + type: 'category', + label: 'API documentation', + items: api('js-sdk/api'), + collapsed: true, + }, + */ + { + type: 'link', + label: 'GitHub', + href: 'https://github.com/contentauth/c2pa-js-legacy', + }, + ], }, ], }; diff --git a/docs/js-sdk/temp-new-sdk.md b/docs/js-sdk/temp-new-sdk.md new file mode 100644 index 00000000..4761f30b --- /dev/null +++ b/docs/js-sdk/temp-new-sdk.md @@ -0,0 +1,12 @@ +--- +id: js-lib-v2 +title: New JavaScript library +--- + +There is a new [JavaScript web library](https://github.com/contentauth/c2pa-js/tree/main/packages/c2pa-web) for applications that run in a web browser environment. + +We are working on adding documentation. Please bear with us! + +:::note +The old JavaScript client library is deprecated, but its documentation is still available in the [Legacy JavaScript library documentation](old-js-overview). You can continue to use it, but it will no longer be updated or supported. +::: \ No newline at end of file diff --git a/scripts/fetch-readme.js b/scripts/fetch-readme.js index 8d51461b..6c34dcf9 100644 --- a/scripts/fetch-readme.js +++ b/scripts/fetch-readme.js @@ -25,18 +25,18 @@ const readmes = [ __dirname, '../docs/js-sdk/examples/view-manifest/index.html', ), - repo: 'contentauth/c2pa-js', + repo: 'contentauth/c2pa-js-legacy', 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', + repo: 'contentauth/c2pa-js-legacy', 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', + repo: 'contentauth/c2pa-js-legacy', path: 'examples/minimal-ts-vite/examples/cdn/main.ts', }, // Rollup Quickstart @@ -45,7 +45,7 @@ const readmes = [ __dirname, '../docs/js-sdk/examples/quickstart/rollup-main.ts', ), - repo: 'contentauth/c2pa-js', + repo: 'contentauth/c2pa-js-legacy', path: 'examples/minimal-ts-rollup/src/main.ts', }, // WebPack Quickstart @@ -54,10 +54,15 @@ const readmes = [ __dirname, '../docs/js-sdk/examples/quickstart/webpack-main.ts', ), - repo: 'contentauth/c2pa-js', + repo: 'contentauth/c2pa-js-legacy', path: 'examples/minimal-ts-webpack/src/index.ts', }, - + // New JavaScript SDK (9/16/2025) + { + dest: resolve(__dirname, '../docs/c2pa-js/readme.md'), + repo: 'contentauth/c2pa-js', + path: 'packages/c2pa-web/README.md', + }, // c2patool { dest: resolve(__dirname, '../docs/c2patool/readme.md'), diff --git a/sidebars.js b/sidebars.js index b28649e1..07538d64 100644 --- a/sidebars.js +++ b/sidebars.js @@ -123,7 +123,7 @@ const sidebars = { { type: 'category', label: 'JavaScript library', - link: { type: 'doc', id: 'js-sdk/getting-started/overview' }, + link: { type: 'doc', id: 'js-sdk/getting-started/old-js-overview' }, collapsed: true, items: jsSdkSidebar.docs, },