TIFY is a slim and mobile-friendly [IIIF](https://iiif.io/) document viewer built with [Vue.js](https://vuejs.org/). It supports [IIIF Presentation API and Image API](https://iiif.io/api/) version 2 and 3. **[Check out the demo.](https://tify-iiif-viewer.github.io/tify/)** Continue reading to learn how to integrate TIFY into your website or application and about its options and API, [visit the website for usage examples](https://tify.rocks/), or [have a look at the documentation](doc). ## Embedding TIFY Add an empty HTML block element with an `id` and a set height: ``` html

``` Include TIFY: - Either via [npm](www.npmjs.com/package/tify) (recommended): ``` bash npm install tify ``` - If you are using a build tool like [Vite](https://vite.dev/), `import` the required files and create a TIFY instance: ``` js import 'tify/dist/tify.css' import Tify from 'tify' new Tify({ container: '#tify', manifestUrl: 'https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json', }) ``` - Otherwise, upload everything from `node_modules/tify/dist` to your web server and add this to the HTML output: ``` html ``` Adjust the paths as needed. Appending `?0.35.0` prevents caching issues when upgrading. - Or use a CDN like [jsDelivr](https://www.jsdelivr.com/package/npm/tify) or [UNPKG](https://app.unpkg.com/tify): ``` html ``` ## Upgrading If you are are upgrading from any previous version, [have a look at the upgrading guidelines](UPGRADING.md). ## Configuration TIFY takes an options object as its only parameter. While optional, you usually want to set `container` and `manifestUrl`. See [config.js](src/config.js) for a documentation of all available options. An example with most options set to non-default values: ``` js new Tify({ container: '#tify', language: 'de', manifestUrl: 'https://example.org/iiif-manifest.json', pageLabelFormat: 'P (L)', pages: [2, 3], pan: { x: .45, y: .6 }, translationsDirUrl: '/translations/tify', urlQueryKey: 'tify', urlQueryParams: ['pages'], view: '', viewer: { immediateRender: false, }, zoom: 1.2, }) ``` ## Customizing Many aspects of the theme can be modified with SCSS variables or CSS custom properties, allowing you to easily adapt TIFY’s appearance to your website. [See the theme settings file](src/styles/util/settings.scss) for all available variables. ## API TIFY provides an API for controlling most of its features, see [API documentation](doc/api.md). ## Build Setup You need to have Node.js v18.0 or above, npm (usually comes with Node.js) and git installed. Install dependencies: ``` bash npm install ``` Run in development mode with hot reload and automatic linting: ``` bash npm run dev ``` Build for production with minification: ``` bash npm run build ``` The production build will be stored in `dist`. ### Running Tests Run unit tests: `npm run test:unit` Run end-to-end tests: - Development build: `npm run dev` - Production build: `npm run build && npm run test:e2e` ## Translations Translations reside in `public/translations` for TIFY and in `src/demo/translation` for the demo application. Each language is represented by a JSON file, its name is the language’s [ISO 639 alpha-2 code](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes), e.g. `de.json` for the German translation. Each file consists of a single object of key-value pairs; the key is the original English string, the value is the translated string. The first key `$language` denotes the native name (endonym) of the translation’s language. TIFY uses a few other special keys starting with `$`. While all other keys are to be translated literally, these keys serve as placeholders for longer sections of text as defined in `src/strings.json`. English keys (but not translated values) may contain translation hints in square brackets, e.g. `View [noun]` should be treated as a noun, not as a verb. To **add a new language** to TIFY and its demo, run ``` node build/create-translation.js ``` and follow the prompt. To **check all translations** for validity and completeness: - Lint and report problems: `npm run test:i18n` - Lint, report, and update translation files by adding missing keys, removing unused keys, and sorting all entries: `npm run test:i18n:fix` ---