Docs redesign

.gitignore

@@ -14,4 +14,11 @@ lit-element.d.ts
 /demo/**/*.js
 /demo/**/*.js.map
 
-!custom_typings/
+!custom_typings/
+
+#Docs
+/docs/node_modules/
+/docs/_site/
+*.pyc
+
+.DS_Store

.npmignore

@@ -0,0 +1 @@
+docs/

docs/_config.yml

@@ -0,0 +1,10 @@
+name: LitElement
+description: A simple base class for creating fast, lightweight web components
+exclude: [package.json, polymer.json, src, node_modules, package-lock.json]
+markdown: kramdown
+kramdown: 
+  parse_block_html: true
+projects: includes/projects
+collections:
+  includes:
+    output: true

docs/_data/site.yml

@@ -0,0 +1,154 @@
+title: LitElement Documentation
+toc:
+  try: 
+    title: Try LitElement
+    desc: A quick tutorial with interactive code samples.
+    url: /try/
+    toc: 
+      create:
+        title: Create your first custom element
+        url: /try/create
+      use:
+        title: Use your element in a web page
+        url: /try/use
+      properties:
+        title: Declare and use properties
+        url: /try/properties
+      expressions: 
+        title: Add a loop and an “if” statement
+        url: /try/expressions
+      events:
+        title: Add an event handler
+        url: /try/events
+      style: 
+        title: Style your element template
+        url: /try/style
+  docs:
+    title: Documentation
+    desc: LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.
+    url: /docs/
+    toc: 
+      create:
+        title: Create a component
+        desc: Create a new web component with LitElement. Import and use LitElement components in HTML and JavaScript.
+        url: /docs/create
+        toc:
+          install: 
+            title: Install LitElement
+            url: /docs/create#install
+          class:
+            title: Create a new component
+            desc: Create a new class for your web component by extending the LitElement base class.
+            url: /docs/create#class
+          typescript:
+            title: Use TypeScript to create a component
+            desc: Use LitElement TypeScript decorators to create a new class for a LitElement-based component.
+            url: /docs/create#typescript
+          import: 
+            title: Import an element
+            desc: Import your own or third-party LitElement components in HTML or JavaScript.
+            url: /docs/create#import
+      templates: 
+        title: Templates
+        desc: Create and render LitElement templates. Use JavaScript expressions to add properties and logic.      
+        url: /docs/templates/
+        toc: 
+          create: 
+            title: Create a template
+            desc: Define a template and specify where it should render.
+            type: task
+            url: /docs/templates/create
+          expressions:
+            title: Use properties and logic
+            desc: Use JavaScript expressions to add properties, loops, and conditionals to your templates.
+            type: task
+            url: /docs/templates/expressions
+          databinding:
+            title: Bind data to a child element 
+            desc: Bind to the text content, properties, attributes, and event handlers of a child element.
+            type: task
+            url: /docs/templates/databinding
+          compose:
+            title: Compose and nest templates 
+            desc: Compose LitElement templates from other templates. 
+            type: task
+            url: /docs/templates/compose
+          slots:
+            title: Render light DOM children
+            desc: Use slots to include light DOM children in shadow DOM templates.
+            type: task
+            url: /docs/templates/slots
+          design:
+            title: Template design concepts
+            desc: Concepts for designing templates that render and update efficiently.
+            type: concept
+            url: /docs/templates/design
+          syntax:
+            title: Template syntax
+            desc: A quick reference to LitElement template syntax.
+            type: reference
+            url: /docs/templates/syntax
+      properties: 
+        title: Properties and attributes
+        desc: Declare and configure a component's properties and attributes.
+        url: /docs/properties
+        toc:
+          declare: 
+            title: Declare properties
+            url: /docs/properties#declare
+          init: 
+            title: Initialize property values
+            url: /docs/properties#init
+          type:
+            title: Configure a property type
+            url: /docs/properties#type
+          attribute:
+            title: Configure observed attributes
+            url: /docs/properties#attribute
+          reflect:
+            title: Configure reflection to attributes
+            url: /docs/properties#reflect
+          haschanged:
+            title: Evaluate property changes
+            url: /docs/properties#haschanged
+      lifecycle: 
+        title: Element update lifecycle
+        desc: Specify when an element should update. Respond to updates, or wait for an update to complete.
+        url: /docs/lifecycle/
+        toc:
+          about:
+            title: About the element update lifecycle
+            desc: Concepts for working with LitElement's asynchronous update lifecycle.
+            type: concept
+            url: /docs/lifecycle/about
+          customize:
+            title: Customize lifecycle behavior
+            desc: Customize how and when an element should update, and perform additional tasks during any stage of the update lifecycle.
+            type: task
+            url: /docs/lifecycle/customize
+          methods:
+            title: Methods and Promises reference
+            desc: A reference to the methods and Promises in the LitElement update lifecycle.
+            type: reference
+            url: /docs/lifecycle/methods
+  tools:
+    title: Tools
+    desc: Tools for developing and deploying LitElement projects.
+    url: /tools/
+    toc: 
+      setup:
+        title: Set up LitElement locally
+        desc: Set up LitElement for the first time.
+        url: /tools/setup
+      develop:
+        title: Developer tools
+        desc: Tools for developing and working locally with LitElement projects.
+        url: /tools/develop
+      build: 
+        title: Build for production
+        desc: Get your project ready for deployment to the web.
+        url: /tools/build
+      sample: 
+        title: Sample project
+        desc: Clone, serve, and build a sample LitElement project.
+        url: /tools/sample

