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/webcomponentsjs@2.4.3/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:
| File | Description |
|---|---|
dist/pb-components-bundle.js |
(required) the base components, including text views and all core functionality |
dist/pb-leaflet-map.js |
(optional) support for displaying maps |
dist/pb-odd-editor.js |
implements the visual ODD editor |
dist/pb-component-docs.js |
components to view the API documentation of this package |
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-componentsIf 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.