exploRUG component setup
This commit is contained in:
2
docs-src/.eleventyignore
Normal file
2
docs-src/.eleventyignore
Normal file
@@ -0,0 +1,2 @@
|
||||
# Ignore files with a leading underscore; useful for e.g. readmes in source documentation
|
||||
_*.md
|
||||
0
docs-src/.nojekyll
Normal file
0
docs-src/.nojekyll
Normal file
7
docs-src/_README.md
Normal file
7
docs-src/_README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
This directory contains the sources for the static site contained in the /docs/ directory. The site is based on the [eleventy](11ty.dev) static site generator.
|
||||
|
||||
The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages "Source" setting to "master branch /docs folder".
|
||||
|
||||
To view the site locally, run `npm run docs:serve`.
|
||||
|
||||
To edit the site, add to or edit the files in this directory then run `npm run docs` to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.
|
||||
16
docs-src/_data/api.11tydata.js
Normal file
16
docs-src/_data/api.11tydata.js
Normal file
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2021 Google LLC
|
||||
* SPDX-License-Identifier: BSD-3-Clause
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
|
||||
module.exports = () => {
|
||||
const customElements = JSON.parse(
|
||||
fs.readFileSync('custom-elements.json', 'utf-8')
|
||||
);
|
||||
return {
|
||||
customElements,
|
||||
};
|
||||
};
|
||||
43
docs-src/_includes/example.11ty.cjs
Normal file
43
docs-src/_includes/example.11ty.cjs
Normal file
@@ -0,0 +1,43 @@
|
||||
const page = require('./page.11ty.cjs');
|
||||
const relative = require('./relative-path.cjs');
|
||||
|
||||
/**
|
||||
* This template extends the page template and adds an examples list.
|
||||
*/
|
||||
module.exports = function (data) {
|
||||
return page({
|
||||
...data,
|
||||
content: renderExample(data),
|
||||
});
|
||||
};
|
||||
|
||||
const renderExample = ({name, content, collections, page}) => {
|
||||
return `
|
||||
<h1>Example: ${name}</h1>
|
||||
<section class="examples">
|
||||
<nav class="collection">
|
||||
<ul>
|
||||
${
|
||||
collections.example === undefined
|
||||
? ''
|
||||
: collections.example
|
||||
.map(
|
||||
(post) => `
|
||||
<li class=${post.url === page.url ? 'selected' : ''}>
|
||||
<a href="${relative(
|
||||
page.url,
|
||||
post.url
|
||||
)}">${post.data.description.replace(/</g, '<')}</a>
|
||||
</li>
|
||||
`
|
||||
)
|
||||
.join('')
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
${content}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
};
|
||||
9
docs-src/_includes/footer.11ty.cjs
Normal file
9
docs-src/_includes/footer.11ty.cjs
Normal file
@@ -0,0 +1,9 @@
|
||||
module.exports = function (data) {
|
||||
return `
|
||||
<footer>
|
||||
<p>
|
||||
Made with
|
||||
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
|
||||
</p>
|
||||
</footer>`;
|
||||
};
|
||||
7
docs-src/_includes/header.11ty.cjs
Normal file
7
docs-src/_includes/header.11ty.cjs
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = function (data) {
|
||||
return `
|
||||
<header>
|
||||
<h1><my-element></h1>
|
||||
<h2>A web component just for me.</h2>
|
||||
</header>`;
|
||||
};
|
||||
11
docs-src/_includes/nav.11ty.cjs
Normal file
11
docs-src/_includes/nav.11ty.cjs
Normal file
@@ -0,0 +1,11 @@
|
||||
const relative = require('./relative-path.cjs');
|
||||
|
||||
module.exports = function ({page}) {
|
||||
return `
|
||||
<nav>
|
||||
<a href="${relative(page.url, '/')}">Home</a>
|
||||
<a href="${relative(page.url, '/examples/')}">Examples</a>
|
||||
<a href="${relative(page.url, '/api/')}">API</a>
|
||||
<a href="${relative(page.url, '/install/')}">Install</a>
|
||||
</nav>`;
|
||||
};
|
||||
37
docs-src/_includes/page.11ty.cjs
Normal file
37
docs-src/_includes/page.11ty.cjs
Normal file
@@ -0,0 +1,37 @@
|
||||
const header = require('./header.11ty.cjs');
|
||||
const footer = require('./footer.11ty.cjs');
|
||||
const nav = require('./nav.11ty.cjs');
|
||||
const relative = require('./relative-path.cjs');
|
||||
|
||||
module.exports = function (data) {
|
||||
const {title, page, content} = data;
|
||||
return `
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${title}</title>
|
||||
<link rel="stylesheet" href="${relative(page.url, '/docs.css')}">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
|
||||
<link href="${relative(page.url, '/prism-okaidia.css')}" rel="stylesheet" />
|
||||
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
||||
<script src="/node_modules/lit/polyfill-support.js"></script>
|
||||
<script type="module" src="${relative(
|
||||
page.url,
|
||||
'/my-element.bundled.js'
|
||||
)}"></script>
|
||||
</head>
|
||||
<body>
|
||||
${header()}
|
||||
${nav(data)}
|
||||
<div id="main-wrapper">
|
||||
<main>
|
||||
${content}
|
||||
</main>
|
||||
</div>
|
||||
${footer()}
|
||||
</body>
|
||||
</html>`;
|
||||
};
|
||||
9
docs-src/_includes/relative-path.cjs
Normal file
9
docs-src/_includes/relative-path.cjs
Normal file
@@ -0,0 +1,9 @@
|
||||
const path = require('path').posix;
|
||||
|
||||
module.exports = (base, p) => {
|
||||
const relativePath = path.relative(base, p);
|
||||
if (p.endsWith('/') && !relativePath.endsWith('/') && relativePath !== '') {
|
||||
return relativePath + '/';
|
||||
}
|
||||
return relativePath;
|
||||
};
|
||||
127
docs-src/api.11ty.cjs
Normal file
127
docs-src/api.11ty.cjs
Normal file
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* This page generates its content from the custom-element.json file as read by
|
||||
* the _data/api.11tydata.js script.
|
||||
*/
|
||||
module.exports = class Docs {
|
||||
data() {
|
||||
return {
|
||||
layout: 'page.11ty.cjs',
|
||||
title: '<my-element> ⌲ Docs',
|
||||
};
|
||||
}
|
||||
|
||||
render(data) {
|
||||
const manifest = data.api['11tydata'].customElements;
|
||||
const elements = manifest.modules.reduce(
|
||||
(els, module) =>
|
||||
els.concat(
|
||||
module.declarations?.filter((dec) => dec.customElement) ?? []
|
||||
),
|
||||
[]
|
||||
);
|
||||
return `
|
||||
<h1>API</h1>
|
||||
${elements
|
||||
.map(
|
||||
(element) => `
|
||||
<h2><${element.tagName}></h2>
|
||||
<div>
|
||||
${element.description}
|
||||
</div>
|
||||
${renderTable(
|
||||
'Attributes',
|
||||
['name', 'description', 'type.text', 'default'],
|
||||
element.attributes
|
||||
)}
|
||||
${renderTable(
|
||||
'Properties',
|
||||
['name', 'attribute', 'description', 'type.text', 'default'],
|
||||
element.members.filter((m) => m.kind === 'field')
|
||||
)}
|
||||
${renderTable(
|
||||
'Methods',
|
||||
['name', 'parameters', 'description', 'return.type.text'],
|
||||
element.members
|
||||
.filter((m) => m.kind === 'method' && m.privacy !== 'private')
|
||||
.map((m) => ({
|
||||
...m,
|
||||
parameters: renderTable(
|
||||
'',
|
||||
['name', 'description', 'type.text'],
|
||||
m.parameters
|
||||
),
|
||||
}))
|
||||
)}
|
||||
${renderTable('Events', ['name', 'description'], element.events)}
|
||||
${renderTable(
|
||||
'Slots',
|
||||
[['name', '(default)'], 'description'],
|
||||
element.slots
|
||||
)}
|
||||
${renderTable(
|
||||
'CSS Shadow Parts',
|
||||
['name', 'description'],
|
||||
element.cssParts
|
||||
)}
|
||||
${renderTable(
|
||||
'CSS Custom Properties',
|
||||
['name', 'description'],
|
||||
element.cssProperties
|
||||
)}
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reads a (possibly deep) path off of an object.
|
||||
*/
|
||||
const get = (obj, path) => {
|
||||
let fallback = '';
|
||||
if (Array.isArray(path)) {
|
||||
[path, fallback] = path;
|
||||
}
|
||||
const parts = path.split('.');
|
||||
while (obj && parts.length) {
|
||||
obj = obj[parts.shift()];
|
||||
}
|
||||
return obj == null || obj === '' ? fallback : obj;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders a table of data, plucking the given properties from each item in
|
||||
* `data`.
|
||||
*/
|
||||
const renderTable = (name, properties, data) => {
|
||||
if (data === undefined || data.length === 0) {
|
||||
return '';
|
||||
}
|
||||
return `
|
||||
${name ? `<h3>${name}</h3>` : ''}
|
||||
<table>
|
||||
<tr>
|
||||
${properties
|
||||
.map(
|
||||
(p) =>
|
||||
`<th>${capitalize(
|
||||
(Array.isArray(p) ? p[0] : p).split('.')[0]
|
||||
)}</th>`
|
||||
)
|
||||
.join('')}
|
||||
</tr>
|
||||
${data
|
||||
.map(
|
||||
(i) => `
|
||||
<tr>
|
||||
${properties.map((p) => `<td>${get(i, p)}</td>`).join('')}
|
||||
</tr>
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
</table>
|
||||
`;
|
||||
};
|
||||
|
||||
const capitalize = (s) => s[0].toUpperCase() + s.substring(1);
|
||||
163
docs-src/docs.css
Normal file
163
docs-src/docs.css
Normal file
@@ -0,0 +1,163 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-family: 'Open Sans', arial, sans-serif;
|
||||
min-width: min-content;
|
||||
min-height: 100vh;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 360px;
|
||||
margin: 0;
|
||||
background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: gray;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
font-weight: 300;
|
||||
margin: 64px 0 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
width: auto;
|
||||
font-size: 2.8em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
grid-template-columns: repeat(auto-fit, 240px);
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
color: #444;
|
||||
display: block;
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav.collection {
|
||||
border: none;
|
||||
}
|
||||
|
||||
nav.collection > ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav.collection > ul > li {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
nav.collection > ul > li.selected {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
nav.collection a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav.collection a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
section.columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
|
||||
grid-gap: 48px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.columns > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
section.examples {
|
||||
display: grid;
|
||||
grid-template-columns: 240px minmax(400px, 784px);
|
||||
grid-gap: 48px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.examples h2:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: solid 1px #aaa;
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
34
docs-src/examples/index.md
Normal file
34
docs-src/examples/index.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
layout: example.11ty.cjs
|
||||
title: <my-element> ⌲ Examples ⌲ Basic
|
||||
tags: example
|
||||
name: Basic
|
||||
description: A basic example
|
||||
---
|
||||
|
||||
<style>
|
||||
my-element p {
|
||||
border: solid 1px blue;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
<my-element>
|
||||
<p>This is child content</p>
|
||||
</my-element>
|
||||
|
||||
<h3>CSS</h3>
|
||||
|
||||
```css
|
||||
p {
|
||||
border: solid 1px blue;
|
||||
padding: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
<h3>HTML</h3>
|
||||
|
||||
```html
|
||||
<my-element>
|
||||
<p>This is child content</p>
|
||||
</my-element>
|
||||
```
|
||||
15
docs-src/examples/name-property.md
Normal file
15
docs-src/examples/name-property.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
layout: example.11ty.cjs
|
||||
title: <my-element> ⌲ Examples ⌲ Name Property
|
||||
tags: example
|
||||
name: Name Property
|
||||
description: Setting the name property
|
||||
---
|
||||
|
||||
<my-element name="Earth"></my-element>
|
||||
|
||||
<h3>HTML</h3>
|
||||
|
||||
```html
|
||||
<my-element name="Earth"></my-element>
|
||||
```
|
||||
76
docs-src/index.md
Normal file
76
docs-src/index.md
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
layout: page.11ty.cjs
|
||||
title: <my-element> ⌲ Home
|
||||
---
|
||||
|
||||
# <my-element>
|
||||
|
||||
`<my-element>` is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.
|
||||
|
||||
## As easy as HTML
|
||||
|
||||
<section class="columns">
|
||||
<div>
|
||||
|
||||
`<my-element>` is just an HTML element. You can it anywhere you can use HTML!
|
||||
|
||||
```html
|
||||
<my-element></my-element>
|
||||
```
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<my-element></my-element>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
## Configure with attributes
|
||||
|
||||
<section class="columns">
|
||||
<div>
|
||||
|
||||
`<my-element>` can be configured with attributed in plain HTML.
|
||||
|
||||
```html
|
||||
<my-element name="HTML"></my-element>
|
||||
```
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<my-element name="HTML"></my-element>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
## Declarative rendering
|
||||
|
||||
<section class="columns">
|
||||
<div>
|
||||
|
||||
`<my-element>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
|
||||
|
||||
```js
|
||||
import {html, render} from 'lit-html';
|
||||
|
||||
const name = 'lit-html';
|
||||
|
||||
render(
|
||||
html`
|
||||
<h2>This is a <my-element></h2>
|
||||
<my-element .name=${name}></my-element>
|
||||
`,
|
||||
document.body
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<h2>This is a <my-element></h2>
|
||||
<my-element name="lit-html"></my-element>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
32
docs-src/install.md
Normal file
32
docs-src/install.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
layout: page.11ty.cjs
|
||||
title: <my-element> ⌲ Install
|
||||
---
|
||||
|
||||
# Install
|
||||
|
||||
`<my-element>` is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
|
||||
|
||||
## Local Installation
|
||||
|
||||
```bash
|
||||
npm i my-element
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
npm CDNs like [unpkg.com]() can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.
|
||||
|
||||
For this element to work from unpkg.com specifically, you need to include the `?module` query parameter, which tells unpkg.com to rewrite "bare" module specifiers to full URLs.
|
||||
|
||||
### HTML
|
||||
|
||||
```html
|
||||
<script type="module" src="https://unpkg.com/my-element?module"></script>
|
||||
```
|
||||
|
||||
### JavaScript
|
||||
|
||||
```html
|
||||
import {MyElement} from 'https://unpkg.com/my-element?module';
|
||||
```
|
||||
3
docs-src/package.json
Normal file
3
docs-src/package.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "commonjs"
|
||||
}
|
||||
Reference in New Issue
Block a user