docs/_includes/analytics.html

@@ -0,0 +1,7 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id={{site.google_analytics}}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '{{site.google_analytics}}');
+</script>

docs/_includes/article.html

@@ -0,0 +1,27 @@
+
+<div><a href="{{site.baseurl}}{{section.url}}">{{section.title}}</a></div>
+
+<h1><a href="{{site.baseurl}}{{topic.url}}">{{topic.title}}</a></h1>
+
+<div class="disclaimer">This documentation is a work in progress. It describes prerelease software, and is subject to change.</div>
+
+{% if page.addsectiontoc %}
+{% include sectiontoc.html %}
+{% endif %}
+
+{%- if topic.toc -%}
+<ul>
+  {%- for item in topic.toc -%}
+    {%- if item[1].url == self.url -%}
+      <li class="current"><a href="{{site.baseurl}}{{item[1].url}}">{{item[1].title}}</a></li>  
+    {%- else -%}
+      <li><a href="{{site.baseurl}}{{item[1].url}}">{{item[1].title}}</a></li>  
+    {%- endif -%}
+  {%- endfor -%}
+</ul>
+
+<h2><a href="{{site.baseurl}}{{subtopic.url}}">{{subtopic.title}}</a></h2>
+
+{%- endif -%}
+
+{{ content }}

docs/_includes/prevnext.html

@@ -0,0 +1,13 @@
+{%- comment -%} Note: No HTML indentation to prevent markdown processing. {%- endcomment -%}
+<div class="prevnext">
+<div class="next">
+{% if include.nexturl %}
+<a href="{{include.nexturl}}">Next: {{include.nexttitle}} &gt;&gt;</a>
+{% endif %}
+</div>
+<div class="prev">
+{% if include.prevurl %}
+<a href="{{include.prevurl}}">&lt;&lt; Previous: {{include.prevtitle}}</a>
+{% endif %}
+</div>
+</div>

docs/_includes/project.html

@@ -0,0 +1,4 @@
+<stack-blitz
+    folder="{{ site.baseurl }}/{{ site.projects }}/{{ include.folder | default: template }}"
+    openFile="{{ include.openFile | default: custom-element.js }}">
+</stack-blitz>

