Merge pull request #12 from budparr/dev

Improve featured image handling Ref #11 + minor homepage impvs

README.md

@@ -36,6 +36,7 @@ Also includes examples of Hugo Features or Functions:
 - `len`
 - Conditionals
 - `ge` (greater than or equal to)
+- `.Site.Params.mainSections` to avoid hard-coding "blog," etc. [[release note](https://github.com/spf13/hugo/blob/66ec6305f6cb450ddf9c489854146bac02f7dca1/docs/content/meta/release-notes.md#enhancements)]
 
 
 This theme uses the "Tachyons" CSS library. This will allow you to manipulate the design of the theme by changing class names in HTML without touching the original CSS files. For more information see the [Tachyons website](http://tachyons.io/).

exampleSite/config.toml

@@ -24,3 +24,4 @@ enableRobotsTXT = true
   youtube = ""
   # choose a background color from any on this page: http://tachyons.io/docs/themes/skins/ and preface it with "bg-"
   background_color_class = "bg-black"
+  featured_image = "/images/gohugo-default-sample-hero-image.jpg"

layouts/index.html

@@ -2,18 +2,27 @@
   <main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
     {{ .Content }}
   </main>
-  {{/* For Hugo 0.20 this will default to the section with the most number of pages. */}}
+  {{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}
   {{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
-  {{/* Create a variable to use the same section twice. */}}
+  {{/* Create a variable with that section to use in multiple places. */}}
   {{ $section := where .Site.RegularPages "Section" "in" $mainSections }}
+  {{/* Check to see if the section is defined for ranging through it */}}
   {{ if $section }}
+
+    {{/* Derive the section name by creating a string from the initial section definition */}}
+    {{ $section_name := printf "%s" (delimit ($mainSections) " ") }}
+
     <div class="pa3 pa4-ns w-100 w-70-ns center">
 
+      {{/* Use $section_name to get the section title. Use "with" to only show it if it exists */}}
+      {{ with .Site.GetPage "section" $section_name }}
         <h1 class="flex-none">
-        Recent Articles
+          Recent {{ .Title }}
         </h1>
+      {{ end }}
 
       <section class="w-100 mw8">
+        {{/* Range through the first three items of the section */}}
         {{ range (first 3 $section) }}
           <div class="relative w-100 mb4">
             {{ partial "summary-with-image.html" . }}
@@ -22,8 +31,10 @@
       </section>
 
       <section class="w-100">
-        <h1 class="f3">More Posts</h1>
-        {{/* Nest the requirements, "after" then "first" on the outside */}}
+
+        <h1 class="f3">More</h1>
+
+        {{/* Now, range through the next four after the initial 3 items. Nest the requirements, "after" then "first" on the outside */}}
         {{ range (first 4 (after 3 $section))  }}
           <h2 class="f5 fw4 mb4 dib mr3">
             <a href="{{ .URL }}" class="link black dim">
@@ -31,7 +42,12 @@
             </a>
           </h2>
         {{ end }}
-        <a href="/post/" class="link db f6 pa2 br3 bg-mid-gray white dim w4 tc">All Posts</a>
+
+        {{/* As above, Use $section_name to get the section title, and URL. Use "with" to only show it if it exists */}}
+        {{ with .Site.GetPage "section" $section_name }}
+          <a href="{{ .URL }}" class="link db f6 pa2 br3 bg-mid-gray white dim w4 tc">All {{.Title }}</a>
+        {{ end }}
+
         </section>
 
       </div>

layouts/partials/page-header.html

@@ -1,5 +1,6 @@
-{{ if .Params.featured_image }}
-  <header class="cover bg-center" style="background-image: url('{{ .Params.featured_image  | absURL }}');">
+{{ $featured_image := $.Param "featured_image" }}
+{{ if $featured_image }}
+  <header class="cover bg-center" style="background-image: url('{{ $featured_image | absURL }}');">
     <div class="pb3-m pb6-l bg-black-60">
       {{ partial "site-navigation.html" . }}
       <div class="tc-l pv6 ph3 ph4-ns">

layouts/partials/site-header.html

@@ -1,5 +1,6 @@
-{{ if .Params.featured_image }}
-  <header class="cover bg-center" style="background-image: url('{{ .Params.featured_image  | absURL }}');">
+{{ $featured_image := $.Param "featured_image" }}
+{{ if $featured_image }}
+  <header class="cover bg-center" style="background-image: url('{{ $featured_image | absURL }}');">
     <div class="bg-black-60">
       {{ partial "site-navigation.html" .}}
       <div class="tc-l pv4 pv6-l ph3 ph4-ns">

layouts/post/summary.html

@@ -1,8 +1,8 @@
   <div class="mb3 pa4 mid-gray overflow-hidden">
     {{ if .Date }}
-      <date class="f6">
+      <div class="f6">
         {{ .Date.Format "January 2, 2006" }}
-      </date>
+      </div>
     {{ end }}
     <h1 class="f3 near-black">
       <a href="{{ .URL }}" class="link black dim">

yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-