add stuff for persian translation

assets/fonts/fonts.css

@@ -31,6 +31,7 @@
   unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
     U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
 }
+
 @font-face {
   font-family: "Poppins";
   font-style: normal;
@@ -53,6 +54,7 @@
        url('farsi/Yekan.ttf') format("truetype");
   unicode-range: U+0600-U+06FF;
 }
+
 @font-face {
   font-family: "Yekan";
   font-style: normal;
@@ -76,6 +78,7 @@
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
     U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 @font-face {
   font-family: "Poppins";
   font-style: normal;
@@ -86,6 +89,7 @@
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
     U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 @font-face {
   font-family: "Raleway";
   font-style: normal;
@@ -109,6 +113,7 @@
     U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
     U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 @font-face {
   font-family: "Poppins";
   font-style: normal;
@@ -119,6 +124,7 @@
     U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
     U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 @font-face {
   font-family: "Raleway";
   font-style: normal;

assets/script.js

@@ -1,6 +1,8 @@
 // script.js
 
-let languages = ["en", "de", "fr", "es", "fa"]
+// language and mode management
+let languages = ["en", "de", "fr", "es", "pt-br", "fa"]
+let rtlLanguages = ["fa"]
 let currentLanguage = localStorage.getItem("language")
 if (!currentLanguage) {
   currentLanguage = window.navigator.language.slice(0, 2)
@@ -9,9 +11,7 @@ if (!currentLanguage) {
 }
 let currentMode = localStorage.getItem("mode")
 if (!currentMode) {
-  currentMode = window.matchMedia("(prefers-color-scheme: dark)").matches
-    ? "dark"
-    : "light"
+  currentMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   localStorage.setItem("mode", currentMode)
 }
 
@@ -47,20 +47,12 @@ loadLanguage = async (lang, save = true) => {
   const translations = await response.json()
 
   document.documentElement.lang = lang
-  if (translations.website.page_language)
-    document
-      .querySelector('meta[name="language"]')
-      .setAttribute("content", translations.website.page_language)
-  if (translations.website.page_title)
-    document.title = translations.website.page_title
-  if (translations.website.page_description)
-    document
-      .querySelector('meta[name="description"]')
-      .setAttribute("content", translations.website.page_description)
-  if (translations.website.page_keywords)
-    document
-      .querySelector('meta[name="keywords"]')
-      .setAttribute("content", translations.website.page_keywords)
+  rtlLanguages.includes(lang) ? document.documentElement.setAttribute("dir", "rtl") : document.documentElement.setAttribute("dir", "ltr")
+
+  if (translations.website.page_language) document.querySelector('meta[name="language"]').setAttribute("content", translations.website.page_language)
+  if (translations.website.page_title) document.title = translations.website.page_title
+  if (translations.website.page_description) document.querySelector('meta[name="description"]').setAttribute("content", translations.website.page_description)
+  if (translations.website.page_keywords) document.querySelector('meta[name="keywords"]').setAttribute("content", translations.website.page_keywords)
 
   document.querySelectorAll("[data-i18n]").forEach((el) => {
     const key = el.getAttribute("data-i18n")
@@ -72,7 +64,7 @@ loadLanguage = async (lang, save = true) => {
   setPreviewImages()
 }
 
-// set preview images
+// preview images
 const setPreviewImages = () => {
   const lang = localStorage.getItem("language") || "en"
   const previewLightImage = document.querySelector(".preview-flyer-light img")
@@ -81,16 +73,10 @@ const setPreviewImages = () => {
   previewDarkImage.src = `./i18n/${lang}/preview-flyer-dark.webp`
   previewLightImage.alt = `Preview flyer in light mode (${lang})`
   previewDarkImage.alt = `Preview flyer in dark mode (${lang})`
-  const previewLightPdfLinks = document.querySelectorAll(
-    ".preview-flyer-light a"
-  )
+  const previewLightPdfLinks = document.querySelectorAll(".preview-flyer-light a")
   const previewDarkPdfLinks = document.querySelectorAll(".preview-flyer-dark a")
-  previewLightPdfLinks.forEach((link) => {
-    link.href = `./i18n/${lang}/flyer-light-${lang}.pdf`
-  })
-  previewDarkPdfLinks.forEach((link) => {
-    link.href = `./i18n/${lang}/flyer-dark-${lang}.pdf`
-  })
+  previewLightPdfLinks.forEach((link) => link.href = `./i18n/${lang}/flyer-light-${lang}.pdf`)
+  previewDarkPdfLinks.forEach((link) => link.href = `./i18n/${lang}/flyer-dark-${lang}.pdf`)
 }
 
 // sorting

assets/style.css

@@ -1,8 +1,3 @@
-/*
-fontfaces are defined in assets/fonts/font-face.css
-let style.css be dedicated to the website's design
-*/
-
 :root {
   --color-monero-orange: #ff6b00;
   --color-monero-grey: #4c4c4c;