i18n

README.md

@@ -34,3 +34,11 @@ This plugin is in the progress of plugin community release.
 
 ## TODO
 - [ ] Support Regex
+
+## Support
+
+If you find this plugin useful and would like to support its development, you can sponsor me via [Buy Me a Coffee ☕️](https://www.buymeacoffee.com/benature), WeChat, Alipay or [AiFaDian](https://afdian.net/a/Benature-K). Any amount is welcome, thank you!
+
+<p align="center">
+<img src="https://s2.loli.net/2024/01/30/jQ9fTSyBxvXRoOM.png" width="500px">
+</p>

main.ts

@@ -1,4 +1,5 @@
 import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, ButtonComponent, Setting, debounce } from 'obsidian';
+import { Locals } from "./src/i18n/i18n";
 
 export interface IconAttrSetting {
 	entry: string;
@@ -10,41 +11,19 @@ interface MetadataIconSettings {
 }
 
 const DEFAULT_SETTINGS: MetadataIconSettings = {
-	IconAttrList: [{ entry: 'github', image: 'https://icones.pro/wp-content/uploads/2021/06/icone-github-violet.png' }],
+	IconAttrList: [],
 }
 
 export default class MetadataIcon extends Plugin {
 	settings: MetadataIconSettings;
-	styleTag: HTMLStyleElement;
-
-	debounceUpdateCSS = debounce(this.updateCSS, 1000, true);
-
 
 	async onload() {
 		await this.loadSettings();
 		this.addSettingTab(new MetadataHiderSettingTab(this.app, this));
-
-		this.updateCSS();
-	}
-
-	onunload() {
-	}
-
-	updateCSS() {
-		this.styleTag = document.createElement('style');
-		this.styleTag.id = 'css-metadata-icon';
-		console.log(document.getElementsByTagName('head'))
-		let headElement: HTMLElement = document.getElementsByTagName('head')[0];
-		const existingStyleTag = headElement.querySelector('#css-metadata-icon') as HTMLStyleElement | null;
-
-		if (existingStyleTag) {
-			existingStyleTag.parentNode?.removeChild(existingStyleTag);
-		}
-
-		headElement.appendChild(this.styleTag);
-		this.styleTag.innerText = genSnippetCSS(this);
+		await genSnippetCSS(this);
 	}
 
+	onunload() { }
 
 	async loadSettings() {
 		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
@@ -76,11 +55,16 @@ function genEntryCSS(s: IconAttrSetting): string {
 		`}`,
 		``,
 	]
-	return body.join(' ');
+	return body.join('\n');
 }
 
-function genSnippetCSS(plugin: MetadataIcon): string {
+async function genSnippetCSS(plugin: MetadataIcon) {
 	const content: string[] = [
+		"/* * WARNING: This file will be overwritten by plugin `Metadata Icon`.",
+		"   * DO NOT EDIT THIS FILE DIRECTLY!!!",
+		"   * Do not edit this file directly!!!",
+		"*/",
+		"",
 		".setting-item-description:has(.metadata-icon-preview) {",
 		"	display: flex;",
 		"	align-items: center;",
@@ -93,9 +77,21 @@ function genSnippetCSS(plugin: MetadataIcon): string {
 		content.push(genEntryCSS(iconSetting));
 	})
 
-	return content.join(' ');
-}
 
+	const vault = plugin.app.vault;
+	const ob_config_path = vault.configDir;
+	const snippets_path = ob_config_path + "/snippets";
+	const css_filename = "metadata-icon-auto-gen"
+	const path = `${snippets_path}/${css_filename}.css`;
+	if (!(await vault.adapter.exists(snippets_path))) { await vault.adapter.mkdir(snippets_path); }
+	if (await vault.adapter.exists(path)) { await vault.adapter.remove(path) }
+	await plugin.app.vault.create(path, content.join('\n'));
+	// Activate snippet
+	// @ts-ignore
+	const customCss = plugin.app.customCss;
+	customCss.enabledSnippets.add(css_filename);
+	customCss.requestLoadSnippets();
+}
 
 class MetadataHiderSettingTab extends PluginSettingTab {
 	plugin: MetadataIcon;
@@ -104,29 +100,23 @@ class MetadataHiderSettingTab extends PluginSettingTab {
 	constructor(app: App, plugin: MetadataIcon) {
 		super(app, plugin);
 		this.plugin = plugin;
+		this.debouncedGenerate = debounce(this.generateSnippet, 1000, true);
 	}
 
-	getLang(): string {
-		let lang = window.localStorage.getItem('language');
-		if (lang == null || ["en", "zh", "zh-TW"].indexOf(lang) == -1) { lang = "en"; }
-		return lang;
+	async generateSnippet() {
+		await genSnippetCSS(this.plugin);
 	}
 
-
 	display(): void {
 		const { containerEl } = this;
 
-		const lang = this.getLang();
+		const t = Locals.get();
 
 		containerEl.empty();
 
 		new Setting(containerEl)
-			.setName({ en: "Add custom entry icon", zh: "添加自定义图标", "zh-TW": "新增自定義圖示" }[lang] as string)
-			.setDesc({
-				"en": "Input entry name and icon url. The image will be automatically loaded on the left side. If there is no image shown on the left side, please check the image url or network connection.",
-				"zh": "输入文档属性名称和图标链接。图标将在左侧自动预览，如果左侧没有显示图片，请检查图片链接是否正确或网络连接。输入示例：「豆瓣，https://img1.doubanio.com/favicon.ico」",
-				"zh-TW": "輸入文件屬性名稱和圖示鏈接。圖示將在左側自動預覽，如果左側沒有顯示圖片，請檢查圖片鏈接是否正確或網絡連線。輸入範例：「facebook，https://www.facebook.com/favicon.ico」"
-			}[lang] as string)
+			.setName(t.settingAddIconName)
+			.setDesc(t.settingAddIconDesc)
 			.addButton((button: ButtonComponent) => {
 				button.setTooltip("Add new icon")
 					.setButtonText("+")
@@ -141,39 +131,39 @@ class MetadataHiderSettingTab extends PluginSettingTab {
 			})
 		this.plugin.settings.IconAttrList.forEach((iconSetting, index) => {
 			const s = new Setting(this.containerEl);
-			let span = s.descEl.createEl("span", { text: { en: "icon preview:", zh: "图标预览:", "zh-TW": "圖示預覽:" }[lang] as string });
+			let span = s.descEl.createEl("span", { text: t.settingAddIconDescElSpan });
 			span.setAttribute("style", `margin-right: 2px; `);
 			let img = s.descEl.createEl("img", { cls: "metadata-icon-preview" });
 			img.setAttribute("src", iconSetting.image);
 			img.setAttribute("width", `20px`);
 			img.setAttribute("style", `background-color: transparent;`);
 			s.addSearch((cb) => {
-				cb.setPlaceholder({ en: "entry name", zh: "文档属性名称", "zh-TW": "文件屬性名稱", }[lang] as string)
+				cb.setPlaceholder(t.settingAddIconPlaceholderEntry)
 					.setValue(iconSetting.entry)
 					.onChange(async (newValue) => {
 						this.plugin.settings.IconAttrList[index].entry = newValue;
 						await this.plugin.saveSettings();
-						this.plugin.debounceUpdateCSS();
+						this.debouncedGenerate();
 					});
 			})
 			s.addSearch((cb) => {
-				cb.setPlaceholder({ en: "image url", zh: "图标链接", "zh-TW": "圖示鏈接", }[lang] as string)
+				cb.setPlaceholder(t.settingAddIconPlaceholderImage)
 					.setValue(iconSetting.image)
 					.onChange(async (newValue) => {
 						img.setAttribute("src", newValue);
 						this.plugin.settings.IconAttrList[index].image = newValue;
 						await this.plugin.saveSettings();
-						this.plugin.debounceUpdateCSS();
+						this.debouncedGenerate();
 					});
 			});
 			s.addExtraButton((cb) => {
 				cb.setIcon("cross")
-					.setTooltip("Delete")
+					.setTooltip(t.settingRemoveIconTooltip)
 					.onClick(async () => {
 						this.plugin.settings.IconAttrList.splice(index, 1);
 						await this.plugin.saveSettings();
 						this.display();
-						this.plugin.debounceUpdateCSS();
+						this.debouncedGenerate();
 					});
 			});
 		});

manifest.json

@@ -1,11 +1,15 @@
 {
 	"id": "metadata-icon",
 	"name": "Metadata Icon",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"minAppVersion": "0.15.0",
 	"description": "Change metadata entry icon",
 	"author": "Benature",
 	"authorUrl": "https://github.com/Benature",
-	"fundingUrl": "https://www.buymeacoffee.com/benature",
+	"fundingUrl": {
+		"Buy Me a Coffee": "https://www.buymeacoffee.com/benature",
+		"爱发电": "https://afdian.net/a/Benature-K",
+		"微信/支付宝": "https://s2.loli.net/2024/01/30/jQ9fTSyBxvXRoOM.png"
+	},
 	"isDesktopOnly": false
-}
+}

src/i18n/en.ts

@@ -0,0 +1,11 @@
+import { LocalProperty } from "./types";
+
+export const EN: LocalProperty = {
+	settingAddIconName: "Add custom entry icon",
+	settingAddIconDesc: "Input entry name and icon url. The image will be automatically loaded on the left side. If there is no image shown on the left side, please check the image link.",
+	settingAddIconTooltip: "Add new icon",
+	settingAddIconDescElSpan: "icon preview:",
+	settingAddIconPlaceholderEntry: "entry name",
+	settingAddIconPlaceholderImage: "image link",
+	settingRemoveIconTooltip: "Delete",
+}

src/i18n/i18n.ts

@@ -0,0 +1,19 @@
+import { EN } from "./en";
+import { LocalProperty } from "./types";
+import { ZH } from "./zh";
+import { ZHtw } from "./zh-tw";
+
+export class Locals {
+
+	static get(): LocalProperty {
+		const lang = window.localStorage.getItem("language");
+		switch (lang) {
+			case "zh":
+				return ZH;
+			case "zh-tw":
+				return ZHtw;
+			default:
+				return EN;
+		}
+	}
+}

src/i18n/types.ts

@@ -0,0 +1,9 @@
+export interface LocalProperty {
+	settingAddIconName: string;
+	settingAddIconDesc: string;
+	settingAddIconTooltip: string;
+	settingAddIconDescElSpan: string;
+	settingAddIconPlaceholderEntry: string;
+	settingAddIconPlaceholderImage: string;
+	settingRemoveIconTooltip: string;
+}

src/i18n/zh-tw.ts

@@ -0,0 +1,11 @@
+import { LocalProperty } from "./types";
+
+export const ZHtw: LocalProperty = {
+	settingAddIconName: "新增自定義圖示",
+	settingAddIconDesc: "輸入文件屬性名稱和圖示鏈接。圖示將在左側自動預覽，如果左側沒有顯示圖片，請檢查圖片鏈接是否正確。",
+	settingAddIconTooltip: "新增圖示",
+	settingAddIconDescElSpan: "圖示預覽：",
+	settingAddIconPlaceholderEntry: "文件屬性名稱",
+	settingAddIconPlaceholderImage: "圖示鏈接",
+	settingRemoveIconTooltip: "删除",
+}

src/i18n/zh.ts

@@ -0,0 +1,11 @@
+import { LocalProperty } from "./types";
+
+export const ZH: LocalProperty = {
+	settingAddIconName: "添加自定义图标",
+	settingAddIconDesc: "输入文档属性名称和图标链接。图标将在左侧自动预览，如果左侧没有显示图片，请检查图片链接是否正确。",
+	settingAddIconTooltip: "添加新图标",
+	settingAddIconDescElSpan: "图标预览：",
+	settingAddIconPlaceholderEntry: "文档属性名称",
+	settingAddIconPlaceholderImage: "图标链接",
+	settingRemoveIconTooltip: "删除",
+}