uv-app-starter

Get started building a IIIF-enabled website using the Universal Viewer and host it for free on Github Pages.

Examples

• https://sophiedixon.github.io/3d-portfolio/
• https://grafton9.net/codici-immaginari/index.html

Setup

• Fork this repo on github to your personal account.

• Rename the repo, e.g. "my-collection"

• Clone the repo to your desktop

• Run npm install

• Organise your files and folders in /collection using the biiif conventions

• Run npm start to preview on http://localhost:8888

• When ready to publish to Github Pages, in the package.json scripts section, assuming your Github username is for example @edsilv, change:

   "dist": "biiif collection -u https://username.github.io/uv-app-starter/collection"
  

  to:

   "dist": "biiif collection -u https://edsilv.github.io/my-collection/collection"
  

• In index.html, replace:

  <iiif-gallery manifest="/collection/index.json"></iiif-gallery>
  

  with:

  <iiif-gallery manifest="/my-collection/collection/index.json"></iiif-gallery>
  

• Publish to github by running:

  npm run publish-gh

• Your site should now be available at https://edsilv.github.io/my-collection/ (may take a few seconds)

Publishing using dat

You can use Beaker Browser to publish your portfolio using the dat protocol.

Example: dat://3088365c94ecbe15d2963b1a1e629ee408535e5273c8b15fc20203b2b6f22020

• In Beaker, click on the menu button and select "New Site".

• Give it a name and click Create Site.

• Next to the Share button, click the drop down and select Change Folder.

• Set the folder to the location of your current uv-app-starter project.

• Now click the Share button and copy your dat address (dat://<hash>).

• In index.html, replace:

  <iiif-gallery manifest="/collection/index.json"></iiif-gallery>
  

  with:

  <iiif-gallery manifest="dat://<hash>/collection/index.json"></iiif-gallery>
  

• In package.json under the dist-dat script, replace the dat address with your site's address.

• Run npm run publish-dat. This will generate your IIIF using your dat address as the root.

• Refresh your site in Beaker.