feat: Add website Translation based on user browser language

static/i18n/i18n.js

@@ -0,0 +1,68 @@
+const linkRegexFull =
+  /\|% LINK='[.,#?=&a-zA-Z_:_\/]*' %\|[.,a-zA-Zа-яА-Я-!_ ]*\|% ENDLINK %\|/gim;
+const linkRegexFullNonGlobal =
+  /\|% LINK='[.,#?=&a-zA-Z_:_\/]*' %\|[.,a-zA-Zа-яА-Я-!_ ]*\|% ENDLINK %\|/im;
+function parseLink(string) {
+  const links = [...string.match(linkRegexFull)];
+  const linkRegexStart = /\|% LINK='[.,#?=&a-zA-Z_:_\/]*' %\|/;
+  for (let i = 0; i < links.length; i++) {
+    let tmp = links[i];
+    const href = tmp
+      .match(linkRegexStart)[0]
+      .replace("|%", "")
+      .replace("%|", "")
+      .split("=")[1]
+      .trim();
+    let lnk = "";
+    lnk = tmp.replace(
+      linkRegexStart,
+      `<a class="text-bg-pink hover:underline" href=${href} ${href.startsWith("http") ? "target='_blank' referrerpolicy='origin'" : ""}>`
+    );
+    lnk = lnk.replace("|% ENDLINK %|", `</a>`);
+    string = string.replace(linkRegexFullNonGlobal, lnk);
+  }
+  return string;
+}
+
+const i18nTags = document.querySelectorAll("[data-i18n]");
+const i18nStyles = document.querySelectorAll("[data-i18n-style]");
+function changeLanguage(lang) {
+  let strings = {};
+  let styles = {};
+  if (lang == "ru") {
+    strings = i18n_ru;
+    styles = i18n_ru_style;
+  }
+
+  for (let i = 0; i < i18nTags.length; i++) {
+    const element = i18nTags[i];
+    const id = element.getAttribute("data-i18n");
+    if (!strings[id]) {
+      continue;
+    }
+
+    if (linkRegexFull.test(strings[id])) {
+      element.innerHTML = parseLink(strings[id]);
+    } else {
+      element.innerHTML = strings[id];
+    }
+  }
+  for (let i = 0; i < i18nStyles.length; i++) {
+    const element = i18nStyles[i];
+    const id = element.getAttribute("data-i18n-style");
+    if (!styles[id]) {
+      continue;
+    }
+
+    element.style.cssText = styles[id];
+  }
+}
+
+function detectAndChangeLanguage() {
+  const userLang = window.navigator.language;
+  if (userLang.startsWith("ru")) {
+    changeLanguage("ru");
+  }
+}
+
+detectAndChangeLanguage();

static/i18n/strings/ru.js

