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

Address comments; clean docs dir before build.

Browse Source
This commit is contained in:
Arthur Evans
2020-04-09 19:05:08 -07:00
parent c4f350942a
commit e0ef707dfd
6 changed files with 372 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eleventy.cjs
View File

@@ -2,6 +2,8 @@ const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight);
eleventyConfig.addPassthroughCopy("docs-src/docs.css");
eleventyConfig.addPassthroughCopy("docs-src/.nojekyll");
return {
dir: {
input: "docs-src",

0
docs-src/.nojekyll Normal file
View File

162
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;
}

96
docs/docs/index.html
View File

@@ -1,96 +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> ⌲ Docs</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/docs/">Documentation</a>
<a href="/docs/install/">Install</a>
</nav>
<main>
<h1>Documentation</h1>
<h2>&lt;my-element></h2>
<div>
An example element.
</div>
<h3>Attributes</h3>
<table>
<tr>
<th>name</th><th>description</th><th>type</th><th>default</th>
</tr>
<tr>
<td>name</td><td>undefined</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Properties</h3>
<table>
<tr>
<th>name</th><th>attribute</th><th>description</th><th>type</th><th>default</th>
</tr>
<tr>
<td>name</td><td>name</td><td>undefined</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Slots</h3>
<table>
<tr>
<th>name</th><th>description</th>
</tr>
<tr>
<td></td><td>This element has a slot</td>
</tr>
</table>
</main>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

408
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -8,10 +8,11 @@
"scripts": {
"build": "tsc",
"build:watch": "tsc --watch",
"clean": "rm -rf lib test my-element.{d.ts,d.ts.map,js,js.map}",
"clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
"lint": "lit-analyzer && eslint 'src/**/*.ts'",
"format": "prettier src/* --write",
"docs": "npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
"docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
"docs:clean": "rimraf docs",
"docs:gen": "eleventy --config=.eleventy.cjs",
"docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
"docs:build": "rollup -c --file docs/my-element.bundled.js",
@@ -55,6 +56,7 @@
"lit-analyzer": "^1.1.9",
"mocha": "^6.2.2",
"prettier": "^1.19.1",
"rimraf": "^3.0.2",
"rollup": "^1.27.13",
"rollup-plugin-filesize": "^6.2.1",
"rollup-plugin-node-resolve": "^5.2.0",