Skip to content

Commit 4c7f07f

Browse files
jlewijlewi
authored
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
1 parent d782732 commit 4c7f07f

File tree

3 files changed

+114
-1
lines changed

3 files changed

+114
-1
lines changed

‎docs/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Hugo Version
44

5-
* The site currently seems to build with hugo v0.117.0
5+
* The site currently seems to build with hugo [v0.117.0](https://github.com/gohugoio/hugo/releases/tag/v0.117.0)
66
* With v0.131 we get errors with the template
77
* See https://github.com/jlewi/foyle/issues/227
88

‎docs/content/en/settings/_index.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
menu:
3+
main:
4+
weight: 50
5+
title: Settings
6+
# 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.
7+
# which is a bit weird
8+
type: docs
9+
---
10+
11+
<div id="settings">
12+
<h2>BasePath</h2>
13+
If you set `BasePath` to the path where you have cloned the Foyle repository, then you will be able to click
14+
on the link "Open In VSCode" to open the current page in VSCode.
15+
</div>
16+
<div>
17+
<label for="basePath">Base Path:</label>
18+
<input type="text" id="basePath" name="basePath" />
19+
<button onclick="saveBasePath()">Save</button>
20+
</div>
21+
22+
<script>
23+
// Load the saved BasePath value when the page loads
24+
document.addEventListener('DOMContentLoaded', function() {
25+
const savedBasePath = localStorage.getItem('BasePath');
26+
if (savedBasePath) {
27+
document.getElementById('basePath').value = savedBasePath;
28+
}
29+
});
30+
31+
// Function to save the BasePath value to local storage
32+
function saveBasePath() {
33+
const basePath = document.getElementById('basePath').value;
34+
localStorage.setItem('BasePath', basePath);
35+
alert('BasePath saved: ' + basePath);
36+
}
37+
</script>

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{{/* cSpell:ignore querify subdir */ -}}
2+
{{/* Class names ending with `--KIND` are deprecated in favor of `__KIND`, but we're keeping them for a few releases after 0.9.0 */ -}}
3+
4+
{{ if .File -}}
5+
{{ $path := strings.TrimPrefix (add hugo.WorkingDir "/") $.File.Filename -}}
6+
{{ $gh_repo := $.Param "github_repo" -}}
7+
{{ $gh_url := $.Param "github_url" -}}
8+
{{ $gh_subdir := $.Param "github_subdir" | default "" -}}
9+
{{ $gh_project_repo := $.Param "github_project_repo" -}}
10+
{{ $gh_branch := $.Param "github_branch" | default "main" -}}
11+
<div class="td-page-meta ms-2 pb-1 pt-2 mb-0">
12+
{{ if $gh_url -}}
13+
{{ warnf "Warning: use of `github_url` is deprecated. For details, see https://www.docsy.dev/docs/adding-content/repository-links/#github_url-optional" -}}
14+
<a href="{{ $gh_url }}" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>
15+
{{ else if $gh_repo -}}
16+
17+
{{/* Adjust $path based on path_base_for_github_subdir */ -}}
18+
{{ $ghs_base := $.Param "path_base_for_github_subdir" -}}
19+
{{ $ghs_rename := "" -}}
20+
{{ if reflect.IsMap $ghs_base -}}
21+
{{ $ghs_rename = $ghs_base.to -}}
22+
{{ $ghs_base = $ghs_base.from -}}
23+
{{ end -}}
24+
{{ with $ghs_base -}}
25+
{{ $path = replaceRE . $ghs_rename $path -}}
26+
{{ end -}}
27+
28+
{{ $gh_repo_path := printf "%s/%s/%s" $gh_branch $gh_subdir $path -}}
29+
{{ $gh_repo_path = replaceRE "//+" "/" $gh_repo_path -}}
30+
31+
{{ $vscodeURL := printf "%s/%s" $gh_subdir $path -}}
32+
{{ $viewURL := printf "%s/tree/%s" $gh_repo $gh_repo_path -}}
33+
{{ $editURL := printf "%s/edit/%s" $gh_repo $gh_repo_path -}}
34+
{{ $issuesURL := printf "%s/issues/new?title=%s" $gh_repo (safeURL $.Title ) -}}
35+
{{ $newPageStub := resources.Get "stubs/new-page-template.md" -}}
36+
{{ $newPageQS := querify "value" $newPageStub.Content "filename" "change-me.md" | safeURL -}}
37+
{{ $newPageURL := printf "%s/new/%s?%s" $gh_repo (path.Dir $gh_repo_path) $newPageQS -}}
38+
39+
<script>
40+
function getVSCodeUrl() {
41+
// Retrieve the BasePath variable from local storage
42+
// This should be the directory where the repository is cloned
43+
const basePath = localStorage.getItem("BasePath");
44+
// ghSubdir and path get set to the path within the repository that the file is located.
45+
// These are hugo variables that get evaluated at build time and passed into the template.
46+
const ghSubdir = "{{ $gh_subdir }}";
47+
const filePath = "{{ $path }}"
48+
const vscodeUrl = `vscode://file/${basePath}/${ghSubdir}/${filePath}`; // Adjust according to your setup
49+
return vscodeUrl;
50+
}
51+
52+
document.addEventListener('DOMContentLoaded', function() {
53+
const vscodeLink = document.getElementById('open-in-vscode');
54+
if (vscodeLink) {
55+
vscodeLink.href = getVSCodeUrl();
56+
}
57+
});
58+
</script>
59+
60+
<!--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-->
61+
<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>
62+
<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>
63+
<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>
64+
<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>
65+
<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>
66+
{{ with $gh_project_repo -}}
67+
{{ $project_issueURL := printf "%s/issues/new" . -}}
68+
<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>
69+
{{ end -}}
70+
71+
{{ end -}}
72+
{{ with .CurrentSection.AlternativeOutputFormats.Get "print" -}}
73+
<a id="print" href="{{ .RelPermalink | safeURL }}"><i class="fa-solid fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
74+
{{ end }}
75+
</div>
76+
{{ end -}}

0 commit comments

Comments
 (0)