Improve right-to-left language support

src/lang/base.js

@@ -1,6 +1,8 @@
 // This file was automatically generated and its contents will be overwritten later.
 
 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",

src/lang/en.js

@@ -2,6 +2,8 @@ const data = {...require("./base")}
 const {pug} = require("./utils/functions")
 
 ;(() => {
+	data.meta_direction = "ltr"
+
 	data.go_to_profile = "Go to profile"
 	data.go_to_post = "Go to post"
 	data.go_username_or_url = "Username or URL"

src/lang/fa.js

@@ -2,6 +2,8 @@ const data = {...require("./base")}
 const {pug} = require("./utils/functions")
 
 ;(() => {
+	data.meta_direction = "rtl"
+
 	data.go_to_profile = "برو به نمایه"
 	data.go_to_post = "برو به پست"
 	data.go_username_or_url = "حساب کاربری یا لینک"

src/lang/index.js

@@ -13,7 +13,7 @@ class Lang {
 			this.backing.set(code, data)
 			// Check properties
 			for (const key of Object.keys(base)) {
-				if (!data[key] || data[key] === base[key]) {
+				if (!key.startsWith("meta_") && (!data[key] || data[key] === base[key])) {
 					console.log(`[!] [${code}] ${key} was not replaced`)
 				}
 			}

src/lang/it.js

@@ -2,6 +2,8 @@ const data = {...require("./base")}
 const {pug} = require("./utils/functions")
 
 ;(() => {
+	data.meta_direction = "ltr"
+
 	data.go_to_profile = "Vai al profilo"
 	data.go_to_post = "Vai al post"
 	data.go_username_or_url = "Nome utente o indirizzo URL"

src/site/pug/home.pug

@@ -12,20 +12,20 @@ html
 			h1.banner
 				img.banner-image(src="/static/img/banner-min.svg" alt="Bibliogram")
 
-		.go-sections-container
+		.go-sections-container(dir=ll.meta_direction)
 			.go-sections
 				section
 					h2.title= ll.go_to_profile
-					form(method="get" action="/u").pair-entry
+					form(method="get" action="/u" class=`dir-${ll.meta_direction}`).pair-entry
 						input(type="text" name="u" placeholder=ll.go_username_or_url).text
 						input(type="submit" value=ll.go_button).button
 				section
 					h2.title= ll.go_to_post
-					form(method="get" action="/p").pair-entry
+					form(method="get" action="/p" class=`dir-${ll.meta_direction}`).pair-entry
 						input(type="text" name="p" placeholder=ll.go_shortcode_or_url).text
 						input(type="submit" value=ll.go_button).button
 
-		.about-container
+		.about-container(dir=ll.meta_direction)
 			section.about
 				h2= ll.about_bibliogram_header
 				!= ll.pug_about_bibliogram_content({link_to_featured_profiles: constants.featured_profiles.length})

src/site/pug/user.pug

@@ -99,7 +99,7 @@ html
 							.quota Quota left: #[span#quota= remaining]
 
 			- const hasPosts = !user.data.is_private && selectedTimeline.pages.length && selectedTimeline.pages[0].length
-			.timeline-section
+			.timeline-section(dir=ll.meta_direction)
 				.selector-container
 					+selector-button(ll.tab_timeline, "timeline", "")
 					if user.data.has_channel !== false

src/site/sass/includes/_main.sass

@@ -141,6 +141,7 @@ body
 
 		.profile-counter
 			line-height: 1.3
+			unicode-bidi: plaintext
 
 			&.not-available
 				font-style: italic
@@ -615,8 +616,6 @@ body
 					color: map-get($theme, "foreground-go-control")
 
 				.text
-					border-radius: 6px 0px 0px 6px
-					border-right: none
 					max-width: 230px
 					width: 30vw
 					background-color: map-get($theme, "background-go-input")
@@ -624,8 +623,15 @@ body
 					@media screen and (max-width: 520px)
 						width: 80vw
 
-				.button
+				&.dir-ltr .text
+					border-right: none
+					border-radius: 6px 0px 0px 6px
+
+				&.dir-rtl .text
+					border-left: none
 					border-radius: 0px 6px 6px 0px
+
+				.button
 					padding-left: 12px
 					padding-right: 12px
 					cursor: pointer
@@ -634,6 +640,12 @@ body
 					&:hover
 						background-color: map-get($theme, "background-power-pale")
 
+				&.dir-ltr .button
+					border-radius: 0px 6px 6px 0px
+
+				&.dir-rtl .button
+					border-radius: 6px 0px 0px 6px
+
 	.about-container
 		background-color: map-get($theme, "background-power-secondary")
 		color: map-get($theme, "foreground-power-secondary")