Markdown header links for Jigsaw

app.css

// This the CSS for my site. Might not apply directly to yours.

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  position: relative;
}

.rich-text .anchor {
    position: absolute;
    top: 0.125em;
    left: -1.5rem;
    height: 0.75em;
    width: 0.75em;
}

.rich-text .anchor svg {
  fill: theme('colors.purple.500');
}

.rich-text .anchor:hover svg {
  fill: theme('colors.purple.700');
}

@screen dark {
    .rich-text .anchor svg {
        fill: theme('colors.purple.400');
    }
}

app.js

const addHeadingLinks = () => {
 document.querySelectorAll('.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6').forEach(addHeadingLink)   
}

const addHeadingLink = node => {
    node.innerHTML = `<a href="#${node.id}" aria-hidden="true" class="anchor"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>` + node.innerHTML
}

// Add it to your DOM ready listener. Probably looks something like...
document.addEventListener('DOMContentLoaded', addHeadingLinks)

bootstrap.php

<?php

use TightenCo\Jigsaw\Parsers\MarkdownParser;

/**
 * Put the Str and Arr utility classes in the root namespace so they are
 * available in views without the need to reference their FQN
 */
class Str extends Illuminate\Support\Str
{
    //
}

class Arr extends Illuminate\Support\Arr
{
    //
}

$events->afterBuild(App\Listeners\GenerateSitemap::class);

/**
 * Automatically generate an "id" attribute on markdown headings based off the 
 * slug representation of the heading tag content.
 */
$container->extend('markdownParser', function (MarkdownParser $parser): MarkdownParser {
    return tap($parser, function (MarkdownParser $parser): void {
        $parser->header_id_func = fn (string $heading): string => Str::slug($heading);
    });
});