Squashed 'themes/gohugoioTheme/' changes from fe71e360..396b859f

396b859f Remove console.log from the ga partial
bd0d5ea1 Send custom dimensions in GA
4c4f13a7 Fix broken gtag
3fcf17e6 Add site to GA config
d50c77c2 Add branch to GA config
261def30 Add new sponsor
b706e805 updated to new Forestry logo
8e414ca6 GA track outgoing sponsor clikcs
e9bc3550 Move the sponsor banners up a little
ff619669 Migrate from analytics.js to gtag.js
f045b912 Add fluid type to showcase details box
d1865f3e Adjust column widths to handle a wider variety of copy width
877d4baa Always show the latest showcase item on front page
44cdbac1 showcase: Shuffle the news items
5efcb135 Trim "www." from shocase URLs in title
ae61a4c4 Make the inline showcase template names unique
2fc7e154 Add a Showcase copyright notice

git-subtree-dir: themes/gohugoioTheme
git-subtree-split: 396b859f10615e8069d9acec31a2e79e39e05c50

data/sponsors.toml

@@ -5,9 +5,9 @@ logo = "/images/sponsors/forestry-logotype.svg"
 copy = ""
 
 [[banners]]
-name = ""
-link = ""
-logo = ""
+name = "Linode"
+link = "https://www.linode.com/"
+logo = "/images/sponsors/linode-logo_standard_light_medium.png"
 copy = ""
 
 [[banners]]

layouts/_default/baseof.html

@@ -34,7 +34,7 @@
       {{- template "_internal/twitter_cards.html" . -}}
 
       {{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production")  }}
-        {{ template "_internal/google_analytics_async.html" . }}
+        {{ partial "gtag" . }}
       {{ end }}
 
 

layouts/index.html

@@ -9,16 +9,16 @@
     {{- partial "home-page-sections/features-icons" . -}}
   </section>
 
-  {{- partial "home-page-sections/showcase.html" . -}} 
+  {{ partial "home-page-sections/sponsors.html" (dict "cx" . "gtag" "home" ) }}
 
   {{- partial "home-page-sections/features-single" . -}}
 
+  {{- partial "home-page-sections/showcase.html" . -}} 
+
   <section class="w-100 ph4 ph5-ns pv4 pv6-ns mid-gray bg-white bb bt b--light-gray">
     {{- partial "home-page-sections/installation" . -}}
   </section>
 
-  {{ partial "home-page-sections/sponsors.html" (dict "cx" . ) }}
-
   <section class="w-100 ph4 ph5-ns pv4 pv6-ns mid-gray bg-accent-color-dark">
     {{- partial "home-page-sections/tweets" . -}}
   </section>

layouts/partials/gtag.html

@@ -0,0 +1,26 @@
+{{ with .Site.GoogleAnalytics }}
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  {{ $site := $.Site.BaseURL | replaceRE "^https?://(www\\.)?([^/]+).*" "$2" }}
+  gtag('config', '{{ . }}', {'dimension1': '{{ $site }}', 'dimension2': '{{ getenv "BRANCH" }}'});
+
+/**
+* Function that tracks a click on an outbound link in Analytics.
+* Setting the transport method to 'beacon' lets the hit be sent
+* using 'navigator.sendBeacon' in browser that support it.
+*/
+var trackOutboundLink = function(id, url) {
+  gtag('event', 'click', {
+    'event_category': 'outbound',
+    'event_label': id,
+    'transport_type': 'beacon',
+    'event_callback': function(){document.location = url;}
+  });
+}
+
+</script>
+{{ end }}

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

@@ -4,26 +4,10 @@
   <div class="w-100">
     <div class="w-100 overflow-x-scroll">
       <div class="row nowrap mv2 pb1">
-        {{ range $p := first 10 (where .Site.RegularPages "Section" "showcase") }}
-        {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
-        {{ with $img }}
-        {{ $big := .Fill "1024x512 top" }}
-        {{ $small := $big.Resize "512x" }}
-        <a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;" 
-          data-bg="{{ $img.RelPermalink }}"
-          data-sizes="auto" 
-           data-srcset="{{ $small.RelPermalink }} 1x,
-          {{ $big.RelPermalink }} 2x" data-src="small"
-        >
-          {{with $p.Title}}
-          <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 }}
+        {{ $showcasePages := where .Site.RegularPages "Section" "showcase" }}
+        {{ template "home_showcase_item" (index $showcasePages 0) }}
+        {{ range $p := first 10 ($showcasePages | after 1 | shuffle) }}
+          {{template "home_showcase_item" $p }}
         {{end}}
       </div>
     </div>
@@ -32,4 +16,27 @@
   <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>
+</section>
+
+
+{{ define "home_showcase_item" }}
+   {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
+        {{ with $img }}
+        {{ $big := .Fill "1024x512 top" }}
+        {{ $small := $big.Resize "512x" }}
+        <a href="{{ $.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;" 
+          data-bg="{{ $img.RelPermalink }}"
+          data-sizes="auto" 
+           data-srcset="{{ $small.RelPermalink }} 1x,
+          {{ $big.RelPermalink }} 2x" data-src="small"
+        >
+          {{with $.Title}}
+          <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 }}

