add disqus shortcode and support comments section. Support hiding sections, navbar items

layouts/index.html

@@ -7,7 +7,6 @@
 {{ partial "hero.html" . }}
 {{ partial "sections.html" . }}
 </main>
-{{ if .Site.DisqusShortname }} {{ partial "disqus.html" . }} {{ end }}
 {{ partial "js.html" . }}
 </body>
 </html>

layouts/partials/head/styles.html

@@ -180,6 +180,13 @@
     }
     {{ end }}
 
+    {{ with .comments }}
+    .section--comments {
+      color: {{ .color }};
+      background-color: {{ .bg_color }};
+    }
+    {{ end }}
+
   {{ end }}  /* end sections */
 
   {{ with .buttons }}

layouts/partials/navbar.html

@@ -7,17 +7,16 @@
         </div>
         <!-- <nav class="nav-bar__menu-off"> -->
             <ul class="nav-bar__menu hide-menu">
-                {{ range .Data.Pages }} {{ if ne .File.BaseFileName "footer"}}
+                {{ range .Data.Pages }}
+                {{ if ne .Params.navbar false }}
+                {{ if ne .Params.hidden true }}
                 <li class="nav-bar__menu-item">
                       <a href="#{{ .File.BaseFileName }}">
-                  {{ if isset .Params "link_text" }}
-                      {{ index .Params "link_text" }}
-                  {{ else  }}
-                      {{ index .Title }}
-                  {{ end }}
+                      {{ .Params.link_text | default .Title }}
                     </a>
                 </li>
                 {{ end }} {{ end }}
+                {{ end }}
              </ul>
         <!-- </nav> -->
       <!-- </div> -->

layouts/partials/sections.html

@@ -1,6 +1,7 @@
 <!-- Renders Section Based on Content -->
 {{ $parity := "odd" }} {{ range $i, $e := .Data.Pages }}
-<section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} {{ if ne .File.BaseFileName "footer" }} section--{{ if modBool $i 2  }}odd{{ else  }}even{{ end }} {{ end }}">
+{{ if ne .Params.hidden true }}
+<section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} section--{{ if modBool $i 2  }}odd{{ else  }}even{{ end }}">
 	<div class="section__container">
 		<div class="section__headline section__headline--{{ .File.BaseFileName }}">
 			<h1>{{ .Title }}</h1>
@@ -11,3 +12,4 @@
 	</div>
 </section>
 {{ end }}
+{{ end }}

layouts/shortcodes/disqus.html

@@ -1,19 +1,25 @@
-<div id="disqus_thread"></div>
+<div class="box box--disqus">
+    <div id="disqus_thread" class="box__embed box__embed--disqus">
+    </div>
+</div>
+
 <script type="text/javascript">
 
 (function() {
     // Don't ever inject Disqus on localhost--it creates unwanted
     // discussions from 'localhost:1313' on your Disqus account...
-    if (window.location.hostname == "localhost")
-        return;
+    // if (window.location.hostname == "localhost")
+    //     return;
 
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-    var disqus_shortname = '{{ .Site.DisqusShortname }}';
+    var disqus_shortname = '{{ .Get 0 | default .Site.DisqusShortname }}';
     dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
 })();
 </script>
+
 <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+
 <a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
 
 

readme.md

@@ -17,7 +17,7 @@ A **complete** theme in a repo that's especially useful for **noobs** who just w
 
 **Goal:** Create a mobile first responsive flexbox based Hugo landing page theme including shortcodes that would allow a noob to generate a customized landing page by only knowing a little markdown.  Provide a starter repo to make it easy to create one's own landing page in a few minutes
 
-**Further Goal:** Add automated deployment to github pages, S3 bucket or any server using ssh.  My other project [4S](https://github.com/dkebler/4S) can do this it just needs to be intregate.  Also want to automate building photo galleries.  Currently this is done with [Thumbsup](https://github.com/thumbsup/thumbsup) and the generated code is made into a shortcode and the generated thumbs and images added to the project manually.
+**Further Goal:** Add automated (via nodejs) deployment to github pages, S3 bucket or any server using ssh.  My other project [4S](https://github.com/dkebler/4S) can do this it just needs to be intregated.  Also want to automate building photo galleries.  Currently this is done with [Thumbsup](https://github.com/thumbsup/thumbsup) and the generated code is made into a shortcode and the generated thumbs and images added to the project manually.  Also add in code minification and optimazation for production/distribution builds
 
 **Ultimiate Goal:** Put together a noob virtualbox VM with all the tools (e.g. atom, smartgit, hugo, node, etc.) and code installed and configured and ready to go.  Fire up the VM and you're instantly productive.
 

static/css/page.css

@@ -123,7 +123,6 @@ img.avatar {
 }
 
 .box__embed {
-  /*height: 100vh;*/
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -132,6 +131,11 @@ img.avatar {
   align-items: center;
 }
 
+.box__embed--disqus {
+  width: 90vw;
+  max-width: 800px;
+}
+
 
 .box__contact-info > * {
   padding: 0.1em;