fix: move style into styles.css

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "code-link",
 	"name": "Code Link",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"minAppVersion": "0.15.0",
 	"description": "Link to code files in your notes",
 	"author": "observerw",

src/component/embed.ts

@@ -14,11 +14,13 @@ export class CodeLinkEmbedPreview extends Component {
 	constructor(plugin: CodeLinkPlugin, sourcePath: string) {
 		super(plugin, sourcePath);
 
-		this._codeEl = document.createElement("div");
+		this._codeEl = this._containerEl.createEl("div", {
+			cls: "code-link-embed-preview-code",
+		});
 
-		this._textEl = document.createElement("div");
-		this._textEl.style.fontSize = "0.8em";
-		this._textEl.style.color = "gray";
+		this._textEl = this._containerEl.createEl("div", {
+			cls: "code-link-embed-preview-text",
+		});
 	}
 
 	private _highLightLines(node: TagTreeNode): { start: number; end: number } {
@@ -31,7 +33,7 @@ export class CodeLinkEmbedPreview extends Component {
 	}
 
 	async setCode(file: TFile, node?: TagTreeNode | null): Promise<void> {
-		this._codeEl.innerHTML = "";
+		this._codeEl.replaceChildren();
 
 		const langName = getLang(file.path);
 		const text = node
@@ -42,7 +44,7 @@ export class CodeLinkEmbedPreview extends Component {
 	}
 
 	setText(file: TFile, targetNode?: TagTreeNode | null) {
-		this._textEl.innerHTML = "";
+		this._textEl.replaceChildren();
 
 		if (!this._plugin.settings.showPathInEmbed) {
 			return;
@@ -76,8 +78,7 @@ export class CodeLinkEmbedPreview extends Component {
 			const linkEl = linkEls[i] as HTMLAnchorElement;
 
 			if (this._activeNode?.id === node.id) {
-				linkEl.style.fontStyle = "italic";
-				linkEl.style.fontWeight = "bold";
+				linkEl.addClass("code-link-embed-preview-tag");
 			}
 
 			linkEl.removeAttribute("href");
@@ -101,14 +102,14 @@ export class CodeLinkEmbedPreview extends Component {
 		}
 	}
 
-	render(file: TFile, node?: TagTreeNode | null): HTMLElement[] {
+	render(file: TFile, node?: TagTreeNode | null): HTMLElement {
 		if (node) {
 			this._activeNode = node;
 		}
 
 		this.setCode(file, node);
 		this.setText(file, node);
 
-		return [this._codeEl, this._textEl];
+		return this._containerEl;
 	}
 }

src/component/index.ts

@@ -2,10 +2,14 @@ import { MarkdownRenderer } from "obsidian";
 import CodeLinkPlugin from "src/main";
 
 export abstract class Component {
+	protected _containerEl: HTMLElement;
+
 	constructor(
 		protected _plugin: CodeLinkPlugin,
 		protected _sourcePath: string
-	) {}
+	) {
+		this._containerEl = document.createEl("div");
+	}
 
 	markdown(el: HTMLElement, markdownText: string): void {
 		MarkdownRenderer.render(
@@ -17,5 +21,5 @@ export abstract class Component {
 		);
 	}
 
-	abstract render(...args: unknown[]): HTMLElement[];
+	abstract render(...args: unknown[]): HTMLElement;
 }

src/lang/loader.ts

@@ -7,6 +7,7 @@ import { LangScmMap, SupportedLang, SupportedLangs } from "./data";
 import fs from "fs/promises";
 import os from "os";
 import path from "path";
+import { requestUrl } from "obsidian";
 
 type Paths = {
 	relPath: string;
@@ -23,7 +24,7 @@ abstract class Loader<T> {
 	protected get _relBasePath(): string {
 		const configDir = this._plugin.app.vault.configDir;
 		const pluginId = this._plugin.manifest.id;
-		const relPath = `${configDir}/plugins/${pluginId}`;
+		const relPath = `${configDir}/plugins/obsidian-${pluginId}`;
 
 		return relPath;
 	}
@@ -33,19 +34,18 @@ abstract class Loader<T> {
 	}
 
 	protected async _tarballUrl(pkg: string) {
-		const resp = await fetch(`https://registry.npmjs.org/${pkg}`);
+		const { json } = await requestUrl(`https://registry.npmjs.org/${pkg}`);
 		const {
 			versions,
 			"dist-tags": { latest },
-		} = (await resp.json()) as NpmPackageMetadata;
-		const tarball = versions[latest]!.dist.tarball;
-		return tarball;
+		} = json as NpmPackageMetadata;
+		return versions[latest]!.dist.tarball;
 	}
 
 	protected _pkgPaths(pkg: string): Paths {
 		return {
-			relPath: `${this._relBasePath}/${pkg}`,
-			absPath: `${this._basePath}/${pkg}`,
+			relPath: path.join(this._relBasePath, pkg),
+			absPath: path.join(this._basePath, pkg),
 		};
 	}
 
@@ -57,13 +57,15 @@ abstract class Loader<T> {
 	protected async _downloadPackage(pkg: string): Promise<void> {
 		const tarballUrl = await this._tarballUrl(pkg);
 
-		const resp = await fetch(tarballUrl);
-		const buffer = await resp.arrayBuffer();
+		const resp = await requestUrl(tarballUrl);
 
 		const tmpPath = await fs.mkdtemp(
 			path.join(os.tmpdir(), "tree-sitter-")
 		);
-		await fs.writeFile(`${tmpPath}/${pkg}.tgz`, Buffer.from(buffer));
+		await fs.writeFile(
+			`${tmpPath}/${pkg}.tgz`,
+			Buffer.from(resp.arrayBuffer)
+		);
 		await tar.extract({
 			file: `${tmpPath}/${pkg}.tgz`,
 			cwd: tmpPath,

src/processor/embed.ts

@@ -33,7 +33,7 @@ export class CodeLinkEmbedPreviewPostProcessor extends PostProcessor {
 			}
 
 			embed.replaceWith(
-				...new CodeLinkEmbedPreview(this._plugin, sourcePath).render(
+				new CodeLinkEmbedPreview(this._plugin, sourcePath).render(
 					file,
 					node
 				)

src/processor/hover.ts

@@ -32,8 +32,8 @@ export class CodeLinkHoverPreviewObserver {
 			return;
 		}
 
-		el.innerHTML = "";
-		el.style.maxHeight = "50vh";
+		el.replaceChildren();
+		el.addClass("code-link-hover-preview-popover");
 
 		const code = await this.hovering.content();
 
@@ -45,10 +45,6 @@ export class CodeLinkHoverPreviewObserver {
 			this._plugin
 		);
 
-		const preEl = el.querySelector("pre")!;
-		preEl.style.margin = "0";
-		preEl.style.overflow = "auto";
-
 		const btnEl = el.querySelector(".copy-code-button");
 		btnEl?.remove();
 	};

src/settings/index.ts

@@ -34,49 +34,6 @@ export const loadSettings = async (plugin: CodeLinkPlugin) => {
 	);
 };
 
-// export class CodeLinkPluginSettings {
-// 	public relImportDirPath: string = "projects";
-// 	public enableTagSearch: boolean = true;
-// 	public showPathInEmbed: boolean = true;
-// 	public importWithIgnore: boolean = true;
-
-// 	private constructor(
-// 		private _plugin: CodeLinkPlugin,
-// 		data: { [key: string]: unknown }
-// 	) {
-// 		for (const key of Object.keys(data ?? {})) {
-// 			Object.assign(this, { [key]: data[key] });
-// 		}
-// 	}
-
-// 	static async load(plugin: CodeLinkPlugin): Promise<CodeLinkPluginSettings> {
-// 		const saved_settings = await plugin.loadData();
-
-// 		return new Proxy(
-// 			new CodeLinkPluginSettings(plugin, saved_settings ?? {}),
-// 			{
-// 				// auto save on change
-// 				set: (target, prop, value) => {
-// 					if (!target || !(prop in target)) {
-// 						return false;
-// 					}
-// 					Object.assign(target, { [prop]: value });
-// 					target.save();
-// 					return true;
-// 				},
-// 			}
-// 		);
-// 	}
-
-// 	async save() {
-// 		console.log("saving");
-
-// 		await this._plugin.saveData({ a: 1 });
-
-// 		console.log("saved");
-// 	}
-// }
-
 export class CodeLinkPluginSettingTab extends PluginSettingTab {
 	constructor(private _plugin: CodeLinkPlugin) {
 		super(_plugin.app, _plugin);
@@ -91,11 +48,13 @@ export class CodeLinkPluginSettingTab extends PluginSettingTab {
 		if (!pkgExists) {
 			downloadBtnSetting.setDesc(
 				createFragment((el) => {
-					const p = el.createEl("p");
-					p.style.color = "red";
-					p.style.margin = "0";
-					p.textContent =
-						"⚠️ATTENTION: Please download the necessary components first to use the plugin";
+					const p = el.createEl("p", {
+						cls: "code-link-settings-prompt",
+						attr: {
+							status: "warning",
+						},
+						text: "⚠️ATTENTION: Please download the necessary components first to use the plugin",
+					});
 
 					el.append(p);
 				})
@@ -104,10 +63,13 @@ export class CodeLinkPluginSettingTab extends PluginSettingTab {
 			const supportedLangs = SupportedLangsArray.join(", ");
 			downloadBtnSetting.setDesc(
 				createFragment((el) => {
-					const p = el.createEl("p");
-					p.style.color = "green";
-					p.style.margin = "0";
-					p.textContent = `✅You have downloaded the necessary components, current supported languages are: ${supportedLangs}`;
+					const p = el.createEl("p", {
+						cls: "code-link-settings-prompt",
+						attr: {
+							status: "success",
+						},
+						text: `✅You have downloaded the necessary components, current supported languages are: ${supportedLangs}`,
+					});
 
 					el.append(p);
 				})

styles.css

@@ -6,3 +6,37 @@ available in the app when your plugin is enabled.
 If your plugin does not need CSS, delete this file.
 
 */
+
+/* .code-link-embed-preview-code {
+} */
+
+.code-link-embed-preview-text {
+	font-size: 0.8em;
+	color: gray;
+}
+
+.code-link-embed-preview-tag {
+	font-style: italic;
+	font-weight: bold;
+}
+
+.code-link-hover-preview-popover {
+	max-height: 50vh;
+}
+
+.code-link-hover-preview-popover > pre {
+	margin: 0;
+	overflow: auto;
+}
+
+.code-link-settings-prompt {
+	margin: 0;
+}
+
+.code-link-settings-prompt[status="success"] {
+	color: green;
+}
+
+.code-link-settings-prompt[status="warning"] {
+	color: red;
+}