https://github.com/scdh/seed-frontend-components
Library of web components for building websites for digital editions.
https://github.com/scdh/seed-frontend-components
Last synced: 11 days ago
JSON representation
Library of web components for building websites for digital editions.
- Host: GitHub
- URL: https://github.com/scdh/seed-frontend-components
- Owner: SCDH
- License: mit
- Created: 2024-09-13T21:13:53.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-09T09:29:10.000Z (11 months ago)
- Last Synced: 2025-07-09T10:36:46.534Z (11 months ago)
- Language: TypeScript
- Size: 2.39 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/prettier/prettier)
# SEED Frontend Components
This is a collection of [web
components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
for building web frontends for digital editions. It's part of the
SEED, which is an acronym and stands for **S**EED **E**lectronic
**Ed**itions. If you don't like recursion you can stick to **S**CDH
**E**lectronic **Ed**itions ;-).
Why web components?
- Flexibility: Developing web components does not entail a decision to
use a certain Javascript framework (React, Vue.js, next.js,
...). They are framework-agnostic. They can even be integrated in
Imperia or other CMSs.
- Simple building blocks: Web components encapsulate complex functions
in custom HTML elements which are simple to use and simple to put
together. Have a look at the [examples folder](examples).
- Suitable for complex frontends: Managing state is the most crucial
point in a complex web frontends. This collection of web components
uses [Redux Toolkit (RTK)](https://redux-toolkit.js.org/) for state
management: The Redux store is also encapsulated in a web
component. Again, this does not entail a decision for React as a
Javascript framework.
## List of Web Components
These are the most important building blocks:
- ``: a container element that provides app context (Redux
store, etc.) to descending elements
- ``: an single HTML text in a `` element with
features for setting up synoptical presentation of texts and
highlighting passages with annotations and selecting them.
- ``: shows the last selected annotation
- ``: an empty element for providing config options,
e.g., URLs where annotations or alignment information can be found
Read the detailed documentation in the
[Wiki](https://github.com/scdh/seed-frontend-components/wiki)!
## Usage Examples
See the [*example web pages*](#example-web-pages) section below.
There's also a list of real-world [*use cases*](#use-cases) below.
## Getting started
### Installation
Install from the open [npm
registry](https://zivgitlab.uni-muenster.de/SCDH/tei-processing/seed-frontend-components/-/packages)
of the gitlab of University of Münster! The NPM package contains the
components in the `src` folder, but neither the index page nor the
`examples`.
#### Install
```shell
npm i @scdh/seed-frontend-components
```
### Using the Compiled Library of Web Components
Instead adding this package to the dependencies of your project, you
can simply load the compiled library of web components. The latest
version is only at
```
https://scdh.zivgitlabpages.uni-muenster.de/tei-processing/seed-frontend-components/seed-frontend-components.js
```
or
```
https://scdh.zivgitlabpages.uni-muenster.de/tei-processing/seed-frontend-components/seed-frontend-components.cjs
```
### Development
Run a development server, accessible through `http://localhost:5173`:
```shell
npm run dev
```
This will serve pages like `index.html`.
Run tests:
```shell
npm run test
```
#### Example Web Pages
Running the [development server](#development) will bring up several
pages with usage examples. They are contained in the
[`examples`](examples) folder.
- [examples/synopsis.html](examples/synopsis.html) shows how to use
the web components for presenting several texts in parallel or
synoptically. The content is borrowed from a project about the book
of Ijob, but shortend. The presented files have some internal JS to
make the synchronized scrolling and highlighting the annotations
etc. work.
#### API Docs
[https://scdh.zivgitlabpages.uni-muenster.de/tei-processing/seed-frontend-components/docs/](https://scdh.zivgitlabpages.uni-muenster.de/tei-processing/seed-frontend-components/docs/)
## Design Principles / Contributing
1. Use RTK (Redux Toolkit) for state management.
1. Write components the [Lit](https://lit.dev/docs/) way. Write view components!
1. Prefer TS over JS.
1. Do not configure the TS compiler to be tolerant when type checking.
## Further Reading
- [Lit documentation](https://lit.dev/docs/)
- [Vite guide](https://vitejs.dev/guide/)
## Use Cases
- [Jiob Frontend](https://scdh.zivgitlabpages.uni-muenster.de/schnocks-ijob/hiob-synopsis-frontend/): a synoptical view of different versions of the book of Jiob with annotations
- [4 Ezra](https://scdh.zivgitlabpages.uni-muenster.de/doering-4esra/esra-demo/): a synoptical view of various versions of the fourth book of Ezra