elex/js-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-02-26 01:30

Browse Source
This commit is contained in:
Elex
2023-02-26 01:30:37 +09:00
commit 9a13ccbd17
122 changed files with 32148 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lit-element-starter-ts/docs-src/.eleventyignore Normal file
View File

@@ -0,0 +1,2 @@
# Ignore files with a leading underscore; useful for e.g. readmes in source documentation
_*.md

0
lit-element-starter-ts/docs-src/.nojekyll Normal file
View File

7
lit-element-starter-ts/docs-src/_README.md Normal file
View 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
lit-element-starter-ts/docs-src/_data/api.11tydata.js Normal file
View 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
lit-element-starter-ts/docs-src/_includes/example.11ty.cjs Normal file
View 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('<', '&lt;')}</a>
</li>
`
)
.join('')
}
</ul>
</nav>
<div>
${content}
</div>
</section>
`;
};

9
lit-element-starter-ts/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-starter-ts">lit-starter-ts</a>
</p>
</footer>`;
};

7
lit-element-starter-ts/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>`;
};

11
lit-element-starter-ts/docs-src/_includes/nav.11ty.cjs Normal file
View 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
lit-element-starter-ts/docs-src/_includes/page.11ty.cjs Normal file
View 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
lit-element-starter-ts/docs-src/_includes/relative-path.cjs Normal file
View 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;
};

90
lit-element-starter-ts/docs-src/api.11ty.cjs Normal file
View File

@@ -0,0 +1,90 @@
/**
* 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);

162
lit-element-starter-ts/docs-src/docs.css Normal file
View File

@@ -0,0 +1,162 @@
* {
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;
}

34
lit-element-starter-ts/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
lit-element-starter-ts/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>
```

76
lit-element-starter-ts/docs-src/index.md Normal file
View File

@@ -0,0 +1,76 @@
---
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 &lt;my-element&gt;</h2>
<my-element .name=${name}></my-element>
`,
document.body
);
```
</div>
<div>
<h2>This is a &lt;my-element&gt;</h2>
<my-element name="lit-html"></my-element>
</div>
</section>

32
lit-element-starter-ts/docs-src/install.md Normal file
View 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
lit-element-starter-ts/docs-src/package.json Normal file
View File

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