update

.todo

@@ -1,11 +1,4 @@
 For Next Release:
-	☐ Settings to Add
-		☐ Show external in codeblock header
-			☐ Conditionally show sections
-			☐ External codeblock colours
-		☐ Update frequency: "Never": false, "On Load": true
-		☐ Update settings converter to reflect
-		☐ Update settings tab to reflect
 	☐ Gitlab compatibility
 	☐ base64 encode and bundle font (check license) (@last)
 

src/ApplyStyling.ts

@@ -79,6 +79,9 @@ function getThemeColours (themeModeColours: CodeStylerThemeModeColours): string
 		"header-language-tag-background-colour": themeModeColours.header.languageTag.backgroundColour,
 		"header-language-tag-text-colour": themeModeColours.header.languageTag.textColour,
 		"header-separator-colour": themeModeColours.header.lineColour,
+		"header-external-reference-repository": themeModeColours.header.externalReference.displayRepositoryColour,
+		"header-external-reference-version": themeModeColours.header.externalReference.displayVersionColour,
+		"header-external-reference-timestamp": themeModeColours.header.externalReference.displayTimestampColour,
 		"active-codeblock-line-colour": themeModeColours.highlights.activeCodeblockLineColour,
 		"active-editor-line-colour": themeModeColours.highlights.activeEditorLineColour,
 		"default-highlight-colour": themeModeColours.highlights.defaultColour,

src/CodeblockDecorating.ts

@@ -19,10 +19,10 @@ export function createHeader(codeblockParameters: CodeblockParameters, themeSett
 				headerContainer.appendChild(createDiv({cls: "code-styler-header-language-tag", text: getLanguageTag(codeblockParameters.language)}));
 		}
 		headerContainer.appendChild(createTitleContainer(codeblockParameters, themeSettings, sourcePath, plugin));
-		if (true && codeblockParameters?.externalReference) //TODO (@mayurankv) Add settings toggle
+		if (codeblockParameters?.externalReference)
 			headerContainer.appendChild(createExternalReferenceContainer(codeblockParameters, sourcePath, plugin));
-		if (false) //TODO (@mayurankv) Add settings toggle
-			headerContainer.appendChild(createExecuteCodeContainer(codeblockParameters, themeSettings, plugin));
+		if (false) //TODO (@mayurankv) Add settings toggle once execute code compatibility improved
+			headerContainer.appendChild(createExecuteCodeContainer(codeblockParameters, plugin));
 	} else
 		headerContainer.classList.add("code-styler-header-container-hidden");
 	return headerContainer;
