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

Use Rollup to build JS for docs

Browse Source
This commit is contained in:
Justin Fagnani
2019-12-20 10:23:35 -08:00
committed by Justin Fagnani
parent 12d60c07dd
commit fe5a424bee
14 changed files with 383 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs-src/_includes/example.11ty.cjs
View File

@@ -21,7 +21,7 @@ const renderExample = ({name, content, collections, page}) => {
? '' ? ''
: collections.example.map((post) => ` : collections.example.map((post) => `
<li class=${post.url === page.url ? 'selected' : ''}> <li class=${post.url === page.url ? 'selected' : ''}>
<a href="/docs${post.url}">${ post.data.description.replace('<', '&lt;') }</a> <a href="${post.url}">${ post.data.description.replace('<', '&lt;') }</a>
</li> </li>
`).join('')} `).join('')}
</ul> </ul>

8
docs-src/_includes/nav.11ty.cjs
View File

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

6
docs-src/_includes/page.11ty.cjs
View File

@@ -11,10 +11,10 @@ module.exports = function(data) {
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${data.title}</title> <title>${data.title}</title>
<link rel="stylesheet" href="/docs/docs.css"> <link rel="stylesheet" href="/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono"> <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" /> <link href="/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script> <script type="module" src="/my-element.bundled.js"></script>
</head> </head>
<body> <body>
${header()} ${header()}

4
docs/_README/index.html
View File

@@ -0,0 +1,4 @@
<p>This directory containts the sources for the static site contained in the /docs/ directory. The site is based on the <a href="11ty.dev">eleventy</a> static site generator.</p>
<p>The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages &quot;Source&quot; setting to &quot;master branch /docs folder&quot;.</p>
<p>To view the site locally, run <code>npm run serve</code>.</p>
<p>To edit the site, add to or edit the files in this directory then run <code>npm run docs</code> to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.</p>

14
docs/api/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Docs</title> <title><my-element> ⌲ Docs</title>
<link rel="stylesheet" href="/docs/docs.css"> <link rel="stylesheet" href="/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono"> <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" /> <link href="/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script> <script type="module" src="/my-element.bundled.js"></script>
</head> </head>
<body> <body>
@@ -19,10 +19,10 @@
</header> </header>
<nav> <nav>
<a href="/docs/">Home</a> <a href="/">Home</a>
<a href="/docs/examples/">Examples</a> <a href="/examples/">Examples</a>
<a href="/docs/api/">API</a> <a href="/api/">API</a>
<a href="/docs/install/">Install</a> <a href="/install/">Install</a>
</nav> </nav>
<div id="main-wrapper"> <div id="main-wrapper">
<main> <main>

54
docs/examples/basic/index.html
View File

@@ -1,54 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</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>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<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>
<div id="main-wrapper">
<main>
<h2>Basic Use</h2>
<style>
my-element p {
border: solid 1px blue;
padding: 8px;
}
</style>
<my-element>
<p>This is child content</p>
</my-element>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css"><span class="highlight-line"> <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

66
docs/examples/index copy/index.html
View File

@@ -1,66 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</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>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<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>
<div id="main-wrapper">
<main>
<h1>Examples</h1>
<nav class="collection">
<ul>
<li><a href="/docs/examples/">A basic example</a></li>
,
<li><a href="/docs/examples/index copy/">A basic example</a></li>
</ul>
</nav>
<h2>Basic Use</h2>
<style>
my-element p {
border: solid 1px blue;
padding: 8px;
}
</style>
<my-element>
<p>This is child content</p>
</my-element>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css"><span class="highlight-line"> <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

18
docs/examples/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</title> <title><my-element> ⌲ Examples ⌲ Basic</title>
<link rel="stylesheet" href="/docs/docs.css"> <link rel="stylesheet" href="/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono"> <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" /> <link href="/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script> <script type="module" src="/my-element.bundled.js"></script>
</head> </head>
<body> <body>
@@ -19,10 +19,10 @@
</header> </header>
<nav> <nav>
<a href="/docs/">Home</a> <a href="/">Home</a>
<a href="/docs/examples/">Examples</a> <a href="/examples/">Examples</a>
<a href="/docs/api/">API</a> <a href="/api/">API</a>
<a href="/docs/install/">Install</a> <a href="/install/">Install</a>
</nav> </nav>
<div id="main-wrapper"> <div id="main-wrapper">
<main> <main>
@@ -33,11 +33,11 @@
<ul> <ul>
<li class=selected> <li class=selected>
<a href="/docs/examples/">A basic example</a> <a href="/examples/">A basic example</a>
</li> </li>
<li class=> <li class=>
<a href="/docs/examples/name-property/">Setting the name property</a> <a href="/examples/name-property/">Setting the name property</a>
</li> </li>
</ul> </ul>

18
docs/examples/name-property/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Name Property</title> <title><my-element> ⌲ Examples ⌲ Name Property</title>
<link rel="stylesheet" href="/docs/docs.css"> <link rel="stylesheet" href="/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono"> <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" /> <link href="/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script> <script type="module" src="/my-element.bundled.js"></script>
</head> </head>
<body> <body>
@@ -19,10 +19,10 @@
</header> </header>
<nav> <nav>
<a href="/docs/">Home</a> <a href="/">Home</a>
<a href="/docs/examples/">Examples</a> <a href="/examples/">Examples</a>
<a href="/docs/api/">API</a> <a href="/api/">API</a>
<a href="/docs/install/">Install</a> <a href="/install/">Install</a>
</nav> </nav>
<div id="main-wrapper"> <div id="main-wrapper">
<main> <main>
@@ -33,11 +33,11 @@
<ul> <ul>
<li class=> <li class=>
<a href="/docs/examples/">A basic example</a> <a href="/examples/">A basic example</a>
</li> </li>
<li class=selected> <li class=selected>
<a href="/docs/examples/name-property/">Setting the name property</a> <a href="/examples/name-property/">Setting the name property</a>
</li> </li>
</ul> </ul>

14
docs/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Home</title> <title><my-element> ⌲ Home</title>
<link rel="stylesheet" href="/docs/docs.css"> <link rel="stylesheet" href="/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono"> <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" /> <link href="/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script> <script type="module" src="/my-element.bundled.js"></script>
</head> </head>
<body> <body>
@@ -19,10 +19,10 @@
</header> </header>
<nav> <nav>
<a href="/docs/">Home</a> <a href="/">Home</a>
<a href="/docs/examples/">Examples</a> <a href="/examples/">Examples</a>
<a href="/docs/api/">API</a> <a href="/api/">API</a>
<a href="/docs/install/">Install</a> <a href="/install/">Install</a>
</nav> </nav>
<div id="main-wrapper"> <div id="main-wrapper">
<main> <main>

14
docs/install/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Install</title> <title><my-element> ⌲ Install</title>
<link rel="stylesheet" href="/docs/docs.css"> <link rel="stylesheet" href="/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono"> <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" /> <link href="/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script> <script type="module" src="/my-element.bundled.js"></script>
</head> </head>
<body> <body>
@@ -19,10 +19,10 @@
</header> </header>
<nav> <nav>
<a href="/docs/">Home</a> <a href="/">Home</a>
<a href="/docs/examples/">Examples</a> <a href="/examples/">Examples</a>
<a href="/docs/api/">API</a> <a href="/api/">API</a>
<a href="/docs/install/">Install</a> <a href="/install/">Install</a>
</nav> </nav>
<div id="main-wrapper"> <div id="main-wrapper">
<main> <main>

199
docs/my-element.bundled.js Normal file
View File

File diff suppressed because one or more lines are too long

123
docs/prism-okaidia.css Normal file
View File

@@ -0,0 +1,123 @@
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #f8f8f2;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

13
package.json
View File

@@ -10,10 +10,13 @@
"build:watch": "tsc --watch", "build:watch": "tsc --watch",
"lint": "lit-analyzer && eslint 'src/**/*.ts'", "lint": "lit-analyzer && eslint 'src/**/*.ts'",
"format": "prettier src/* --write", "format": "prettier src/* --write",
"docs": "npm run analyze & eleventy --config=.eleventy.cjs", "docs": "npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
"docs:watch": "eleventy --config=.eleventy.cjs --watch", "docs:gen": "eleventy --config=.eleventy.cjs",
"docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
"docs:build": "rollup -c --file docs/my-element.bundled.js",
"docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
"docs:serve": "es-dev-server --root-dir=docs --node-resolve --watch",
"analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json", "analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
"serve": "es-dev-server --node-resolve --watch",
"test": "karma start karma.conf.cjs", "test": "karma start karma.conf.cjs",
"test:watch": "karma start karma.conf.cjs --auto-watch=true --single-run=false", "test:watch": "karma start karma.conf.cjs --auto-watch=true --single-run=false",
"test:update-snapshots": "karma start karma.conf.cjs --update-snapshots", "test:update-snapshots": "karma start karma.conf.cjs --update-snapshots",
@@ -49,6 +52,10 @@
"lit-analyzer": "^1.1.9", "lit-analyzer": "^1.1.9",
"mocha": "^6.2.2", "mocha": "^6.2.2",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"rollup": "^1.27.13",
"rollup-plugin-filesize": "^6.2.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^5.1.3",
"typescript": "^3.7.2", "typescript": "^3.7.2",
"web-component-analyzer": "^1.0.0" "web-component-analyzer": "^1.0.0"
} }