https://github.com/open-wc/catalog
https://github.com/open-wc/catalog
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/open-wc/catalog
- Owner: open-wc
- Created: 2019-02-16T22:10:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:17:23.000Z (over 2 years ago)
- Last Synced: 2025-03-27T21:03:42.540Z (2 months ago)
- Language: JavaScript
- Size: 4.06 MB
- Stars: 17
- Watchers: 9
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> ## 🛠Status: In Development
>
> This custom elements catalog is currently in development.
## Custom Elements Catalog
[](https://github.com/open-wc)
This let's you search the npm registry for web components.
## Adding a web component
Be sure to have a `custom-elements.json` describing all (or one) web components within your package.
Example:
```json
{
"version": 2,
"tags": [
{
"label": "test-wc-card"
}
]
}
```
As this is still a pilot phase you will have to manually index your package.
1. Go to [http://catalog.open-wc.org/add.html](http://catalog.open-wc.org/add.html)
2. Enter you package name followed by `@` and version (example `[email protected]` or `@foo/[email protected]`)
(only the latest npm versions get added to the search index - but older vesions can still be added to our database)
## Working on it
```bash
yarn install
yarn storybook # for individual parts with mocked data
yarn start # for live page
```
## Background
Uses
- Funadb to store the data in a normalized way
- Elasticsearch (aws) to store flattened docs to make them performant searchable
## custom-elements.json
This is still a proposal so [follow the discussion!!](https://github.com/w3c/webcomponents/issues/776).
Possible example:
```json
{
"version": 2,
"tags": [
{
"label": "test-wc-card",
"attributes": [
{
"label": "header"
},
{
"label": "side",
"values": [{ "label": "A" }, { "label": "B" }]
}
],
"properties": [
{
"label": "header"
},
{
"label": "headerColor"
},
{
"label": "side",
"values": [{ "label": "A" }, { "label": "B" }]
}
],
"events": [],
"slots": []
}
]
}
```