layouts/partials/home-page-sections/sponsors.html

@@ -1,14 +1,22 @@
 {{$classes_box := "ba b--light-gray bg-light-gray br3 flex flex-column flex-wrap items-center justify-center ph3 pv4 mb4 w-100 w-30-l "}}
+{{$gtag := .gtag | default "unknown" }}
 {{ with .cx.Site.Data.sponsors }}
-  <section class="{{ $.classes_section | default "bg-primary-color-dark b--light-gray bb bt ph5 pv4 w-100"}}">
+  <section class="{{ $.classes_section | default "bg-primary-color-dark b--dark-gray bb bt ph5 pv4 w-100"}}">
     <div class="center mw9"> 
       <f3 class="b f3 light-gray">Hugo Sponsors</f3>
       <div class="flex-ns flex-wrap center justify-between  pt3">
         {{ range .banners }}
+          {{ $banner := . }}
           {{if .logo}}
             <div class="{{$classes_box}} o-100">
               {{with .link -}}
-                <a href="{{.}}?{{ (querify "utm_source" "homepage" "utm_medium" "banner" "utm_campaign" "hugosponsor") | safeURL }}" class="grow">
+                {{ $url := printf "%s?%s" . (querify "utm_source" "homepage" "utm_medium" "banner" "utm_campaign" "hugosponsor") | safeURL }}
+                {{ if eq (getenv "HUGO_ENV") "production" | or (eq $.cx.Site.Params.env "production")  }}
+                   {{ $gtagID := printf "Sponsor %s %s" $banner.name $gtag | title }}
+                   <a href="{{ $url }}" onclick="trackOutboundLink({{ printf "'%s', '%s'" $gtagID $url | safeJS }}); return false;" class="grow">
+                {{ else }}
+                   <a href="{{ $url }}" class="grow">
+                {{ end }}
               {{- end}}
               <img src="{{ .logo }}" alt="Logo for {{ .name }}" class="img h3 center" />
               {{with .link}}</a>{{end}}

layouts/partials/site-footer.html

@@ -29,7 +29,7 @@
       </div>
 
       <div class="w-100 w-50-l"> 
-        {{ partial "home-page-sections/sponsors.html" (dict "cx" . "classes_section" "pb3 w-100" "classes_copy" "f7 w-90-ns") }}
+        {{ partial "home-page-sections/sponsors.html" (dict "cx" .  "gtag" "footer" "classes_section" "pb3 w-100" "classes_copy" "f7 w-90-ns") }}
       </div>
 
     </div>

layouts/showcase/list.html

