My blog
add openInEditor plugin
Base code is from https://github.com/pixeldesu/pixelde.su but adopted
for my use
+119
+14
_config.ts
+14
_config.ts
···
39
39
// Validation
40
40
import validateHTML from "./plugins/validateHTML.ts";
41
41
42
+
// Open in Editor
43
+
import openInEditor from "./plugins/openInEditor.ts";
44
+
42
45
// Disabled Plugins:
43
46
// import nav from "lume/plugins/nav.ts";
44
47
// import og_images from "lume/plugins/og_images.ts";
···
162
165
// Minify HTML Output
163
166
site.use(minify_html({
164
167
options: {
168
+
do_not_minify_doctype: true,
169
+
keep_closing_tags: false,
165
170
keep_html_and_head_opening_tags: true,
166
171
keep_spaces_between_attributes: true,
172
+
ensure_spec_compliant_unquoted_attribute_values: true,
173
+
keep_comments: false,
167
174
},
168
175
}));
169
176
···
234
241
],
235
242
}),
236
243
);
244
+
245
+
// Open in Editor in Dev mode
246
+
site.data("production", Deno.env.get("PRODUCTION"));
247
+
if (Deno.env.get("PRODUCTION") == "false") {
248
+
site.use(openInEditor());
249
+
site.add("static/scripts/open-in-editor.js");
250
+
}
237
251
238
252
// Get current commit as a version number
239
253
// Taken from https://github.com/pixeldesu/pixelde.su/blob/main/_config.ts
+75
plugins/openInEditor.ts
+75
plugins/openInEditor.ts
···
1
+
// deno-lint-ignore-file no-explicit-any
2
+
// ^- NOTE: No idea for the typing of markdown-it plugin context, so we disable this check
3
+
// Taken from https://github.com/pixeldesu/pixelde.su/blob/main/plugins/markdown-it/vscode.ts and edited for my use
4
+
5
+
import "lume/types.ts";
6
+
7
+
// Cache object for frontmatter line counts so we only reload files once
8
+
const FRONTMATTER_LINE_CACHE: Record<string, number> = {};
9
+
10
+
function markdownItOpenInEditor(md: any) {
11
+
// Override the default paragraph renderer
12
+
const defaultRender = md.renderer.rules.paragraph_open ||
13
+
function (
14
+
tokens: Record<number, any>,
15
+
idx: number,
16
+
options: any,
17
+
_env: any,
18
+
self: any,
19
+
) {
20
+
return self.renderToken(tokens, idx, options);
21
+
};
22
+
23
+
md.renderer.rules.paragraph_open = function (
24
+
tokens: Record<number, any>,
25
+
idx: number,
26
+
options: any,
27
+
env: any,
28
+
self: any,
29
+
) {
30
+
const token = tokens[idx];
31
+
const filePath = env.data.page.src.entry.src || "";
32
+
33
+
// FIXME: This is extremely ugly, having to reload the file to get the full context to
34
+
// calculate the line number offset for the frontmatter. For some reason this is
35
+
// pretty fast however, so I'll let it slide for now.
36
+
if (!FRONTMATTER_LINE_CACHE[filePath]) {
37
+
FRONTMATTER_LINE_CACHE[filePath] = countFrontMatterLines(
38
+
Deno.readTextFileSync(filePath),
39
+
);
40
+
}
41
+
const lineNumber = FRONTMATTER_LINE_CACHE[filePath] +
42
+
(token.map ? token.map[0] : 1);
43
+
44
+
// Create a wrapper element with context to open the file in VS Code
45
+
const clickableElementStart = `<div data-editor-file="${filePath}:${lineNumber}">`;
46
+
47
+
return clickableElementStart +
48
+
defaultRender(tokens, idx, options, env, self);
49
+
};
50
+
51
+
md.renderer.rules.paragraph_close = function (
52
+
tokens: Record<number, any>,
53
+
idx: number,
54
+
options: any,
55
+
_env: any,
56
+
self: any,
57
+
) {
58
+
return self.renderToken(tokens, idx, options) + "</div>";
59
+
};
60
+
}
61
+
62
+
function countFrontMatterLines(content: string) {
63
+
const frontMatterPattern = /^---\s*\n([\s\S]*?)\n---\s*\n/;
64
+
const match = content.match(frontMatterPattern);
65
+
if (match) {
66
+
return match[0].split("\n").length;
67
+
}
68
+
return 0;
69
+
}
70
+
71
+
export default function () {
72
+
return function (site: Lume.Site) {
73
+
site.hooks.addMarkdownItPlugin(markdownItOpenInEditor);
74
+
};
75
+
}
+3
src/_components/head.vto
+3
src/_components/head.vto
+11
src/static/scripts/open-in-editor.js
+11
src/static/scripts/open-in-editor.js
···
1
+
// Taken from https://github.com/pixeldesu/pixelde.su/blob/main/src/assets/js/modules/vscode.js
2
+
// Adopted by dish
3
+
const editorTargets = document.querySelectorAll("[data-editor-file]");
4
+
editorTargets.forEach((target) => {
5
+
target.addEventListener("click", (event) => {
6
+
globalThis.open(
7
+
`zed://file/${event.currentTarget.dataset.editorFile}`,
8
+
"_self",
9
+
);
10
+
});
11
+
});
+14
src/static/styles.css
+14
src/static/styles.css
···
107
107
--color-crust: var(--ctp-crust);
108
108
}
109
109
110
+
@layer components {
111
+
[data-editor-file] {
112
+
@apply transition-all rounded-md;
113
+
}
114
+
[data-editor-file]:hover {
115
+
@apply transition-all outline-blue outline-2 outline-offset-4
116
+
dark:bg-blue/10 bg-blue/10 pl-1;
117
+
}
118
+
}
119
+
110
120
@utility h-entry {
111
121
a {
112
122
@apply text-blue underline;
···
160
170
161
171
.callout-content {
162
172
@apply overflow-x-auto pl-2;
173
+
174
+
[data-editor-file]:hover {
175
+
@apply relative top-2 mr-2;
176
+
}
163
177
}
164
178
&[data-callout="todo"],
165
179
&[data-callout="info"],