@@ -41,18 +41,24 @@ function createTitleContainer(codeblockParameters: CodeblockParameters, themeSet
 function createExternalReferenceContainer(codeblockParameters: CodeblockParameters, sourcePath: string, plugin: CodeStylerPlugin): HTMLElement {
 	//TODO (@mayurankv) Add theme settings to conditionally set sections
 	const externalReferenceContainer = createDiv({ cls: "code-styler-header-external-reference" });
-	const siteIcon = createDiv({ cls: "external-reference-repo-icon" });
-	siteIcon.innerHTML = SITE_ICONS?.[codeblockParameters?.externalReference?.external?.info?.site as string] ?? SITE_ICONS["generic"];
-	externalReferenceContainer.appendChild(siteIcon);
-	externalReferenceContainer.appendChild(createDiv({ cls: "external-reference-repo", text: codeblockParameters?.externalReference?.external?.info?.author + "/" + codeblockParameters?.externalReference?.external?.info?.repository }));
-	const refIcon = createDiv({ cls: "external-reference-ref-icon" });
-	refIcon.innerHTML = GIT_ICONS?.[codeblockParameters?.externalReference?.external?.info?.refInfo?.type as string] ?? GIT_ICONS["branch"];
-	externalReferenceContainer.appendChild(refIcon);
-	externalReferenceContainer.appendChild(createDiv({cls: "external-reference-ref", text: codeblockParameters?.externalReference?.external?.info?.refInfo?.ref as string}));
-	const stampIcon = createDiv({ cls: "external-reference-timestamp-icon" });
-	stampIcon.innerHTML = STAMP_ICON;
-	externalReferenceContainer.appendChild(stampIcon);
-	externalReferenceContainer.appendChild(createDiv({ cls: "external-reference-timestamp", text: codeblockParameters?.externalReference?.external?.info?.datetime as string }));
+	if (plugin.settings.currentTheme.settings.header.externalReference.displayRepository) {
+		const siteIcon = createDiv({ cls: "external-reference-repo-icon" });
+		siteIcon.innerHTML = SITE_ICONS?.[codeblockParameters?.externalReference?.external?.info?.site as string] ?? SITE_ICONS["generic"];
+		externalReferenceContainer.appendChild(siteIcon);
+		externalReferenceContainer.appendChild(createDiv({ cls: "external-reference-repo", text: codeblockParameters?.externalReference?.external?.info?.author + "/" + codeblockParameters?.externalReference?.external?.info?.repository }));
+	}
+	if (plugin.settings.currentTheme.settings.header.externalReference.displayVersion) {
+		const refIcon = createDiv({ cls: "external-reference-ref-icon" });
+		refIcon.innerHTML = GIT_ICONS?.[codeblockParameters?.externalReference?.external?.info?.refInfo?.type as string] ?? GIT_ICONS["branch"];
+		externalReferenceContainer.appendChild(refIcon);
+		externalReferenceContainer.appendChild(createDiv({cls: "external-reference-ref", text: codeblockParameters?.externalReference?.external?.info?.refInfo?.ref as string}));
+	}
+	if (plugin.settings.currentTheme.settings.header.externalReference.displayTimestamp) {
+		const stampIcon = createDiv({ cls: "external-reference-timestamp-icon" });
+		stampIcon.innerHTML = STAMP_ICON;
+		externalReferenceContainer.appendChild(stampIcon);
+		externalReferenceContainer.appendChild(createDiv({ cls: "external-reference-timestamp", text: codeblockParameters?.externalReference?.external?.info?.datetime as string }));
+	}
 	const updateIcon = createEl("button", { cls: "external-reference-update-icon"});
 	updateIcon.innerHTML = UPDATE_ICON;
 	updateIcon.title = "Update Reference";
@@ -67,13 +73,13 @@ function createExternalReferenceContainer(codeblockParameters: CodeblockParamete
 			return;
 
 		if (view?.getMode() === "preview") {
-			view?.previewMode.rerender(true);
 			codeblockElement.addClass("RERENDER-CODE-STYLER");
 			//@ts-expect-error Undocumented Obsidian API
 			for (const section of view.previewMode.renderer.sections.filter(s => (s.el as HTMLElement).querySelector("RERENDER-CODE-STYLER"))) {
 				section.rendered = false;
 				section.html = "";
 			}
+			view?.previewMode.rerender(true);
 		} else {
 			//@ts-expect-error Undocumented Obsidian API
 			const cmView = view?.sourceMode.cmEditor.cm;
@@ -87,8 +93,9 @@ function createExternalReferenceContainer(codeblockParameters: CodeblockParamete
 	externalReferenceContainer.appendChild(updateIcon);
 	return externalReferenceContainer;
 }
-function createExecuteCodeContainer(codeblockParameters: CodeblockParameters, themeSettings: CodeStylerThemeSettings, plugin: CodeStylerPlugin): HTMLElement {
-	const executeCodeContainer = createDiv({cls: "code-styler-header-execute-code"});
+function createExecuteCodeContainer(codeblockParameters: CodeblockParameters, plugin: CodeStylerPlugin): HTMLElement {
+	const executeCodeContainer = createDiv({ cls: "code-styler-header-execute-code" });
+	console.log("Developer Error: Section not finished", codeblockParameters, plugin);
 	//TODO (@mayurankv) Finish
 	return executeCodeContainer;
 }

src/Settings.ts

@@ -25,6 +25,11 @@ export interface CodeStylerThemeModeColours {
 			backgroundColour: Colour;
 			textColour: Colour;
 		},
+		externalReference: {
+			displayRepositoryColour: Colour;
+			displayVersionColour: Colour;
+			displayTimestampColour: Colour;
+		}
 		lineColour: Colour;
 	},
 	highlights: {
@@ -71,6 +76,11 @@ export interface CodeStylerThemeSettings {
 			display: Display;
 			displayColour: boolean;
 		},
+		externalReference: {
+			displayRepository: boolean;
+			displayVersion: boolean;
+			displayTimestamp: boolean;
+		}
 		fontSize: number;
 		foldPlaceholder: string;
 	},
@@ -115,6 +125,7 @@ export interface CodeStylerSettings {
 	exampleInlineCode: string;
 	decoratePrint: boolean;
 	excludedLanguages: string;
+	externalReferenceUpdateOnLoad: boolean;
 	processedCodeblocksWhitelist: string;
 	redirectLanguages: Record<string,{colour?: Colour, icon?: string}>;
 	version: string;
@@ -160,6 +171,11 @@ const THEME_DEFAULT_SETTINGS: CodeStylerThemeSettings = {
 			display: "none",
 			displayColour: true,
 		},
+		externalReference: {
+			displayRepository: true,
+			displayVersion: true,
+			displayTimestamp: true,
+		},
 		fontSize: 14,
 		foldPlaceholder: "",
 	},
@@ -204,6 +220,11 @@ export const THEME_FALLBACK_COLOURS: CodeStylerThemeModeColours = {
 			backgroundColour: "--code-background",
 			textColour: "--code-comment",
 		},
+		externalReference: {
+			displayRepositoryColour: "#00FFFF",
+			displayVersionColour: "#FF00FF",
+			displayTimestampColour: "#808080",
+		},
 		lineColour: "--color-base-30",
 	},
 	highlights: {
@@ -426,6 +447,11 @@ const SOLARIZED_THEME: CodeStylerTheme = {
 					backgroundColour: "#B8B5AA",
 					textColour: "#C25F30",
 				},
+				externalReference: {
+					displayRepositoryColour: "#941100",
+					displayVersionColour: "#ff9300",
+					displayTimestampColour: "#808080",
+				},
 				lineColour: "#EDD489",
 			},
 			highlights: {
@@ -464,6 +490,11 @@ const SOLARIZED_THEME: CodeStylerTheme = {
 					backgroundColour: "#008080",
 					textColour: "#000000",
 				},
+				externalReference: {
+					displayRepositoryColour: "#00FFFF",
+					displayVersionColour: "#9437ff",
+					displayTimestampColour: "#808080",
+				},
 				lineColour: "#46cced",
 			},
 			highlights: {
@@ -600,6 +631,7 @@ export const DEFAULT_SETTINGS: CodeStylerSettings = {
 	exampleInlineCode: EXAMPLE_INLINE_CODE,
 	decoratePrint: true,
 	excludedLanguages: EXCLUDED_LANGUAGES,
+	externalReferenceUpdateOnLoad: false,
 	processedCodeblocksWhitelist: WHITELIST_CODEBLOCKS,
 	redirectLanguages: {},
 	version: "1.1.4",
@@ -661,6 +693,15 @@ const settingsUpdaters: Record<string,(settings: CodeStylerSettings)=>CodeStyler
 	"1.1.2": settingsPreserve,
 	"1.1.3": settingsPreserve,
 	"1.1.4": settingsPreserve,
+	"1.1.5": (settings) => settingsVersionUpdate(settings,(theme)=>{
+		theme.settings.header.externalReference = structuredClone(THEME_DEFAULT_SETTINGS.header.externalReference);
+		theme.colours.light.header.externalReference = structuredClone(THEME_FALLBACK_COLOURS.header.externalReference);
+		theme.colours.dark.header.externalReference = structuredClone(THEME_FALLBACK_COLOURS.header.externalReference);
+		return theme;
+	}, (settings) => {
+		settings.externalReferenceUpdateOnLoad = false;
+		return settings;
+	}),
 };
 
 // Constants

src/SettingsTab.ts

@@ -40,6 +40,7 @@ export class SettingsTab extends PluginSettingTab {
 	lineNumbersContainer: HTMLElement;
 	headerTagsContainer: HTMLElement;
 	headerIconsContainer: HTMLElement;
+	headerExternalReferenceContainer: HTMLElement;
 	inlineCodeStylesContainer: HTMLElement;
 	disableableComponents: Record<string,Array<ToggleComponent | SliderComponent | TextComponent | ExtraButtonComponent>>;
 
@@ -68,18 +69,6 @@ export class SettingsTab extends PluginSettingTab {
 	}
 
 	// Create Settings Pages
-	emptySettings(containerEl: HTMLElement) {
-		containerEl.empty();
-		containerEl.createEl("h1", {text: "Settings for the Code Styler Plugin."});
-	}
-	generateSettings(containerEl: HTMLElement) {
-		if (this.page === "main")
-			this.displayMainSettings(containerEl);
-		else if (this.page === "codeblock")
-			this.displayCodeblockSettings(containerEl);
-		else if (this.page === "inline")
-			this.displayInlineCodeSettings(containerEl);
-	}
 	displayMainSettings(containerEl: HTMLElement) {
 		this.emptySettings(containerEl);
 		this.generateThemeSettings(containerEl);
@@ -114,6 +103,18 @@ export class SettingsTab extends PluginSettingTab {
 	}
 
 	// Create Settings Groups
+	emptySettings(containerEl: HTMLElement) {
+		containerEl.empty();
+		containerEl.createEl("h1", {text: "Settings for the Code Styler Plugin."});
+	}
+	generateSettings(containerEl: HTMLElement) {
+		if (this.page === "main")
+			this.displayMainSettings(containerEl);
+		else if (this.page === "codeblock")
+			this.displayCodeblockSettings(containerEl);
+		else if (this.page === "inline")
+			this.displayInlineCodeSettings(containerEl);
+	}
 	generateSettingsSwitcher(containerEl: HTMLElement) {
 		new Setting(containerEl)
 			.setName("Choose Settings Page")
@@ -534,11 +535,13 @@ export class SettingsTab extends PluginSettingTab {
 				.setValue(this.plugin.settings.currentTheme.settings.header.languageIcon.display)
 				.onChange((value: Display) => {
 					this.plugin.settings.currentTheme.settings.header.languageIcon.display = value;
-					this.generateHeaderIconSettings();
+					this.generateHeaderLanguageIconSettings();
 					this.saveSettings(true);
 				}));
 		this.headerIconsContainer = containerEl.createDiv();
-		this.generateHeaderIconSettings();
+		this.generateHeaderLanguageIconSettings();
+		this.headerExternalReferenceContainer = containerEl.createDiv();
+		this.generateHeaderExternalReferenceSettings();
 	}
 	generateHeaderTagSettings() {
 		this.headerTagsContainer.empty();
@@ -586,7 +589,7 @@ export class SettingsTab extends PluginSettingTab {
 				(relevantThemeColours: CodeStylerThemeColours, saveColour: Colour) => {relevantThemeColours[getCurrentMode()].header.languageTag.textColour = saveColour;},
 			);});
 	}
-	generateHeaderIconSettings() {
+	generateHeaderLanguageIconSettings() {
 		this.headerIconsContainer.empty();
 		if (this.plugin.settings.currentTheme.settings.header.languageIcon.display === "none")
 			return;
@@ -626,6 +629,61 @@ export class SettingsTab extends PluginSettingTab {
 					}));
 			});
 	}
+	generateHeaderExternalReferenceSettings() {
+		this.headerExternalReferenceContainer.empty();
+		this.headerExternalReferenceContainer.createEl("h5", { text: "External Reference Indicators Appearance" });
+		new Setting(this.headerExternalReferenceContainer)
+			.setName("Display Repository")
+			.setDesc("Display repository in codeblock header for external references.")
+			.addToggle(toggle => toggle
+				.setTooltip("Display Repository")
+				.setValue(this.plugin.settings.currentTheme.settings.header.externalReference.displayRepository)
+				.onChange((value) => {
+					this.plugin.settings.currentTheme.settings.header.externalReference.displayRepository = value;
+					this.saveSettings();
+				}))
+			.then((setting) => {this.createPickr(
+				this.plugin,this.headerExternalReferenceContainer,setting,
+				"codeblock_header_display_repository",
+				(relevantThemeColours: CodeStylerThemeColours) => relevantThemeColours[getCurrentMode()].header.externalReference.displayRepositoryColour,
+				(relevantThemeColours: CodeStylerThemeColours, saveColour: Colour) => {relevantThemeColours[getCurrentMode()].header.externalReference.displayRepositoryColour = saveColour;},
+				() => !this.plugin.settings.currentTheme.settings.header.externalReference.displayRepository,
+			);});
+		new Setting(this.headerExternalReferenceContainer)
+			.setName("Display Repository Name")
+			.setDesc("Display repository version in codeblock header for external references.")
+			.addToggle(toggle => toggle
+				.setTooltip("Display Repository Version")
+				.setValue(this.plugin.settings.currentTheme.settings.header.externalReference.displayVersion)
+				.onChange((value) => {
+					this.plugin.settings.currentTheme.settings.header.externalReference.displayVersion = value;
+					this.saveSettings();
+				}))
+			.then((setting) => {this.createPickr(
+				this.plugin,this.headerExternalReferenceContainer,setting,
+				"codeblock_header_display_version",
+				(relevantThemeColours: CodeStylerThemeColours) => relevantThemeColours[getCurrentMode()].header.externalReference.displayVersionColour,
+				(relevantThemeColours: CodeStylerThemeColours, saveColour: Colour) => {relevantThemeColours[getCurrentMode()].header.externalReference.displayVersionColour = saveColour;},
+				() => !this.plugin.settings.currentTheme.settings.header.externalReference.displayVersion,
+			);});
+		new Setting(this.headerExternalReferenceContainer)
+			.setName("Display Reference Timestamp")
+			.setDesc("Display the timestamp at which the reference was last updated.")
+			.addToggle(toggle => toggle
+				.setTooltip("Display Timestamp")
+				.setValue(this.plugin.settings.currentTheme.settings.header.externalReference.displayTimestamp)
+				.onChange((value) => {
+					this.plugin.settings.currentTheme.settings.header.externalReference.displayTimestamp = value;
+					this.saveSettings();
+				}))
+			.then((setting) => {this.createPickr(
+				this.plugin,this.headerExternalReferenceContainer,setting,
+				"codeblock_header_display_timestamp",
+				(relevantThemeColours: CodeStylerThemeColours) => relevantThemeColours[getCurrentMode()].header.externalReference.displayTimestampColour,
+				(relevantThemeColours: CodeStylerThemeColours, saveColour: Colour) => {relevantThemeColours[getCurrentMode()].header.externalReference.displayTimestampColour = saveColour;},
+				() => !this.plugin.settings.currentTheme.settings.header.externalReference.displayTimestamp,
+			);});
+	}
 	generateCodeblockHighlightSettings(containerEl: HTMLElement) {
 		containerEl.createEl("h3", {text: "Highlighting Appearance"});
 		new Setting(containerEl)
@@ -1020,7 +1078,18 @@ export class SettingsTab extends PluginSettingTab {
 				(relevantThemeColours: CodeStylerThemeColours) => relevantThemeColours[getCurrentMode()].highlights.activeEditorLineColour,
 				(relevantThemeColours: CodeStylerThemeColours, saveColour: Colour) => {relevantThemeColours[getCurrentMode()].highlights.activeEditorLineColour = saveColour;},
 				() => !this.plugin.settings.currentTheme.settings.highlights.activeEditorLine,
-			);});
+			);
+			});
+		new Setting(this.advancedSettingsContainer)
+			.setName("External References Automatic Update on Load")
+			.setDesc("If enabled, external references will be updated automatically on load when possible.")
+			.addToggle(toggle => toggle
+				.setTooltip("Toggle auto-update external references")
+				.setValue(this.plugin.settings.externalReferenceUpdateOnLoad)
+				.onChange((value) => {
+					this.plugin.settings.externalReferenceUpdateOnLoad = value;
+					this.saveSettings();
+				}));
 		this.disableableComponents["editorActiveLineHighlight"].push(this.pickrs["editor_active_line_highlight"].resetButton);
 		new Setting(this.advancedSettingsContainer)
 			.setName("Reset inbuilt themes")

