Add Showcase to Home page and internal pages

config.toml

@@ -238,6 +238,12 @@ twitter = "GoHugoIO"
     identifier = "themes"
     url = "https://themes.gohugo.io/"
 
+    [[menu.global]]
+      name = "Showcase"
+      weight = 20
+      identifier = "showcase"
+      url = "/showcase/"
+
   # Anything with a weight > 100 gets an external icon
   [[menu.global]]
     name = "Community"

content/showcase/1password.md

@@ -0,0 +1,12 @@
+---
+title: "1 Password"
+date: 2018-01-22T17:31:17-05:00
+description:
+sitelink: https://1password.com/
+repo:
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/showcase-1password.png
+---

content/showcase/boomtown-fair.md

@@ -0,0 +1,11 @@
+---
+title: Boomtown Fair
+date: 2017-01-09T12:00:00-05:00
+sitelink: 'http://www.boomtownfair.co.uk/'
+repo:
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/screenshot-hugo-datocms-boomtown.jpg
+---

content/showcase/brightline-org.md

@@ -0,0 +1,12 @@
+---
+title: Brightline Initiative
+date: 2018-01-19T12:00:00-05:00
+sitelink: https://www.brightline.org/
+repo:
+creator:
+  - name: Sérgio Jardim
+    link:
+images:
+ - /images/showcase/showcase-brightline-org-hugo-netlify-cloudinary.jpg
+---
+The goal of this TED Women 2017, held in New Orleans, was to surface bold ideas from women and those who support them. We heard from an entrepreneur with an idea poised to transform how we consume power and from an architect who sees her work as being a healer. In this report, you can read these and others TEDWomen 2017 event's takeaways.

content/showcase/crossref.md

@@ -0,0 +1,12 @@
+---
+title: Crossref
+date: 2017-10-05T12:00:00-05:00
+description:
+sitelink:
+repo:
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/crossref.png
+---

content/showcase/esolia.md

