Create a link to open up the pages in vscode (#358)

Create a link in the right hand side bar to open up the current page in
VSCode. If Runme is installed this will open it up as a notebook.

Here's how this work

* VSCode registers to handle URI "vscode://" so you can use a URI like
"vscode://file/some/file.md" to open that file in VScode.

So we customize the partial
[page-meta-links.html](https://github.com/google/docsy/blob/main/layouts/partials/page-meta-links.html).
This shows up in the right hand navigation bar and shows links to "edit
the page". We add a link to this to open in VSCode using a vscode URI.

A limitation of "vscode://file" URIs is that they only work with
absolute paths. So we need to know the BasePath where the repo is cloned
in order to have the correct path. This will be different for every
user. We can store this in localstorage. So we add some JS to get the
value from localstorage and adjust the links.

We also add a settings page to allow users to set BasePath

docs/README.md

@@ -2,7 +2,7 @@
 
 ## Hugo Version
 
-* The site currently seems to build with hugo v0.117.0
+* The site currently seems to build with hugo [v0.117.0](https://github.com/gohugoio/hugo/releases/tag/v0.117.0)
 * With v0.131 we get errors with the template
 * See https://github.com/jlewi/foyle/issues/227
 

docs/content/en/settings/_index.md

@@ -0,0 +1,37 @@
+---
+menu:
+  main:
+    weight: 50
+title: Settings
+# TODO(jeremy): Should I create a new layout for this page? Using the docs type we wind up with the Feedback form at the bottom of the page.
+# which is a bit weird
+type: docs
+---
+
+<div id="settings">
+    <h2>BasePath</h2>
+    If you set `BasePath` to the path where you have cloned the Foyle repository, then you will be able to click
+    on the link "Open In VSCode" to open the current page in VSCode.
+</div>
+<div>
+    <label for="basePath">Base Path:</label>
+    <input type="text" id="basePath" name="basePath" />
+    <button onclick="saveBasePath()">Save</button>
+</div>
+
+<script>
+    // Load the saved BasePath value when the page loads
+    document.addEventListener('DOMContentLoaded', function() {
+        const savedBasePath = localStorage.getItem('BasePath');
+        if (savedBasePath) {
+            document.getElementById('basePath').value = savedBasePath;
+        }
+    });
+
+    // Function to save the BasePath value to local storage
+    function saveBasePath() {
+        const basePath = document.getElementById('basePath').value;
+        localStorage.setItem('BasePath', basePath);
+        alert('BasePath saved: ' + basePath);
+    }
+</script>

docs/layouts/partials/page-meta-links.html

@@ -0,0 +1,76 @@
+{{/* cSpell:ignore querify subdir */ -}}
+{{/* Class names ending with `--KIND` are deprecated in favor of `__KIND`, but we're keeping them for a few releases after 0.9.0 */ -}}
+
+{{ if .File -}}
+{{ $path := strings.TrimPrefix (add hugo.WorkingDir "/") $.File.Filename -}}
+{{ $gh_repo := $.Param "github_repo" -}}
+{{ $gh_url := $.Param "github_url" -}}
+{{ $gh_subdir := $.Param "github_subdir" | default "" -}}
+{{ $gh_project_repo := $.Param "github_project_repo" -}}
+{{ $gh_branch := $.Param "github_branch" | default "main" -}}
+<div class="td-page-meta ms-2 pb-1 pt-2 mb-0">
+{{ if $gh_url -}}
+  {{ warnf "Warning: use of `github_url` is deprecated. For details, see https://www.docsy.dev/docs/adding-content/repository-links/#github_url-optional" -}}
+  <a href="{{ $gh_url }}" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>
+{{ else if $gh_repo -}}
+
+  {{/* Adjust $path based on path_base_for_github_subdir */ -}}
+  {{ $ghs_base := $.Param "path_base_for_github_subdir" -}}
+  {{ $ghs_rename := "" -}}
+  {{ if reflect.IsMap $ghs_base -}}
+    {{ $ghs_rename = $ghs_base.to -}}
+    {{ $ghs_base = $ghs_base.from -}}
+  {{ end -}}
+  {{ with $ghs_base -}}
+    {{ $path = replaceRE . $ghs_rename $path -}}
+  {{ end -}}
+
+  {{ $gh_repo_path := printf "%s/%s/%s" $gh_branch $gh_subdir $path -}}
+  {{ $gh_repo_path = replaceRE "//+" "/" $gh_repo_path -}}
+
+  {{ $vscodeURL := printf "%s/%s" $gh_subdir $path -}}
+  {{ $viewURL := printf "%s/tree/%s" $gh_repo $gh_repo_path -}}
+  {{ $editURL := printf "%s/edit/%s" $gh_repo $gh_repo_path -}}
+  {{ $issuesURL := printf "%s/issues/new?title=%s" $gh_repo (safeURL $.Title ) -}}
+  {{ $newPageStub := resources.Get "stubs/new-page-template.md" -}}
+  {{ $newPageQS := querify "value" $newPageStub.Content "filename" "change-me.md" | safeURL -}}
+  {{ $newPageURL := printf "%s/new/%s?%s" $gh_repo (path.Dir $gh_repo_path) $newPageQS -}}
+
+  <script>
+    function getVSCodeUrl() {
+        // Retrieve the BasePath variable from local storage
+        // This should be the directory where the repository is cloned
+        const basePath = localStorage.getItem("BasePath"); 
+        // ghSubdir and path get set to the path within the repository that the file is located.
+        // These are hugo variables that get evaluated at build time and passed into the template.
+        const ghSubdir = "{{ $gh_subdir }}";
+        const filePath = "{{ $path }}"
+        const vscodeUrl = `vscode://file/${basePath}/${ghSubdir}/${filePath}`; // Adjust according to your setup
+        return vscodeUrl;
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const vscodeLink = document.getElementById('open-in-vscode');
+        if (vscodeLink) {
+            vscodeLink.href = getVSCodeUrl();
+        }
+    });
+</script>
+
+  <!--N.B if we include vsocde://file/ inside vscodeUrl the URL doesn't end up being what we we want. I'm not sure why-->
+  <a id="open-in-vscode" href="vscode://file/{{ $vscodeURL }}" class="td-page-meta--view td-page-meta__view" rel="noopener"><i class="fa-solid fa-file-lines fa-fw"></i> Open In VSCode </a>
+  <a href="{{ $viewURL }}" class="td-page-meta--view td-page-meta__view" target="_blank" rel="noopener"><i class="fa-solid fa-file-lines fa-fw"></i> {{ T "post_view_this" }}</a>
+  <a href="{{ $editURL }}" class="td-page-meta--edit td-page-meta__edit" target="_blank" rel="noopener"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>
+  <a href="{{ $newPageURL }}" class="td-page-meta--child td-page-meta__child" target="_blank" rel="noopener"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_create_child_page" }}</a>
+  <a href="{{ $issuesURL }}" class="td-page-meta--issue td-page-meta__issue" target="_blank" rel="noopener"><i class="fa-solid fa-list-check fa-fw"></i> {{ T "post_create_issue" }}</a>
+  {{ with $gh_project_repo -}}
+    {{ $project_issueURL := printf "%s/issues/new" . -}}
+    <a href="{{ $project_issueURL }}" class="td-page-meta--project td-page-meta__project-issue" target="_blank" rel="noopener"><i class="fa-solid fa-list-check fa-fw"></i> {{ T "post_create_project_issue" }}</a>
+  {{ end -}}
+
+{{ end -}}
+{{ with .CurrentSection.AlternativeOutputFormats.Get "print" -}}
+  <a id="print" href="{{ .RelPermalink | safeURL }}"><i class="fa-solid fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
+{{ end }}
+</div>
+{{ end -}}