Adds setting for site main language

Adds a setting for the site main language. This setting is used to set the the `lang` attribute of the html element. This improves accessibility and assists search engines and browsers. Reference: https://www.w3schools.com/tags/ref_language_codes.asp
oleeskild · Oct 16, 2023 · b0982b5 · b0982b5
1 parent 6aad9b6
commit b0982b5
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 0 deletions.
diff --git a/main.ts b/main.ts
@@ -23,6 +23,7 @@ const DEFAULT_SETTINGS: DigitalGardenSettings = {
 	faviconPath: "",
 	noteSettingsIsInitialized: false,
 	siteName: "Digital Garden",
+	mainLanguage: "en",
 	slugifyEnabled: true,
 	// Note Icon Related Settings
 	noteIconKey: "dg-note-icon",

diff --git a/scripts/generateGardenSettings.mjs b/scripts/generateGardenSettings.mjs
@@ -19,6 +19,7 @@ const gardenSettings = {
 	faviconPath: "",
 	noteSettingsIsInitialized: true,
 	siteName: "Digital Garden",
+	mainLanguage: "en",
 	slugifyEnabled: true,
 	noteIconKey: "dg-note-icon",
 	defaultNoteIcon: "",

diff --git a/src/models/settings.ts b/src/models/settings.ts
@@ -11,6 +11,7 @@ export default interface DigitalGardenSettings {
 	theme: string;
 	baseTheme: string;
 	faviconPath: string;
+	mainLanguage: string;
 
 	siteName: string;
 

diff --git a/src/repositoryConnection/DigitalGardenSiteManager.ts b/src/repositoryConnection/DigitalGardenSiteManager.ts
@@ -70,6 +70,7 @@ export default class DigitalGardenSiteManager {
 		const theme = JSON.parse(this.settings.theme);
 		const baseTheme = this.settings.baseTheme;
 		const siteName = this.settings.siteName;
+		const mainLanguage = this.settings.mainLanguage;
 		let gardenBaseUrl = "";
 
 		// check that gardenbaseurl is not an access token wrongly pasted.
@@ -84,6 +85,7 @@ export default class DigitalGardenSiteManager {
 
 		const envValues = {
 			SITE_NAME_HEADER: siteName,
+			SITE_MAIN_LANGUAGE: mainLanguage,
 			SITE_BASE_URL: gardenBaseUrl,
 			SHOW_CREATED_TIMESTAMP: this.settings.showCreatedTimestamp,
 			TIMESTAMP_FORMAT: this.settings.timestampFormat,

diff --git a/src/views/SettingsView/SettingView.ts b/src/views/SettingsView/SettingView.ts
@@ -502,6 +502,20 @@ export default class SettingView {
 					}),
 			);
 
+		new Setting(themeModal.contentEl)
+			.setName("Main language")
+			.setDesc(
+				'ISO 639-1 language code for the main language of your site. This is used to set correct <html lang="">.',
+			)
+			.addText((text) =>
+				text
+					.setValue(this.settings.mainLanguage)
+					.onChange(async (value) => {
+						this.settings.mainLanguage = value;
+						await this.saveSettings();
+					}),
+			);
+
 		new Setting(themeModal.contentEl)
 			.setName("Favicon")
 			.setDesc(