Add improved blog template plus sharing buttons (#8)

* Add blog links to footer

Signed-off-by: lucperkins <lucperkins@gmail.com>

* Add improved blog template with Twitter share button

Signed-off-by: lucperkins <lucperkins@gmail.com>

* Add a second example post

Signed-off-by: lucperkins <lucperkins@gmail.com>

assets/sass/blog.sass

@@ -0,0 +1,2 @@
+.is-blog-page
+

assets/sass/style.sass

@@ -35,6 +35,8 @@ $colors: mergeColorMaps(("twitter-blue": ($twitter-blue, $white)), $colors)
 
 @import "bulma/bulma"
 
+@import "blog"
+
 =logo($tablet, $touch)
   margin: 0 auto
   +tablet
@@ -42,7 +44,6 @@ $colors: mergeColorMaps(("twitter-blue": ($twitter-blue, $white)), $colors)
   +touch
     width: percentage($touch / 100)
 
-
 .is-home-logo
   +logo(40, 60)
   +tablet

content/blog/first-post.md

@@ -10,3 +10,23 @@ Here is some blog post content that's included in the post summary.
 <!--more-->
 
 Here is some content not included in the summary.
+
+Laborum deserunt proident aliqua anim do deserunt. Tempor sit et esse cupidatat cillum. Culpa occaecat consectetur dolore ad pariatur dolore dolore duis occaecat sunt id. Eiusmod ea velit nisi pariatur consectetur id veniam consectetur mollit commodo culpa duis consequat excepteur. Sit nostrud cupidatat id anim non ad. Aute deserunt consequat deserunt esse officia proident ex laboris. Consectetur culpa non magna adipisicing enim laboris ullamco officia cillum dolor sint laboris culpa.
+
+Excepteur elit nisi irure id ullamco dolor et sit consectetur proident sit non elit. Incididunt duis voluptate adipisicing voluptate mollit ea nostrud consequat eu officia reprehenderit occaecat officia dolor. Ut non nostrud dolore ea commodo ex labore. Ea in ex ullamco ea aliqua sint anim deserunt esse pariatur duis. In id quis ea deserunt. Ipsum minim esse esse in magna proident.
+
+Voluptate consectetur ad velit non velit nisi laboris excepteur. Ullamco officia aliqua elit irure amet do sint elit anim esse fugiat. Ullamco elit exercitation velit laboris sint et quis cillum ea enim adipisicing cupidatat. Adipisicing occaecat est nostrud aute mollit id in ut ad qui reprehenderit enim.
+
+Non aliqua irure laborum ex sit veniam adipisicing tempor. Quis excepteur deserunt nisi cupidatat voluptate. Consequat et nostrud consequat sit magna exercitation magna veniam dolor. Irure cillum aliqua incididunt culpa exercitation.
+
+Dolor officia elit ut sunt aliqua ullamco. Elit occaecat ea et consectetur reprehenderit fugiat occaecat consequat Lorem tempor labore mollit. Occaecat eu sint veniam aliquip. Veniam cillum consectetur qui magna velit laboris consequat. Aliqua Lorem magna excepteur aute officia. Ut eu sint non nostrud ea sunt nulla sit dolor amet consequat minim.
+
+Eiusmod velit irure ad et. Duis Lorem fugiat nostrud officia dolore laborum cillum officia tempor voluptate voluptate do ullamco eiusmod. Id voluptate est ipsum occaecat quis deserunt adipisicing anim enim labore et laborum sint ut. Aute aute officia aute dolor non enim dolore occaecat eiusmod nisi id fugiat.
+
+Culpa anim ipsum duis et nulla nulla occaecat aute. Esse eu quis id ad magna excepteur exercitation proident cillum occaecat occaecat. Enim ut elit amet enim esse officia proident tempor nisi sint nostrud voluptate fugiat.
+
+Officia irure veniam nostrud consequat tempor in occaecat aute excepteur. Cupidatat velit aliqua ad proident. Ea ea ea labore ad tempor nulla pariatur non enim ipsum voluptate.
+
+Pariatur labore anim magna duis laboris excepteur. Id quis cillum eu incididunt exercitation aute veniam tempor commodo sunt. Consectetur consectetur eiusmod occaecat nisi cupidatat nostrud. Cupidatat enim sint nostrud quis pariatur anim enim do sint sit dolore. Consequat consectetur sunt mollit ad reprehenderit nisi do dolor voluptate minim cillum cupidatat in qui. Sit laboris sint amet qui labore qui incididunt enim esse irure.
+
+Pariatur elit exercitation aliqua ea id id aute amet nulla dolor Lorem nulla et in. Non eu labore labore tempor est quis laboris minim laborum eu. Enim ea est exercitation aute culpa exercitation incididunt ex culpa quis irure magna. Eiusmod dolor proident est cupidatat magna ea exercitation aute est eiusmod consequat officia proident do. Cillum aute id nulla nostrud eiusmod aliqua magna adipisicing excepteur. Commodo minim pariatur laboris cupidatat magna ad. Occaecat elit ut Lorem dolore.

content/blog/second-post.md

@@ -0,0 +1,28 @@
+---
+title: Second post for the TiKV blog
+author: Hieronymous Bosch
+date: 2018-12-10
+draft: true
+---
+
+Culpa officia dolor officia eu consectetur. Amet amet cillum laborum duis cupidatat nostrud. Eu aute id consequat deserunt tempor dolore Lorem deserunt in ad nulla tempor anim Lorem.<!--more--> Qui enim veniam laborum tempor laborum magna qui est velit est magna labore proident. Ex esse amet nulla sint anim nisi esse. Elit aute enim ullamco exercitation nostrud magna.
+
+{{< figure src="https://history.nasa.gov/diagrams/ad004.gif" >}}
+
+Aliqua nostrud ipsum mollit ad aliquip fugiat eu est nisi fugiat aute labore. Reprehenderit aute dolor quis Lorem. Ad minim ut minim aute qui elit Lorem minim ipsum labore. In irure labore id labore consequat pariatur veniam minim commodo commodo et. Nostrud aute minim duis pariatur est aliqua reprehenderit ex velit incididunt ullamco reprehenderit veniam.
+
+Nostrud dolor sit exercitation veniam adipisicing. Nostrud amet elit in do adipisicing labore velit Lorem aute officia fugiat. Cupidatat sunt sunt nisi qui incididunt commodo. Ea anim dolore ea cupidatat sunt laborum nisi do ea dolor. Sit nisi exercitation non do est velit mollit aute exercitation amet. Velit adipisicing minim commodo aute.
+
+Lorem eu reprehenderit ullamco irure ex eu sunt sunt ipsum amet nulla esse. Laboris dolor aute adipisicing mollit deserunt adipisicing id anim eiusmod voluptate non enim enim. Aute incididunt labore ad irure mollit cillum eu minim magna reprehenderit incididunt non adipisicing.
+
+Deserunt culpa culpa elit anim ea minim. Do consectetur duis exercitation est est ex minim irure voluptate officia aliqua et. Sint magna ut cupidatat cupidatat cupidatat.
+
+Consequat ex quis irure anim irure culpa culpa cillum veniam velit consequat sunt commodo esse. Ut nulla tempor anim minim esse amet quis culpa magna magna officia quis dolor. Adipisicing pariatur minim esse excepteur non ea cillum qui dolor eiusmod in ut.
+
+Tempor reprehenderit id quis eu fugiat eu incididunt dolore. Sint et minim quis velit. Deserunt elit veniam mollit eu ad culpa amet nostrud eiusmod exercitation non. Voluptate irure esse ut velit dolor deserunt in proident consectetur voluptate reprehenderit aliquip nisi duis.
+
+Commodo nisi irure sunt eiusmod duis non. Aute culpa tempor pariatur eu eiusmod duis commodo ipsum dolor Lorem exercitation ea culpa laboris. Elit exercitation consectetur id qui ut ea adipisicing incididunt excepteur incididunt nulla velit aliqua. Consectetur officia incididunt proident elit labore aliqua excepteur.
+
+Non culpa laboris enim fugiat cillum deserunt mollit consectetur irure amet aute. Ex deserunt cillum nisi labore consequat est ex labore aliquip dolor nulla eu cupidatat. Sunt dolor laborum minim ipsum ad eu nisi anim exercitation et nulla Lorem commodo fugiat. Cillum est officia cupidatat minim proident sit eu nisi occaecat exercitation consectetur tempor voluptate qui.
+
+Veniam irure mollit mollit aute ut ullamco commodo minim eu magna pariatur dolore reprehenderit. Aliquip officia consequat proident incididunt ipsum cupidatat in enim. Consequat duis veniam mollit est adipisicing culpa nostrud amet amet ex irure et. Eu minim exercitation cillum aute.

layouts/_default/blog/card.html

@@ -1,29 +1,40 @@
-{{- $date      := dateFormat "January 2, 2006" .Date }}
-{{- $hasAuthor := .Params.author }}
+{{- $date       := dateFormat "January 2, 2006" .Date }}
+{{- $hasAuthor  := .Params.author }}
+{{- $twitterUrl := printf "https://twitter.com/intent/tweet?text=%s %s" (printf "Check out this post from the TiKV blog: \"%s\"" .Title) .Permalink }}
 <a href="{{ .URL }}">
-  <div class="card">
+  <div class="card has-background-black">
     <div class="card-content">
-      <p class="title is-size-1 has-text-weight-light{{ if $hasAuthor }} is-spaced{{ end }}">
+      <p class="title is-size-2 is-size-3-mobile has-text-white has-text-weight-light">
         {{ .Title }}
       </p>
 
       {{- with .Params.author }}
-      <p class="subtitle is-size-3">
+      <p class="subtitle is-size-4 is-size-5-mobile has-text-white-bis has-text-weight-light">
         {{ . }}
       </p>
       {{- end }}
 
-      <p class="is-size-4">
+      <p class="is-size-5 is-size-6-mobile has-text-grey-lighter has-text-weight-light">
         {{ $date }}
       </p>
 
       {{- with .Summary }}
       <hr class="has-background-primary" />
 
-      <div class="content is-medium">
+      <div class="content is-medium has-text-grey-lighter">
         {{ . }}
       </div>
       {{- end }}
+
+      <br />
+
+      <div class="buttons">
+        <a class="button is-twitter-blue twitter-share-button" href="{{ $twitterUrl }}">
+          <span class="icon">
+            <i class="fab fa-twitter"></i>
+          </span>
+        </a>
+      </div>
     </div>
   </div>
 </a>

layouts/blog/list.html

@@ -3,6 +3,6 @@ TiKV | Blog
 {{ end }}
 
 {{ define "main" }}
-{{- partial "blog/hero.html" . }}
-{{- partial "blog/post-list.html" . }}
+{{ partial "blog/hero.html" . }}
+{{ partial "blog/post-list.html" . }}
 {{ end }}

layouts/partials/blog/hero.html

@@ -1,20 +1,31 @@
 {{- $author := .Params.author }}
 {{- $date   := dateFormat "January 2, 2006" .Date }}
+{{- $twitterUrl := printf "https://twitter.com/intent/tweet?text=%s %s" (printf "Check out this post from the TiKV blog: \"%s\"" .Title) .Permalink }}
 <section class="hero is-black">
   <div class="hero-body">
     <div class="container">
-      <h1 class="title is-size-1 has-text-weight-light{{ if $author }} is-spaced{{ end }}">
+      <h1 class="title is-size-1 is-size-2-mobile has-text-white has-text-weight-light{{ if $author }} is-spaced{{ end }}">
         {{ .Title }}
       </h1>
       {{- with $author }}
-      <p class="subtitle is-size-3">
+      <p class="subtitle is-size-3 is-size-4-mobile has-text-white-bis has-text-weight-light">
         {{ . }}
       </p>
       {{- end }}
       {{- if ne .URL "/blog/" }}
-      <p class="is-size-5">
+      <p class="is-size-5 has-text-grey-lighter has-text-weight-light">
         {{ $date }}
       </p>
+
+      <br />
+
+      <div class="buttons">
+        <a class="button is-twitter-blue twitter-share-button" href="{{ $twitterUrl }}">
+          <span class="icon">
+            <i class="fab fa-twitter"></i>
+          </span>
+        </a>
+      </div>
       {{- end }}
     </div>
   </div>

layouts/partials/blog/post-list.html

@@ -1,12 +1,12 @@
 {{- $posts := where .Site.RegularPages "Section" "blog" }}
-<section class="section is-black">
+<section class="section">
   <div class="container">
-    <div class="columns">
-      <div class="column">
-        {{- range $posts }}
+    <div class="columns is-multiline">
+      {{- range $posts }}
+      <div class="column is-3">
         {{ .Render "blog/card" }}
-        {{- end }}
       </div>
+      {{- end }}
     </div>
   </div>
 </section>

layouts/partials/blog/post.html

@@ -1,4 +1,4 @@
-<section class="section">
+<section class="section has-background-white">
   <div class="container">
     <div class="content is-medium">
       {{ .Content }}

layouts/partials/footer.html

@@ -2,6 +2,7 @@
 {{- $logo      := .Site.Params.logos.white | relURL }}
 {{- $docs      := where .Site.Pages "Section" "docs" }}
 {{- $latest    := .Site.Params.versions.latest }}
+{{- $blogPosts := where .Site.RegularPages "Section" "blog" }}
 <footer class="footer is-dark">
   <div class="container">
     <div class="columns">
@@ -26,8 +27,8 @@
           {{- end }}
         </ul>
       </div>
-      <div class="column">
 
+      <div class="column">
         <h5 class="is-size-5 has-text-weight-bold has-text-white">
           Project
         </h4>
@@ -42,6 +43,33 @@
           </li>
         </ul>
       </div>
+
+      {{- if gt (len $blogPosts) 0 }}
+      <div class="column">
+        <h5 class="is-size-5 has-text-weight-bold has-text-white">
+          Blog
+        </h4>
+
+        <hr class="hr has-background-primary">
+
+        <ul>
+          {{- range first 5 $blogPosts }}
+          <li>
+            <a href="{{ .URL }}">
+              {{ .Title }}
+            </a>
+          </li>
+          {{- end }}
+          {{- if gt (len $blogPosts) 5 }}
+          <li>
+            <a href="/blog">
+              More...
+            </a>
+          </li>
+          {{- end }}
+        </ul>
+      </div>
+      {{- end }}
     </div> <!-- columns -->
 
     <br /><br />