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

layouts/partials/svg/pocket.svg

@@ -0,0 +1 @@
+<svg class="{{ .class }}" aria-label="Pocket" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M388.8 88.9H123.2A47.4 47.4 0 0 0 76 136.5v131.9c0 2.4.2 4.8.5 7.2a101.8 101.8 0 0 0-.5 10.6c0 75.6 80.6 137 180 137s180-61.4 180-137c0-3.6-.2-7.1-.5-10.6.3-2.4.5-4.8.5-7.2v-132A47.4 47.4 0 0 0 388.8 89zm-22.4 132.6l-93 93c-4.7 4.6-11 7-17.1 7a23.8 23.8 0 0 1-17.7-7l-93-93a24 24 0 0 1 33.8-33.8l76.6 76.5 76.6-76.5a24 24 0 0 1 33.8 33.8z"/></svg>

layouts/partials/svg/reddit.svg

@@ -0,0 +1 @@
+<svg class="{{ .class }}" aria-label="Reddit" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M375 146a32 32 0 1 0 0-64 32 32 0 0 0 0 64zM106 298a42 42 0 1 0 0-84 42 42 0 0 0 0 84zm301 0a42 42 0 1 0 0-84 42 42 0 0 0 0 84z"/><path fill-rule="evenodd" d="M271 93c1-4 5-7 10-6l73 15a8 8 0 0 1-4 16l-65-14-21 94a8 8 0 1 1-16-4l23-101z"/><path fill-rule="evenodd" d="M422 307c0 65-74 117-166 117S90 372 90 307s74-117 166-117 166 52 166 117zm-227 47a6 6 0 0 0-8 10c18 14 44 20 69 21 25 0 51-7 69-21a7 7 0 0 0-8-10c-15 12-38 18-61 18s-46-7-61-18zm-4-36a31 31 0 1 0 0-62 31 31 0 0 0 0 62zm161-31a31 31 0 1 1-62 0 31 31 0 0 1 62 0z"/></svg>

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;