Handlebars Context Objects

I gave up, I just did this in javascript, code if anyone else needs it:

<div class="social-share">
    <ul class="sharing-options">
        <li>
            <a class="social-share-linkedin social-link" href="https://www.linkedin.com/sharing/share-offsite/?url=page.url" target="_blank">
                <img alt="Share to LinkedIn" src="{{assets.social-share-linkedin.url}}" />
            </a>
        </li>
        <li>
            <a class="social-share-facebook social-link" href="https://www.facebook.com/share.php?u=page.url&t=page-name" target="_blank">
                <img alt="Share to Facebook" src="{{assets.social-share-facebook.url}}" />
            </a>
        </li>
        <li>
            <a class="social-share-x social-link" href="https://twitter.com/share?text=page-name&url=page.url" target="_blank">
                <img alt="Share to X" src="{{assets.social-share-x.url}}" />
            </a>
        </li>
        <li>
            <a class="social-share-reddit social-link" href="https://www.reddit.com/submit?url=page.url&title=page-name" target="_blank">
                <img alt="Share to Reddit" src="{{assets.social-share-reddit.url}}" />
            </a>
        </li>
        <li>
            <a class="social-share-email social-link" href="mailto:?body=page.url" target="_blank">
                <img alt="Share to Email" src="{{assets.social-share-email.url}}" />
            </a>
        </li>
        {{#if page.context.board}}
            <li class="social-share-rss" id="RSS">
                <a class="social-share-rss" href="/t5/s/gxcuf89792/rss/board?board.id={{page.context.board.id}}" target="_blank">
                    <img alt="Subscribe to RSS" src="{{assets.rss.url}}" />
                </a>
            </li>
        {{else if page.context.category}}
            <li class="social-share-rss" id="RSS">
                <a class="social-share-rss" href="/t5/s/gxcuf89792/rss/Category?category.id={{page.context.category.id}}" target="_blank">
                    <img alt="Subscribe to RSS" src="{{assets.rss.url}}" />
                </a>
            </li>
        {{else}}
        <li class="social-share-rss" id="RSS">
                <a class="social-share-rss" href="/t5/s/gxcuf89792/rss/Community" target="_blank">
                    <img alt="Subscribe to RSS" src="{{assets.rss.url}}" />
                </a>
            </li>
        {{/if}}
        </ul>
    </ul> 
    <script>
        var currentURL = window.location.href;
        var strippedURL = currentURL.split('?')[0];
        var socialLinks =  document.querySelectorAll('.social-link');
        var currentTitle = document.title;
        socialLinks.forEach(function(link) {
            var currentHref = link.getAttribute('href');
            var newHref = currentHref.replace('page.url',encodeURIComponent(strippedURL)).replace('page-name', encodeURIComponent(currentTitle));
            link.setAttribute('href',newHref);
        });

    </script>

Please note, there is no comments in this code because we get linting errors when you comment inline JS.

So high level explanation of this code:

The handlebars component generates a Social Sharing widget for Linkedin, Facebook, Twitter (x), Reddit, email and access to the old RSS feeds from classic (this last part is a workaround as aurora doesn't currently have native rss).

The Javascript takes the current page url (window.location.href) splits off any parameters then finds all elements in the html with the class social-link, iterates through them and does a find and replace on page.url for the url of the current page. It then does the same but for document. Title.

A better solution for this would be if their was a {{page.context.view_href}} and {{page.context.title} which would reduce the risk of user manipulated urls