[chore] Refactor HTML templates and CSS

[tsmethurst]

Description

If this is a code change, please include a summary of what you've coded, and link to the issue(s) it closes/implements.

If this is a documentation change, please briefly describe what you've changed and why.

Our css and HTML templating was becoming a bit crusty!

This PR does a big hefty refactor, and addresses the following:

• Indent HTML templates properly so that they're more readable when doing "view source".
• Break CSS into smaller files where appropriate, to make it a bit easier to see what's happening where (in my opinion anyway!).
• Break templates into smaller pieces and "include" them. Makes them a bit less intimidating to read, because god damn.
• Render all the HTML templates inside "page.tmpl", and provide a helper function in APIUtil to make this easy to use.
• Lazy load images where appropriate to speed up page rendering (emojis, media attachments).
• Try to prefer semantic HTML elements where possible.
• Accessibility updates: use "region" for each status in a thread, include thread titles w/ brief summary of thread contents, use aria labels for v quick summary of each status.
• Add prism dependency for code highlighting (fall back to no highlight when noscript).

Unrelated tweaks that are included in this anyway:

• Allow DEBUG flag to be passed in to goreleaser.

goblin.technology is running with this pull request included, so if you want to see what the HTML / css looks and feels like, go browse!

Here's an example of a single status with these changes:

<article
    class="status expanded"        
    id="01HHX13EKDEJ5VWD95N4NNS7SH"
    role="region"
    aria-label="@tobi, Dec 18, 00:17, language English, 1 reply, 14 favourites, 8 boosts"
>        
    <header class="status-header">    
        <address>
            <a
                href="https://goblin.technology/@tobi"
                rel="author"
                title="Open profile"
            >
                <img
                    class="avatar"
                    aria-hidden="true"
                    src="https://goblin.technology/fileserver/016T5Q3SQKBT337DAKVSKNXXW1/attachment/original/01NQKSYP0SC5MMWG3R16V3M948.gif"
                    alt="Avatar for tobi"
                    title="Avatar for tobi"
                >
                <div class="author-strap">
                    <span class="displayname text-cutoff">Kip Van Den Bos, shitty wizard</span>
                    <span class="sr-only">,</span>
                    <span class="username text-cutoff">@tobi</span>
                </div>
                <span class="sr-only">(open profile)</span>
            </a>
        </address>
    </header>
    <div class="status-body">
        <div class="text">        
            <div class="content" lang="en">
                <p>Things the fedi is good for imo:</p><ul><li>hanging out with your mates and chatting shit</li><li>sending missives out into the ether with no notion of where the currents will carry them</li><li>publishing an RSS feed / making short blog posts that show up on a web page</li><li>being a fucking gremlin</li><li>posting nudes on a followers-only account</li><li>following artists or whatever</li></ul><p>Stuff it's <strong>so bad for</strong> that it's like trying to hammer in a nail using a piece of cheese:</p><ul><li>everything else</li></ul><p>And that's actually fine!</p>
            </div>
        </div>
    </div>
    <aside class="status-info">    
        <dl class="status-stats">
            <div class="stats-grouping">
                <div class="stats-item published-at text-cutoff">
                    <dt class="sr-only">Published</dt>
                    <dd>
                        <time datetime="2023-12-17T23:17:11.405Z">Dec 18, 2023, 00:17</time>
                    </dd>
                </div>
                <div class="stats-grouping">
                    <div class="stats-item" title="Replies">
                        <dt>
                            <span class="sr-only">Replies</span>
                            <i class="fa fa-reply-all" aria-hidden="true"></i>
                        </dt>
                        <dd>1</dd>
                    </div>
                    <div class="stats-item" title="Faves">
                        <dt>
                            <span class="sr-only">Favourites</span>
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </dt>
                        <dd>14</dd>
                    </div>
                    <div class="stats-item" title="Boosts">
                        <dt>
                            <span class="sr-only">Reblogs</span>
                            <i class="fa fa-retweet" aria-hidden="true"></i>
                        </dt>
                        <dd>8</dd>
                    </div>
                </div>
            </div>
            <div class="stats-item language" title="English">
                <dt class="sr-only">Language</dt>
                <dd>
                    <span class="sr-only">English</span>
                    <span aria-hidden="true">en</span>
                </dd>
            </div>
        </dl>
    </aside>
    <a
        href="https://goblin.technology/@tobi/statuses/01HHX13EKDEJ5VWD95N4NNS7SH"
        class="status-link"
        data-nosnippet
        title="Open thread at this post"
    >
        Open thread at this post
    </a>
</article>

• closes [bug] [i18n] Consider number on pluralising the number of accounts on instance #2456
• closes [bug] og:description meta tag can truncate in the middle of HTML entities #2452
• closes [chore] Tidy up template indentation #2420
• closes [feature] Remove custom emoji from page's title #1241

Checklist

Please put an x inside each checkbox to indicate that you've read and followed it: [ ] -> [x]

If this is a documentation change, only the first checkbox must be filled (you can delete the others if you want).

• I/we have read the GoToSocial contribution guidelines.
• I/we have discussed the proposed changes already, either in an issue on the repository, or in the Matrix chat.
• I/we have performed a self-review of added code.
• I/we have written code that is legible and maintainable by others.
• I/we have commented the added code, particularly in hard-to-understand areas.
• I/we have made any necessary changes to documentation.
• I/we have added tests that cover new code.
• I/we have run tests and they pass locally with the changes.
• I/we have run go fmt ./... and golangci-lint run.

[daenney]

I haven't taken a look at the actual code yet, but this caught my eye in the cover:

Lazy load images where appropriate to speed up page rendering.

Though this can help, we need to make sure that for anything we're lazily loading in, height/width attributes are properly set ahead of time so that anything loading in doesn't cause the UI to reflow. That might already be the case, but something we should be mindful of because it's very jarring to suddenly have text jump away from you because an image loaded in and pushed content up/down for example.

[tsmethurst]

height/width attributes are properly set ahead of time so that anything loading in doesn't cause the UI to reflow

Yep yep! I think I've handled all these cases but I'll double check!

Edit: Missed one: https://github.com/superseriousbusiness/gotosocial/pull/2480/files#r1432995481

Edit edit: Fixed it!