dikshya/exploRUGComponent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a static site generator

Browse Source 
There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.
This commit is contained in:
Justin Fagnani
2019-12-19 20:48:45 -08:00
committed by Justin Fagnani
parent 2b3e914666
commit fc662728eb
28 changed files with 5770 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs-src/_README.md Normal file
View File

@@ -0,0 +1,7 @@
This directory containts 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 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.

8
docs-src/_data/api.11tydata.js Normal file
View File

@@ -0,0 +1,8 @@
const fs = require('fs');
module.exports = () => {
const customElements = JSON.parse(fs.readFileSync('custom-elements.json', 'utf-8'));
return {
customElements,
};
};

34
docs-src/_includes/example.11ty.cjs Normal file
View File

@@ -0,0 +1,34 @@
const page = require('./page.11ty.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="/docs${post.url}">${ post.data.description.replace('<', '&lt;') }</a>
</li>
`).join('')}
</ul>
</nav>
<div>
${content}
</div>
</section>
`;
};

9
docs-src/_includes/footer.11ty.cjs Normal file
View File

@@ -0,0 +1,9 @@
module.exports = function(data) {
return `
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>`;
};

7
docs-src/_includes/header.11ty.cjs Normal file
View File

@@ -0,0 +1,7 @@
module.exports = function(data) {
return `
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>`;
};

9
docs-src/_includes/nav.11ty.cjs Normal file
View File

@@ -0,0 +1,9 @@
module.exports = function(data) {
return `
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>`;
};

30
docs-src/_includes/page.11ty.cjs Normal file
View File

@@ -0,0 +1,30 @@
const header = require('./header.11ty.cjs');
const footer = require('./footer.11ty.cjs');
const nav = require('./nav.11ty.cjs');
module.exports = function(data) {
return `
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${data.title}</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
${header()}
${nav(data)}
<div id="main-wrapper">
<main>
${data.content}
</main>
</div>
${footer()}
</body>
</html>`;
};

85
docs-src/api.11ty.cjs Normal file
View File

@@ -0,0 +1,85 @@
/**
* 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 customElements = data.api['11tydata'].customElements;
const tags = customElements.tags;
return `
<h1>API</h1>
${tags.map((tag) => `
<h2>&lt;${tag.name}></h2>
<div>
${tag.description}
</div>
${renderTable(
'Attributes',
['name', 'description', 'type', 'default'],
tag.attributes)}
${renderTable(
'Properties',
['name', 'attribute', 'description', 'type', 'default'],
tag.properties)}
${/*
* Methods are not output by web-component-analyzer yet (a bug), so
* this is a placeholder so that at least _something_ will be output
* when that is fixed, and element maintainers will hopefully have a
* signal to update this file to add the neccessary columns.
*/
renderTable(
'Methods',
['name', 'description'],
tag.methods)}
${renderTable(
'Events',
['name', 'description'],
tag.events)}
${renderTable(
'Slots',
['name', 'description'],
tag.slots)}
${renderTable(
'CSS Shadow Parts',
['name', 'description'],
tag.cssParts)}
${renderTable(
'CSS Custom Properties',
['name', 'description'],
tag.cssProperties)}
`).join('')}
`;
}
}
/**
* Renders a table of data, plucking the given properties from each item in
* `data`.
*/
const renderTable = (name, properties, data) => {
if (data === undefined) {
return ''
}
return `
<h3>${name}</h3>
<table>
<tr>
${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
</tr>
${data.map((i) => `
<tr>
${properties.map((p) => `<td>${i[p]}</td>`).join('')}
</tr>
`).join('')}
</table>
`
};
const capitalize = (s) => s[0].toUpperCase() + s.substring(1);

34
docs-src/examples/index.md Normal file
View 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
View 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>
```

72
docs-src/index.md Normal file
View File

@@ -0,0 +1,72 @@
---
layout: page.11ty.cjs
title: <my-element> ⌲ Home
---
# &lt;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>
<my-element name="lit-html"></my-element>
</div>
</section>

30
docs-src/install.md Normal file
View File

@@ -0,0 +1,30 @@
---
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 specificers 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
View File

@@ -0,0 +1,3 @@
{
"type": "commonjs"
}