Add sharing buttons

README.md

@@ -57,6 +57,16 @@ cardsPerRow = 2 # Possible values: 1, 2, 3
 #mastodon = "username"
 #medium = "username"
 
+[Params.Share] # Post Share block
+#facebook = true
+#twitter = true
+#reddit = true
+#telegram = true
+#linkedin = true
+#googleplus = true
+#vk = true
+#pocket = true
+
 # Web App Manifest settings
 # https://www.w3.org/TR/appmanifest/
 # https://developers.google.com/web/fundamentals/web-app-manifest/

i18n/en.yaml

@@ -8,6 +8,13 @@
 - id: meta_categories
   translation: Categories
 
+# Share
+- id: share-caption
+  translation: Share on
+
+- id: save-caption
+  translation: Save to
+
 # Related
 - id: related_title
   translation: Related

layouts/_default/single.html

@@ -10,6 +10,7 @@ <h1 class="post__title">{{ .Title }}</h1>
 				{{ if .Params.tags }}
 				<footer class="post__footer">
 					{{ partial "post_tags.html" . }}
+					{{ partial "post_share.html" . }}
 				</footer>
 				{{ end }}
 			</article>

layouts/partials/post_share.html

@@ -0,0 +1,44 @@
+{{- if and .IsPage (.Param "share") }}
+<div class="post__share share">
+	{{- if .Param "share.facebook" }}
+	<a class="share__link" title="{{ T "share-caption" }} Facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer" onclick="window.open(this.href, '{{ T "share-caption" }} Facebook', 'width=800,height=600,toolbar=0,status=0'); return false">
+		{{ partial "svg/facebook.svg" (dict "class" "share__icon" ) }}
+	</a>
+	{{- end }}
+	{{- if .Param "share.twitter" }}
+	<a class="share__link" title="{{ T "share-caption" }} Twitter" href="https://twitter.com/intent/tweet/?url={{ .Permalink }}&amp;text={{ .Title }}" target="_blank" rel="noopener noreferrer" onclick="window.open(this.href, '{{ T "share-caption" }} Twitter', 'width=800,height=450,resizable=yes,toolbar=0,status=0'); return false">
+		{{ partial "svg/twitter.svg" (dict "class" "share__icon" ) }}
+	</a>
+	{{- end }}
+	{{- if .Param "share.reddit" }}
+	<a class="share__link" title="{{ T "share-caption" }} Reddit" href="https://www.reddit.com/submit?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" rel="noopener noreferrer" onclick="window.open(this.href, '{{ T "share-caption" }} Reddit', 'width=832,height=624,toolbar=0,status=0'); return false">
+		{{ partial "svg/reddit.svg" (dict "class" "share__icon" ) }}
+	</a>
+	{{- end }}
+	{{- if .Param "share.telegram" }}
+	<a class="share__link" title="{{ T "share-caption" }} Telegram" href="https://t.me/share/url?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" rel="noopener noreferrer" onclick="window.open(this.href, '{{ T "share-caption" }} Telegram', 'width=800,height=600,toolbar=0,status=0'); return false">
+		{{ partial "svg/telegram.svg" (dict "class" "share__icon" ) }}
+	</a>
+	{{- end }}
+	{{- if .Param "share.linkedin" }}
+	<a class="share__link" title="{{ T "share-caption" }} LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}&title={{ .Title }}" target="_blank" rel="noopener noreferrer" onclick="window.open(this.href, '{{ T "share-caption" }} LinkedIn', 'width=640,height=480,toolbar=0,status=0'); return false">
+		{{ partial "svg/linkedin.svg" (dict "class" "share__icon" ) }}
+	</a>
+	{{- end }}
+	{{- if .Param "share.googleplus" }}
+	<a class="share__link" title="{{ T "share-caption" }} Google+" href="https://plus.google.com/share?url={{ .Permalink }}" target="_blank" rel="noopener noreferrer" onclick="window.open(this.href, '{{ T "share-caption" }} Google+', 'width=640,height=480,toolbar=0,status=0'); return false">
+		{{ partial "svg/googleplus.svg" (dict "class" "share__icon" ) }}
+	</a>
+	{{- end }}
+	{{- if .Param "share.vk" }}
+	<a class="share__link" title="{{ T "share-caption" }} VK" href="https://vk.com/share.php?url={{ .Permalink }}" target="_blank" rel="noopener noreferrer" onclick="window.open(this.href, '{{ T "share-caption" }} VK', 'width=640,height=480,toolbar=0,status=0'); return false">
+		{{ partial "svg/vk.svg" (dict "class" "share__icon" ) }}
+	</a>
+	{{- end }}
+	{{- if .Param "share.pocket" }}
+	<a class="share__link" title="{{ T "save-caption" }} Pocket" href="https://getpocket.com/edit?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" rel="noopener noreferrer" onclick="window.open(this.href, '{{ T "save-caption" }} Pocket', 'width=480,height=320,toolbar=0,status=0'); return false">
+		{{ partial "svg/pocket.svg" (dict "class" "share__icon" ) }}
+	</a>
+	{{- end }}
+</div>
+{{- end }}

static/css/main.css

@@ -674,7 +674,7 @@ mark {
 .post__tag {
 	display: inline-block;
 	padding: .25rem .5rem;
-	margin: 0 .3125rem .3125rem 0;
+	margin: .25rem;
 	line-height: 1.5;
 	background: #111;
 }
@@ -707,6 +707,62 @@ mark {
 	font-weight: 700;
 }
 
+.post__footer {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-top: 1.5rem;
+}
+
+.post__tags {
+	display: flex;
+	flex-basis: 100%;
+	flex-wrap: wrap;
+	margin: 0 -.25rem auto;
+}
+
+.post__share {
+	display: flex;
+	flex-basis: 100%;
+	flex-wrap: wrap;
+	margin: 0 -.25rem auto;
+}
+
+@media screen and (min-width: 720px) {
+	.post__tags {
+		flex: 1 0 65%;
+		justify-content: flex-start;
+	}
+
+	.post__share {
+		flex: 1 0 35%;
+		justify-content: flex-end;
+	}
+}
+
+.share__link {
+	background-color: #111;
+	margin: .25rem;
+	font-size: 0;
+}
+
+.share__link:hover {
+	margin: .25rem;
+	text-decoration: none;
+}
+
+.share__icon {
+	fill: #f8ae00;
+	stroke: #f8ae00;
+	width: 32px;
+	height: 32px;
+}
+
+.share__icon:hover {
+	fill: #fff;
+	stroke: #fff;
+}
+
 .alignleft {
 	float: left;
 	margin: 1rem 1rem 1rem 0;