From 5511fd0788c1adc3a44a1f9f99ee627f8c2ee0d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexis=20Pi=C3=A9plu?= <alexis.pieplu@gmail.com>
Date: Thu, 9 Feb 2017 13:15:05 -0500
Subject: [PATCH] Feature #38 improve documentation (#40)

* Add verbose, files, namespace and script configuration documention

* Add script annotation

* Fix typo
---
 docs/src/views/common/menu.pug   |  1 +
 docs/src/views/configuration.pug | 50 ++++++++++++++++++++++++++++++++
 docs/src/views/script.pug        | 34 ++++++++++++++++++++++
 3 files changed, 85 insertions(+)
 create mode 100644 docs/src/views/script.pug

diff --git a/docs/src/views/common/menu.pug b/docs/src/views/common/menu.pug
index b389209..718db6b 100644
--- a/docs/src/views/common/menu.pug
+++ b/docs/src/views/common/menu.pug
@@ -9,6 +9,7 @@ nav.menu.SG-toc
         li: a.SG-a(href="annotation-reference.html") Annotation reference
         li: a.SG-a(href="substitutions-flags.html") Substitutions &amp; Flags
         li: a.SG-a(href="modifiers.html") Modifiers
+        li: a.SG-a(href="script.html") Script
         li: a.SG-a(href="vendored-elements.html") Vendored elements
 
         li.SG-toc__category Meta
diff --git a/docs/src/views/configuration.pug b/docs/src/views/configuration.pug
index b72eec7..a5410d7 100644
--- a/docs/src/views/configuration.pug
+++ b/docs/src/views/configuration.pug
@@ -1,3 +1,7 @@
+//-
+  With contributions from:
+    - Alexis Piéplu (alexis.pieplu@savoirfairelinux.com)
+
 extends layouts/doc-page
 
 block title
@@ -124,3 +128,49 @@ block content
     div.SG-config__row
       div.SG-config__label Example
       div.SG-config__value nucleus --norandom
+
+  h3.SG-h3 Verbose level
+  p.SG-p To defines the vebosity level of the console output. For silent output set 0, for debug mode set 3.
+  div.SG-config
+    div.SG-config__row
+      div.SG-config__label CLI flag
+      div.SG-config__value --verbose
+      div.SG-config__row
+        div.SG-config__label Config key
+        div.SG-config__value verbose
+        div.SG-config__row
+          div.SG-config__label Default value
+          div.SG-config__value 3
+          div.SG-config__row
+            div.SG-config__label Example
+            div.SG-config__value nucleus --verbose 2
+
+  h3.SG-h3 Files to crawl
+  p.SG-p Path to your scss files that nuceleus use for generating source
+  div.SG-config
+    div.SG-config__row
+      div.SG-config__label Config key
+      div.SG-config__value files
+    div.SG-config__row
+      div.SG-config__label Default value
+      div.SG-config__value ["*.scss", "**/*.scss"]
+
+  h3.SG-h3 Javascript files includes
+  p.SG-p To add your javascipt, you need to specify the path (URI) to your Javascript file. You may also pass multiple paths as array.
+  div.SG-config
+    div.SG-config__row
+      div.SG-config__label Config key
+      div.SG-config__value script
+    div.SG-config__row
+      div.SG-config__label Default value
+      div.SG-config__value null
+
+  h3.SG-h3 Css namespace
+  p.SG-p If you use a CSS namespace class around your style, it will appear on the parent node preview.
+  div.SG-config
+    div.SG-config__row
+      div.SG-config__label Config key
+      div.SG-config__value namespace
+    div.SG-config__row
+      div.SG-config__label Default value
+      div.SG-config__value page
diff --git a/docs/src/views/script.pug b/docs/src/views/script.pug
new file mode 100644
index 0000000..e9cd674
--- /dev/null
+++ b/docs/src/views/script.pug
@@ -0,0 +1,34 @@
+//-
+  With contributions from:
+    - Alexis Piéplu (alexis.pieplu@savoirfairelinux.com)
+
+extends layouts/doc-page
+
+block title
+  | Script
+
+block content
+  h1.SG-h1 Script
+  p.SG-p.
+    For javascript code linked to your component, use @script tag that will render it in a code block, just below the markup.
+
+  code.code.language-nucleus(data-d-code-preview).
+    /**
+     * Header bar with logo, navigation, and tool icons at the top of the page.
+     *
+     * @structure Header
+     * @flag full-width
+     * @markup
+     *  <div class="SG-header">
+     *    @{include:.SG-logo}
+     *    @{include:.SG-nav-icons}
+     *    @{include:.SG-nav}
+     *  </div>
+     * @script
+     *    $('body').on('click','.SG-header',function(){
+     *        $(this).doSomething();
+     *    });
+     */
+    .SG-header{
+      ...
+    }