src/css/codeblocks.css

@@ -264,15 +264,15 @@ pre.code-styler-pre .code-styler-header-external-reference > button {
 }
 div.external-reference-repo,
 div.external-reference-repo-icon {
-	color: var(--code-styler-external-reference-repo-colour, cyan);
+	color: var(--code-styler-header-external-reference-repository, cyan);
 }
 div.external-reference-ref,
 div.external-reference-ref-icon {
-	color: var(--code-styler-external-reference-ref-colour, pink);
+	color: var(--code-styler-header-external-reference-version, pink);
 }
 div.external-reference-timestamp,
 div.external-reference-timestamp-icon {
-	color: var(--code-styler-external-reference-timestamp-colour, grey);
+	color: var(--code-styler-header-external-reference-timestamp, grey);
 }
 div:has(> img.code-styler-icon) {
 	display: inline-flex;

src/main.ts

@@ -138,7 +138,7 @@ export default class CodeStylerPlugin extends Plugin {
 			await this.app.vault.adapter.mkdir(this.app.vault.configDir + EXTERNAL_REFERENCE_PATH);
 			await this.app.vault.adapter.write(this.app.vault.configDir + EXTERNAL_REFERENCE_CACHE, JSON.stringify({}));
 		}
-		if (true) //TODO (@mayurankv) Change to be based on update on load setting
+		if (this.settings.externalReferenceUpdateOnLoad)
 			await updateExternalReferencedFiles(this);
 		else {
 			await cleanExternalReferencedFiles(this);