put https link in i18n translation file in react - reactjs

I'm using i18n into translate my multi language react project.
I have a sentences that contain (:) character:
"e.g https://192.168.1.15 or https://example.com"
and I want to translate that to Persian like this:
"مثال: https://192.168.1.15 یا https://example.com"
I put that in my translation file like this:
export default {
"e.g https://192.168.1.15 or https://example.com": "مثال: https://192.168.1.15 یا https://example.com",
}
but it doesn't work. I realized the ":" is the issue . What I see is this:
"//192.168.1.15 or httpsfalse//example.com"
How can I Use (:) character in my translation in i18n?

":" has a special meaning when inside a translation key, it means what is the namespace which the key belongs to.
I had similar issue with one of mine translation keys, the solution was to ignore the namespace in that specific key.
t("Welcome to React :)", {nsSeparator: false})
// ---------------------------^ this will make the lib to ignore the ":"
For more info, you can read this bug

I used this solution:
t("e.g.", {
urlIP: "https://192.168.1.15",
urlDomain: "https://example.com",
})
and put this code in my translation file:
en.js:
"e.g.": "e.g. {{urlIP}} or {{urlDomain}}",
fa.js:
"e.g.": "مثال: {{urlIP}} یا {{urlDomain}}",
It's not the best solution and I think there is a better way to resolve this issue, but it works for now.
If you know better solution, I am glad to hear from you.

Related

Semantic Syntax Markup Language (SSML) on blueprint?

