feat(widget): hero: multiple paragraphs, extra cta, note, & image

- Support multiple paragraphs
- Icon support for `[cta]` call-to-action button
- Add optional alternative call-to-action link `[cta_alt]`
- Add optional note underneath cta button
- Add optional image
- Refresh the demo's instance of the Hero widget

Close #935

exampleSite/content/home/hero.md

@@ -8,28 +8,36 @@ title = "Academic"
 # Order that this section will appear in.
 weight = 3
 
+# Hero image (optional). Enter filename of an image in the `static/img/` folder.
+hero_media = "hero-academic.png"
+
 # Overlay a color or image (optional).
 #   Deactivate an option by commenting out the line, prefixing it with `#`.
 [header]
-  overlay_color = "#666"  # An HTML color value.
-  overlay_img = "headers/bubbles-wide.jpg"  # Image path relative to your `static/img/` folder.
+  overlay_color = "#4bb4e3"  # An HTML color value.
+  overlay_img = ""  # Image path relative to your `static/img/` folder.
   overlay_filter = 0.5  # Darken the image. Value in range 0-1.
 
-# Call to action button (optional).
-#   Activate the button by specifying a URL and button label below.
-#   Deactivate by commenting out parameters, prefixing lines with `#`.
+# Call to action links (optional).
+#   Display link(s) by specifying a URL and label below. Icon is optional for `[cta]`.
+#   Remove a link/note by deleting a cta/note block.
 [cta]
-  url = "./post/getting-started/"
-  label = '<i class="fas fa-download"></i> Install Now'
+  url = "post/getting-started/"
+  label = "Get Started"
+  icon_pack = "fas"
+  icon = "download"
+  
+[cta_alt]
+  url = "https://sourcethemes.com/academic/"
+  label = "View Documentation"
+
+# Note. An optional note to show underneath the links.
+[cta_note]
+  label = '<a id="academic-release" href="https://sourcethemes.com/academic/updates" data-repo="gcushen/hugo-academic">Latest release <!-- V --></a>'
 +++
 
-The highly flexible website framework for Hugo with an extensible plugin mechanism. Create a beautifully simple site in under 10 minutes :rocket:
-<div style="margin-top: -0.5rem;">
-  <a id="academic-release" href="https://sourcethemes.com/academic/updates" data-repo="gcushen/hugo-academic">
-  Latest release <!-- V -->
-  </a>
-</div>
-<div class="mt-3">
-  <a class="github-button" href="https://github.com/gcushen/hugo-academic" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star this on GitHub">Star</a>
-</div>
-<script async defer src="https://buttons.github.io/buttons.js"></script>
+**The Best Way to Create the Website You Want from Markdown (or RStudio/Jupyter)**
+
+Build **Anything** with Widgets
+
+<span style="text-shadow: none;"><a class="github-button" href="https://github.com/gcushen/hugo-academic" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star this on GitHub">Star</a><script async defer src="https://buttons.github.io/buttons.js"></script></span>

layouts/partials/css/academic.css

@@ -559,24 +559,60 @@ a[data-fancybox] img {
 
 .hero-overlay .hero-title,
 .hero-overlay .hero-lead,
-.hero-overlay .btn {
+.hero-overlay .hero-cta-alt,
+.hero-overlay .hero-note {
   color: #fff;
-  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
+  /*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */
 }
 
-.hero-overlay a {
+.hero-overlay a:not(.hero-overlay .btn) {
   color: #fff;
 }
 
 .hero-overlay .hero-lead a {
-  color: #fff;
-  text-decoration-line: underline;
+  text-decoration: underline;
+}
+
+.hero-overlay .cta-btns {
+  margin-bottom: 16px;
+}
+
+.hero-overlay .btn {
+  color: {{ .Get "primary_dark" }};
+  padding: .6em 2.1em;
+}
+
+a.hero-cta-alt {
+  display: inline-block;
+  position: relative;
+  transition-duration: .2s;
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  font-size: 1.1rem;
+}
+
+a.hero-cta-alt:active,
+a.hero-cta-alt:focus,
+a.hero-cta-alt:hover {
+  transform: scale(1.1);
 }
 
 .hero-overlay .btn-lg {
   font-size: 1.1rem;
 }
 
+.hero-overlay .hero-note {
+  font-size: 0.8rem;
+}
+
+.hero-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+}
+
 /*************************************************
  *  Featurette Widget
  **************************************************/

layouts/partials/widgets/hero.html

@@ -20,19 +20,67 @@ url('{{ $overlay_img }}')
 ;">
 
   <div class="container">
+    {{ if $page.Params.hero_media }}
+    <div class="row">
+      <div class="col-md-6 order-md-1 text-center text-md-left">
+    {{ end }}
 
-    <h1 class="hero-title" itemprop="headline">
-      {{ with $page.Title }}{{ . | markdownify }}{{ end }}
-    </h1>
+        <h1 class="hero-title" itemprop="headline">
+          {{ with $page.Title }}{{ . | markdownify }}{{ end }}
+        </h1>
 
-    {{ with $page.Content }}
-    <p class="hero-lead">{{ . | markdownify }}</p>
-    {{ end }}
+        {{ with $page.Content }}
+        <div class="hero-lead">{{ . }}</div>
+        {{ end }}
+
+        {{/* Call-to-action link */}}
+        {{ if $page.Params.cta.url }}
+          {{ $pack := or $page.Params.cta.icon_pack "fas" }}
+          {{ $pack_prefix := $pack }}
+          {{ if in (slice "fab" "fas" "far" "fal") $pack }}
+            {{ $pack_prefix = "fa" }}
+          {{ end }}
+          {{ $link := $page.Params.cta.url }}
+          {{ $scheme := (urls.Parse $link).Scheme }}
+          {{ $target := "" }}
+          {{ if not $scheme }}
+            {{ $link = $link | relLangURL }}
+          {{ else if in (slice "http" "https") $scheme }}
+            {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
+          {{ end }}
+        <p class="cta-btns">
+          <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="btn btn-light btn-lg">{{ if $page.Params.cta.icon }}<i class="{{ $pack }} {{ $pack_prefix }}-{{ $page.Params.cta.icon }}" aria-hidden="true"></i> {{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }}</a>
 
-    {{ if $page.Params.cta.url }}
-    <p><a href="{{ $page.Params.cta.url }}" class="btn btn-outline-light btn-lg">{{ $page.Params.cta.label | safeHTML}}</a></p>
+          {{/* Alternative Call-to-action link */}}
+          {{ if $page.Params.cta_alt.url }}
+            {{ $link := $page.Params.cta_alt.url }}
+            {{ $scheme := (urls.Parse $link).Scheme }}
+            {{ $target := "" }}
+            {{ if not $scheme }}
+              {{ $link = $link | relLangURL }}
+            {{ else if in (slice "http" "https") $scheme }}
+              {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
+            {{ end }}
+          <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="hero-cta-alt pl-4">{{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} <i class="fas fa-angle-right"></i></a>
+          {{ end }}
+        </p>
+        {{ end }}
+
+        {{/* Call-to-action note */}}
+        {{ with $page.Params.cta_note }}
+        <p class="hero-note text-muted mb-0">
+          {{ .label | markdownify | emojify | safeHTML }}
+        </p>
+        {{ end }}
+
+      {{/* Hero image */}}
+      {{ if $page.Params.hero_media }}
+      </div>
+      <div class="col-6 mx-auto col-md-6 order-md-2 hero-media">
+        <img src="{{ printf "img/%s" $page.Params.hero_media | relURL }}" alt="">
+      </div>
+    </div>
     {{ end }}
 
   </div>
-
 </section>