Add item call to action fragment

okkur · Oct 8, 2017 · 8bbe3c6 · 8bbe3c6
1 parent b5dd2dd
commit 8bbe3c6
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ _2017-10-09_
   - Button fragment for call to action
   - Reorganize fragments
   - Cleanup data files
+  - Item fragment with action button
 
 ## Fixes since v0.4.0
   - Fragment include conditionals

diff --git a/exampleSite/data/index/item-button-left.toml b/exampleSite/data/index/item-button-left.toml
@@ -1,5 +1,5 @@
 +++
-fragment = "item"
+fragment = "item-button"
 #disabled = false
 date = "2017-10-04"
 lastmod = "2017-10-04"
@@ -9,9 +9,7 @@ selfLink = "contribute-action"
 align = "left"
 
 title = "Contribute"
-#subtitle= "Highly modular theme for Hugo built with Boostrap 4"
-#image = "screenshot.png"
-icon = "fa-random"
+
 description = """
 Help out and contribute.
 
@@ -25,4 +23,9 @@ Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae f
 Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
 Nulla tincidunt quis lacus in posuere.
 """
+
+[[buttons]]
+  text = "Contribute"
+  link = "https://github.com/okkur/syna/blob/master/CONTRIBUTE.md"
+  color = "success"
 +++
diff --git a/exampleSite/data/index/item-button-right.toml b/exampleSite/data/index/item-button-right.toml
@@ -1,5 +1,5 @@
 +++
-fragment = "item"
+fragment = "item-button"
 #disabled = false
 date = "2017-10-04"
 lastmod = "2017-10-04"
@@ -10,8 +10,7 @@ align = "right"
 
 title = "Download"
 subtitle= "Showcase your project with our awesome theme"
-image = "screenshot.png"
-#icon = "fa-gears"
+
 description = """
 Download Syna and try it out now.
 
@@ -25,4 +24,14 @@ Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae f
 Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
 Nulla tincidunt quis lacus in posuere.
 """
+
+[[buttons]]
+  text = "Download"
+  link = "https://github.com/okkur/syna/releases"
+  color = "primary"
+
+[[buttons]]
+  text = "Download alternative"
+  link = "https://github.com/okkur/syna/releases"
+  color = "secondary"
 +++
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -33,6 +33,10 @@
           {{ partial "fragments/item.html" $ }}
         {{ end }}
 
+        {{ if and (not .disabled) (eq .fragment "item-button") }}
+          {{ partial "fragments/item-button.html" $ }}
+        {{ end }}
+
         {{ if and (not .disabled) (eq .fragment "embed") }}
           {{ partial "fragments/embed.html" $ }}
         {{ end }}

diff --git a/layouts/_default/split.html b/layouts/_default/split.html
@@ -33,6 +33,10 @@
           {{ partial "fragments/item.html" $ }}
         {{ end }}
 
+        {{ if and (not .disabled) (eq .fragment "item-button") }}
+          {{ partial "fragments/item-button.html" $ }}
+        {{ end }}
+
         {{ if and (not .disabled) (eq .fragment "embed") }}
           {{ partial "fragments/embed.html" $ }}
         {{ end }}

diff --git a/layouts/index.html b/layouts/index.html
@@ -33,6 +33,10 @@
           {{ partial "fragments/embed.html" $ }}
         {{ end }}
 
+        {{ if and (not .disabled) (eq .fragment "item-button") }}
+          {{ partial "fragments/item-button.html" $ }}
+        {{ end }}
+
         {{ if and (not .disabled) (eq .fragment "subscribe") }}
           {{ partial "fragments/subscribe.html" $ }}
         {{ end }}

diff --git a/layouts/partials/fragments/item-button.html b/layouts/partials/fragments/item-button.html
@@ -0,0 +1,92 @@
+{{ $data := ($.Scratch.Get "data") }}
+{{ "<!-- Item button -->" | safeHTML }}
+{{ $bg := $data.background | default "light"}}
+
+<section {{ with $data.selfLink }}id="{{ . }}"{{ end }}>
+  <div class="overlay container-fluid
+    {{- printf " bg-%s" $bg -}}
+  ">
+    <div class="container py-5">
+      <div class="row align-items-center
+        {{- if eq $data.align "left" -}}
+          {{- printf " justify-content-start" -}}
+        {{- else -}}
+          {{- printf " justify-content-end" -}}
+        {{- end -}}
+      ">
+        <div class="col-12 col-lg-7 order-12
+          {{- if eq $data.align "left" -}}
+            {{- printf " order-lg-1" -}}
+          {{- end -}}
+        ">
+          {{ if $data.title }}
+            <div class="row pb-3">
+              <div class="col-12
+                {{- if or (eq $bg "white") (eq $bg "light") (eq $bg "secondary") (eq $bg "primary") -}}
+                  {{- printf " text-%s" "black" -}}
+                {{- else -}}
+                  {{- printf " text-%s" "light" -}}
+                {{- end -}}
+              ">
+                <h2>
+                  {{ $data.title | markdownify }}
+                </h2>
+              </div>
+            </div>
+          {{ end }}
+          {{ if $data.subtitle }}
+            <div class="row pb-2
+              {{- if or (eq $bg "secondary") (eq $bg "primary") -}}
+                {{- printf " text-%s" "dark" -}}
+              {{- else -}}
+                {{- printf " text-muted text-%s" "secondary" -}}
+              {{- end -}}
+            ">
+              <div class="col-12">
+                <h5>
+                  {{ $data.subtitle | markdownify }}
+                </h5>
+              </div>
+            </div>
+          {{ end }}
+          {{ if $data.description }}
+            <div class="mb-0
+              {{- if or (eq $bg "secondary") (eq $bg "primary") -}}
+                {{- printf " text-%s" "dark" -}}
+              {{- else -}}
+                {{- printf " text-muted text-%s" "secondary" -}}
+              {{- end -}}
+            ">{{ $data.description  | markdownify}}</div>
+          {{ end }}
+        </div>
+        <div class="col-12 col-lg-4 order-12 mt-5
+          {{- if eq $data.align "left" -}}
+            {{- printf " ml-auto" -}}
+          {{- else -}}
+            {{- printf " order-lg-1 mr-auto" -}}
+          {{- end -}}
+        ">
+          <div class="row">
+            <div class="col-12 text-center
+              {{- if eq $data.align "left" -}}
+                {{- printf " text-lg-left" -}}
+              {{- else if eq $data.align "right" -}}
+                {{- printf " text-lg-right" -}}
+              {{- end -}}
+            ">
+              {{ range $data.buttons }}
+                <a class="btn btn-lg m-2
+                  {{ if hasPrefix .link "#" }} anchor{{ end }}
+                  {{- $color := .color | default "primary" -}}
+                  {{- printf " btn-%s" $color -}}
+                " href="{{ .link | relLangURL }}">
+                  {{ .text }}
+                </a>
+              {{ end }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>