I was trying to use SSML syntax while filling out the Alexa blueprint skill form but then I got an error. Is there a way the form can support SSML?
Entry:
<amazon:effect name="whispered">I am not a real human.</amazon:effect>.
Error:
Special characters are not supported. However, Alexa can speak special characters ( # # $ % _ + = | ; ), if enclosed in single quotes ( '#' ).
Sorry, but (currently) you can only use PlainText in blueprint based skills, because (as you mentioned the error message) the special characters needed for an XML based syntax are not supported by the form.
Just an additional hint to your SSML text, if you want to use it in a regular skill:
As a XML based syntax it needs embracing speak tag and no outside/final dot.
<speak><amazon:effect name="whispered">I am not a real human.</amazon:effect></speak>
https://developer.amazon.com/en-US/docs/alexa/custom-skills/speech-synthesis-markup-language-ssml-reference.html

Unable to get type-safety (CustomTypeOptions) working with react-i18next

I recently successfully implemented using react-18next for localization needs inside my app. I have a small package that contains the localization files, react-i18next setup, and exports a class which is referenced in another application to get the i18n instance and pass it to the which wraps my components.
This has been deployed and works as expected.
I stumbled upon the documentation here (https://react.i18next.com/latest/typescript#create-a-declaration-file), which says that you are able to make the t function fully type safe. I would love to implement this, so that I am able to catch mis-matched key errors at compilation time, rather than needing to hunt for each case within the application.
I am having some trouble achieving this desired type-safety though, and wasnt sure if it was something that I am doing wrong or possibly a bug in the typing (I assume the former, as others seem to get the safety working without any issue).
Versions:
react-i18next “^11.15.6”
i18next “^21.6.14”
react “16.14.0”
typescript 4.1+
Repo structure (excluding package.json, tsconfig.json, etc) :
src
translations
translations_en.json
translations_es.json
MyTranslationManager.ts
react-i18next.d.ts
The translation files do not use any nested strings, and are separated by language (”_en” vs “_es”). Each language has all the needed strings in their localized format. The files are in this format:
{
"string1": "First string",
"string2": "Second string"
}
In my live (working) setup, this is how I initialize my instance:
import translationEN from "./translations/translations_en.json";
export class MyTranslationManager {
private readonly i18nInstance: i18nType;
constructor() {
this.i18nInstance = i18n.createInstance();
const defaultResources = {
en: { translation: { ...translationEN } },
};
this.language = "en";
this.i18nInstance
.use(initReactI18next)
.init({
resources: defaultResources,
lng: "en",
keySeparator: false, // we do not use nested translation resources
interpolation: {
escapeValue: false, // React already prevents XSS
},
});
}
// WORKING ON TYPE SAFETY
As directed in the docs, I create a react-i18next.d.s file to redeclare the “react-i18next” module - specifically the CustomTypeOptions interface:
import "react-i18next";
import translationEN from "./translations/translations_en.json";
declare module "react-i18next" {
interface CustomTypeOptions {
resources: typeof translationEN;
}
}
I do not declare a “defaultNS” option to CustomTypeOptions because I rely on the default namespace, “translation”.
When I attempt to compile the project with the above code, I get the following TS2344 issue:
node_modules/react-i18next/ts4.1/index.d.ts:203:25 - error TS2344:
Type 'string' does not satisfy the constraint 'Namespace<"btn_cancel" | "btn_save" | ... 86 more ... | "msg_unsavedChanges">'.
203 N extends Namespace = DefaultNamespace,
The error is thrown from each line in react-i18next/ts4.1/index.d.ts that attempts to set Namespace = DefaultNamespace.
I copied over as much of the code in index.d.ts as I could into the Typescript playground to try and get some insight into what is happening here, and I am able to get the compilation error to repro.
Hovering over the following items in the Typescript playground gives some interesting insight:
DefaultResources will resolve to { “btn_cancel”: string; “btn_ok”: string; }
DefaultNamespace will resolve to “ type DefaultNamespace<T = "translation"> = T extends "btn_cancel" | "btn_ok" ? T : string “
I assume this gets set by the use of the Fallback type, which gets passed in each key from DefaultResources via the keyof...
Link to playground.
My question is, why are the keys for the language files being set as the namespace? Is this by design? Am I importing the resources in an incorrect manner?
I noticed that the example here (https://github.com/i18next/react-i18next/blob/master/example/react-typescript4.1/no-namespaces/%40types/react-i18next/index.d.ts) only shows what the docs point to as an older version, i.e using the DefaultResources type instead of CustomTypeOptions. Any guidance on using the new method without namespaces would be greatly appreciated :)
For anyone working with i18next#v22.0.0 and react-i18next#v12.0.0, following the documentation here was successful for me (as of the time this was posted):
https://www.i18next.com/overview/typescript
I am now getting types for my translations inside of the t() function

How does TYPO3 generate the index of a file, as seen in its XML-website export data?

The following XML-code is an excerpt of a file generated using the TYPO3 website export feature. The export feature was configured to include the files used on the website:
...
<files_fal type="array">
<file index="008f35a8201e50eb24a9667092782ec0" type="array">
<filename>somefilename.jpg</filename>
<filemtime>1603259011</filemtime>
<content base64="1">...</conten>
<content_sha1>...</content_sha1>
</file>
</files_fal>
...
What I'd like to know is, how exactly the value of the index attribute (008f35a8201e50eb24a9667092782ec0) is generated in such a case. Thank you for any clues in that regard.
This looks pretty much like one of the hashes stored in the sys_file table. Should be identifier_hash to make any sense.
I found the answer by myself now (by looking into the PHP source code of TYPO3)
The string is created during export by concatenation of the storage uid of the file in the sys_file table, the identifer_hash from the same table with a : inbetween.
The resulting string is then turned into a hash using md5.
In pseudo-code:
hash = make_md5( storage_uid + ':' + identifier_hash )
Depending on how your md5 making function works, it may be necessary to encode the string as binary beforehand.

How to read config files on elixir mix project

I am creating an elixir project to search for patterns in files.
I want to store those patterns a config files to allow for easy changes in the app.
My first idea is storing those files as exs files in the config folder in the mix project.
So, the questions are:
Is there any easy way to store the config in the files a a keyword list?
How would I load it in the app?
I see there are modules like File to read the file, but is there no standard way to parse keyword lists in elixir? I was thinking something similar as the yml files in Rails.
You can read keyword lists stored in a *.exs file, using Mix.Config.read(path). For writing Elixir terms to a *.exs file, you can use Inspect.Algebra.to_doc(%Inspect.Opts{pretty: true}) and write the resulting string content to a file using File.write. It's not as well formatted as if you did it by hand, but it's definitely still readable.
If you don't mind using Erlang terms, you can read and write those easily using :file.consult(path) and :file.write_file(:io_lib.fwrite('~p.\n', [config]), path) respectively.
Using Code.eval_file
Adding another option, is to evaluate the file as a code file, using Code.eval_file and get in return the result as an elixir construct.
Config file config1.ex:
%{configKey1: "configValue1", configKey2: "configValue2"}
Reading the file:
{content, _} = Code.eval_file("config1.ex")
*evaluating a code file has security consideration needs to take in mind.
Regarding using Mix.Config.read! in #bitwalker correct answer
the config file needs to be in a specific format of:
[
appName: [key1: "val1", key2: "val2"]
]
In the Mix.Config.read code, it try to validate the contents and expect a main keyword list [ {}, {}.. ] which includes keys that has value of type keyword list also.
The code is not long:
def validate!(config) do
if is_list(config) do
Enum.all?(config, fn
{app, value} when is_atom(app) ->
if Keyword.keyword?(value) do
true
else
raise ArgumentError,
"expected config for app #{inspect app} to return keyword list, got: #{inspect value}"
end
_ ->
false
end)
else
raise ArgumentError,
"expected config file to return keyword list, got: #{inspect config}"
end
end
We can circumvent and use a first key which is not atom, and then the validate stops but does not throw:
[
{"mockFirstKey", "mockValue"},
myKey1: "myValue1",
myKey2: "myValue2"
]

Help with atk4-web, atk4-example ver. 4.03

I don't now where can I find help. None forums about atk4.
Can you help me, please?
atk4-web (4.0.3):
How run atk4-web localy, where is site dump (mysql database)?
What is mean this error:
No such tag (version) in template for Object AgileToolkitWeb(agile_project). Tags are: page_title, page_title#1, seo_keywords, seo_keywords#2, seo_descr, seo_descr#3, template, template#4, template#5, template#6, template#7, template#8, template#9, os, os#10, js_include, js_include#11, document_ready, document_ready#12, section, section#13, template#14, menu_about, menu_about#15, page, page#16, menu_doc, menu_doc#17, page#18, menu_develop, menu_develop#19, page#20, menu_services, menu_services#21, page#22, menu_download, menu_download#23, page#24, menu_blog, menu_blog#25, page#26, link_comparison, link_comparison#27, link_example, link_example#28, link_tour, link_tour#29, Content, Content#30, TabContent, TabContent#40
D:\Www\atk4web\atk4\lib\SMlite.php:341
atk4-example (4.0.3):
Why page has not javascrip included, when I allow ->check() in Frontend?
What is difference between empty.html and shared.html?
empty.html:
shared.html:
Why I got error when I did change in empty.html to:
Thanks.
Agile Toolkit uses template engine called 'SMlite'. Its very basic and allows you to load template, then set tags to a certain value.
$tpl->trySet('mytag',123);
Views in Agile Toolkit rely on this template engine and will try to generate their output and place inside parent's template. In your case object was instructed to use spot which did not exist in the template.
Read section about adding here: http://agiletoolkit.org/doc/learn, it should be helpful.
There are no need for JavaScript on auth login form. It also bypasses some of the UI/functionality due to security reasons. You can either create your own empty.html by placing it into template/jui/empty.html (without atk4) and enable javascript in there.
Also sequence of adding jUI and executing auth->check() might change this, but I'm not sure.

Resources