niris-public-community-components 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
};
|