make settings translatable

src/lang/base.js

@@ -2,7 +2,6 @@
 
 const data = {
 	"meta_direction": "ltr",
-
 	"go_to_profile": "MISSING STRING: go_to_profile",
 	"go_to_post": "MISSING STRING: go_to_post",
 	"go_username_or_url": "MISSING STRING: go_username_or_url",
@@ -42,7 +41,45 @@ const data = {
 	"no_posts_notice": "MISSING STRING: no_posts_notice",
 	"no_more_posts_notice": "MISSING STRING: no_more_posts_notice",
 	"fn_page_divider": () => "MISSING FUNCTION: fn_page_divider",
-	"pug_post_timestamp": locals => "MISSING TEMPLATE: pug_post_timestamp"
+	"pug_post_timestamp": locals => "MISSING TEMPLATE: pug_post_timestamp",
+	"t_features": "MISSING STRING: t_features",
+	"t_language": "MISSING STRING: t_language",
+	"save_data": "MISSING STRING: save_data",
+	"t_automatic": "MISSING STRING: t_automatic",
+	"t_off": "MISSING STRING: t_off",
+	"lazy_load": "MISSING STRING: lazy_load",
+	"t_full": "MISSING STRING: t_full",
+	"rewrite_youtube": "MISSING STRING: rewrite_youtube",
+	"rewrite_twitter": "MISSING STRING: rewrite_twitter",
+	"remove_trailing_hashtags": "MISSING STRING: remove_trailing_hashtags",
+	"t_hide": "MISSING STRING: t_hide",
+	"link_hashtags": "MISSING STRING: link_hashtags",
+	"t_clickable": "MISSING STRING: t_clickable",
+	"show_comments": "MISSING STRING: show_comments",
+	"t_display": "MISSING STRING: t_display",
+	"fast_navigation": "MISSING STRING: fast_navigation",
+	"t_enabled": "MISSING STRING: t_enabled",
+	"infinite_scroll": "MISSING STRING: infinite_scroll",
+	"t_normal": "MISSING STRING: t_normal",
+	"t_eager": "MISSING STRING: t_eager",
+	"t_manual": "MISSING STRING: t_manual",
+	"t_appearance": "MISSING STRING: t_appearance",
+	"t_theme": "MISSING STRING: t_theme",
+	"display_top_nav": "MISSING STRING: display_top_nav",
+	"t_always": "MISSING STRING: t_always",
+	"timeline_columns": "MISSING STRING: timeline_columns",
+	"t_dynamic": "MISSING STRING: t_dynamic",
+	"three_columns": "MISSING STRING: three_columns",
+	"four_columns": "MISSING STRING: four_columns",
+	"six_columns": "MISSING STRING: six_columns",
+	"caption_side": "MISSING STRING: caption_side",
+	"left_caption": "MISSING STRING: left_caption",
+	"right_caption": "MISSING STRING: right_caption",
+	"display_alt_text": "MISSING STRING: display_alt_text",
+	"t_return": "MISSING STRING: t_return",
+	"t_save": "MISSING STRING: t_save",
+	"save_and_return": "MISSING STRING: save_and_return",
+	"pug_restore_sync_settings": locals => "MISSING TEMPLATE: pug_restore_sync_settings"
 }
 
 module.exports = data

src/lang/en.js

@@ -57,6 +57,48 @@ const {pug} = require("./utils/functions")
 	data.pug_post_timestamp = pug(`
 		| Posted on #[time(datetime=post.date.toISOString() data-local-date)= post.getDisplayDate()].
 	`)
+	// settings
+	data.t_features = "Features"
+	data.t_language = "Language"
+	data.save_data = "Save data"
+	data.t_automatic = "Automatic"
+	data.t_off = "Off"
+	data.lazy_load = "Lazy load"
+	data.t_full = "Full"
+	data.rewrite_youtube = "Rewrite YouTube domain"
+	data.rewrite_twitter = "Rewrite Twitter domain"
+	data.remove_trailing_hashtags = "Hide trailing hashtags"
+	data.t_hide = "Hide"
+	data.link_hashtags = "Clickable hashtags"
+	data.t_clickable = "Clickable"
+	data.show_comments = "Display comments"
+	data.t_display = "Display"
+	data.fast_navigation = "Fast navigation"
+	data.t_enabled = "Enabled"
+	data.infinite_scroll = "Infinite scroll"
+	data.t_normal = "Normal"
+	data.t_eager = "Eager"
+	data.t_manual = "Manual"
+	data.t_appearance = "Appearance"
+	data.t_theme = "Theme"
+	data.display_top_nav = "Display top bar"
+	data.t_always = "Always"
+	data.timeline_columns = "Timeline columns"
+	data.t_dynamic = "Dynamic"
+	data.three_columns = "3 columns"
+	data.four_columns = "4 columns"
+	data.six_columns = "6 columns"
+	data.caption_side = "Caption side"
+	data.left_caption = "Left (Bibliogram)"
+	data.right_caption = "Right (Instagram)"
+	data.display_alt_text = "Display alt text inline"
+	data.t_return = "Return"
+	data.t_save = "Save"
+	data.save_and_return = "Save & return"
+	data.pug_restore_sync_settings = pug(`
+		| You can restore and sync saved settings by #[a(href="/applysettings/"+token)#restore-link bookmarking this link.]
+	`)
+
 })()
 
 module.exports = data

src/lang/utils/base.template.js

@@ -1,6 +1,7 @@
 // This file is a template.
 
 const data = {
+	"meta_direction": "ltr",
 	// CONTENT
 }
 

src/lang/utils/base.txt

@@ -49,3 +49,43 @@ fn_page_divider
 # Post page
 
 pug_post_timestamp
+
+# settings
+t_features
+t_language
+save_data
+t_automatic
+t_off
+lazy_load
+t_full
+rewrite_youtube
+rewrite_twitter
+remove_trailing_hashtags
+t_hide
+link_hashtags
+t_clickable
+show_comments
+t_display
+fast_navigation
+t_enabled
+infinite_scroll
+t_normal
+t_eager
+t_manual
+t_appearance
+t_theme
+display_top_nav
+t_always
+timeline_columns
+t_dynamic
+three_columns
+four_columns
+six_columns
+caption_side
+left_caption
+right_caption
+display_alt_text
+t_return
+t_save
+save_and_return
+pug_restore_sync_settings

src/site/pug/settings.pug

@@ -1,4 +1,5 @@
 //- Needs constants, settings, csrf, status, message
+- const ll = lang.get(settings.language)
 
 mixin fieldset(name)
 	fieldset
@@ -32,7 +33,7 @@ mixin select(id, description, disabled, options)
 doctype html
 html
 	head
-		title Settings | Bibliogram
+		title= `${ll.t_settings} | Bibliogram`
 		include includes/head
 		script(src=getStaticURL("html", "/static/js/settings_message.js") type="module")
 	body.settings-page
@@ -42,10 +43,10 @@ html
 			form(action=returnAction method="post" enctype="application/x-www-form-urlencoded")
 				input(type="hidden" name="csrf" value=csrf)
 
-				h1 Settings
+				h1.title= ll.t_settings
 
