Skip to content
This repository has been archived by the owner on Jun 10, 2023. It is now read-only.

Add share buttons: #321

Open
simeononsecurity opened this issue Feb 5, 2023 · 0 comments
Open

Add share buttons: #321

simeononsecurity opened this issue Feb 5, 2023 · 0 comments

Comments

@simeononsecurity
Copy link
Contributor

Adding this to partials and calling it in single.html will add js free share buttons.

{{/*  Config  */}}
{{ $switches := (dict
    "facebook" true
    "twitter" true
    "linkedin" true
    "whatsapp" true
    "xing" true
    "mail" true
) }}
{{ $color := "#d5d5d5" }}
{{ $textcolor := "#bbb" }}
{{ $hoverColor := "#444444" }}

{{/*  Code  */}}
{{ $url := printf "%s" .Permalink | absLangURL }}
{{ $textBody := print .Title "\n\n" (.Summary | truncate 200) "\n\n" $url "\n" }}
{{ $encodedSummary := strings.TrimPrefix "=" (querify "" (.Summary | truncate 200))  }}
<nav class="sharebuttons">
    <span>{{ i18n "share_on" }}:</span>
    <ul>
        {{ if $switches.facebook }}<li><a href="https://www.facebook.com/sharer.php?u={{ $url }}&t={{ .Title }}" target="_blank"><svg height="50" viewBox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m12.8064516 26.63h5.4808065v22.5635484c0 .4454839.3609677.8064516.8064516.8064516h9.2929032c.4454839 0 .8064516-.3609677.8064516-.8064516v-22.4572581h6.3006452c.4096774 0 .7543548-.3074193.801129-.7143548l.9569355-8.3067742c.0262903-.2285484-.046129-.4574194-.1990323-.628871-.1530645-.1716129-.3720967-.2698387-.6019354-.2698387h-7.2574194v-5.2070968c0-1.5696774.8451613-2.36564512 2.5122581-2.36564512h4.7451613c.4454838 0 .8064516-.36112903.8064516-.80645162v-7.6248387c0-.44548388-.3609678-.80645162-.8064516-.80645162h-6.5395162c-.046129-.00225806-.1485484-.00596774-.2995161-.00596774-1.1346774 0-5.0787097.22274194-8.1941936 3.08887097-3.4519354 3.17612903-2.9720967 6.97903223-2.8574193 7.63838713v6.0890322h-5.7537097c-.4454839 0-.8064516.3609678-.8064516.8064516v8.2006452c0 .4454839.3609677.8066129.8064516.8066129z" fill="{{ $color }}" class="will-change" fill-rule="nonzero"/><path d="m0 0h50v50h-50z"/></g></svg></a></li>{{ end }}
        {{ if $switches.twitter }}<li><a href="https://twitter.com/share?text={{ .Title }}&url={{ $url }}" target="_blank"><svg height="50" viewBox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m48.8670204 9.72441272c-.7854489.34833978-1.5930659.64238268-2.418261.88115208.9769529-1.10488248 1.7217769-2.40488211 2.1764642-3.8274403.1019531-.31884757-.0037109-.66787091-.2658202-.8764646-.2618163-.20869135-.6254881-.23369134-.9136716-.06289061-1.7524409 1.03935518-3.6430654 1.78632762-5.6254867 2.22304625-1.9969721-1.95126898-4.7091784-3.06181554-7.5130838-3.06181554-5.918553 0-10.7336884 4.8150377-10.7336884 10.7333954 0 .4661131.0294922.9296872.0878906 1.386816-7.3443338-.644824-14.17226158-4.2546863-18.86093212-10.0061495-.1670898-.20498041-.4245116-.31552725-.68808575-.29433585-.2636718.02060546-.50068345.16933589-.63388653.3979491-.9509763 1.63173782-1.45371053 3.49804585-1.45371053 5.39697115 0 2.5863274.92333958 5.0401353 2.55449146 6.9576152-.49599595-.1717773-.97724581-.3864257-1.43662068-.6414061-.24658196-.1373046-.54755844-.1351562-.7925779.0052735-.24511712.1405273-.39882802.398828-.40537098.6812498-.00117188.0475585-.00117188.0951171-.00117188.1433593 0 3.8604481 2.07773379 7.3361307 5.25439304 9.2304661-.27294914-.027246-.54560531-.0667968-.81660133-.1185546-.27939445-.053418-.5666014.0445312-.75498025.2576171-.18867182.2128906-.2511718.5096678-.16416011.7806638 1.17578092 3.6709951 4.20302615 6.371092 7.86269306 7.1943339-3.0353507 1.9011714-6.50644345 2.8969719-10.15029007 2.8969719-.76035135 0-1.52499957-.0446289-2.2733392-.1332031-.37177724-.0442383-.72724588.1752929-.85390601.5289061-.12666012.3537108.00761719.7480466.32382804.950781 4.68115101 3.001464 10.09384484 4.5878893 15.65272994 4.5878893 10.9280242 0 17.7643504-5.1532212 21.5747986-9.4762669 4.7516588-5.3905258 7.4767557-12.5254847 7.4767557-19.5752874 0-.2945311-.0044922-.5918943-.0135743-.8883786 1.8747065-1.412402 3.4886709-3.1217765 4.8020495-5.0864244.1995116-.2983397.1779296-.6927732-.0532227-.96738251-.2305663-.27509758-.6153318-.36396474-.9436521-.21845697z" fill="{{ $color }}" class="will-change" fill-rule="nonzero"/><path d="m0 0h50v50h-50z"/></g></svg></a></li>{{ end }}
        {{ if $switches.linkedin }}<li><a href="https://www.linkedin.com/shareArticle?mini=true&url={{ $url }}&title={{ .Title }}&summary={{ $encodedSummary }}" target="_blank"><svg height="51" viewBox="0 0 50 51" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m37.17 16.2290323c11.3056452 0 12.83 8.1724193 12.83 16.1667742v17.6877419c0 .4454839-.3609677.8064516-.8064516.8064516h-10.0193549c-.4454838 0-.8064516-.3609677-.8064516-.8064516l-.0003842-15.9301537c-.0134805-4.2654904-.4024632-7.4953302-4.4055835-7.4953302-3.7477419 0-5.2080645 2.0945161-5.2080645 7.4708065v15.9545161c0 .4454839-.3609678.8066129-.8064516.8066129h-10.0156452c-.4454839 0-.8064516-.361129-.8064516-.8066129v-32.2464516c0-.4453226.3609677-.8064516.8064516-.8064516h9.6127419c.4454839 0 .8064517.361129.8064517.8064516v2.0943548c1.8075806-1.9691935 4.7877419-3.702258 8.8191935-3.702258zm-25.5312903.8014516c.4454838 0 .8064516.361129.8064516.8064516v32.2464516c0 .4454839-.3609678.8064516-.8064516.8064516h-10.03758067c-.44548387 0-.80645161-.3609677-.80645161-.8064516v-32.2464516c0-.4453226.36096774-.8064516.80645161-.8064516zm-5.01516131-16.0304839c3.64935481 0 6.61838711 2.96806452 6.61822581 6.61629032 0 3.64967738-2.968871 6.61903228-6.61822581 6.61903228-3.65225807 0-6.62354839-2.9691936-6.62354839-6.61903228 0-3.6482258 2.97129032-6.61629032 6.62354839-6.61629032z" fill="{{ $color }}" class="will-change" fill-rule="nonzero"/><path d="m0 0h50v50h-50z"/></g></svg></a></li>{{ end }}
        {{ if $switches.whatsapp }}<li><a href="whatsapp://send?text={{ $textBody }}" target="_blank"><svg height="50" viewBox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m25.4437935 0c13.5404221 0 24.5561688 10.9340909 24.5561688 24.3738636 0 13.4383117-11.0157467 24.3712663-24.5560065 24.3711039-4.0610389 0-8.0737013-1.0012987-11.624026-2.8982143l-12.97402593 4.1227273c-.06461039.0206169-.13084416.0305195-.19659091.0305195-.17159091 0-.33961039-.0681818-.46347403-.1946429-.17159091-.1746753-.23003247-.4311688-.15146104-.6631493l4.21801948-12.4423701c-2.20373376-3.724026-3.36704545-7.9790585-3.36704545-12.3259741 0-13.4397727 11.01688308-24.3738636 24.55844158-24.3738636zm-.0001624 5.07727273c-10.725974 0-19.45227269 8.65649347-19.45227269 19.29659087 0 4.0896104 1.28068182 8.0008117 3.70340909 11.3112013.125.1707793.15892857.3917208.09107143.5920455l-2.09805195 6.1897727 6.49918832-2.0659091c.064448-.0204545.1306818-.0305195.1967532-.0305195.125 0 .2491884.036039.3561689.1063312 3.1814935 2.0876624 6.8826298 3.1910714 10.7038961 3.1910714 10.7248376 0 19.4498376-8.6551948 19.4498376-19.2939935 0-10.6400974-8.7253246-19.29659087-19.45-19.29659087zm-6.6467532 7.85259737c.7225649 0 1.2425325.4384741 1.636039 1.3801948.1636363.3902598 1.7027597 4.1048702 1.788961 4.2772728.1050325.2060065.4300325.8439935.049513 1.6l-.0816559.1641233c-.1558441.3159091-.2902597.5886364-.5922078.9399351-.0969155.112013-.1956168.2308442-.2941558.349513-.2081169.250487-.4232143.5094156-.6217532.7058441-.0678572.0680195-.1993507.1998377-.2136364.2522728.000487 0 .0029221.0449675.0610389.1439935.4069806.6887987 3.375 4.7733766 7.2852273 6.4719156.1707792.0741883.7349026.3064935.7675325.3064935.0363636 0 .0970779-.0607143.1415584-.111526.3405844-.3849026 1.4428572-1.6733766 1.8069806-2.2146104.3220779-.4818182.7355519-.7271104 1.2277597-.7271104.3012987 0 .5845779.0926948.849026.1876624.6030564.2170398 3.8043369 1.7879312 4.3216328 2.0413055l.0686269.0335321c.4774351.2292208.8545455.4102273 1.0733766.7699676.3194805.5290584.1928572 1.9868506-.2873376 3.3211038-.609578 1.6939936-3.2894481 3.0826299-4.5089286 3.1907468l-.1788961.0170455c-.2819805.0277597-.6016234.0590909-1.000974.0590909l-.0944191-.0005452c-.9658464-.0112678-2.6415309-.2079278-6.0576913-1.5725068-3.6667208-1.4647727-7.2837663-4.6050325-10.1852273-8.8423701-.0501623-.0733766-.0847403-.124513-.1035714-.1496753-.7576299-.998539-2.5222403-3.624026-2.5222403-6.4047078 0-3.0896104 1.4788961-4.8464286 2.3530844-5.397565.8243507-.5196428 2.6887987-.7650974 3.0311689-.7795454.0351461-.0014814.0648513-.0027775.0900577-.0039117l.1047884-.0050457c.0548951-.0028933.0444193-.0028933.0863227-.0028933z" fill="{{ $color }}" class="will-change" fill-rule="nonzero"/><path d="m0 0h50v50h-50z"/></g></svg></a></li>{{ end }}
        {{ if $switches.xing }}<li><a href="https://www.xing.com/social_plugins/share/new?sc_p=xing-share&h=1&url={{ $url }}" target="_blank"><svg height="50" viewBox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 0v50h50v-50zm8.65384615 31.8413187 6.00582415-9.8893407-4.5034066-7.9346154h7.6226374l4.5057143 7.9346154-6.0062638 9.8893407zm28.41967035 10.4663736h-8.0884616l-7.7408791-13.5706593 12.0154945-21.04472531h8.0864835l-12.0153846 21.04472531z" fill="{{ $color }}" class="will-change" fill-rule="nonzero"/><path d="m0 0h50v50h-50z"/></g></svg></a></li>{{ end }}
        {{ if $switches.mail }}<li><a href="mailto:?subject={{ .Title }}&body={{ $textBody }}" target="_blank"><svg height="50" viewBox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m46.149789 6h-42.29957803c-2.12025316 0-3.85021097 1.72995781-3.85021097 3.85021097v29.78902953c0 2.1202532 1.72995781 3.850211 3.85021097 3.850211h42.29957803c2.1202532 0 3.850211-1.7299578 3.850211-3.850211v-29.78902953c0-2.12025316-1.7299578-3.85021097-3.850211-3.85021097zm-.5590717 2.84810127-20.3270042 17.38396623-20.32700424-17.38396623zm1.5611814 30.79113923c0 .5485232-.4535865 1.0021097-1.0021097 1.0021097h-42.29957803c-.54852321 0-1.0021097-.4535865-1.0021097-1.0021097v-28.8291139l21.48734173 18.3755274c.0105486.0105485.0316456.0210971.0421941.0316456.0105486.0105485.0316456.021097.0421941.0316455.0316456.0210971.0527426.0421941.0843882.0527427.0105485.0105485.0210971.0105485.0316456.021097.0421941.0210971.0843882.0421941.1265823.0632911.0105485 0 .021097.0105486.0316455.0105486.0316456.0105485.0632912.0316455.1054853.0421941.0105485 0 .0316455.0105485.0421941.0105485.0316455.0105485.0632911.021097.0949367.021097.0105485 0 .0316455.0105486.0421941.0105486.0316455.0105485.0738396.0105485.1054852.021097h.0316456c.042194 0 .0949367.0105485.1371308.0105485.042194 0 .0949367 0 .1371308-.0105485h.0316455c.0316456 0 .0738397-.0105485.1054853-.021097.0105485 0 .0316455-.0105486.0421941-.0105486.0316455-.0105485.0632911-.021097.0949367-.021097.0105485 0 .0316455-.0105485.0421941-.0105485.0316455-.0105486.0632911-.0210971.1054852-.0421941.0105485 0 .021097-.0105486.0316456-.0105486.042194-.021097.0843881-.042194.1265822-.0632911.0105486-.0105485.0210971-.0105485.0316456-.021097.0316456-.0210971.0527426-.0316456.0843882-.0527427.0105485-.0105485.0316456-.021097.0421941-.0316455s.0316456-.0210971.0421941-.0316456l20.9810126-17.9219409z" fill="{{ $color }}" class="will-change" fill-rule="nonzero"/><path d="m0 0h50v50h-50z"/></g></svg></a></li>{{ end }}
    </ul>
</nav>
<style>
.sharebuttons, .sharebuttons ul {display: flex; margin: 0.25rem 0; align-items: center;}
.sharebuttons span {color: {{ $textcolor }};}
.sharebuttons ul li {list-style: none; margin: 0;}
.sharebuttons ul li a {margin: 0 0.5rem; display: block;}
.sharebuttons ul li:first-child a {margin: 0 0.2rem 0 0.5rem;}
.sharebuttons ul li a svg {width: auto; height: 1.1rem; display: block;}
.will-change {transition: 250ms;} 
nav.sharebuttons li > a:hover .will-change { fill: {{ $hoverColor }} }
</style>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant