@adminforth/i18n 1.0.0-next.1

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,42 @@
+#!/bin/sh
+
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+
+if [ "$CI_STEP_STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl  -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK"

package/.woodpecker/release.yml

@@ -0,0 +1,45 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+    secrets:
+      - VAULT_TOKEN
+
+  release:
+    image: node:20
+    when:
+      - event: push
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    commands:
+      # install rsync
+      - apt update && apt install -y rsync
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - npm clean-install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+      - npx semantic-release
+
+  slack-on-failure:
+    when:
+      - event: push
+        status: [failure, success]
+      - event: push
+    image: curlimages/curl
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh
+

package/Changelog.md

@@ -0,0 +1,71 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.23] - next
+
+### Improved
+
+- Better instructions for LLM pluralization Slavik messages
+
+### Added
+- support for pluralization in Backend `tr` function
+- add handy languagesList function to get all languages for translation of side apps
+
+### Fixed
+- invalidation of indvidual tr messages when translation using LLM adapter
+
+## [1.0.22]
+
+### Fixed
+
+- More predictable class name
+- When loading unique translations from category, they were not registered if existing in other category
+
+
+## [1.0.21] - 2024-12-30
+
+### Fixed
+- improve cache reset when editing messages manually
+
+### Added
+- Translating external app" feature by using feedCategoryTranslations
+
+## [1.0.20]
+
+### Fixed
+- fix automatic translations
+
+## [1.0.14]
+
+### Fixed
+
+- Add `ignoreInitial` for watch to prevent initial messages loading
+- Add locking mechanism to prevent initial messages loading call in parallel (just in case)
+
+## [1.0.13]
+
+- Deduplicate frontend strings before creating translations 
+
+
+## [1.0.12]
+
+### Fixed
+
+- live mode frontend translations loading when tmp dir is nopt preserver  (e.g. docker cached /tmp pipeline)
+
+## [1.0.11]
+
+### Fixed
+
+- cache invalidations on delete
+
+## [v1.0.10]
+
+### Fixed
+
+- fix automatic translations for duplicate strings
+- improve slavik pluralization generations by splitting the requests

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Devforth.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build.log

@@ -0,0 +1,15 @@
+
+> @adminforth/i18n@1.0.23-next.3 build
+> tsc && rsync -av --exclude 'node_modules' custom dist/
+
+sending incremental file list
+custom/
+custom/LanguageInUserMenu.vue
+custom/LanguageUnderLogin.vue
+custom/langCommon.ts
+custom/package-lock.json
+custom/package.json
+custom/tsconfig.json
+
+sent 9,620 bytes  received 134 bytes  19,508.00 bytes/sec
+total size is 9,122  speedup is 0.94

package/custom/LanguageInUserMenu.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="min-w-40">
+    <div class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black 
+      hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive 
+      w-full select-none	"
+      :class="{ 'bg-black bg-opacity-10	': showDropdown }"
+      @click="showDropdown = !showDropdown"
+    >
+      <span class="mr-1">
+        <span class="flag-icon"
+          :class="`flag-icon-${getCountryCodeFromLangCode(selectedOption.value)}`"
+        ></span>
+      </span>
+      <span>{{ selectedOption.label }}</span>
+
+      <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
+          :class="{ 'transform rotate-180': showDropdown }"
+      />
+    </div>
+
+    <div v-if="showDropdown" >
+      
+      <div class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm 
+        text-black dark:text-darkSidebarTextHover
+        bg-black bg-opacity-10	
+        hover:brightness-110
+        hover:text-lightPrimary dark:hover:text-darkPrimary
+        hover:bg-lightPrimaryContrast dark:hover:bg-darkPrimaryContrast
+        w-full text-select-none pl-5 select-none"
+        v-for="option in options.filter((opt) => opt.value !== selectedOption.value)"
+        @click="doChangeLang(option.value)"
+      >
+        <span class="mr-1">
+          <span class="flag-icon"
+            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
+          ></span>
+        </span>
+        <span>{{ option.label }}</span>
+      
+      </div>
+    </div>
+
+   
+  </div>
+</template>
+
+<script setup>
+import 'flag-icon-css/css/flag-icons.min.css';
+import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+
+import { setLang, getCountryCodeFromLangCode, getLocalLang, setLocalLang } from './langCommon';
+
+import { computed, ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { setLocaleMessage, locale } = useI18n();
+
+const showDropdown = ref(false);
+const props = defineProps(['meta', 'resource']);
+
+const selectedLanguage = ref('');
+
+function doChangeLang(lang) {
+  setLocalLang(lang);
+  // unfortunately, we need this to recall all APIs
+  document.location.reload();
+
+}
+
+
+const options = computed(() => {
+  return props.meta.supportedLanguages.map((lang) => {
+    return {
+      value: lang.code,
+      label: lang.name,
+    };
+  });
+});
+
+const selectedOption = computed(() => {
+  const val = options.value.find((option) => option.value === selectedLanguage.value);
+  if (val) {
+    return val;
+  }
+  return options.value[0];
+});
+
+
+onMounted(() => {
+  console.log('Language In user menu mounted', props.meta.supportedLanguages);
+  selectedLanguage.value = getLocalLang(props.meta.supportedLanguages);
+  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, selectedLanguage.value);
+  // todo this mounted executed only on this component mount, f5 from another page apart login will not read it
+});
+
+
+
+
+
+
+
+</script>

