Layout improvements

- Tagline - Share buttons - JSON LD - Tags - Style Fixes
2020-10-17 14:40:58 +02:00 · 2020-10-17 14:40:58 +02:00 · b607c6857a
parent cd5751ef14
commit b607c6857a
11 changed files with 317 additions and 18 deletions
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -66,6 +66,10 @@
          integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0="
          crossorigin="anonymous"></script>

+
+  <script src="{{ `js/jquery.min.js` | relURL }}"></script>
+  <script src="{{ `js/soho.js` | relURL }}"></script>
+
  {{ range $.Site.Params.customJs -}}
  <script src="{{ . | relURL }}"></script>
  {{- end}}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,6 +1,7 @@
 {{ define "main" -}}
 <div class="post">
-  <h1>{{ .Title }}</h1>
+  <h1 class="title">{{ .Title }}</h1>
+  {{ with .Params.tagline }}<span class="tagline">{{ . }}</span>{{ end }}

  {{ if ne .Type "page" -}}
  <div class="post-date">
@ -8,7 +9,15 @@
  </div>
  {{- end }}

+  <div>
  {{ .Content }}
+  </div>
+
+  {{ partial "tags.html" . }}
+
+  {{ if (and (ne .Params.DisableShare true) (ne .Params.disable_share true)) -}}
+  {{ partial "share.html" . }}
+  {{- end }}
 </div>

 {{ if (and .Site.DisqusShortname (ne .Params.DisableComments true) (ne .Params.disable_comments true)) -}}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,5 +1,6 @@
 <footer>
  <div>
+    <p>
      &copy; {{ $.Site.Params.Copyright }} {{ now.Format "2006"}}

      {{ with $.Site.Params.License -}}
@ -9,5 +10,6 @@
      {{ with $.Site.Params.BuiltWith -}}
      &middot; Build with <a href="https://gohugo.io/" target="_blank">Hugo</a> & <a href="https://themes.gohugo.io/soho/" target="_blank">Soho</a> theme
      {{- end }}
+    </p>
  </div>
 </footer>
