mirror of
https://github.com/Vimux/Binario.git
synced 2024-12-22 04:29:05 +00:00
Add sharing buttons
This commit is contained in:
vimux
parent
299ecd09ca
commit
6b36c1ca0a
7 changed files with 121 additions and 1 deletions
10
README.md
10
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/
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
{{ if .Params.tags }}
|
||||
<footer class="post__footer">
|
||||
{{ partial "post_tags.html" . }}
|
||||
{{ partial "post_share.html" . }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
</article>
|
||||
|
|
|
|||
44
layouts/partials/post_share.html
Normal file
44
layouts/partials/post_share.html
Normal file
|
|
@ -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 }}&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 }}&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 }}&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 }}&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 }}
|
||||
1
layouts/partials/svg/pocket.svg
Normal file
1
layouts/partials/svg/pocket.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 458 B |
1
layouts/partials/svg/reddit.svg
Normal file
1
layouts/partials/svg/reddit.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 648 B |
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue