Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eeditiones/tei-publisher-components
Web components used by TEI Publisher and apps generated by it
https://github.com/eeditiones/tei-publisher-components
tei-publisher tei-xml webcomponents
Last synced: 7 days ago
JSON representation
Web components used by TEI Publisher and apps generated by it
- Host: GitHub
- URL: https://github.com/eeditiones/tei-publisher-components
- Owner: eeditiones
- License: gpl-3.0
- Created: 2020-05-26T17:03:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-10T09:37:25.000Z (29 days ago)
- Last Synced: 2024-10-10T10:43:41.845Z (29 days ago)
- Topics: tei-publisher, tei-xml, webcomponents
- Language: JavaScript
- Homepage: https://cdn.tei-publisher.com/
- Size: 21.9 MB
- Stars: 18
- Watchers: 15
- Forks: 14
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-lit - Web Components for TEI Publisher - Web components used by TEI Publisher and apps generated by it. (Component Libraries)
- awesome-web-components - TEI Publisher Components - Collection of web components used by TEI Publisher and apps generated by it. (Real World / Component Libraries)
README
# Web Components for TEI Publisher
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.
## Quick Start
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.
## Loading Components from CDN
To include components into your own application, you can load them from a CDN:
```html
```
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 |
| `dist/pb-tify.js` | IIIF presentation API viewer |
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](https://codepen.io/collection/nqVkee).
## Loading from npm
Install `@teipublisher/pb-components` into your project:
```sh
npm install --save @teipublisher/pb-components
```
## Extending
If you wish to extend the library with your own components, there's a [template project](https://github.com/eeditiones/pb-extension-template) available, which you may fork.
## Building
Run `npm run build:production` to generate the set of bundle files in `dist`, containing all components and their dependencies.
## Development
For development, run `npm start` as described above. It will start a development server (on port 8000 by default), open a browser window and watch for file changes. Every component should have a demo to show its functionality.
You can configure TEI Publisher (or an app generated from it) to load components from the development server. This allows you to directly test changes you made to components within the full TEI Publisher environment.
In TEI Publisher, open `modules/config.xqm` and change variable `$config:webcomponents` to the value *dev*. Below, the variable `$config:webcomponents-cdn` should be set to `http://localhost:8000`:
```xquery
declare variable $config:webcomponents := "dev";
declare variable $config:webcomponents-cdn := "http://localhost:8000";
```
After reloading TEI Publisher in the browser, components should be loaded from your local development server.
## Building Documentation
To regenerate the API documentation, run `npm run docs`.