Render special blockquotes on the backend

[timacdonald]

This PR moves the rendering of the pretty "highlight" blockquotes to the backend. Currently, there is a slight visible flicker and content shift for all blockquotes.

In addition to pushing the rendering to the backend, it also inlines the highlight images as inline SVGs. This reduces the requests needed to be made to render a page. The images are very small and we also use GZIP, so inlining them really has no impact on HTML load times.

Overall, this should also have a positive impact on load / interactive times.

Flicker example

Screen.Recording.2024-07-16.at.09.00.06.mov

How it works

Currently, we ship the raw blockquote content to the frontend:

<blockquote>
    <p>[!NOTE]<br />
    New to Laravel? Check out...</p>
</blockquote>

Once the DOM has loaded into the browser, we then manipulate the DOM and update the blockquotes to their fancy version.

<blockquote>
    <div class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg lg:flex lg:items-center callout">
        <div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 bg-purple-600 lg:mb-0">
            <img src="/img/callouts/lightbulb.min.svg" height="40" width="28" loading="lazy" class="opacity-75">
        </div>
        <p class="mb-0 lg:ml-6">
            New to Laravel? Check out ...
        </p>
    </div>
</blockquote>

This causes the flicker. Now we just deliver the fancy highlight in the HTML delivered to the browser.

[timacdonald]

This asset is no longer referenced.

[timacdonald]

I've inlined the extensions previously added in the extracted GithubFlavoredMarkdownExtension class.

[timacdonald]

The "laracasts" tag does not appear in the docs anymore. Only "video" does.