@@ -0,0 +1,69 @@
+const i18n_ru = {
+  NAME: "КЕНТАЙ РАДИКУУМ",
+  PRONOUNCE: "Он",
+  SPECIES: "Красная Панда / Протоген",
+
+  // QUICK_BIO
+  QUICK_BIO_FURRY: "Фурри",
+  QUICK_BIO_CODER: "Программист",
+  QUICK_BIO_PHOTOGRAPHER: "Фотограф",
+  QUICK_BIO_ENTHUSIAST: "Селф-Хостинг Энтузиаст",
+  QUICK_BIO_LASTFM: "Сейчас слушает: ",
+
+  // BUTTONS
+  BTN_ABOUT_ME: "ОБО МНЕ",
+  BTN_OR: "или",
+  BTN_LINKS: "ССЫЛКИ",
+
+  // ABOUT ME
+  CARD_TITLE: "ОБО МНЕ",
+  CARD_TECH_ENTHUSIAST_TITLE: "Технический энтузиаст",
+  CARD_TECH_ENTHUSIAST_DESC:
+    "Мне нравится развиваться в области технологий, я увлечен разработкой программного обеспечения. Я люблю копаться в коде и изучать новое программное обеспечение, хотя железки меня тоже привлекают.",
+  CARD_PHOTOGRAPHER_TITLE: "Фотограф",
+  CARD_PHOTOGRAPHER_DESC:
+    "Я также увлекаюсь |% LINK='https://wah.su/photos' %|фотографией|% ENDLINK %| и с удовольствием делюсь своим прогрессом.",
+  CARD_SELFHOSTER_TITLE: "Самостоятельный хостинг",
+  CARD_SELFHOSTER_DESC:
+    "Я очень увлечен самостоятельным хостингом через мой проект |% LINK='https://home.wah.su' %|wah.su|% ENDLINK %|, который помогает мне погрузиться в управление серверами и хостинговыми платформами.",
+  CARD_MUSIC_TITLE: "Музыка",
+  CARD_MUSIC_DESC:
+    "Я слушаю много разной музыки, но в основном слушаю EDM / Happy Hardcore / Tech / Rock / Alternative. От таких исполнителей как: S3RL, Camellia, t+pazolite, BTMH, Saint Motel и других...",
+  CARD_SKILLS_TITLE: "Навыки",
+  CARD_SKILLS_FRONTEND: "Разработка фронт-енд",
+  CARD_SKILLS_BACKEND: "Разработка бэк-енд",
+  CARD_SKILLS_API: "API",
+  CARD_SKILLS_COLLAB: "Совместная работа",
+  CARD_SKILLS_DEPLOY: "Развёртывание",
+  CARD_READPANDA_TITLE: "Поклонник красных панд",
+  CARD_READPANDA_DESC:
+    "Я очень люблю красных панд и не могу насмотреться на них! Я собираю стикеры с красными пандами и делюсь ими в Telegram-канале |% LINK='https://t.me/red_panda_stickers' %|Red Panda Stickers|% ENDLINK %|. Кроме того, я собрал |% LINK='https://wahs.wah.su' %|коллекцию|% ENDLINK %| из более чем 3000 фотографий и видео с красными пандами.",
+  CARD_CONTACT_TITLE: "Связаться",
+  CARD_CONTACT_DESC:
+    "Не стесняйтесь связаться со мной в любое время! Способы связаться со мной через мессенджеры доступны в разделе |% LINK='#links' %|ссылок!|% ENDLINK %|.",
+  LNK_TITLE: "ССЫЛКИ",
+  LNK_PHOTO_HEADER: "ФОТОГРАФИИ",
+  LNK_PHOTO_PIXEY: "Смотри фото как в инстаграме",
+  LNK_PHOTO_INSTAFOPS: "Более фурри фото",
+  LNK_PHOTO_IMMICH: "Смотри фото как в Гугл Фото",
+  LNK_ARTS_HEADER: "АРТЫ",
+  LNK_SOCIALS_HEADER: "СОЦ. СЕТИ",
+  LNK_PROJECTS_HEADER: "ПРОЕКТЫ",
+  LNK_PROJECTS_ANIX:
+    "Неофициальный клиент для android приложения Anixart сделанный с помощью Next.js",
+  LNK_PROJECTS_TGP: "Телеграм бот для использования ТГ как гугл фото",
+  LNK_PROJECTS_WG: "Генератор слов вдохновлённый @tsoding",
+  LNK_PROJECTS_FADL: "Форк оригинального проекта для добавления новых функций",
+  LNK_PROJECTS_GITHUB: "Посмотреть мои другие репозитории",
+  LNK_PROJECTS_WAHSU: "Мой проект по селф-хосту",
+  LNK_CONTACT_HEADER: "СВЯЗАТЬСЯ",
+  LNK_FRIEND_HEADER: "ДРУЗЬЯ И КОЛЛЕКЦИИ",
+  LNK_COLLECTION_RPS: "ТГК для стикеров с красными пандами",
+  LNK_COLLECTION_RPI: "3000+ Фото и видео с красными пандами",
+  LNK_FRIEND_BLEP: "ВК Группа классного фотографа",
+  LNK_FRIEND_ITC: "GitHub профиль другого фурри-кодера",
+};
+
+const i18n_ru_style = {
+  CARD_SKILLS_STYLE: "--sm--mt:54px; --lg--mt:40px;",
+};