Sharing Content

Works in a Canopy IIIF site can be shared with others via IIIF Content State. This allows content to be opened to specific views and allows content to be easily reopened in other viewers.

Note: The Share component follows the IIIF Content State 1.0 specification so links stay portable across viewers.

Prereq: This walkthrough assumes you already have a running Canopy IIIF project (Create a Project).

Use Case

You are a digital humanist who wants to link to a specific page of a book in a social media post and point at that page in the book in custom component.

Implementation

Navigate to the Book and Page You Want to Share from Canopy IIIF

In your web browser, open a link to The North American Indian and click on page 3. With page 3 active, click the Share button and the checkbox next to page 3. Clicking the checkbox signifies you want the link to open to that specific view.

Share the Link in a Social Media Post

Using your social media platform of choice, create a new post using the link in the Share component's box. As readers click the link, they will open the work in Canopy IIIF at the page you specified.

Discuss the View in Custom Content Using the Viewer Component

Now let's create a new page within About with a link to the view in the Viewer component. Create a new page called content-state.mdx at /content/about.

Since Canopy IIIF uses the IIIF Content State API specification for creating a portable, sharable representation of what a user is looking at, we can copy the string following ?iiif-content= and paste it into the value of iiif-content in Viewer and it will load that view in an interoperable way.

---title: "Content State Example"--- # Content State Example This is an example of a Content State request with the Viewer Component. <Viewer iiifContent="JTdCJTIyJTQwY29udGV4dCUyMiUzQSUyMmh0dHAlM0ElMkYlMkZpaWlmLmlvJTJGYXBpJTJGcHJlc2VudGF0aW9uJTJGMyUyRmNvbnRleHQuanNvbiUyMiUyQyUyMmlkJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZjYW5vcHktaWlpZi5naXRodWIuaW8lMkZjYW5vcHktaWlpZiUyRndvcmtzJTJGdGhlLW5vcnRoLWFtZXJpY2FuLWluZGlhbi1iZWluZy1hLXNlcmllcy1vZi12b2x1bWVzLXBpY3R1cmluZy1hbmQtZGVzY3JpYmluZy10aGUtaW5kaWFucy1vZi10aGUtdW5pdCUyRmNvbnRlbnQtc3RhdGUlMjIlMkMlMjJ0eXBlJTIyJTNBJTIyQW5ub3RhdGlvbiUyMiUyQyUyMm1vdGl2YXRpb24lMjIlM0ElNUIlMjJjb250ZW50U3RhdGUlMjIlNUQlMkMlMjJ0YXJnZXQlMjIlM0ElN0IlMjJpZCUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGYXBpLmRjLmxpYnJhcnkubm9ydGh3ZXN0ZXJuLmVkdSUyRmFwaSUyRnYyJTJGd29ya3MlMkY1ZDA3NTQxNS01MmQ1LTQ1MzAtOWQ1MC1lNmY0ODhkNjM0YzYlM0ZhcyUzRGlpaWYlMkZjYW52YXMlMkYxNiUyMiUyQyUyMnR5cGUlMjIlM0ElMjJDYW52YXMlMjIlMkMlMjJwYXJ0T2YlMjIlM0ElNUIlN0IlMjJpZCUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGYXBpLmRjLmxpYnJhcnkubm9ydGh3ZXN0ZXJuLmVkdSUyRmFwaSUyRnYyJTJGd29ya3MlMkY1ZDA3NTQxNS01MmQ1LTQ1MzAtOWQ1MC1lNmY0ODhkNjM0YzYlM0ZhcyUzRGlpaWYlMjIlMkMlMjJ0eXBlJTIyJTNBJTIyTWFuaWZlc3QlMjIlN0QlNUQlN0QlN0Q" />

Why Base64? IIIF Content State encodes JSON as Base64 so you can embed complex state in URLs. See the encoding section for details.

Navigation updates automatically

Because Canopy derives navigation from the file tree, new pages under content/about/ show up in the About sidebar as soon as you add the MDX file—no separate menu files required.