This repository contains the web components used by TEI Publisher and apps generated by it.

Distributing the components in a separate package has several benefits:

• generated apps can depend on a specific version of the components without getting into conflict with other apps
• the components can be embedded into any environment, e.g. a CMS or blog software, as long as they can communicate with a TEI Publisher instance running somewhere else

While TEI Publisher 5 used Polymer as the framework for webcomponents, components now use the LitElement library, which adds only a thin layer on top of native web components.

Clone the repository, call npm install once and run npm start. This creates a simple webserver which you can access in a browser to see the documentation and demos.

All components talk to an endpoint, which will either be a TEI Publisher instance or an application generated from TEI Publisher. Docs and demos in this repo currently expect the endpoint to be available on http://localhost:8080/exist. TEI Publisher version 6 is required for all features to work correctly.

To include components into your own application, you can load them from a CDN:

<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-components-bundle.js"></script>

For most use case, including pb-components-bundle.js is enough. However, we ship additional bundles as described below:

Bundles build on each other, so you always need to at least include pb-components-bundle.js in your HTML page.

For some examples of how to embed components into plain HTML, see the sample collection on codepen.

Install @teipublisher/pb-components into your project:

npm install --save @teipublisher/pb-components

If you wish to extend the library with your own components, there's a template project available, which you may fork.

Run npm run build:production to generate the set of bundle files in dist, containing all components and their dependencies.

For development, run npm start as described above. It will open a browser window and watch for file changes.

To regenerate the API documentation, run npm run docs.

Every component should have a demo to show its functionality.