Docs updates

.gitignore

@@ -7,3 +7,4 @@ dist
 .vscode
 _test
 coverage
+performance.js

packages/nuejs.org/.gitignore

@@ -1,3 +1,2 @@
 .dist
-@lib/ping.js
-*.bak.md
+@lib/ping.js

packages/nuejs.org/docs/components.md

@@ -14,6 +14,152 @@ You can create custom layout components and custom Markdown extensions for conte
 ```
 
 
+## Helper components
+Nue offers a set of built-in helper components to help you construct the layout modules.
+
+
+### Navi
+Most of your layout modules relate to navigation: the global header and footer, sidebars, and the burger menu typically consists of links to the various pages on your website. The `<navi/>` tag is a useful utility to render those links using the data  on your [settings and data files](settings-and-data.html). Here is an example header:
+
+```
+<header>
+  <!-- logo -->
+  <a href="/">
+    <img src="/img/logo.svg" alt="Logo">
+  </a>
+
+  <!-- master navigation -->
+  <navi :items="mastnav"/>
+</header>
+```
+
+Here is the navigation data in `site.yaml`:
+
+```
+mastnav:
+  - Documentation: /docs/
+  - About: /about/
+  - Blog: /blog/
+  - "v1.0 is out!": /blog/v1.0/ "badge"
+```
+
+The header would render as follows
+
+```
+<header>
+  <a href="/">
+    <img src="/img/logo.svg" alt="Logo">
+  </a>
+  <nav>
+    <a href="/docs/">Documentation</a>
+    <a href="/about/">About</a>
+    <a href="/blog/">Blog</a>
+    <a href="/blog/v1.0/" class="badge">v1.0 is out!</a>
+  </nav>
+</header>
+```
+
+A quoted string ("badge") after the URL becomes a class name for the link.
+
+
+#### Hierarchical navigation
+You can also supply hierarchical data for the navi tag:
+
+```
+footer:
+  Product:
+    - Download: /download/
+    - Features: /features/
+    - Pricing: /pricing/
+    - Docs: /docs/
+
+  Company:
+    - About us: /about/
+    - Blog: /blog/
+    - Careers: /careers/
+    - Customers: /customers/
+```
+
+Now `<navi :items="footer"/>` would render the following:
+
+```
+<div>
+  <nav>
+    <h3>Product</h3>
+    <a href="/download/">Download</a>
+    <a href="/features/">Features</a>
+    <a href="/pricing/">Pricing</a>
+    <a href="/docs/">Docs</a>
+  </nav>
+
+  <nav>
+    <h3>Company</h3>
+    <a href="/about/">About us</a>
+    <a href="/blog/">Blog</a>
+    <a href="/careers/">Careers</a>
+    <a href="/customers/">Customers</a>
+  </nav>
+</div>
+```
+
+
+
+### Markdown
+Renders a Markdown-formatted string given in the `content` attribute.
+
+```
+<markdown :content="description"/>
+```
+
+
+### Ppretty-date
+Pretty-prints a date value given in the `date` attribute.
+
+```
+<pretty-date :date="date"/>
+```
+
+Here is an example "hero" area for a blog entry that uses the `markdown` and `pretty-date` tags:
+
+
+```html
+<header @name="pagehead">
+  <pretty-date :date="date"/>
+
+  <h1><markdown :content="title"/></h1>
+
+  <div class="description">
+    <markdown :content="title"/>
+  </div>
+</header>
+```
+
+
+
+### Table of contents
+Use the built-in `<toc/>` tag to render the table of contents parsed from the current Markdown document and it's second and third level headings (h2, h3):
+
+```
+<toc class="toc"/>
+```
+
+This Markdown document, for example renders the following:
+
+```html
+<div aria-label="Table of contents" class="toc">
+  <nav>
+    <a href="#default-layout">
+      <strong>Default layout</strong></a>
+  </nav>
+  <nav>
+    <a href="#slots"><strong>Slots</strong></a>
+    <a href="#filling-the-slots">Filling the slots</a>
+    <a href="#template-inheritance">Template inheritance</a>
+    <a href="#disabling">Disabling slots</a></nav>
+  <nav>
+  ...
+</div>
+```
 
 
 

packages/nuejs.org/docs/content.md

@@ -4,10 +4,25 @@ include: [tabs]
 ---
 
 # Content
-Nue provides an extended Markdown syntax for authoring web content. In addition to the basic text formatting, you have sections, grids, responsive images, videos, tabbed content, and more. You can rapidly assemble complex web pages without ever touching a single line of code or the need to set up complex cloud-based content database systems. Just simple versionable text files, directly accessible on your file system, and editable with your favorite editor.
+Nue provides an extended Markdown syntax for authoring web content. In addition to the basic text formatting, you have sections, grids, responsive images, videos, tabbed content, and more. You can rapidly assemble complex web pages without ever touching a single line of code. Just simple versionable text files, directly accessible on your file system, and editable with your favorite editor.
 
 
-## Basic Markdown
+## Content development
+
+content first, information
+
+- narrative
+
+1. Marketing content: landing pages, product tours, etc. usually contain sections,
+2. Technical content
+
+3. Blog content: hybrid. starts with a hero section, following with technical content. occasionally mixes of more complex layouts between the content flow.
+
+
+
+
+
+## Basic syntax
 Nue offers a full [Markdown support](//daringfireball.net/projects/markdown/). That is: All the familiar things like headings, quotes, lists, and fenced code blocks are supported:
 
 
@@ -31,7 +46,9 @@ Followed with
 - list of items
 ```
 