docs/_includes/projects/docs/create/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+
+  <script type="module" src="./my-element.js"></script>
+  <title>lit-element code sample</title>
+</head>
+<body>
+  <my-element></my-element>
+</body>
+</html>

docs/_includes/projects/docs/create/index.ts

@@ -0,0 +1 @@
+import './my-element.js';

docs/_includes/projects/docs/create/manifest.json

@@ -0,0 +1,14 @@
+{
+  "files": [
+    "my-element.js",
+    "index.html",
+    "index.ts"
+  ],
+  "title": "lit-element code sample",
+  "description": "lit-element code sample",
+  "template": "typescript",
+  "dependencies": {
+    "@polymer/lit-element": "latest",
+    "@webcomponents/webcomponentsjs": "latest"
+  }
+}

docs/_includes/projects/docs/create/my-element.js

@@ -0,0 +1,27 @@
+// Import the LitElement base class and html helper function
+import { LitElement, html } from '@polymer/lit-element';
+
+// Extend the LitElement base class
+class MyElement extends LitElement {
+
+  /**
+   * Implement `render` to define a template for your element.
+   * 
+   * You must provide an implementation of `render` for any element
+   * that uses LitElement as a base class.
+   */
+  render(){
+    /** 
+     * `render` must return a lit-html `TemplateResult`. 
+     *
+     * To create a `TemplateResult`, tag a JavaScript template literal
+     * with the `html` helper function: 
+     */
+    return html`
+      <!-- template content -->
+      <p>A paragraph</p>
+    `;
+  }
+}
+// Register the new element with the browser.
+customElements.define('my-element', MyElement);

docs/_includes/projects/docs/lifecycle/customize/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <title>lit-element code sample</title>
+
+</head>
+
+  <body>
+    <my-element></my-element>
+  </body>
+
+</html>

docs/_includes/projects/docs/lifecycle/customize/index.ts

@@ -0,0 +1 @@
+import './my-element.js';

docs/_includes/projects/docs/lifecycle/customize/manifest.json

@@ -0,0 +1,14 @@
+{
+  "title": "lit-element code sample",
+  "description": "lit-element code sample",
+  "files": [
+    "my-element.js",
+    "index.html",
+    "index.ts"
+  ],
+  "dependencies": {
+    "@polymer/lit-element": "latest",
+    "@webcomponents/webcomponentsjs": "latest"
+  },
+  "template": "typescript"
+}

docs/_includes/projects/docs/lifecycle/customize/my-element.js

@@ -0,0 +1,23 @@
+import { LitElement, html } from '@polymer/lit-element';
+
+class MyElement extends LitElement {  
+  static get properties() { return { prop1: String }; }
+
+  constructor() {
+    console.log('constructor');
+    super();
+    this.prop1 = 'hi';
+  }
+  connectedCallback() {
+    console.log('connectedCallback');
+    super.connectedCallback();
+  }
+  render() {
+    console.log('render');
+    return html`<p>${this.prop1}</p>`;
+  }
+  firstUpdated() {
+    console.log('firstUpdated');
+  }
+}
+customElements.define('my-element', MyElement);

docs/_includes/projects/docs/lifecycle/customsetter/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <title>lit-element code sample</title>
+
+</head>
+
+  <body>
+    <my-element foo="hi"></my-element>
+  </body>
+
+</html>

docs/_includes/projects/docs/lifecycle/customsetter/index.ts

@@ -0,0 +1 @@
+import './my-element.js';

docs/_includes/projects/docs/lifecycle/customsetter/manifest.json

@@ -0,0 +1,14 @@
+{
+  "title": "lit-element code sample",
+  "description": "lit-element code sample",
+  "files": [
+    "my-element.js",
+    "index.html",
+    "index.ts"
+  ],
+  "dependencies": {
+    "@polymer/lit-element": "latest",
+    "@webcomponents/webcomponentsjs": "latest"
+  },
+  "template": "typescript"
+}