--- a/layouts/partials/json-ld.html
+++ b/layouts/partials/json-ld.html
@ -0,0 +1,134 @@
+{{ $ISO8601 := "2006-01-02T15:04:05-07:00" }}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type":"Person",
+      "@id": {{ .Site.BaseURL | printf "%s#author" }},
+      "name": {{ .Site.Params.author }},
+      "image": {
+        "@type":"ImageObject",
+        {{ with .Site.Params.gravatar -}}
+        "url": {{ md5 . | printf `"https://www.gravatar.com/avatar/%s?s=400&d=mp"` | safeJS }}
+        {{- else }}
+        {{ with .Site.Params.profilePicture -}}
+        "url": {{ . | absURL | printf `"%s"` | safeJS }}
+        {{ end -}}
+        {{ end }}
+      },
+      "description": {{ .Site.Params.description }}
+    },
+    {
+      "@type": "WebSite",
+      "@id": {{ .Site.BaseURL | printf "%s#website" }},
+      "url": {{ .Site.BaseURL }},
+      "name": {{ .Site.Title }},
+      "description": {{ .Site.Params.description }},
+      "publisher": {
+        "@id": {{ $.Site.BaseURL | printf "%s#author" }}
+      },
+      "inLanguage": {{ .Site.LanguageCode }}
+    },
+    {{- with .Site.Params.images -}}
+    {{- range . }}
+    {
+      "@type": "ImageObject",
+      "url": {{ . | absURL | printf `"%s"` | safeJS }},
+      "caption": {{ $.Site.Title }}
+    },
+    {{- end }}
+    {{- end }}
+    {
+      "@type": "WebPage",
+      "@id": {{ .Permalink | printf "%s#webpage" }},
+      "url": {{ .Permalink }},
+      "name": {{ .Title }},
+      "isPartOf": {
+        "@id": {{ .Site.BaseURL | printf "%s#website" }}
+      },
+      "about": {
+         "@id": {{ .Site.BaseURL | printf "%s#author" }}
+      },
+      {{- if not .PublishDate.IsZero }}
+      "datePublished": {{ .PublishDate.Format $ISO8601 }},
+      {{- end }}
+      {{- if not .Lastmod.IsZero }}
+      "dateModified": {{ .Lastmod.Format $ISO8601 }},
+      {{- end }}
+      "description": {{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }},
+      "inLanguage": {{ .Site.LanguageCode }},
+      "potentialAction": [
+        {
+          "@type": "ReadAction",
+          "target": [
+            {{ .Permalink }}
+          ]
+        }
+      ]
+    }{{ if .IsPage }},
+    {
+      "@type": "Article",
+      "isPartOf": {
+        "@id": {{ .Permalink | printf "%s#webpage" }}
+      },
+      "mainEntityOfPage": {
+        "@id": {{ .Permalink | printf "%s#webpage" }}
+      },
+      "headline": {{ .Title }},
+      {{- with .Params.images }}
+      "image": [
+        {{- range $idx, $url := . -}}{{- if $idx -}},{{- end }}
+        {{ $url | absURL -}}
+        {{ end }}
+      ],
+      {{- end }}
+      {{- if not .PublishDate.IsZero }}
+      "datePublished": {{ .PublishDate.Format $ISO8601 }},
+      {{- end }}
+      {{- if not .Lastmod.IsZero }}
+      "dateModified": {{ .Lastmod.Format $ISO8601 }},
+      {{- end }}
+      "publisher": {
+        "@id": {{ .Site.BaseURL | printf "%s#author" }}
+      },
+      "keywords": [
+      {{- if isset .Params "tags" -}}
+      {{- range $idx, $cat := .Params.tags -}}
+        {{- with $.Site.GetPage "tags" -}}
+        {{- with .GetPage $cat -}}{{- if $idx -}},{{- end }}
+        {{ .Title -}}
+        {{ end -}}
+        {{- end -}}
+      {{- end -}}
+      {{- end }}
+      ],
+      "articleSection": [
+      {{- if isset .Params "categories" -}}
+      {{- range $idx, $cat := .Params.categories -}}
+        {{- with $.Site.GetPage "categories" -}}
+        {{- with .GetPage $cat -}}{{- if $idx -}},{{- end }}
+        {{ .Title -}}
+        {{ end -}}
+        {{- end -}}
+      {{- end -}}
+      {{- end }}
+      ],
+      "inLanguage": {{ .Site.LanguageCode }},
+      "author": {
+        "@type": "Person",
+        "name": {{ .Params.author }}
+      },
+      "potentialAction": [
+        {
+          "@type": "CommentAction",
+          "name": "Comment",
+          "target": [
+            {{ .Permalink | printf "%s#comments" }}
+          ]
+        }
+      ]
+    }{{ end }}
+  ]
+}
+</script>
--- a/layouts/partials/seo.html
+++ b/layouts/partials/seo.html
@ -5,3 +5,5 @@
 {{ template "_internal/twitter_cards.html" . }}

 {{ template "_internal/opengraph.html" . }}
+
+{{ partial "json-ld.html" . }}
--- a/layouts/partials/share.html
+++ b/layouts/partials/share.html
@ -0,0 +1,31 @@
+<div class="share-buttons">
+  <a class="twitter-share-button"
+     href="#"
+     title="Share on Twitter"
+     data-url="{{ .Permalink }}"
+     data-text="{{ .Title }}"><i class="fab fa-twitter"></i></a>
+
+  <a class="linkedin-share-button"
+     href="#"
+     title="Share on LinkedIn"
+     data-url="{{ .Permalink }}"
+     data-text="{{ .Title }}"><i class="fab fa-linkedin-in"></i></a>
+
+  <a class="facebook-share-button"
+     href="#"
+     title="Share on Facebook"
+     data-url="{{ .Permalink }}"
+     data-text="{{ .Title }}"><i class="fab fa-facebook"></i></a>
+
+  <a class="telegram-share-button"
+     href="#"
+     title="Share on Telegram"
+     data-url="{{ .Permalink }}"
+     data-text="{{ .Title }}"><i class="fab fa-telegram"></i></a>
+
+  <a class="pinterest-share-button"
+     href="#"
+     title="Share on Pinterest"
+     data-url="{{ .Permalink }}"
+     data-text="{{ .Title }}"><i class="fab fa-pinterest"></i></a>
+</div>
--- a/layouts/partials/tags.html
+++ b/layouts/partials/tags.html
@ -0,0 +1,13 @@
+<div>
+  <ul class="tags">
+  {{- range $tag := $.Params.tags -}}
+  {{- with $.Site.GetPage "tags" -}}
+  {{- with .GetPage $tag }}
+  <li>
+    <a href="{{ .Permalink }}" class="tag-link">{{ .Title }}</a>
+  </li>
+  {{ end -}}
+  {{- end -}}
+  {{- end -}}
+  </ul>
+</div>
--- a/static/css/hyde.css
+++ b/static/css/hyde.css
@ -69,7 +69,7 @@ html {
  }

  footer {
-    padding-left: 18rem;
+    margin-left: 19rem !important;
  }
 }