-## Extended Markdown
+## Extended syntax
+tables
+footnotes
 
 
 ### Formatting
@@ -603,7 +620,7 @@ Note that the component name "block" can be omitted and you can simply write the
 
 
 
-### Stacks and grids
+### Flex- and grid layouts
 Nue automaticslly splits the the nested content multi-block layouts where each item is separated with a triple-dash ("---") or based on the heading structure. For example:
 
 ```md
@@ -639,7 +656,7 @@ The stack is rendered with two inner divs:
 </div>
 ```
 
-#### Code stack
+#### Code blocks
 Here is another stack example with two code blocks separated with a triple-dash:
 
 

packages/nuejs.org/docs/docs.yaml

@@ -2,11 +2,15 @@
 include: [technical-content, video, toggle-switch]
 footer: false
 
+lang:
+  on_this_page: On this page
+  zen_mode: Zen Mode
+
 sidenav:
   Getting started:
-    - What is Nue?: /docs/
+    - Why Nue: /docs/
+    - How it works: /docs/
     - Installation: installation.html
-    - Command line interface: command-line-interface.html
 
   Building websites:
     - Quick start: tutorial.html
@@ -17,13 +21,14 @@ sidenav:
     - Islands: islands.html
     - Styling: styling.html
     - Scripting: scripting.html
+    - Motion: motion.html
     - Optimization: optimization.html
-    # - CSS best practices: css-best-practices.html
+
 
   Reference:
     - Settings index: settings.html
-    - Component index: components.html
-    - Component syntax: ..
+    - Built-in components: components.html
     - Template syntax: template-syntax.html
     - Syntax highlighting: syntax-highlighting.html
+    - Command line interface: command-line-interface.html
 

packages/nuejs.org/docs/layout.html

@@ -1,24 +1,26 @@
 
-<!-- below global header -->
+<!-- subheader -->
 <nav @name="subheader">
   <button popovertarget="sidebar">{ title }</button>
 </nav>
 
 
-<!-- main sidebar (left) -->
+<!-- main sidebar  -->
 <aside id="sidebar" popover>
   <button popovertarget="sidebar">&times;</button>
   <navi :items="sidenav"/>
 </aside>
 
-
-<!-- complementary sidebar (right) -->
+<!-- secondary sidebar -->
 <aside @name="beside">
-  <h3>On this page</h3>
+
+  <!-- table of contents -->
+  <h3>{ lang.on_this_page }</h3>
   <toc class="toc"/>
 
+  <!-- "zen mode" switch -->
   <div class="zen-toggle">
-    <h5>Zen Mode</h5>
+    <h5>{ lang.zen_mode }</h5>
     <label class="toggle">
       <input type="checkbox" is="zen-toggle">
     </label>