package/custom/LanguageUnderLogin.vue

@@ -0,0 +1,76 @@
+<template>
+  <p class="text-gray-500 dark:text-gray-400 font-sm text-left mt-3 flex items-center justify-center">
+    <Select
+      class="w-full"
+      v-model="selectedLanguage"
+      :options="options"
+      :placeholder="$t('Select language')"
+    >
+      <template #item="{ option }">
+        <span class="mr-1">
+          <span class="flag-icon"
+            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
+          ></span> 
+
+        </span>
+        <span>{{ option.label }}</span>
+      </template>
+
+      <template #selected-item="{option}">
+        <span class="mr-1">
+          <span class="flag-icon"
+            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
+          ></span>
+        </span>
+        <span>{{ option.label }}</span>
+      </template>
+    </Select>
+  </p>
+</template>
+
+<script setup>
+import Select from '@/afcl/Select.vue';
+import 'flag-icon-css/css/flag-icons.min.css';
+import { setLang, getCountryCodeFromLangCode, getLocalLang } from './langCommon';
+import { useCoreStore } from '@/stores/core';
+
+import { computed, ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { setLocaleMessage, locale } = useI18n();
+
+
+const props = defineProps(['meta', 'resource']);
+
+const selectedLanguage = ref('');
+const coreStore = useCoreStore();
+
+watch(() => selectedLanguage.value, async (newVal) => {
+  await setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, newVal);
+  coreStore.getPublicConfig();
+});
+
+
+const options = computed(() => {
+  return props.meta.supportedLanguages.map((lang) => {
+    return {
+      value: lang.code,
+      label: lang.name,
+    };
+  });
+});
+
+onMounted(() => {
+  console.log('LanguageUnderLogin mounted', props.meta.supportedLanguages);
+  selectedLanguage.value = getLocalLang(props.meta.supportedLanguages);
+  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, selectedLanguage.value);
+  // todo this mounted executed only on this component mount, f5 from another page apart login will not read it
+});
+
+
+
+
+
+
+
+</script>

package/custom/langCommon.ts

@@ -0,0 +1,89 @@
+
+import { callAdminForthApi } from '@/utils';
+
+
+const messagesCache: Record<
+    string,
+    {
+        ts: number;
+        messages: Record<string, string>;
+    }
+> = {};
+
+// cleanup messages after a 2 minutes (cache for instant switching)
+setInterval(() => {
+    const now = Date.now();
+    for (const lang in messagesCache) {
+        if (now - messagesCache[lang].ts > 10 * 60 * 1000) {
+            delete messagesCache[lang];
+        }
+    }
+}, 60 * 1000);
+
+// i18n is vue-i18n instance
+export async function setLang({ setLocaleMessage, locale }: any, pluginInstanceId: string, langIso: string) {
+
+    if (!messagesCache[langIso]) {
+        const messages = await callAdminForthApi({
+            path: `/plugin/${pluginInstanceId}/frontend_messages?lang=${langIso}`,
+            method: 'GET',
+        });
+        messagesCache[langIso] = {
+            ts: Date.now(),
+            messages: messages
+        };
+    }
+    
+    // set locale and locale message
+    setLocaleMessage(langIso, messagesCache[langIso].messages);
+
+    // set the language
+    locale.value = langIso;
+
+    document.querySelector('html').setAttribute('lang', langIso);
+    setLocalLang(langIso);
+}
+
+// only remap the country code for the languages where language code is different from the country code
+// don't include es: es, fr: fr, etc, only include the ones where language code is different from the country code
+const countryISO31661ByLangISO6391 = {
+    en: 'us', // English → United States
+    zh: 'cn', // Chinese → China
+    hi: 'in', // Hindi → India
+    ar: 'sa', // Arabic → Saudi Arabia
+    ko: 'kr', // Korean → South Korea
+    ja: 'jp', // Japanese → Japan
+    uk: 'ua', // Ukrainian → Ukraine
+    ur: 'pk', // Urdu → Pakistan
+};
+
+export function getCountryCodeFromLangCode(langCode) {
+    return countryISO31661ByLangISO6391[langCode] || langCode;
+}
+
+
+const LS_LANG_KEY = `afLanguage`;
+
+export function getLocalLang(supportedLanguages: {code}[]): string {
+    let lsLang = localStorage.getItem(LS_LANG_KEY);
+    // if someone screwed up the local storage or we stopped language support, lets check if it is in supported languages
+    if (lsLang && !supportedLanguages.find((l) => l.code == lsLang)) {
+        lsLang = null;
+    }
+    if (lsLang) {
+        return lsLang;
+    }
+    // read lang from navigator and try find what we have in supported languages
+    const lang = navigator.language.split('-')[0];
+    const foundLang = supportedLanguages.find((l) => l.code == lang);
+    if (foundLang) {
+        return foundLang.code;
+    }
+    return supportedLanguages[0].code;
+}
+
+export function setLocalLang(lang: string) {
+    localStorage.setItem(LS_LANG_KEY, lang);
+}
+
+  