@ -125,12 +125,15 @@ footer {
  font-size: .7rem;
  text-align: center;
  height: 40px;
+  margin: 2rem 1rem 0 1rem;
+  padding: 1rem 0;
+  border-top: 1px solid #e0e0e0;
 }


@media (min-width: 48em) {
  .content {
-    max-width: 38rem;
+    max-width: 40rem;
    margin-left: 20rem;
    margin-right: 2rem;
    margin-bottom: -40px;
@ -138,13 +141,6 @@ footer {
  }
 }

-@media (min-width: 64em) {
-  .content {
-    margin-left: 22rem;
-    margin-right: 4rem;
-  }
-}
-
 .img-circle {
  border-radius: 50%;
 }
@ -274,3 +270,62 @@ ul.posts {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
 }
+
+.share-buttons {
+  text-align: center;
+  font-size: 1.5rem;
+  margin-top: 2rem;
+}
+
+.share-buttons a {
+  padding: 0 0.6rem;
+}
+
+.share-buttons a:hover {
+  opacity: 0.75;
+}
+
+ul.tags {
+  list-style: none;
+  padding: 0;
+  margin: 2rem 0 1rem 0;
+}
+
+ul.tags li {
+  display: inline-block;
+  margin: 0.25rem 0;
+}
+
+a.tag-link {
+  background-color: #f2f2f2;
+  padding: 5px 10px;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  text-decoration: none;
+  color: #757575;
+}
+
+a.tag-link:hover {
+  text-decoration: none;
+}
+
+figure {
+  padding: 0;
+  margin: 0;
+}
+
+figure > img {
+  margin: 0 auto;
+}
+
+figcaption {
+  text-align: center;
+  font-size: 80%;
+}
+
+.tagline {
+  display: block;
+  font-size: 1.2rem;
+  margin-bottom: .5rem;
+  font-weight: 400;
+}
--- a/static/css/poole.css
+++ b/static/css/poole.css
@ -321,7 +321,6 @@ tbody tr:nth-child(odd) th {
 /* Meta data line below post title */
 .post-date {
  display: block;
-  margin-top: -.5rem;
  margin-bottom: 1rem;
  color: #757575;
 }
--- a/static/js/jquery.min.js
+++ b/static/js/jquery.min.js
--- a/static/js/soho.js
+++ b/static/js/soho.js
@ -0,0 +1,48 @@
+$(document).ready(function(){
+
+  $(".twitter-share-button").click(function (e) {
+    e.preventDefault();
+    var self = $(this);
+    var url = encodeURIComponent(self.data("url"));
+    var text = encodeURIComponent(self.data("text"));
+
+    window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, "_blank").focus();
+  });
+
+  $(".linkedin-share-button").click(function (e) {
+    e.preventDefault();
+    var self = $(this);
+    var url = encodeURIComponent(self.data("url"));
+    // var text = encodeURIComponent(self.data("text"));
+
+    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, "_blank").focus();
+  });
+
+  $(".facebook-share-button").click(function (e) {
+    e.preventDefault();
+    var self = $(this);
+    var url = encodeURIComponent(self.data("url"));
+    // var text = encodeURIComponent(self.data("text"));
+
+    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, "_blank").focus();
+  });
+
+  $(".telegram-share-button").click(function (e) {
+    e.preventDefault();
+    var self = $(this);
+    var url = encodeURIComponent(self.data("url"));
+    var text = encodeURIComponent(self.data("text"));
+
+    window.open(`https://t.me/share/url?url=${url}&text=${text}`, "_blank").focus();
+  });
+
+  $(".pinterest-share-button").click(function (e) {
+    e.preventDefault();
+    var self = $(this);
+    var url = encodeURIComponent(self.data("url"));
+    var text = encodeURIComponent(self.data("text"));
+
+    window.open(`https://pinterest.com/pin/create/button/?url=${url}&media=&description=${text}`, "_blank").focus();
+  });
+
+});