niris-public-community-components 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eleventy.cjs +21 -0
- package/.eslintignore +6 -0
- package/.eslintrc.json +51 -0
- package/.prettierrc.json +7 -0
- package/CHANGELOG.md +98 -0
- package/LICENSE +28 -0
- package/README.md +93 -0
- package/README_DEV.md +154 -0
- package/dev/README.md +1 -0
- package/dev/index.html +22 -0
- package/dev/text-area-niris.html +30 -0
- package/docs/.nojekyll +0 -0
- package/docs/api/index.html +149 -0
- package/docs/docs.css +163 -0
- package/docs/examples/index.html +75 -0
- package/docs/examples/name-property/index.html +65 -0
- package/docs/images/example1.png +0 -0
- package/docs/images/example2.png +0 -0
- package/docs/index.html +75 -0
- package/docs/install/index.html +53 -0
- package/docs/prism-okaidia.css +123 -0
- package/docs-src/.eleventyignore +2 -0
- package/docs-src/.nojekyll +0 -0
- package/docs-src/_README.md +7 -0
- package/docs-src/_data/api.11tydata.js +16 -0
- package/docs-src/_includes/example.11ty.cjs +43 -0
- package/docs-src/_includes/footer.11ty.cjs +9 -0
- package/docs-src/_includes/header.11ty.cjs +7 -0
- package/docs-src/_includes/nav.11ty.cjs +11 -0
- package/docs-src/_includes/page.11ty.cjs +37 -0
- package/docs-src/_includes/relative-path.cjs +9 -0
- package/docs-src/api.11ty.cjs +127 -0
- package/docs-src/docs.css +163 -0
- package/docs-src/examples/index.md +34 -0
- package/docs-src/examples/name-property.md +15 -0
- package/docs-src/index.md +76 -0
- package/docs-src/install.md +32 -0
- package/docs-src/package.json +3 -0
- package/index.html +17 -0
- package/my-element.js +79 -0
- package/package.json +76 -0
- package/rollup.config.js +42 -0
- package/src/my-element.ts +68 -0
- package/src/test/my-element_test.ts +62 -0
- package/src/textarea-to-niris.ts +218 -0
- package/tsconfig.json +34 -0
- package/web-dev-server.config.js +25 -0
- package/web-test-runner.config.js +120 -0
package/docs/docs.css
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
* {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
body {
|
|
6
|
+
margin: 0;
|
|
7
|
+
color: #333;
|
|
8
|
+
font-family: 'Open Sans', arial, sans-serif;
|
|
9
|
+
min-width: min-content;
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
font-size: 18px;
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
align-items: stretch;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#main-wrapper {
|
|
18
|
+
flex-grow: 1;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
main {
|
|
22
|
+
max-width: 1024px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
a:visited {
|
|
27
|
+
color: inherit;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
header {
|
|
31
|
+
width: 100%;
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
height: 360px;
|
|
37
|
+
margin: 0;
|
|
38
|
+
background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
|
|
39
|
+
color: white;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
footer {
|
|
43
|
+
width: 100%;
|
|
44
|
+
min-height: 120px;
|
|
45
|
+
background: gray;
|
|
46
|
+
color: white;
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
padding: 12px;
|
|
51
|
+
margin-top: 64px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
h1 {
|
|
55
|
+
font-size: 2.5em;
|
|
56
|
+
font-weight: 400;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
h2 {
|
|
60
|
+
font-size: 1.6em;
|
|
61
|
+
font-weight: 300;
|
|
62
|
+
margin: 64px 0 12px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
h3 {
|
|
66
|
+
font-weight: 300;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
header h1 {
|
|
70
|
+
width: auto;
|
|
71
|
+
font-size: 2.8em;
|
|
72
|
+
margin: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
header h2 {
|
|
76
|
+
width: auto;
|
|
77
|
+
margin: 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
nav {
|
|
81
|
+
display: grid;
|
|
82
|
+
width: 100%;
|
|
83
|
+
max-width: 100%;
|
|
84
|
+
grid-template-columns: repeat(auto-fit, 240px);
|
|
85
|
+
justify-content: center;
|
|
86
|
+
border-bottom: 1px solid #efefef;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
nav > a {
|
|
90
|
+
color: #444;
|
|
91
|
+
display: block;
|
|
92
|
+
flex: 1;
|
|
93
|
+
font-size: 18px;
|
|
94
|
+
padding: 20px 0;
|
|
95
|
+
text-align: center;
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
nav > a:hover {
|
|
100
|
+
text-decoration: underline;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
nav.collection {
|
|
104
|
+
border: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
nav.collection > ul {
|
|
108
|
+
padding: 0;
|
|
109
|
+
list-style: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
nav.collection > ul > li {
|
|
113
|
+
padding: 4px 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
nav.collection > ul > li.selected {
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
nav.collection a {
|
|
121
|
+
text-decoration: none;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
nav.collection a:hover {
|
|
125
|
+
text-decoration: underline;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
section.columns {
|
|
129
|
+
display: grid;
|
|
130
|
+
grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
|
|
131
|
+
grid-gap: 48px;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
section.columns > div {
|
|
136
|
+
flex: 1;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
section.examples {
|
|
140
|
+
display: grid;
|
|
141
|
+
grid-template-columns: 240px minmax(400px, 784px);
|
|
142
|
+
grid-gap: 48px;
|
|
143
|
+
justify-content: center;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
section.examples h2:first-of-type {
|
|
147
|
+
margin-top: 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
table {
|
|
151
|
+
width: 100%;
|
|
152
|
+
border-collapse: collapse;
|
|
153
|
+
}
|
|
154
|
+
th {
|
|
155
|
+
font-weight: 600;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
td, th {
|
|
159
|
+
border: solid 1px #aaa;
|
|
160
|
+
padding: 4px;
|
|
161
|
+
text-align: left;
|
|
162
|
+
vertical-align: top;
|
|
163
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
|
|
2
|
+
<!doctype html>
|
|
3
|
+
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title><my-element> ⌲ Examples ⌲ Basic</title>
|
|
9
|
+
<link rel="stylesheet" href="../docs.css">
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
|
|
11
|
+
<link href="../prism-okaidia.css" rel="stylesheet" />
|
|
12
|
+
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
|
13
|
+
<script src="/node_modules/lit/polyfill-support.js"></script>
|
|
14
|
+
<script type="module" src="../my-element.bundled.js"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
|
|
18
|
+
<header>
|
|
19
|
+
<h1><my-element></h1>
|
|
20
|
+
<h2>A web component just for me.</h2>
|
|
21
|
+
</header>
|
|
22
|
+
|
|
23
|
+
<nav>
|
|
24
|
+
<a href="../">Home</a>
|
|
25
|
+
<a href="">Examples</a>
|
|
26
|
+
<a href="../api/">API</a>
|
|
27
|
+
<a href="../install/">Install</a>
|
|
28
|
+
</nav>
|
|
29
|
+
<div id="main-wrapper">
|
|
30
|
+
<main>
|
|
31
|
+
|
|
32
|
+
<h1>Example: Basic</h1>
|
|
33
|
+
<section class="examples">
|
|
34
|
+
<nav class="collection">
|
|
35
|
+
<ul>
|
|
36
|
+
|
|
37
|
+
<li class=selected>
|
|
38
|
+
<a href="">A basic example</a>
|
|
39
|
+
</li>
|
|
40
|
+
|
|
41
|
+
<li class=>
|
|
42
|
+
<a href="name-property/">Setting the name property</a>
|
|
43
|
+
</li>
|
|
44
|
+
|
|
45
|
+
</ul>
|
|
46
|
+
</nav>
|
|
47
|
+
<div>
|
|
48
|
+
<style>
|
|
49
|
+
my-element p {
|
|
50
|
+
border: solid 1px blue;
|
|
51
|
+
padding: 8px;
|
|
52
|
+
}
|
|
53
|
+
</style>
|
|
54
|
+
<my-element>
|
|
55
|
+
<p>This is child content</p>
|
|
56
|
+
</my-element>
|
|
57
|
+
<h3>CSS</h3>
|
|
58
|
+
<pre class="language-css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
|
|
59
|
+
<h3>HTML</h3>
|
|
60
|
+
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-element</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-element</span><span class="token punctuation">></span></span></code></pre>
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
</section>
|
|
64
|
+
|
|
65
|
+
</main>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<footer>
|
|
69
|
+
<p>
|
|
70
|
+
Made with
|
|
71
|
+
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
|
|
72
|
+
</p>
|
|
73
|
+
</footer>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
|
|
2
|
+
<!doctype html>
|
|
3
|
+
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title><my-element> ⌲ Examples ⌲ Name Property</title>
|
|
9
|
+
<link rel="stylesheet" href="../../docs.css">
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
|
|
11
|
+
<link href="../../prism-okaidia.css" rel="stylesheet" />
|
|
12
|
+
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
|
13
|
+
<script src="/node_modules/lit/polyfill-support.js"></script>
|
|
14
|
+
<script type="module" src="../../my-element.bundled.js"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
|
|
18
|
+
<header>
|
|
19
|
+
<h1><my-element></h1>
|
|
20
|
+
<h2>A web component just for me.</h2>
|
|
21
|
+
</header>
|
|
22
|
+
|
|
23
|
+
<nav>
|
|
24
|
+
<a href="../../">Home</a>
|
|
25
|
+
<a href="../">Examples</a>
|
|
26
|
+
<a href="../../api/">API</a>
|
|
27
|
+
<a href="../../install/">Install</a>
|
|
28
|
+
</nav>
|
|
29
|
+
<div id="main-wrapper">
|
|
30
|
+
<main>
|
|
31
|
+
|
|
32
|
+
<h1>Example: Name Property</h1>
|
|
33
|
+
<section class="examples">
|
|
34
|
+
<nav class="collection">
|
|
35
|
+
<ul>
|
|
36
|
+
|
|
37
|
+
<li class=>
|
|
38
|
+
<a href="../">A basic example</a>
|
|
39
|
+
</li>
|
|
40
|
+
|
|
41
|
+
<li class=selected>
|
|
42
|
+
<a href="">Setting the name property</a>
|
|
43
|
+
</li>
|
|
44
|
+
|
|
45
|
+
</ul>
|
|
46
|
+
</nav>
|
|
47
|
+
<div>
|
|
48
|
+
<p><my-element name="Earth"></my-element></p>
|
|
49
|
+
<h3>HTML</h3>
|
|
50
|
+
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-element</span><span class="token punctuation">></span></span></code></pre>
|
|
51
|
+
|
|
52
|
+
</div>
|
|
53
|
+
</section>
|
|
54
|
+
|
|
55
|
+
</main>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<footer>
|
|
59
|
+
<p>
|
|
60
|
+
Made with
|
|
61
|
+
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
|
|
62
|
+
</p>
|
|
63
|
+
</footer>
|
|
64
|
+
</body>
|
|
65
|
+
</html>
|
|
Binary file
|
|
Binary file
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
|
|
2
|
+
<!doctype html>
|
|
3
|
+
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title><my-element> ⌲ Home</title>
|
|
9
|
+
<link rel="stylesheet" href="docs.css">
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
|
|
11
|
+
<link href="prism-okaidia.css" rel="stylesheet" />
|
|
12
|
+
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
|
13
|
+
<script src="/node_modules/lit/polyfill-support.js"></script>
|
|
14
|
+
<script type="module" src="my-element.bundled.js"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
|
|
18
|
+
<header>
|
|
19
|
+
<h1><my-element></h1>
|
|
20
|
+
<h2>A web component just for me.</h2>
|
|
21
|
+
</header>
|
|
22
|
+
|
|
23
|
+
<nav>
|
|
24
|
+
<a href="">Home</a>
|
|
25
|
+
<a href="examples/">Examples</a>
|
|
26
|
+
<a href="api/">API</a>
|
|
27
|
+
<a href="install/">Install</a>
|
|
28
|
+
</nav>
|
|
29
|
+
<div id="main-wrapper">
|
|
30
|
+
<main>
|
|
31
|
+
<h1><my-element></h1>
|
|
32
|
+
<p><code><my-element></code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
|
|
33
|
+
<h2>As easy as HTML</h2>
|
|
34
|
+
<section class="columns">
|
|
35
|
+
<div>
|
|
36
|
+
<p><code><my-element></code> is just an HTML element. You can it anywhere you can use HTML!</p>
|
|
37
|
+
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-element</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-element</span><span class="token punctuation">></span></span></code></pre>
|
|
38
|
+
</div>
|
|
39
|
+
<div>
|
|
40
|
+
<p><my-element></my-element></p>
|
|
41
|
+
</div>
|
|
42
|
+
</section>
|
|
43
|
+
<h2>Configure with attributes</h2>
|
|
44
|
+
<section class="columns">
|
|
45
|
+
<div>
|
|
46
|
+
<p><code><my-element></code> can be configured with attributed in plain HTML.</p>
|
|
47
|
+
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-element</span><span class="token punctuation">></span></span></code></pre>
|
|
48
|
+
</div>
|
|
49
|
+
<div>
|
|
50
|
+
<p><my-element name="HTML"></my-element></p>
|
|
51
|
+
</div>
|
|
52
|
+
</section>
|
|
53
|
+
<h2>Declarative rendering</h2>
|
|
54
|
+
<section class="columns">
|
|
55
|
+
<div>
|
|
56
|
+
<p><code><my-element></code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
|
|
57
|
+
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token function">render</span><span class="token punctuation">(</span><br> html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br> <h2>This is a &lt;my-element&gt;</h2><br> <my-element .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">></my-element><br> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><br> document<span class="token punctuation">.</span>body<br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
|
58
|
+
</div>
|
|
59
|
+
<div>
|
|
60
|
+
<h2>This is a <my-element></h2>
|
|
61
|
+
<my-element name="lit-html"></my-element>
|
|
62
|
+
</div>
|
|
63
|
+
</section>
|
|
64
|
+
|
|
65
|
+
</main>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<footer>
|
|
69
|
+
<p>
|
|
70
|
+
Made with
|
|
71
|
+
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
|
|
72
|
+
</p>
|
|
73
|
+
</footer>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
|
|
2
|
+
<!doctype html>
|
|
3
|
+
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title><my-element> ⌲ Install</title>
|
|
9
|
+
<link rel="stylesheet" href="../docs.css">
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
|
|
11
|
+
<link href="../prism-okaidia.css" rel="stylesheet" />
|
|
12
|
+
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
|
13
|
+
<script src="/node_modules/lit/polyfill-support.js"></script>
|
|
14
|
+
<script type="module" src="../my-element.bundled.js"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
|
|
18
|
+
<header>
|
|
19
|
+
<h1><my-element></h1>
|
|
20
|
+
<h2>A web component just for me.</h2>
|
|
21
|
+
</header>
|
|
22
|
+
|
|
23
|
+
<nav>
|
|
24
|
+
<a href="../">Home</a>
|
|
25
|
+
<a href="../examples/">Examples</a>
|
|
26
|
+
<a href="../api/">API</a>
|
|
27
|
+
<a href="">Install</a>
|
|
28
|
+
</nav>
|
|
29
|
+
<div id="main-wrapper">
|
|
30
|
+
<main>
|
|
31
|
+
<h1>Install</h1>
|
|
32
|
+
<p><code><my-element></code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
|
|
33
|
+
<h2>Local Installation</h2>
|
|
34
|
+
<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i my-element</code></pre>
|
|
35
|
+
<h2>CDN</h2>
|
|
36
|
+
<p>npm CDNs like <a href="">unpkg.com</a> can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.</p>
|
|
37
|
+
<p>For this element to work from unpkg.com specifically, you need to include the <code>?module</code> query parameter, which tells unpkg.com to rewrite "bare" module specifiers to full URLs.</p>
|
|
38
|
+
<h3>HTML</h3>
|
|
39
|
+
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
|
40
|
+
<h3>JavaScript</h3>
|
|
41
|
+
<pre class="language-html"><code class="language-html">import {MyElement} from 'https://unpkg.com/my-element?module';</code></pre>
|
|
42
|
+
|
|
43
|
+
</main>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<footer>
|
|
47
|
+
<p>
|
|
48
|
+
Made with
|
|
49
|
+
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
|
|
50
|
+
</p>
|
|
51
|
+
</footer>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* okaidia theme for JavaScript, CSS and HTML
|
|
3
|
+
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
|
4
|
+
* @author ocodia
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
code[class*="language-"],
|
|
8
|
+
pre[class*="language-"] {
|
|
9
|
+
color: #f8f8f2;
|
|
10
|
+
background: none;
|
|
11
|
+
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
|
12
|
+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
13
|
+
font-size: 1em;
|
|
14
|
+
text-align: left;
|
|
15
|
+
white-space: pre;
|
|
16
|
+
word-spacing: normal;
|
|
17
|
+
word-break: normal;
|
|
18
|
+
word-wrap: normal;
|
|
19
|
+
line-height: 1.5;
|
|
20
|
+
|
|
21
|
+
-moz-tab-size: 4;
|
|
22
|
+
-o-tab-size: 4;
|
|
23
|
+
tab-size: 4;
|
|
24
|
+
|
|
25
|
+
-webkit-hyphens: none;
|
|
26
|
+
-moz-hyphens: none;
|
|
27
|
+
-ms-hyphens: none;
|
|
28
|
+
hyphens: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Code blocks */
|
|
32
|
+
pre[class*="language-"] {
|
|
33
|
+
padding: 1em;
|
|
34
|
+
margin: .5em 0;
|
|
35
|
+
overflow: auto;
|
|
36
|
+
border-radius: 0.3em;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:not(pre) > code[class*="language-"],
|
|
40
|
+
pre[class*="language-"] {
|
|
41
|
+
background: #272822;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Inline code */
|
|
45
|
+
:not(pre) > code[class*="language-"] {
|
|
46
|
+
padding: .1em;
|
|
47
|
+
border-radius: .3em;
|
|
48
|
+
white-space: normal;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.token.comment,
|
|
52
|
+
.token.prolog,
|
|
53
|
+
.token.doctype,
|
|
54
|
+
.token.cdata {
|
|
55
|
+
color: #8292a2;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.token.punctuation {
|
|
59
|
+
color: #f8f8f2;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.token.namespace {
|
|
63
|
+
opacity: .7;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.token.property,
|
|
67
|
+
.token.tag,
|
|
68
|
+
.token.constant,
|
|
69
|
+
.token.symbol,
|
|
70
|
+
.token.deleted {
|
|
71
|
+
color: #f92672;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.token.boolean,
|
|
75
|
+
.token.number {
|
|
76
|
+
color: #ae81ff;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.token.selector,
|
|
80
|
+
.token.attr-name,
|
|
81
|
+
.token.string,
|
|
82
|
+
.token.char,
|
|
83
|
+
.token.builtin,
|
|
84
|
+
.token.inserted {
|
|
85
|
+
color: #a6e22e;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.token.operator,
|
|
89
|
+
.token.entity,
|
|
90
|
+
.token.url,
|
|
91
|
+
.language-css .token.string,
|
|
92
|
+
.style .token.string,
|
|
93
|
+
.token.variable {
|
|
94
|
+
color: #f8f8f2;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.token.atrule,
|
|
98
|
+
.token.attr-value,
|
|
99
|
+
.token.function,
|
|
100
|
+
.token.class-name {
|
|
101
|
+
color: #e6db74;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.token.keyword {
|
|
105
|
+
color: #66d9ef;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.token.regex,
|
|
109
|
+
.token.important {
|
|
110
|
+
color: #fd971f;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.token.important,
|
|
114
|
+
.token.bold {
|
|
115
|
+
font-weight: bold;
|
|
116
|
+
}
|
|
117
|
+
.token.italic {
|
|
118
|
+
font-style: italic;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.token.entity {
|
|
122
|
+
cursor: help;
|
|
123
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
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.
|
|
2
|
+
|
|
3
|
+
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".
|
|
4
|
+
|
|
5
|
+
To view the site locally, run `npm run docs:serve`.
|
|
6
|
+
|
|
7
|
+
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.
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2021 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
const fs = require('fs');
|
|
8
|
+
|
|
9
|
+
module.exports = () => {
|
|
10
|
+
const customElements = JSON.parse(
|
|
11
|
+
fs.readFileSync('custom-elements.json', 'utf-8')
|
|
12
|
+
);
|
|
13
|
+
return {
|
|
14
|
+
customElements,
|
|
15
|
+
};
|
|
16
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
const page = require('./page.11ty.cjs');
|
|
2
|
+
const relative = require('./relative-path.cjs');
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* This template extends the page template and adds an examples list.
|
|
6
|
+
*/
|
|
7
|
+
module.exports = function (data) {
|
|
8
|
+
return page({
|
|
9
|
+
...data,
|
|
10
|
+
content: renderExample(data),
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const renderExample = ({name, content, collections, page}) => {
|
|
15
|
+
return `
|
|
16
|
+
<h1>Example: ${name}</h1>
|
|
17
|
+
<section class="examples">
|
|
18
|
+
<nav class="collection">
|
|
19
|
+
<ul>
|
|
20
|
+
${
|
|
21
|
+
collections.example === undefined
|
|
22
|
+
? ''
|
|
23
|
+
: collections.example
|
|
24
|
+
.map(
|
|
25
|
+
(post) => `
|
|
26
|
+
<li class=${post.url === page.url ? 'selected' : ''}>
|
|
27
|
+
<a href="${relative(
|
|
28
|
+
page.url,
|
|
29
|
+
post.url
|
|
30
|
+
)}">${post.data.description.replace(/</g, '<')}</a>
|
|
31
|
+
</li>
|
|
32
|
+
`
|
|
33
|
+
)
|
|
34
|
+
.join('')
|
|
35
|
+
}
|
|
36
|
+
</ul>
|
|
37
|
+
</nav>
|
|
38
|
+
<div>
|
|
39
|
+
${content}
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
`;
|
|
43
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const relative = require('./relative-path.cjs');
|
|
2
|
+
|
|
3
|
+
module.exports = function ({page}) {
|
|
4
|
+
return `
|
|
5
|
+
<nav>
|
|
6
|
+
<a href="${relative(page.url, '/')}">Home</a>
|
|
7
|
+
<a href="${relative(page.url, '/examples/')}">Examples</a>
|
|
8
|
+
<a href="${relative(page.url, '/api/')}">API</a>
|
|
9
|
+
<a href="${relative(page.url, '/install/')}">Install</a>
|
|
10
|
+
</nav>`;
|
|
11
|
+
};
|