package/custom/package-lock.json

@@ -0,0 +1,24 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "custom",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "flag-icon-css": "^4.1.7"
+      }
+    },
+    "node_modules/flag-icon-css": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-4.1.7.tgz",
+      "integrity": "sha512-AFjSU+fv98XbU0vnTQ32vcLj89UEr1MhwDFcooQv14qWJCjg9fGZzfh9BVyDhAhIOZW/pGmJmq38RqpgPaeybQ==",
+      "deprecated": "The project has been renamed to flag-icons",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

package/custom/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "flag-icon-css": "^4.1.7"
+  }
+}

package/custom/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  }
+}

package/dist/custom/LanguageInUserMenu.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="min-w-40">
+    <div class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black 
+      hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive 
+      w-full select-none	"
+      :class="{ 'bg-black bg-opacity-10	': showDropdown }"
+      @click="showDropdown = !showDropdown"
+    >
+      <span class="mr-1">
+        <span class="flag-icon"
+          :class="`flag-icon-${getCountryCodeFromLangCode(selectedOption.value)}`"
+        ></span>
+      </span>
+      <span>{{ selectedOption.label }}</span>
+
+      <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
+          :class="{ 'transform rotate-180': showDropdown }"
+      />
+    </div>
+
+    <div v-if="showDropdown" >
+      
+      <div class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm 
+        text-black dark:text-darkSidebarTextHover
+        bg-black bg-opacity-10	
+        hover:brightness-110
+        hover:text-lightPrimary dark:hover:text-darkPrimary
+        hover:bg-lightPrimaryContrast dark:hover:bg-darkPrimaryContrast
+        w-full text-select-none pl-5 select-none"
+        v-for="option in options.filter((opt) => opt.value !== selectedOption.value)"
+        @click="doChangeLang(option.value)"
+      >
+        <span class="mr-1">
+          <span class="flag-icon"
+            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
+          ></span>
+        </span>
+        <span>{{ option.label }}</span>
+      
+      </div>
+    </div>
+
+   
+  </div>
+</template>
+
+<script setup>
+import 'flag-icon-css/css/flag-icons.min.css';
+import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+
+import { setLang, getCountryCodeFromLangCode, getLocalLang, setLocalLang } from './langCommon';
+
+import { computed, ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { setLocaleMessage, locale } = useI18n();
+
+const showDropdown = ref(false);
+const props = defineProps(['meta', 'resource']);
+
+const selectedLanguage = ref('');
+
+function doChangeLang(lang) {
+  setLocalLang(lang);
+  // unfortunately, we need this to recall all APIs
+  document.location.reload();
+
+}
+
+
+const options = computed(() => {
+  return props.meta.supportedLanguages.map((lang) => {
+    return {
+      value: lang.code,
+      label: lang.name,
+    };
+  });
+});
+
+const selectedOption = computed(() => {
+  const val = options.value.find((option) => option.value === selectedLanguage.value);
+  if (val) {
+    return val;
+  }
+  return options.value[0];
+});
+
+
+onMounted(() => {
+  console.log('Language In user menu mounted', props.meta.supportedLanguages);
+  selectedLanguage.value = getLocalLang(props.meta.supportedLanguages);
+  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, selectedLanguage.value);
+  // todo this mounted executed only on this component mount, f5 from another page apart login will not read it
+});
+
+
+
+
+
+
+
+</script>