add blog capability

config.toml

@@ -20,6 +20,9 @@ extensions = [ "hardLineBreak" ]
   custom_css = ['css/custom.css']
   custom_js  = []
 
+[params.blog]
+  headline = "Thoughts about tech, politics, and more"
+
 [params.social]
   Github        = "mxmehl"
   Git           = "https://src.mehl.mx/mxmehl"

content/blog/creating-a-new-theme.md

@@ -4,7 +4,7 @@ date: 2014-09-28
 linktitle: Creating a New Theme
 title: Creating a New Theme
 highlight: true
-draft: true
+draft: false
 ---
 
 

content/blog/goisforlovers.md

@@ -14,7 +14,9 @@ categories = [
     "golang",
 ]
 highlight = "true"
-draft = true
+draft = false
+headerimage = "placeholder.jpg"
+headercredits = "Unsplash, [Dlanor S](https://unsplash.com/photos/2xEQDxB0ss4)"
 +++
 
 Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for

content/blog/hugoisforlovers.md

@@ -13,7 +13,7 @@ categories = [
     "golang",
 ]
 highlight = "true"
-draft = true
+draft = false
 +++
 
 ## Step 1. Install Hugo

content/blog/migrate-from-jekyll.md

@@ -3,7 +3,7 @@ date: 2014-03-10
 linktitle: Migrating from Jekyll
 title: Migrate to Hugo from Jekyll
 highlight: "true"
-draft: true
+draft: false
 ---
 
 ## Move static content to `static`

themes/hugo-sustain/layouts/_default/list.html

@@ -3,22 +3,34 @@
   <div id="wrap">
     <!-- Header -->
     {{ partial "header" . }}
-      <div class="container">
+    <div class="container archive">
-        <h1>Archive</h1>
+      <h1>{{ .Site.Params.Blog.Headline }}
-          <div class="panel panel-default">
+        {{ if (isset .Data "Singular") }}
-            <div class="panel-body">
+          <br />({{ .Data.Singular | humanize }}: {{lower .Title}})
+          <span class="article-rss"><a href="/{{ .Data.Plural }}/{{lower .Title}}/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
+        {{ else }}
+          <span class="article-rss"><a href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
+        {{ end }}
+      </h1>
+      {{ if .Site.Params.Social.CommentsProvider }}
+        <p><a href="{{ .Site.Params.Social.CommentsProvider }}">Subscribe</a> to my Blog via Diaspora, Mastodon, Friendica or GNU Social. Never miss a article! Reshare, like and discuss it!</p>
+      {{ end }}
+      <p class="categories">
+        <a class="label label-success" href="/articles">All</a>
+        {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
+          <a class="label label-success" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
+            {{ humanize $name }}
+          </a>
+        {{ end }}
+      </p>
+      
+      <div class="panel panel-default panel-overview">
+        <div class="blogpost">
           {{ range .Data.Pages.ByPublishDate.Reverse }}
-              <div class="row">
+            <div class="blog-summary">
-                <div class="col-sm-4 col-md-4 col-lg-4">
+              <h4><strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong></h4>
-                  <h5 style="text-align: right">
+              <div class="metadata">Posted on {{ .Date.Format "2 January 2006" }} - Tagged with {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">{{ $tag }}</a>{{ end }}</div>
-                    {{ .Date.Format "January 2, 2006" }}
+              <p>{{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a></p>
-                  </h5>
-                 </div>
-                 <div class="col-sm-8 col-md-8 col-lg-8">
-                   <h5 style="text-align: left">
-                    <strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong>
-                  </h5>
-                </div>
             </div>
           {{ end }}
         </div>

themes/hugo-sustain/layouts/_default/single.html

@@ -6,24 +6,27 @@
       {{ partial "header" . }}
 
       <div class="container {{ replace (.LinkTitle | lower) " " "_" }}"> <!-- add link title add class -->
-        <div class="blog-post">
           <h1>{{ .Title }}</h1>
-        </div>
         {{ if ne .Params.page true }}
-        <div class="blog-title">
+        <div>
-          <h4>
+          <p class="categories">
-          {{ .Date.Format "January 2, 2006" }}
+          {{ .Date.Format "2 January 2006" }}
             &nbsp;&nbsp;
             {{ range .Params.tags }}
-            <span class="label label-success">{{ . }}</span>
+              <a class="label label-success" href="/tags/{{ lower . }}">{{ . }}</a>
-            
             {{ end }}
-          </h4>
+          </p>
         </div>
         {{ end }}
         <div class="panel panel-default">
           <div class="panel-body">
             <div class="blogpost">
+              {{ if isset .Params "headerimage" }}
+                <div class="header-image">
+                  <img src="/img/{{ .Params.headerImage }}" />
+                  <p>{{ with .Params.headercredits }}{{ . | markdownify }}{{ end }}</p>
+                </div>
+              {{ end }}
               {{ .Content }}
               <!-- only show related posts if param is true, or if it's not a page -->
               {{ if or (eq .Params.related true) (ne .Params.page true) }}
@@ -34,7 +37,7 @@
                   <div class="row">
                     <div class="col-sm-4 col-md-4 col-lg-4">
                       <h6 style="text-align: right">
-                        {{ .Date.Format "January 2, 2006" }}
+                        {{ .Date.Format "2 January 2006" }}
                       </h6>
                     </div>
                     <div class="col-sm-8 col-md-8 col-lg-8">

themes/hugo-sustain/static/css/custom.css

@@ -11,13 +11,24 @@ div.footer {
 .container a:hover {
   color: #12437A;
 }
-div.container.links .label-success {
+.container .label-success {
   background-color: rgba(92, 139, 184, 0.6);
+  color: #FFF;
 }
-div.container h1 {
+.container a.label-success:hover {
+  background-color: rgba(92, 139, 184, 0.9);
+  color: #FFF;
+}
+.container h1 {
   font-weight: bold;
   color: #0D76EC;
 }
+.container h4 a {
+  color: #0D76EC;
+}
+.container h4 a:hover {
+  color: #0060CC;
+}
 
 /* Avoid scrollbar jumps in centering 
  * see https://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
@@ -63,3 +74,49 @@ div.contact p {
 .social-links li a:hover i {
   transform: scale(1);
 }
+
+/* BLOG */
+.categories {
+  font-size: 18px;
+  margin: 1em 0 3em 0;
+}
+.blog-summary {
+  padding-bottom: 1em;
+}
+.metadata {
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+.blogpost .header-image img {
+  width: 100%;
+  height: auto;
+  padding-bottom: 2px;
+}
+.blogpost .header-image p {
+  opacity: 0.7;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  margin-bottom: 1.5em;
+}
+
+a.learn-more {
+  font-size: 1.8em;
+  line-height: 0.8em;
+  font-weight: 700;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  padding: 0 1em 0 .3em;
+  position: absolute;
+}
+a.learn-more::after {
+  position: absolute;
+  right: 0.3em;
+  content: " » ";
+  opacity: .8;
+  transition: all 150ms linear;
+}
+a.learn-more:hover::after {
+  right: 0;
+  opacity: 1;
+}