Layout improvements

- Tagline
- Share buttons
- JSON LD
- Tags
- Style Fixes
This commit is contained in:
Alexandre Vicenzi 2020-10-17 14:40:58 +02:00
parent cd5751ef14
commit b607c6857a
11 changed files with 317 additions and 18 deletions

View File

@ -66,6 +66,10 @@
integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="{{ `js/jquery.min.js` | relURL }}"></script>
<script src="{{ `js/soho.js` | relURL }}"></script>
{{ range $.Site.Params.customJs -}} {{ range $.Site.Params.customJs -}}
<script src="{{ . | relURL }}"></script> <script src="{{ . | relURL }}"></script>
{{- end}} {{- end}}

View File

@ -1,6 +1,7 @@
{{ define "main" -}} {{ define "main" -}}
<div class="post"> <div class="post">
<h1>{{ .Title }}</h1> <h1 class="title">{{ .Title }}</h1>
{{ with .Params.tagline }}<span class="tagline">{{ . }}</span>{{ end }}
{{ if ne .Type "page" -}} {{ if ne .Type "page" -}}
<div class="post-date"> <div class="post-date">
@ -8,9 +9,17 @@
</div> </div>
{{- end }} {{- end }}
<div>
{{ .Content }} {{ .Content }}
</div> </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)) -}} {{ if (and .Site.DisqusShortname (ne .Params.DisableComments true) (ne .Params.disable_comments true)) -}}
<h2>Comments</h2> <h2>Comments</h2>
{{ template "_internal/disqus.html" . }} {{ template "_internal/disqus.html" . }}

View File

@ -1,5 +1,6 @@
<footer> <footer>
<div> <div>
<p>
&copy; {{ $.Site.Params.Copyright }} {{ now.Format "2006"}} &copy; {{ $.Site.Params.Copyright }} {{ now.Format "2006"}}
{{ with $.Site.Params.License -}} {{ with $.Site.Params.License -}}
@ -9,5 +10,6 @@
{{ with $.Site.Params.BuiltWith -}} {{ 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 &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 }} {{- end }}
</p>
</div> </div>
</footer> </footer>

View File

@ -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>

View File

@ -5,3 +5,5 @@
{{ template "_internal/twitter_cards.html" . }} {{ template "_internal/twitter_cards.html" . }}
{{ template "_internal/opengraph.html" . }} {{ template "_internal/opengraph.html" . }}
{{ partial "json-ld.html" . }}

View File

@ -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>

View File

@ -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>

View File

@ -69,7 +69,7 @@ html {
} }
footer { footer {
padding-left: 18rem; margin-left: 19rem !important;
} }
} }
@ -125,12 +125,15 @@ footer {
font-size: .7rem; font-size: .7rem;
text-align: center; text-align: center;
height: 40px; height: 40px;
margin: 2rem 1rem 0 1rem;
padding: 1rem 0;
border-top: 1px solid #e0e0e0;
} }
@media (min-width: 48em) { @media (min-width: 48em) {
.content { .content {
max-width: 38rem; max-width: 40rem;
margin-left: 20rem; margin-left: 20rem;
margin-right: 2rem; margin-right: 2rem;
margin-bottom: -40px; margin-bottom: -40px;
@ -138,13 +141,6 @@ footer {
} }
} }
@media (min-width: 64em) {
.content {
margin-left: 22rem;
margin-right: 4rem;
}
}
.img-circle { .img-circle {
border-radius: 50%; border-radius: 50%;
} }
@ -274,3 +270,62 @@ ul.posts {
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-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;
}

View File

@ -321,7 +321,6 @@ tbody tr:nth-child(odd) th {
/* Meta data line below post title */ /* Meta data line below post title */
.post-date { .post-date {
display: block; display: block;
margin-top: -.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #757575; color: #757575;
} }

2
static/js/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

48
static/js/soho.js Normal file
View File

@ -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();
});
});