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

Add a static site generator

Browse Source 
There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.
This commit is contained in:
Justin Fagnani
2019-12-19 20:48:45 -08:00
committed by Justin Fagnani
parent 2b3e914666
commit fc662728eb
28 changed files with 5770 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/install/index.html Normal file
View File

@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Install</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>Install</h1>
<p><code>&lt;my-element&gt;</code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
<h2>Local Installation</h2>
<pre class="language-bash"><code class="language-bash"><span class="highlight-line"><span class="token function">npm</span> i my-element</span></code></pre>
<h2>CDN</h2>
<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>
<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 &quot;bare&quot; module specificers to full URLs.</p>
<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>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</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">=</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">&lt;/</span>script</span><span class="token punctuation">></span></span></span></code></pre>
<h3>JavaScript</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line">import {MyElement} from 'https://unpkg.com/my-element?module';</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>