From 68a2962ffc9206d67d4139ac485d117da5b521a4 Mon Sep 17 00:00:00 2001 From: observer Date: Sun, 30 Jun 2024 01:14:20 +0800 Subject: [PATCH] fix: move style into styles.css --- manifest.json | 2 +- src/component/embed.ts | 21 +++++++------- src/component/index.ts | 8 +++-- src/lang/loader.ts | 22 +++++++------- src/processor/embed.ts | 2 +- src/processor/hover.ts | 8 ++--- src/settings/index.ts | 66 +++++++++--------------------------------- styles.css | 34 ++++++++++++++++++++++ 8 files changed, 81 insertions(+), 82 deletions(-) diff --git a/manifest.json b/manifest.json index 93774bc..2739974 100644 --- a/manifest.json +++ b/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", diff --git a/src/component/embed.ts b/src/component/embed.ts index 7833bf2..110cf3e 100644 --- a/src/component/embed.ts +++ b/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 { - 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,7 +102,7 @@ export class CodeLinkEmbedPreview extends Component { } } - render(file: TFile, node?: TagTreeNode | null): HTMLElement[] { + render(file: TFile, node?: TagTreeNode | null): HTMLElement { if (node) { this._activeNode = node; } @@ -109,6 +110,6 @@ export class CodeLinkEmbedPreview extends Component { this.setCode(file, node); this.setText(file, node); - return [this._codeEl, this._textEl]; + return this._containerEl; } } diff --git a/src/component/index.ts b/src/component/index.ts index 6d115b2..791ce61 100644 --- a/src/component/index.ts +++ b/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; } diff --git a/src/lang/loader.ts b/src/lang/loader.ts index 69de968..8d2250a 100644 --- a/src/lang/loader.ts +++ b/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 { 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 { } 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 { protected async _downloadPackage(pkg: string): Promise { 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, diff --git a/src/processor/embed.ts b/src/processor/embed.ts index 7357ead..610df1c 100644 --- a/src/processor/embed.ts +++ b/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 ) diff --git a/src/processor/hover.ts b/src/processor/hover.ts index 6e59654..2f38641 100644 --- a/src/processor/hover.ts +++ b/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(); }; diff --git a/src/settings/index.ts b/src/settings/index.ts index ce78372..972b13d 100644 --- a/src/settings/index.ts +++ b/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 { -// 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); }) diff --git a/styles.css b/styles.css index 71cc60f..10c7d9e 100644 --- a/styles.css +++ b/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; +}