# sv-preview > SV Preview. Official release coming soon... Latest version **0.1.2** (published 2023-09-18) · 0 weekly downloads ## Install ```sh npm install sv-preview pnpm add sv-preview yarn add sv-preview bun add sv-preview ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.2 | | Published | 2023-09-18 | | First published | 2023-08-21 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=18.0.0 | | Dependencies | 3 | | Unpacked size | 973.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Jon White | | Maintainers | jonwhite | ## Links - npm: https://www.npmjs.com/package/sv-preview - Repository: https://github.com/jonw-cogapp/sv-preview - Homepage: https://github.com/jonw-cogapp/sv-preview#readme - Issues: https://github.com/jonw-cogapp/sv-preview/issues - npm.io page: https://npm.io/package/sv-preview ## Dependencies (3) - [dompurify](https://npm.io/package/dompurify.md) ^3.0.5 - [manifesto.js](https://npm.io/package/manifesto.js.md) ^4.2.17 - [openseadragon](https://npm.io/package/openseadragon.md) ^4.1.0 ## Recent versions - 0.1.2 (latest) — 2023-09-18 - 0.1.1 — 2023-09-18 - 0.1.0 — 2023-08-21 ## README # Storiiies Viewer ![Build status badge](https://github.com/CogappLabs/StoriiiesViewer/actions/workflows/build.yml/badge.svg) Storiiies Viewer is an open source viewer for [Storiiies](https://www.cogapp.com/r-d/storiiies), the IIIF digital storytelling platform. ## Usage [API documentation](https://cogapp.github.io/storiiies-viewer/api) ### Adding the dependencies There are two options for adding StoriiiesViewer to your project: #### In the browser (This is the quickest and easiest way to get started) You can include the JavaScript and CSS in the HTML like so, using the [unpkg CDN](https://unpkg.com/): ```HTML ``` Or you could save these files and serve them locally if you prefer. Including the JavaScript file this way will make `StoriiiesViewer` available globally in JavaScript. #### Using a bundler 1. Install the dependecy with `npm install @cogapp/storiiiesviewer` 2. Use `import StoriiiesViewer from '@cogapp/storiiiesviewer'` in your code to access the StoriiiesViewer constructor 3. Depending on how your tooling handles importing CSS you might also be able to import the CSS file with `import @cogapp/storiiiesviewer/dist/storiiies-viewer.css` — but you could also use the method above, or copy the contents of the CSS file into your own src files. ### Initialise a viewer In your HTML: ```HTML

``` In your JavaScript ```JS document.addEventListener('DOMContentLoaded', () => { const myViewer = new StoriiiesViewer({ container: "#storiiies-viewer", // or document.querySelector("#storiiies-viewer") manifestUrl: "https://path-to-your-storiiies-manifest", }); }); ``` ## Customisation To customise of appearance of StoriiiesViewer you have a few options: 1. If you'd prefer to bring all your own styles, StoriiiesViewer can be styled from scratch without needing to include the default stylesheet 2. To 'theme' StoriiiesViewer, you may find the custom properties provided by the default stylesheet to be sufficient 3. Start with default stylesheet and expand or override these styles as you see fit ## Supported manifest formats StoriiiesViewer supports a subset of the [IIIF presentation API v3](https://iiif.io/api/presentation/3.0/). Specifically, we target `annotationPages` which are included directly in the manifest ([like in this cookbook recipe](https://iiif.io/api/cookbook/recipe/0258-tagging-external-resource/)). Annotations themselves can either be `text/plain` or `text/html` denoted by the `format` field. For `text/plain` newline characters will be converted and output as `
` tags. StoriiiesViewer has no required fields (aside from those required by the presentation API), but it will render certain values from the manifest if provided. These are: - [A manifest `label`](https://iiif.io/api/presentation/3.0/#label), which is required by the presentation API and will be shown on a "title slide", before any annotations - [A manifest level `summary`](https://iiif.io/api/presentation/3.0/#summary), which will appear below the label if provided - [A manifest level `requiredStatement`](https://iiif.io/api/presentation/3.0/#requiredstatement), which will appear below the summary if provided > [!NOTE]
> Certain features which aren't currently supported include: > > - Externally referenced `annotationPages` ([as shown in this cookbook recipe](https://iiif.io/api/cookbook/recipe/0306-linking-annotations-to-manifests/)) > - Multiple images > - Non-text based annotations (e.g. audio) > - Full multi-lingual support > > However, pathways exist to enable these features with further development. > [!WARNING]
> Manifest with a version lower than 3 may load images, but aren't guaranteed to work beyond this, and will display a warning in the console. ## Local development ### Installation #### Pre-requisites - [Node.js / npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) > [!IMPORTANT]
> Although optional, we recommend using [nvm](https://github.com/nvm-sh/nvm) to match the version of Node used in this project before running the install command, or the npm scripts described below. > > If you encounter problems and aren't using the version of Node shown in the [.nvmrc](.nvmrc) file, you should try aligning your node version to this first. This represents a known compatibility with the code here and our dependencies. #### Setup Install the dependencies in the project root with: ```console npm ci ``` ### Compiling and previewing changes

Command	Action
`npm run dev`	Watches files in the `src` directory for changes and serves a preview at https://localhost:43110 with hot module replacement
`npm run build`	Builds the package for use in production. See "Usage" for how this package can be used

### Running the tests

Command	Action
`npm run test:gui`	Will start the local dev server and run the e2e tests with the interactive GUI
`npm run test`	Starts the dev server as above, but instead runs the tests without the GUI

> [!NOTE]
> `npm run cypress:gui` and `npm run cypress` will also do the same as the above _without_ starting the dev server, if you already have it running. ### Linting the code

Command	Action
`npm run lint`	Will lint (and fix where possible) all problems in the code

--- _Source: https://npm.io/package/sv-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._