Website-Redesign/layouts/partials/share_on_fediverse.html

{{ if site.Params.enableShareOnFediverse | default false }}
    <a style="margin-bottom: 24px; display: inline-block;" class="shareBtn" onclick="openFediInstanceDialog();">Share on the Fediverse</a>
    <div id="fediInstanceDialog">
        <div class="bg" onclick="closeFediInstanceDialog();"></div>
        <div class="dialog">
            <h2>Enter your instance's address</h2>
            <input id="fediInstanceInput" placeholder="Eg. mastodon.social" type="text" />
            <div class="buttons">
                <a class="shareBtn" onclick="closeFediInstanceDialog();">Cancel</a>
                <a class="shareBtn" onclick="shareOnFedi();">Share</a>
            </div>
        </div>
    </div>
    <script>
        var articleTitle = '{{ .Title }}';
        var articleLink = '{{ .Permalink }}';
        var fediInstanceDialog = document.getElementById('fediInstanceDialog');
        var fediInstanceInput = document.getElementById('fediInstanceInput');
        function openFediInstanceDialog() {
            fediInstanceDialog.classList.add('open');
        }
        function closeFediInstanceDialog() {
            fediInstanceDialog.classList.remove('open');
        }
        function fixURL(url) {
            if (url.substr(0, 8) == 'https://') return url;
            if (url.substr(0, 7) == 'http://') return url;
            return 'https://' + url;
        }
        function shareOnFedi() {
            let instance = fediInstanceInput.value.trim();
            if (!instance) {
                return;
            }
            instance = fixURL(instance);
            window.open(
                `${instance}/share?text=${articleTitle}%20${articleLink}`,
                '__blank'
            );
            closeFediInstanceDialog();
        }
    </script>
{{ end }}