"Edit on GitHub" link for guides / docs pages

[thescientist13]

Summary

On the old website, we had an "Edit on GitHub" at the bottom of a number of pages, which when clicked would link to the file in the GitHub repo.

<script>
  window.onload = () => {
    const editButton = document.getElementById('github-edit-button');
    const path = window.location.pathname;
    const params = path.split('/').filter(param => param !== "");
    const filePath = params.length <= 1 ? `${params[0]}/index.md` : `${params.join("/")}.md`

    document.getElementsByTagName('app-shelf')[0].setAttribute('page', params[0]);
    editButton.href = `https://github.com/ProjectEvergreen/greenwood/tree/master/www/pages/${filePath}`
  }
</script>

Details

Basically we just need the same functionality here, maybe using --color-prism-bg for the background color though I think we can just make it a basic Light DOM component instead of having to rely on JavaScript.

<app-edit-on-github route="${globalThis.page.route}"></app-edit-on-github>

// src/components/edit-on-github/edit-on-github.js
import styles from './edit-on-github.module.css';

const REPO_PREFIX = 'https://github.com/ProjectEvergreen/www.greenwoodjs.dev/tree/main/www/pages/';

function convertRouteToSubLink(route) {
  // clean up leading forward slash
  return ...;
}

export default class EditOnGitHub extends HTMLElement {
  connectedCallback() {
    const route = this.getAttribute('route');
    const subLink = convertRouteToSubLink(route);

    this.innerHTML = `
      <div class="${styles.container}">
        <a title="Edit on GitHub" href="${REPO_PREFIX}${subLink}" target="_blank">Edit on GitHub</a>
      </div>
    `
  }
}

customElements.define('app-edit-on-github', EditOnGitHub);

---

We should also add a basic Storybook and test case to validate the static output.