Footer “edit me” link

[mbostock]

If a project is hosted on GitHub (or other hosting service), it’d be nice if we could automatically generate an “edit me” link in the footer.

[Fil]

I was imagining the page generator (parseMarkdown?) would have access to the path (and pass it probably in the context), so we could (or a theme could) add a “view source” component — which might point to a github repo or something else. Maybe in the page footer (#55).

[Fil]

related #739

[Fil]

Here's my take on this, in observablehq.config.js:

const SOURCE_REPO = "https://github.com/USER/PROJECT/blob/main/docs";

const VIEW_SOURCE = `
<style>
a.view-source {
  position: absolute;
  top: 0;
  right: 0;
  font: 700 18px var(--sans-serif);
  text-decoration: none !important;
  padding: 0 4px;
}
a.view-source:not(:hover,:focus) {
  color: inherit;
}
</style>
<a class="view-source" target="_blank" aria-label="view source" title="view source" href="${SOURCE_REPO}">⚉</a>
<script type="module">
const a = document.querySelector(".view-source");
a.setAttribute("href", a.getAttribute("href") + (document.location.pathname.replace(/[/]$/, "/index")) + ".md?plain=1"
);
</script>
`;


export default {
  header: ${VIEW_SOURCE}
};

[jaanli]

Would be nice to support non-GitHub hosted (but still open source) websites!

[Fil]

I think we have enough possibilities now for a user to add their own links in header or footer. It could be nice to support passing these options as functions that would receive a bit of context (page name, page url)?