-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
728c337
commit 52e8bff
Showing
614 changed files
with
34,590 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| # <img align="left" src="https://github.com/webcomponents-preview/client/raw/main/src/assets/icons/logo.svg" alt="WCP Logo" height="43px"> Web Components Preview | ||
|
|
||
| [](https://github.com/webcomponents-preview/client/actions) | ||
| [](https://www.npmjs.com/package/@webcomponents-preview/client) | ||
| [](https://webcomponents-preview.github.io/client/latest/) | ||
|
|
||
| A storybook alike preview application for web components. It processes a given custom element manifest and renders a preview for each element with its properties and events. | ||
|
|
||
| Configuration is done by providing a schema file of your custom elements. The schema is a JSON file that describes the custom elements and their properties and should comply to the draft [Custom element manifest](https://github.com/webcomponents/custom-elements-manifest) specification. | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Generating a custom element manifest | ||
|
|
||
| We recommend to use the [`@custom-elements-manifest/analyzer` package](https://github.com/open-wc/custom-elements-manifest/tree/master/packages/analyzer) to generate a custom element manifest. | ||
|
|
||
| ### Generating readmes | ||
|
|
||
| Once you documented your components with jsdoc, you can use e.g. the [`web-component-analyzer` package](https://github.com/runem/web-component-analyzer) to generate readme files for your components as well. | ||
|
|
||
| ### Configuration | ||
|
|
||
| Just add the following script tag to your html file: | ||
|
|
||
| #### via JsDelivr | ||
|
|
||
| ```html | ||
| <script type="module" src="https://cdn.jsdelivr.net/npm/@webcomponents-preview/client"></script> | ||
| ``` | ||
|
|
||
| #### via unpkg | ||
|
|
||
| ```html | ||
| <script type="module" src="https://unpkg.com/@webcomponents-preview/client"></script> | ||
| ``` | ||
|
|
||
| Then add the following markup to your html and pass in the manifest url: | ||
|
|
||
| ```html | ||
| <wcp-root manifest-url="/custom-elements.json"></wcp-root> | ||
| ``` | ||
|
|
||
| ## Extras | ||
|
|
||
| **tbd** | ||
|
|
||
| - [ ] How to add previews from jsdoc -> cem analyzer plugin | ||
| - [ ] How to add existing readmes | ||
| - [ ] Plugin infrastructure | ||
|
|
||
|
|
||
| ## Development | ||
|
|
||
| **tbd** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| # Code examples | ||
|
|
||
| It may have some `inline code` as well. | ||
|
|
||
| ```js | ||
| const foo = 'bar'; | ||
| ``` | ||
|
|
||
| ```ts | ||
| const foo: string = 'bar'; | ||
| ``` | ||
|
|
||
| ```html | ||
| <body data-attribute="foo"> | ||
| <h1 class="title">Some headline</h1> | ||
| </body> | ||
| ``` | ||
|
|
||
| ```css | ||
| body { | ||
| background-color: #fff; | ||
| } | ||
| ``` | ||
|
|
||
| ```scss | ||
| $color: #fff; | ||
|
|
||
| body { | ||
| background-color: $color; | ||
| } | ||
| ``` | ||
|
|
||
| ```bash | ||
| $ npm install | ||
| ``` | ||
|
|
||
| ```json | ||
| { | ||
| "name": "foo", | ||
| "version": "1.0.0", | ||
| "description": "Some description" | ||
| } | ||
| ``` | ||
|
|
||
| ```yaml | ||
| name: foo | ||
| version: 1.0.0 | ||
| description: Some description | ||
| ``` |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| # Test | ||
|
|
||
| [Link to another readme (Markdown)](../README.md) | ||
|
|
||
| <a href="../README.md">Link to another readme (HTML)</a> | ||
|
|
||
| [Link to a section (Markdown)](#section) | ||
|
|
||
| <a href="#section">Link to a section (HTML)</a> | ||
|
|
||
| [Link to a section in another readme (Markdown)](../README.md#usage) | ||
|
|
||
| <a href="../README.md#usage">Link to a section in another readme (HTML)</a> | ||
|
|
||
|  | ||
|
|
||
| <img src="icons/logo.png" alt="Link to asset (HTML)"> | ||
|
|
||
| <div style="border: 3px dashed #ccc; border-radius: 5px; padding: 1rem; height: 90vh">Some spacing</div> | ||
|
|
||
| ## Section |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| # Title | ||
|
|
||
| ## Headline | ||
|
|
||
| > Some quotes allow for **bold** and _italic_ text. | ||
| | Name | Description | | ||
| | --------- | :-------------------- | | ||
| | Gandalf | The grey | | ||
| | Saruman | The white | | ||
| | Radagast | The brown | | ||
| | Sauron | The dark lord | | ||
| | Galadriel | The lady of light | | ||
| | Elrond | The half-elven | | ||
| | Arwen | The evenstar | | ||
| | Aragorn | The king | | ||
| | Boromir | The steward of Gondor | | ||
| | Faramir | The steward of Gondor | | ||
| | Denethor | The steward of Gondor | | ||
| | Frodo | The ring bearer | | ||
| | Samwise | The brave | | ||
| | Meriadoc | The merry | | ||
| | Peregrin | The fool | | ||
| | Legolas | The elf | | ||
| | Gimli | The dwarf | | ||
| | Treebeard | The ent | | ||
| | Gollum | The ring bearer | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "$schema": "./config.schema.json", | ||
| "excludeElements": ["wcp-root"], | ||
| "initialActiveElement": "wcp-button", | ||
| "additionalReadmes": [ | ||
| { | ||
| "name": "Web Component Preview", | ||
| "url": "README.md" | ||
| }, | ||
| { | ||
| "name": "Test markdown", | ||
| "url": "assets/markdown.md" | ||
| }, | ||
| { | ||
| "name": "Test inline links", | ||
| "url": "assets/inline-links.md" | ||
| }, | ||
| { | ||
| "name": "Test code", | ||
| "url": "assets/code.md" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| { | ||
| "$schema": "http://json-schema.org/draft-07/schema#", | ||
| "properties": { | ||
| "additionalReadmes": { | ||
| "description": "Defines readmes to be loaded from external sources to be displayed in the navigation.", | ||
| "items": { | ||
| "properties": { | ||
| "name": { | ||
| "type": "string" | ||
| }, | ||
| "url": { | ||
| "type": "string" | ||
| } | ||
| }, | ||
| "type": "object" | ||
| }, | ||
| "type": "array" | ||
| }, | ||
| "excludeElements": { | ||
| "items": { | ||
| "type": "string" | ||
| }, | ||
| "type": "array" | ||
| }, | ||
| "initialActiveElement": { | ||
| "description": "Allows setting an initial element to be displayed if no other element is selected.\nIf omitted, the first element will be used.", | ||
| "type": "string" | ||
| }, | ||
| "initialCodePreviewTab": { | ||
| "description": "The code previews always consist of two tabs, one for the code and one for the preview.\nThis property defines the initial tab to be selected.", | ||
| "enum": [ | ||
| "code", | ||
| "preview" | ||
| ], | ||
| "type": "string" | ||
| }, | ||
| "initialPreviewTab": { | ||
| "description": "The initial tab to be selected in the preview. Will match the name of the plugin.", | ||
| "type": "string" | ||
| }, | ||
| "labels": { | ||
| "description": "Labels to be translated or customized", | ||
| "properties": { | ||
| "additionalReadmeGroupName": { | ||
| "description": "The name of the group to be used for eventually configured additional readmes.", | ||
| "type": "string" | ||
| }, | ||
| "emptyNavigation": { | ||
| "description": "If the navigation is empty, either because no readmes nor elements are found or\nbecause the search query does not match any elements, use this label as fallback.", | ||
| "type": "string" | ||
| }, | ||
| "fallbackGroupName": { | ||
| "description": "If no groups for elements are defined, use this label as fallback for all elements", | ||
| "type": "string" | ||
| }, | ||
| "title": { | ||
| "description": "The title of the application, displayed in sidebar header and browser tab", | ||
| "type": "string" | ||
| } | ||
| }, | ||
| "type": "object" | ||
| }, | ||
| "previewFramePlugins": { | ||
| "description": "The plugins to be used for the preview frame.\nDefaults to examples, readme and viewer.", | ||
| "items": { | ||
| "type": "string" | ||
| }, | ||
| "type": "array" | ||
| }, | ||
| "previewPlugins": { | ||
| "description": "The plugins to be used for the preview.\nSet to the viewport plugin by default.", | ||
| "items": { | ||
| "type": "string" | ||
| }, | ||
| "type": "array" | ||
| } | ||
| }, | ||
| "type": "object" | ||
| } | ||
|
|
Oops, something went wrong.