Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@cogapp/storiiies-viewer
Advanced tools
Storiiies Viewer 
Storiiies Viewer is an open source viewer for Storiiies, the IIIF digital storytelling platform.
Demo
See an example StoriiiesViewer in action on codepen
Usage
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:
<head>
<!-- ... -->
<link rel="stylesheet" href="https://unpkg.com/@cogapp/storiiies-viewer@latest/dist/storiiies-viewer.css">
<script src="https://unpkg.com/@cogapp/storiiies-viewer@latest/dist/umd/storiiies-viewer.js"></script>
<!-- ... -->
</head>
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
- Install the dependecy with
npm install @cogapp/storiiies-viewer - Use
import StoriiiesViewer from '@cogapp/storiiies-viewer'in your code to access the StoriiiesViewer constructor - Depending on how your tooling handles importing CSS you might also be able to import the CSS file with
import @cogapp/storiiies-viewer/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:
<div id="storiiies-viewer"></div>
In your JavaScript
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:
- If you'd prefer to bring all your own styles, StoriiiesViewer can be styled from scratch without needing to include the default stylesheet
- To 'theme' StoriiiesViewer, you may find the custom properties provided by the default stylesheet to be sufficient
- 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. Specifically, we target annotationPages which are included directly in the manifest (like in this cookbook recipe).
Text based annotations can either be text/plain or text/html denoted by the format field. For text/plain newline characters will be converted and output as <br> tags.
Support for audio exists, and StoriiiesViewer will render an <audio /> element for annotations that have a type of Sound, and which are structured like shown in this cookbook recipe.
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, which is required by the presentation API and will be shown on a "title slide", before any annotations - A manifest level
summary, which will appear below the label if provided - A manifest level
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)- Multiple images
- 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.
Compatibility with Storiiies Editor
Cogapp maintains a free-to-use editor for Storiiies at storiiies-editor.cogapp.com. To use a compatible v3 manifest for your story, append the short alphanumeric code from the "view and share" link to a base URL of https://manifest.storiiies-editor.cogapp.com/v3/
For example, for the link https://storiiies.cogapp.com/viewer/7e4va/A-Sunday-on-La-Grande-Jatte-1884 use a manifest URL of https://manifest.storiiies-editor.cogapp.com/v3/7e4va
Local development
Installation
Pre-requisites
[!IMPORTANT]
Although optional, we recommend using 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 file, you should try aligning your node version to this first. This represents a known compatibility with the code here and our dependencies.
Setup
Switch node version and install the dependencies in the project root with:
nvm use
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:guiandnpm run cypresswill 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 |
Image credits from banner image
Georges Seurat. A Sunday on La Grande Jatte, 1884-86. The Art Institute of Chicago.
Vincent van Gogh. The Bedroom, 1889. The Art Institute of Chicago.
Rosalba Carriera. A Young Lady with a Parrot, c. 1730. The Art Institute of Chicago.
FAQs
A viewer for Storiiies
We found that @cogapp/storiiies-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 15 Nov 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025