Merge pull request #45 from kolbeck/feature/page-name

#41: Override button and menu item text

archetypes/homepage.md

@@ -1,9 +1,19 @@
 ---
 title: '{{ replace .Name "-" " " | title }}'
+
+# The "header_menu_title" value will be used as text for header buttons.
+# The "title" value will be used if value for "header_menu_title" is not provided.
+#header_menu_title: 'Short Menu Title'
+
+# The "navigation_menu_title" value will be used as text for fixed menu items.
+# The "title" value will be used if value for "navigation_menu_title" is not provided.
+#navigation_menu_title: 'Short Menu Title'
+
 # The "weight" will determine where this section appears on the "homepage".
 # A bigger weight will place the content more towards the bottom of the page.
 # It's like gravity ;-).
 weight: 5
+
 # If "header_menu" is true, then a button linking to this section will be placed
 # into the header menu at the top of the homepage.
 header_menu: true

assets/js/index.js

@@ -13,12 +13,15 @@ var $sitehead = $("#site-head");
 /* Globals jQuery, document */
 (function ($) {
   "use strict";
-  function srcTo(el) {
+  function srcTo(el, dur = 1000) {
     $("html, body").animate(
       {
         scrollTop: el.offset().top,
       },
-      1000
+      dur,
+      function() {
+        window.location.hash = el.attr("id");
+      }
     );
   }
   function srcToAnchorWithTitle(str) {
@@ -41,21 +44,16 @@ var $sitehead = $("#site-head");
     });
 
     $(".post-title").each(function () {
-      var t = $(this).text();
+      var t = $(this).data("fnav-title");
       var index = $(this).parents(".post-holder").index();
+      var postId = $(this).closest("article.post").attr('id');
       $fnav.append(
-        "<a class='fn-item' item_index='" + index + "'>" + t + "</a>"
+        "<a class='fn-item' item_index='" + index + "' data-post-id='" + postId + "'>" + t + "</a>"
       );
       $(".fn-item").click(function () {
-        var i = $(this).attr("item_index");
-        var s = $(".post[item_index='" + i + "']");
-
-        $("html, body").animate(
-          {
-            scrollTop: s.offset().top,
-          },
-          400
-        );
+        var postId = $(this).data("post-id");
+        var s = $("#" + postId);
+        srcTo(s, 200);
       });
     });
 

exampleSite/content/homepage/services.md

@@ -1,9 +1,16 @@
 ---
-title: "Services"
+title: "The Services I Offer"
+header_menu_title: "Services"
+navigation_menu_title: "My Services"
 weight: 2
 header_menu: true
 ---
 
+Feature notice: This section displays options to customize title:
+- has a normal section title (`title` = "The Services I Offer"),
+- custom welcome screen title (`header_menu_title` = "Services"),
+- custom navigation menu title (`navigation_menu_title` = "My Services").
+
 That is the important part, right? You want to know what I can do for you. This is why I put this right up there into the header menu of the website.
 
 ---
@@ -18,18 +25,10 @@ Wow. That was nice, right? Well, call me and let us talk.
 
 ### Chef Consulting
 
-Did you see the picture above? I can show you how to go from
-
-![Let us get started on a clean slate](images/board-bunch-cooking-food-349609.jpg)
-
-to
+I can raise your table culture!
 
 ![Let us get started on a clean slate](images/woman-pouring-juice-on-glass-3184192.jpg)
 
-in estimated seconds.
-
----
-
 Want to learn more about my services?
 
-Check out [dedicated page](services) with a lot more details.
+Check out [dedicated page](services) with more details.

layouts/index.html

@@ -2,36 +2,47 @@
 {{ $headless := .Site.GetPage "/homepage" }}
 {{ $sections := $headless.Resources.ByType "page" }}
 {{ $sections := cond .Site.BuildDrafts $sections (where $sections "Draft" "==" false) }}
-{{ $filtered := where $sections "Params.external" "==" nil }}
 
+<!-- Welcome screen that scrolls out of view -->
 <header id="site-head" {{ with .Params.header_image }}style="background-image: url({{ . }})"{{ end }}>
     <div class="vertical">
         <div id="site-head-content" class="inner">
             {{ with .Params.header_logo }}<img id="blog-logo" src="{{ . }}" />{{ end }}
+
             {{ if .Site.Params.title_guard }}<div class="title-and-description-guard">{{ end }}
-            {{ with .Params.header_headline }}<h1 class="blog-title">{{ . | safeHTML }}</h1>{{ end }}
-            {{ with .Params.header_subheadline }}<h2 class="blog-description">{{ . | safeHTML }}</h2>{{ end }}
+              {{ with .Params.header_headline }}<h1 class="blog-title">{{ . | safeHTML }}</h1>{{ end }}
+              {{ with .Params.header_subheadline }}<h2 class="blog-description">{{ . | safeHTML }}</h2>{{ end }}
             {{ if .Site.Params.title_guard }}</div>{{ end }}
+
             {{ range where $sections ".Params.header_menu" "eq" true }}
+              {{ $button_title := .Title }}
+              {{ with .Params.header_menu_title }}{{ $button_title = . }}{{ end }}
+
               {{ if isset .Params "external" }}
-                 <a class='btn site-menu' href='{{ .Params.external  }}'>{{ .Title }} <icon class="fa fa-external-link"></icon></a>
+                 <a class='btn site-menu' href='{{ .Params.external  }}'>{{ $button_title }}&nbsp;<icon class="fa fa-external-link"></icon></a>
               {{ else }}
-                 <a class='btn site-menu' data-title-anchor='{{ anchorize .Title }}'>{{ .Title }}</a>
+                {{ $fnav_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $fnav_title = . }}{{ end }}
+                 <a class='btn site-menu' data-title-anchor='{{ anchorize $fnav_title }}'>{{ $button_title }}</a>
               {{ end }}
             {{ end }}
             <i id='header-arrow' class="fa fa-angle-down"></i>
         </div>
     </div>
 </header>
+
 <main class="content" role="main">
 
-    <div class='fixed-nav'>
-    </div>
-    {{ range $index_val, $elem_val := $filtered }}
+    <!-- Render sticky left navigation menu -->
+    <div class='fixed-nav'></div>
+
+    <!-- Render single-page content -->
+    {{ $content := where $sections "Params.external" "==" nil }}
+    {{ range $index_val, $elem_val := $content }}
+        {{ $fnav_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $fnav_title = . }}{{ end }}
         <div class='post-holder{{ if and (ne .Site.Params.invertSectionColors true) (not (modBool $index_val 2)) }} dark{{ else if and (eq .Site.Params.invertSectionColors true) (modBool $index_val 2) }} dark{{ end }}'>
-            <article id='{{ anchorize .Title }}' class='post {{ if eq $index_val 0 }}first{{ end }} {{ if eq (add $index_val 1) (len $sections) }}last{{ end }}'>
+            <article id='{{ anchorize $fnav_title }}' class='post {{ if eq $index_val 0 }}first{{ end }} {{ if eq (add $index_val 1) (len $content) }}last{{ end }}'>
                 <header class="post-header">
-                    <h2 class="post-title">{{ .Title | safeHTML }}</h2>
+                    <h2 class="post-title" data-fnav-title="{{ $fnav_title | safeHTMLAttr }}">{{ .Title | safeHTML }}</h2>
                 </header>
                 <section class="post-content">
                     {{ .Content }}