I want to create an edit button on header

[David7ce]

I am using Digital Garden template to create a static site using Obsidian. I have hosted and the deployed the site on GitHub. And i want to create a button to edit the site as vault similar to Microsoft Docs, where docs are hosted on GitHub and can be edited.

One method is to manually add an HTML button to each note that links to note editing on GitHub.

<a sx="[object Object]" data-component="IconButton" type="button" aria-label="Edit file" data-testid="edit-button" data-size="small" data-no-visuals="true" href="https://github.com/wiki/wiki-vault/blob/main/user/{{article.md}}" data-hotkey="e,Shift+E">Editar<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path></svg></a>

But I want to create something more simple using a script that do this for all the notes. I'm thinking of a header slot inside the template in src/site/_includes/components/user/notes/header/edit-note.njk that reder an edit button that redirects each note to the editing page on https://github.com/wiki/wiki-vault/blob/main/.

Can someone help me to write the script in nunjucks.

Im trying locallty this code generated by chatGPT, but does not work.

{# File: src/site/_includes/components/user/notes/header/edit-note.njk #}

{%- for note in notes -%}
    {# Extracting the full relative path by concatenating folder structure with note name #}
    {% set fullPath = note.folder | default('') ~ '/' ~ note.name %}
    <a sx="[object Object]" data-component="IconButton" type="button" aria-label="Edit file" data-testid="edit-button" data-size="small" data-no-visuals="true" href="https://github.com/wiki/wiki-vault/blob/main/user/{{ fullPath }}" data-hotkey="e,Shift+E">Editar<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path></svg></a>
{%- endfor -%}

[David7ce]

I found a solution testing the template locally with topobon scripts and chatGPT.

I write this HTML button and extract the relative path with JS inside components/user/notes/footer/edit.njk

<div class="content">
    <button id="editButton" style="margin-top: 10px;">Edit on GitHub</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var path = window.location.pathname;
    var editButton = document.getElementById('editButton');
    editButton.setAttribute('onclick', "window.location.href='https://www.github.com/user/wiki-vault/blob/main/" + path + "'");
});
</script>