From fc617ff4f566998fdbe73b69b4f02be551f4ce5b Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Sat, 20 Jan 2024 16:23:26 +0100
Subject: [PATCH 1/4] Add support for script direction

---
 src/components/language-select.astro |  2 +-
 src/i18n/engine.ts                   |  4 ++++
 src/i18n/translations.ts             | 12 ++++++------
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/language-select.astro b/src/components/language-select.astro
index b80a206..fa7bcab 100644
--- a/src/components/language-select.astro
+++ b/src/components/language-select.astro
@@ -24,7 +24,7 @@ const initialLanguage = "en";
 						selected={k === initialLanguage}
 						value={k}
 					>
-						{v}
+						{v.autonym}
 					</option>
 				);
 			})
diff --git a/src/i18n/engine.ts b/src/i18n/engine.ts
index 7d28f4b..5d850df 100644
--- a/src/i18n/engine.ts
+++ b/src/i18n/engine.ts
@@ -71,4 +71,8 @@ export function applyTranslations(language: string) {
 			}
 		}
 	}
+
+	document.documentElement.lang = language;
+	document.documentElement.dir =
+		languages[language as keyof typeof languages].dir;
 }
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 92a56b3..84db5f8 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -14,12 +14,12 @@ import nl from "./translations/nl.json";
 import ru from "./translations/ru.json";
 
 export const languages = {
-	en: "English",
-	de: "Deutsch",
-	es: "Español",
-	fr: "Français",
-	nl: "Nederlands",
-	ru: "Русский",
+	en: { autonym: "English", dir: "ltr" },
+	de: { autonym: "Deutsch", dir: "ltr" },
+	es: { autonym: "Español", dir: "ltr" },
+	fr: { autonym: "Français", dir: "ltr" },
+	nl: { autonym: "Nederlands", dir: "ltr" },
+	ru: { autonym: "Русский", dir: "ltr" },
 };
 
 export const strings: Record<keyof typeof languages, Record<string, string>> = {

From fa497c08d07b8a25d0c3b6c646854e44221e409b Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Sat, 20 Jan 2024 16:34:32 +0100
Subject: [PATCH 2/4] Improve CSS support for non-tbltr scripts

---
 src/components/instance-select.astro |  7 +++++--
 src/styles/main.scss                 | 21 +++++++++++----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/instance-select.astro b/src/components/instance-select.astro
index 26b70ae..7b8e42c 100644
--- a/src/components/instance-select.astro
+++ b/src/components/instance-select.astro
@@ -15,7 +15,10 @@ const { instance, errors } = Astro.props;
 	data-translate="instance"
 >
 	Fediverse instance
-	<div class="instance-input">
+	<div
+		class="instance-input"
+		dir="ltr"
+	>
 		<span id="https-label">https://</span>
 		<input
 			type="text"
@@ -90,7 +93,7 @@ const { instance, errors } = Astro.props;
 	}
 
 	#saved-instances {
-		margin-bottom: 1rem;
+		margin-block-end: 1rem;
 
 		> div {
 			display: inline-block;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index be7374e..5d5ec66 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -39,7 +39,8 @@ html {
 
 body {
 	max-width: 60em;
-	margin: 0 auto;
+	margin-block: 0;
+	margin-inline: auto;
 	display: flex;
 	flex-flow: row wrap;
 
@@ -55,19 +56,16 @@ header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-
-	> div {
-		text-align: right;
-	}
 }
 
 main {
-	margin-bottom: 2rem;
+	margin-block-end: 2rem;
 }
 
 main,
 aside {
-	padding: 0 1rem;
+	padding-block: 0;
+	padding-inline: 1rem;
 }
 
 hr {
@@ -110,6 +108,7 @@ textarea {
 
 textarea {
 	resize: vertical;
+	resize: block;
 }
 
 input[type="text"],
@@ -130,7 +129,8 @@ input[type="submit"] {
 	color: var(--s2f-button-text-color);
 	font-weight: bolder;
 	height: 2.5rem;
-	padding: 0.5rem 1.5rem;
+	padding-block: 0.5rem;
+	padding-inline: 1.5rem;
 	border: 0;
 	cursor: pointer;
 	appearance: button;
@@ -175,9 +175,10 @@ input[type="submit"] {
 
 p.error {
 	color: var(--s2f-error-color);
-	margin: 0 0 1rem;
+	margin-block: 0 1rem;
+	margin-inline: 0;
 }
 
 .mt1r {
-	margin-top: 1rem !important;
+	margin-block-start: 1rem !important;
 }

From 38190488808f6453674d4d894199fbe5e948bfa4 Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Sat, 20 Jan 2024 16:42:01 +0100
Subject: [PATCH 3/4] Improve language selector display

---
 src/components/language-select.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/language-select.astro b/src/components/language-select.astro
index fa7bcab..763df89 100644
--- a/src/components/language-select.astro
+++ b/src/components/language-select.astro
@@ -11,8 +11,8 @@ import { languages } from "@i18n/translations";
 const initialLanguage = "en";
 ---
 
-<label data-translate="language">
-	Language:
+<label>
+	🌍 <span data-translate="language">Language:</span>
 	<select
 		name="language"
 		id="language"

From 447c877f3cedbddef2ada0eed25ee215677a77e7 Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Sat, 20 Jan 2024 16:42:23 +0100
Subject: [PATCH 4/4] Fix i18n not working if locale is set to a non-existen
 language

---
 src/i18n/engine.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/engine.ts b/src/i18n/engine.ts
index 5d850df..3321f28 100644
--- a/src/i18n/engine.ts
+++ b/src/i18n/engine.ts
@@ -9,9 +9,6 @@
 import { strings, defaultLanguage, languages } from "./translations";
 
 export function useTranslations(language: string) {
-	if (!(language in strings)) {
-		language = defaultLanguage;
-	}
 	return function t(
 		key: keyof (typeof strings)[typeof defaultLanguage],
 	): string {
@@ -46,6 +43,9 @@ export function findBestLanguage(): string {
 }
 
 export function applyTranslations(language: string) {
+	if (!(language in strings)) {
+		language = defaultLanguage;
+	}
 	const t = useTranslations(language);
 
 	for (const node of document.querySelectorAll("[data-translate]")) {