@@ -0,0 +1,13 @@
+---
+title: "eSolia"
+date: 2015-07-09T13:18:00.000Z
+description:
+sitelink: http://esolia.com/
+repo:
+creator:
+  - name: eSolia Inc.
+    link:
+images:
+ - /images/showcase/1436586928778_thenewdynamic-showcase-esolia-com-150710.jpg
+---
+eSolia had experimented with various other site generators, both proprietary and open source, and with server-side CMSs. We wanted the superior security and performance of a static site, without having to deal with development environment dependencies, meaning having to keep various libraries updated. [Hugo](http://gohugo.io/), written in the modern Go language, fits that requirement perfectly. It is not only available as a single, easy-to-install binary file for Mac, Linux and Windows, it was written to be insanely great in terms of speed and performance. Most sites build in milliseconds; in fact it takes longer to sync them to your web host than it does to generate the site! We like it so much that we built my personal site [Rick Cogley Central](http://rick.cogley.info/), eSolia's [English esolia.com](http://esolia.com/) and [Japanese esolia.co.jp](http://esolia.co.jp/) sites, and finally, eSolia's professional blog at [eSolia.pro](http://esolia.pro/) in it. As of July 2015, Hugo's community is vibrant, development is actively proceeding, and we'd love to welcome new users to the fold. Also see:[Why Hugo? A static site generator optimized for performance](http://esolia.pro/en/why-did-esolia-choose-hugo/)[](http://esolia.pro/en/why-did-esolia-choose-hugo/)

content/showcase/forest-giant.md

@@ -0,0 +1,14 @@
+---
+title: Forest Giant
+date: 2016-12-17T12:00:00-05:00
+sitelink: 'https://www.forestgiant.com/'
+repo:
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/hugo-forestgiant.jpg
+---
+
+
+A Netlify [Site of the Week](https://www.netlify.com/site-of-the-week/forest-giant/)

content/showcase/forestry.md

@@ -0,0 +1,11 @@
+---
+title: Forestry.io
+date: 2017-10-13T12:00:00-05:00
+sitelink: https://forestry.io/
+repo: https://github.com/forestryio
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/forestry.png
+---

content/showcase/labs-us-gov-hugo.md

@@ -0,0 +1,13 @@
+---
+title: labs.usa.gov
+date: 2017-01-09T12:00:00-05:00
+tools:
+  - hugo
+sitelink: 'https://labs.usa.gov/'
+repo:
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/labs-us-gov-hugo.jpg
+---

content/showcase/lets-encrypt.md

@@ -0,0 +1,12 @@
+---
+title: "Lets Encrypt"
+date: 2018-01-22T17:30:15-05:00
+description:
+sitelink: https://letsencrypt.org/
+repo:
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/letsencrypt.jpg
+---

content/showcase/linkingart-gallery.md

@@ -0,0 +1,11 @@
+---
+title: Linking Art Gallery
+date: 2017-03-03T12:00:00-05:00
+sitelink: 'http://www.linkingart.gallery/'
+repo:
+creator:
+  - name: Cantiere Creativo
+    link: https://www.cantierecreativo.net/
+images:
+ - /images/showcase/linking-art-middleman-datocms.jpg
+---

content/showcase/netlify.md

@@ -0,0 +1,11 @@
+---
+title: Netlify
+date: 2017-10-15T12:00:00-05:00
+sitelink: https://www.netlify.com/
+repo:
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/netlify.png
+---

content/showcase/prettyflyfpv.md

@@ -0,0 +1,12 @@
+---
+title: "Prettyflyfpv"
+date: 2018-01-22T17:31:06-05:00
+description: ""
+sitelink: https://prettyflyfpv.com/
+repo:
+creator:
+  - name:
+    link:
+images:
+  - /images/showcase/showcase-prettyflyfpv.jpg
+---

content/showcase/smashing-magazine.md

@@ -0,0 +1,11 @@
+---
+title: "Smashing Magazine"
+date: 2018-01-22T17:30:00-05:00
+description: ""
+repo: 
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/showcase-smashingmag.jpg
+---

content/showcase/upframe.md

@@ -0,0 +1,11 @@
+---
+title: upframe
+date: 2017-01-15T12:00:00-05:00
+sitelink: https://upframe.co
+repo: https://github.com/upframe/upframe.co
+creator:
+  - name:
+    link:
+images:
+ - /images/showcase/upframe.png
+---

src/package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

themes/gohugoioTheme/archetypes/showcase.md

@@ -0,0 +1,11 @@
+---
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
+date: {{ .Date }}
+description:
+sitelink:
+repo:
+creator:
+  - name:
+    link:
+images: []
+---

themes/gohugoioTheme/layouts/index.html

@@ -9,6 +9,8 @@
     {{- partial "home-page-sections/features-icons" . -}}
   </section>
 
+  {{- partial "home-page-sections/showcase.html" . -}} 
+
   {{- partial "home-page-sections/features-single" . -}}
 
   <section class="w-100 ph4 ph5-ns pv4 pv6-ns mid-gray bg-white bb bt b--light-gray">

themes/gohugoioTheme/layouts/partials/boxes-showcase-items.html

@@ -0,0 +1,12 @@
+<a href="{{.Permalink}}" class="b--moon-gray ba bg-animate bg-white flex-auto hover-bg-near-white mb3 mr3 w-100 w-40-l">
+  <div class="flex flex-column black h-100 mb2 pa3 pa4-l">
+    {{with .Params.images}}
+    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UmVjdGFuZ2xlPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2c+PC9zdmc+" data-src="{{index . 0}}" class="grow img lazyload" />
+    {{end}}
+    <div style="margin-top:auto;">{{/* the margin aligns to the bottom */}}
+      <h2 class="dib f3 mt4">
+        {{- .Title -}}
+      </h2>
+    </div>
+  </div>
+</a>

themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html

@@ -0,0 +1,30 @@
+<section class="bg-near-white mid-gray pb5 ph4 ph5-ns pt4 w-100">
+<h3 class="black f1 fw4 lh-title ma0 pb3 pt0-l pt4">Showcase</h3>
+{{/* NOTE: transitions for this section are in themes/gohugoioTheme/src/css/_carousel.css */}}
+  <div class="w-100">
+    <div class="w-100 overflow-x-scroll">
+      <div class="row nowrap mv2 pb1">
+        {{ range first 10 (where .Site.RegularPages "Section" "showcase") }}
+          {{if .Params.images}} {{/* Only show a tile if there's an image */}}
+            <a href="{{.URL}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:455px;"{{with .Params.images}} data-bg="{{ index . 0}}"{{end}}>{{/* data-bg uses a lazyload script to load the actual background image. It is located here: themes/gohugoioTheme/src/js/lazysizes.js */}}
+              {{with .Title}}{{/* The title only shows if there is one, and on hover with a slight background gradient (in CSS file) */}}
+                <div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
+                  <div class="absolute bottom-0 pa2 tc white">
+                    {{.}} &#8594;
+                  </div>
+                </div>
+              {{end}}
+            </a>
+          {{end}}
+        {{end}}
+      </div>
+    </div>
+
+  </div>
+  {{/* END */}}
+
+  <div class="flex w-100 mt4 justify-end">{{/* using Flex to make the button show up on the right side */}}
+    <a href="/showcase/" class="br2 f6 bg-primary-color-dark hover-bg-primary-color link ph3 pv2 ttu white">See All</a>
+  </div>
+
+  </section>

themes/gohugoioTheme/layouts/partials/previous-next-links-in-section-with-title.html

@@ -0,0 +1,14 @@
+{{ if or .PrevInSection .NextInSection }}
+{{/* this div holds these a tags as a unit for flex-box display */}}
+	<div date-pref>
+		{{if .NextInSection}}
+			<a href="{{.NextInSection.Permalink }}" class="db f5" title="{{ .NextInSection.Title }} ">{{ partial "svg/ic_chevron_left_black_24px.svg" (dict "fill" "#0594CB" "size" "12px") }} {{.NextInSection.Title}}</a>
+		{{end}}
+
+		{{if .PrevInSection}}
+			<a href="{{ .PrevInSection.Permalink }}" class="db f5 pr1  mt3" title="{{ .PrevInSection.Title }}">
+			{{.PrevInSection.Title}} {{ partial "svg/ic_chevron_right_black_24px.svg" (dict "fill" "#0594CB" "size" "12px") }}
+			</a>
+		{{end}}
+	</div>
+{{ end }}

themes/gohugoioTheme/layouts/showcase/list.html

@@ -0,0 +1,23 @@
+{{ define "main" }}
+<div class="w-100 ph4 ph5-ns pb5 pb6-ns pt1 pt3-ns ">
+  <article class="cf pa3 pa4-m pa4-l nested-copy-line-height nested-img">
+    <h1 class="primary-color-dark">
+      {{ .Title }}
+    </h1>
+    <div class="nested-copy-line-height">
+      {{ .Content }}
+    </div>
+  </article>
+  <div class="flex flex-wrap">
+    <section class="flex-ns flex-wrap justify-between w-100 v-top">
+      {{ range (.Paginator 20).Pages  }}
+        {{ partial "boxes-showcase-items.html" . }}
+      {{ end }}
+    </section>
+  </div>
+  <div class="nested-list-reset nested-links">
+    {{/* pagination.html: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */}}
+    {{ template "_internal/pagination.html" . }}
+  </div>
+</div>
+{{ end }}

themes/gohugoioTheme/layouts/showcase/single.html

@@ -0,0 +1,71 @@
+{{ define "main" }}
+  <article class="cf ph3 ph4-ns pv3 pv5-ns">
+    <!-- header spans the full width -->
+    <header class="flex-none pb4 w-100">
+      <h1 class="fw9 lh-title mb7 mv0 pt3">
+        <a href="{{ .URL }}" class="dim link primary-color">
+          {{ .Title }}
+        </a>
+      </h1>
+    </header>
+    <div class="flex-l">
+      <div class="mw8 w-75-l">
+        {{ with .Params.images }}
+          <img src="{{ index . 0 }}" alt="Featured Image for {{ $.Title }}" class="img">
+        {{ end }}
+        {{with .Content}}
+          <div class="nested-copy-line-height nested-img nested-links">
+            {{- . -}}
+          </div>
+        {{end}}
+      </div>
+      <aside class="fn mid-gray w-100 w-25-l">
+        <div class="mt4 nested-links ph4-l">
+          {{with .Params.sitelink}}
+            <a href="{{.}}" class="db f3-ns f4 mb1">
+              {{- . | replaceRE "^https?://([^/]+).*" "$1" -}}
+            </a>
+          {{end}}
+          {{with .Params.repo}}
+            <a href="{{.}}" class="mb4">Source</a>
+          {{end}}
+
+          {{with .Params.description}}
+            <div class="f5 lh-title mv4">
+              {{- . | markdownify -}}
+            </div>
+          {{end}}
+          {{/* Because we want to allow for the creator array to be present in an item's front matter it will always show as set, so we see if the first item's name field is not null, then show the created by fields. Better way? */}}
+          {{$creator := (index .Params.creator 0).name }}
+          {{if ne $creator nil}}
+            <div class="mb4">
+                Created by:<br />
+              <ul>
+                {{range .Params.creator}}
+                  <li>
+                    {{if .link}}
+                      <a href="{{.link}}" class="link"/>
+                        {{- .name -}}
+                      </a>
+                    {{else}}
+                      {{.name}}
+                    {{end}}
+                  </li>
+                {{end}}
+              </ul>
+            </div>
+          {{end}}
+          <div class="b--light-gray bt pt3 ">
+            <div class="f6 gray mb2">Previous/Next</div>
+            {{- partial "previous-next-links-in-section-with-title.html" . -}}
+          </div>
+        </div>
+      </aside>
+    </div>
+    {{/* bottom row */}}
+    <div class="f6 gray mv6">
+      Last Update: {{ .Lastmod.Format "January 2, 2006" }} <br>
+      {{ partial "page-edit.html" . }}
+    </div>
+  </article>
+{{ end }}

themes/gohugoioTheme/src/css/_carousel.css

@@ -0,0 +1,25 @@
+/* These styles enhance the home page carousel, located here: themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html */
+.overflow-x-scroll{
+  -webkit-overflow-scrolling: touch;
+}
+.row {
+  transition: 450ms transform;
+  font-size: 0;
+}
+.tile {
+  transition: 450ms all;
+}
+.details {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
+  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
+  transition: 450ms opacity;
+}
+.tile:hover .details {
+  opacity: 1;
+}
+.row:hover .tile {
+  opacity: 0.3;
+}
+.row:hover .tile:hover {
+  opacity: 1;
+}

themes/gohugoioTheme/src/css/main.css

@@ -11,6 +11,7 @@
 @import '_documentation-styles';
 
 @import '_algolia';
+@import '_carousel';
 @import '_code';
 @import '_color-scheme';
 @import '_columns';

themes/gohugoioTheme/src/js/lazysizes.js

@@ -1,2 +1,3 @@
 var lazysizes = require('lazysizes');
 // var lsnoscript = require('lazysizes/plugins/noscript/ls.noscript.js');
+var unveilhooks = require('lazysizes/plugins/unveilhooks/ls.unveilhooks.js');

themes/gohugoioTheme/src/package-lock.json

@@ -2585,14 +2585,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -2603,6 +2595,14 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -5411,15 +5411,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -5431,6 +5422,15 @@
         "strip-ansi": "3.0.1"
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",

themes/gohugoioTheme/src/package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "scripts": {
     "build:production": "rm -rf ../static/dist && webpack -p",
-    "build": "webpack --progress --colors --watch",    
+    "build": "webpack --progress --colors --watch",
     "start": "npm run build"
   },
   "devDependencies": {