@@ -9,7 +9,7 @@
     </div>
   </article>
     <section class="flex-ns flex-wrap justify-between w-100 v-top">
-      {{ range (.Paginator 20).Pages  }}
+      {{ range (.Paginate (.Pages | shuffle ) 20).Pages  }}
         {{template "showcase_items" .}}
       {{ end }}
     </section>
@@ -17,6 +17,7 @@
     {{/* pagination.html: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */}}
     {{ template "_internal/pagination.html" . }}
   </div>
+  <div class="dib f3 mt4">The Showcase articles are copyright the content authors. Any open source license will be attached.</div>
 </div>
 {{ end }}
 

layouts/showcase/single.html

@@ -9,15 +9,15 @@ Showcase: {{ .Title }}
     <div class="flex flex-wrap">
 
       <div class="w-100 w-20-l order-1 order-0-l">
-        {{template "details" .}}
+        {{template "sc-details" .}}
       </div>
 
-      <div class="w-100 w-60-l order-0 order-1-l">
-        {{template "main-column" .}}
+      <div class="w-100 w-60-l order-0 order-1-l ph4-l">
+        {{template "sc-main-column" .}}
       </div>
 
       <aside class="dn mid-gray w-100 w-20-ns flex-l justify-center order-2">
-        {{template "navigation" .}}
+        {{template "sc-navigation" .}}
       </aside>
 
     </div>
@@ -26,13 +26,13 @@ Showcase: {{ .Title }}
       Last Update: {{ .Lastmod.Format "January 2, 2006" }} <br>
       {{ partial "page-edit.html" . }}
     </div>
-
+    <div class="b">The Showcase articles are copyright the content authors. Any open source license will be attached.</div>
   </article>
 {{ end }}
 
 
 
-{{define "main-column"}}
+{{define "sc-main-column"}}
   {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
   {{ with $img }}
      {{ $big := .Fill "1024x512 top" }}
@@ -47,14 +47,15 @@ Showcase: {{ .Title }}
       {{- . -}}
   {{end}}
   </div>
+
 {{end}}
 
-{{define "details"}}
-  <div class="mt4 mt0-ns nested-links mr3-m mr4-l">
+{{define "sc-details"}}
+  <div class="mt4 mt0-ns nested-links">
     <div class="ba b--light-gray bg-white pa3">
-      <h1 class="f3 mt0">{{.Title}}</h1>
+      <h1 class="f2-fluid mt0">{{.Title}}</h1>
       {{ with .Params.siteURL }}
-      <a href="{{ . }}" class="db f5 mb1">{{ . | replaceRE "^https?://([^/]+).*" "$1"}} {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
+      <a href="{{ . }}" class="db f5 mb1">{{ . | replaceRE "^https?://(www\\.)?([^/]+).*" "$2"}} {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
       {{ end }}
       {{ with .Params.siteSource }}
       <a href="{{ . }}" class="db mb4">source {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
@@ -73,7 +74,7 @@ Showcase: {{ .Title }}
   </div>
 {{end}}
 
-{{define "navigation"}}
+{{define "sc-navigation"}}
   {{$section := where .Site.RegularPages "Section" .Section}}
   {{$number_of_entries := $section | len}}
   <ul class="pa0 list">

src/css/_fluid-type.css

@@ -0,0 +1,10 @@
+.f2-fluid {
+  font-size: 2.25rem;
+}
+
+@media (--breakpoint-large) {
+  .f2-fluid {
+    font-size: 1.25rem;
+    font-size: calc(0.875rem + 0.5 * ((100vw - 20rem) / 60));
+  }
+}

src/css/main.css

@@ -18,6 +18,7 @@
 @import '_content';
 @import '_content-tables';
 @import '_definition-lists';
+@import '_fluid-type';
 @import '_font-family';
 /*@import '_hljs';*/
 @import '_hugo-internal-template-styling';