-				+fieldset("Features")
-					+select("language", "Language", false, [
+				+fieldset(ll.t_features)
+					+select("language", ll.t_language, false, [
 						{value: "bg", text: "Български"},
 						{value: "en", text: "English (International)"},
 						{value: "en-us", text: "English (US)"},
@@ -58,14 +59,14 @@ html
 						{value: "ru", text: "Русский"}
 					])
 
-					+select("save_data", "Save data", true, [
-						{value: "automatic", text: "Automatic"},
-						{value: "off", text: "Off"},
-						{value: "lazy_load", text: "Lazy load"},
-						{value: "full", text: "Full"}
+					+select("save_data", ll.save_data, true, [
+						{value: "automatic", text: ll.t_automatic},
+						{value: "off", text: ll.t_off},
+						{value: "lazy_load", text: ll.lazy_load},
+						{value: "full", text: ll.t_full}
 					])
 
-					+input("rewrite_youtube", "Rewrite YouTube domain", constants.default_user_settings.rewrite_youtube, false, [
+					+input("rewrite_youtube", ll.rewrite_youtube, constants.default_user_settings.rewrite_youtube, false, [
 						"invidio.us",
 						"invidious.snopyta.org",
 						"invidious.13ad.de",
@@ -74,7 +75,7 @@ html
 						"yewtu.be"
 					])
 
-					+input("rewrite_twitter", "Rewrite Twitter domain", constants.default_user_settings.rewrite_twitter, false, [
+					+input("rewrite_twitter", ll.rewrite_twitter, constants.default_user_settings.rewrite_twitter, false, [
 						"nitter.net",
 						"nitter.snopyta.org",
 						"nitter.pussthecat.org",
@@ -86,38 +87,38 @@ html
 						"nitter.1d4.us"
 					])
 
-					+checkbox("remove_trailing_hashtags", "Hide trailing hashtags", "Hide", false)
+					+checkbox("remove_trailing_hashtags", ll.remove_trailing_hashtags, ll.hide, false)
 
-					+checkbox("link_hashtags", "Clickable hashtags", "Clickable", true)
+					+checkbox("link_hashtags", ll.link_hashtags, ll.t_clickable, true)
 
-					+checkbox("show_comments", "Display comments", "Display", true)
+					+checkbox("show_comments", ll.show_comments, ll.t_display, true)
 
-					+checkbox("spa", "Fast navigation", "Enabled", false)
+					+checkbox("spa", ll.fast_navigation, ll.t_enabled, false)
 
-					+select("infinite_scroll", "Infinite scroll", true, [
-						{value: "normal", text: "Normal"},
-						{value: "eager", text: "Eager"},
-						{value: "off", text: "Manual"}
+					+select("infinite_scroll", ll.infinite_scroll, true, [
+						{value: "normal", text: ll.t_normal},
+						{value: "eager", text: ll.t_eager},
+						{value: "off", text: ll.t_manual}
 					])
 
-				+fieldset("Appearance")
-					+select("theme", "Theme", false, constants.themes.collated.map(entry => ({value: entry.file, text: entry.name})))
+				+fieldset(ll.t_appearance)
+					+select("theme", ll.t_theme, false, constants.themes.collated.map(entry => ({value: entry.file, text: entry.name})))
 
-					+checkbox("display_top_nav", "Display top bar", "Always", false)
+					+checkbox("display_top_nav", ll.display_top_nav, ll.t_always, false)
 
-					+select("timeline_columns", "Timeline columns", false, [
-						{value: "dynamic", text: "Dynamic"},
-						{value: "three", text: "3 columns"},
-						{value: "four", text: "4 columns"},
-						{value: "six", text: "6 columns"}
+					+select("timeline_columns", ll.timeline_columns, false, [
+						{value: "dynamic", text: ll.t_dynamic},
+						{value: "three", text: ll.three_columns},
+						{value: "four", text: ll.four_columns},
+						{value: "six", text: ll.six_columns}
 					])
 
-					+select("caption_side", "Caption side", false, [
-						{value: "left", text: "Left (Bibliogram)"},
-						{value: "right", text: "Right (Instagram)"}
+					+select("caption_side", ll.caption_side, false, [
+						{value: "left", text: ll.left_caption},
+						{value: "right", text: ll.right_caption}
 					])
 
-					+checkbox("display_alt", "Display alt text inline", "Display", false)
+					+checkbox("display_alt", ll.display_alt_text, ll.t_display, false)
 
 				//- div
 					//- Here are all the possible input styles. Uncomment to test styling.
@@ -159,9 +160,9 @@ html
 									span.fake-checkbox
 
 				if token
-					p You can restore and sync saved settings by #[a(href=`/applysettings/${token}`)#restore-link bookmarking this link.]
+					p!= ll.pug_restore_sync_settings({token})
 
 				.action-container
-					span.home-link-container: a(href=returnURL).home-link ← Return
-					button(type="submit" formaction=stayAction).save-button Save
-					button(type="submit").save-button Save & return
+					span.home-link-container: a(href=returnURL).home-link= `← ${ll.t_return}`
+					input(type="submit" value=ll.t_save formaction=stayAction).save-button
+					input(type="submit" value=ll.save_and_return).save-button