I try to use require-handlebars-plugin with i18n functionality.
But, Even if I change my browser language, require try to load the default file 'en_us.json'.
I can set a locale value in require js config to "force" to load the right file. But I don't think it is the good way to "how use it".
define({
name: 'The Handle of the Bars',
require: {
paths: {
handlebars: 'components/require-handlebars-plugin/Handlebars',
hbs: 'components/require-handlebars-plugin/hbs',
i18nprecompile: 'components/require-handlebars-plugin/hbs/i18nprecompile',
json2: 'components/require-handlebars-plugin/hbs/json2'
},
// locale: (navigator.language.substring(0, 2) === 'en') ? 'en' : 'fr',
hbs: {
disableI18n : false,
disableHelpers: true,
templateExtension: 'hbs'
}
},
What am I missing ? :)
Oh and I have also an other question :
Is it possible to set a default value if the language isn't found ?
For example, if the browser language is set to "de", but My application have only en and fr translations.
Answer to second question:
var availableLocales = ['en', 'fr'];
var browserLocale = navigator.language.substring(0, 2);
var locale = availableLocales.indexOf(browserLocale) >= 0 browserLocale : 'en'; // 'en' is default locale
Related
in the TYPO3 Docu we can read the example: Using Site Configuration in TypoScript
Site-Config Yaml to typoscript.
But this Code-Example work only in the "page" corner.
page.10 = TEXT
page.10.data = site:base
page.10.wrap = This is your base URL: |
And i use this here in the FLUIDTEMPLATE:
page {
10 {
variables {
# BaseURL
siteConfigBase = TEXT
siteConfigBase {
data = site:base
}
}
}
This works fine, in the f.debug is the right output siteConfigBase = https://example.org
How can i pass the values to config.baseURL ?
config.baseURL supports only strings but not stdWrap.
But you can use a condition to get what you want:
[site("identifier") == "foo"]
config.baseURL = foo
[global]
The identifier is the name of the folder of your site configuration.
I'm doing an app using Laravel inertia and Vue, we wanted to add i18n to the app and use the same translation files for both laravel and i18n, the problem is the variable interpolation, laravel by default use :variable but vue i18n use {variable}
I tried to create a custom formatter based on what i've found here but using a custom formatter seems deprecated since I have this in my console: [intlify] Not supported 'formatter'.
I've seen on the official i18n doc that i18n is supposed to have an option for both prefix and suffix for the variable interpolation but it does not seems to exists in vue-i18n.
Does anyone ever experienced this or have an idea to solve this 'issue' ?
I run a for loop in my translation jsons and converted :variable syntax to {variable}
import {createI18n} from 'vue-i18n'
import zhCN from '../lang/zh-CN.json';
export function initializeI18n() {
let en = {};
Object.entries(zhCN).forEach(([key, value]) => {
let newEnValue = key;
en[key] = key;
if (value.includes(':')) {
let arr = value.match(/\B\:\w+/ig);
arr.forEach(matchedStr => {
let cleanMatchedStr = matchedStr.replace(':', '')
value = value.replace(matchedStr, `{${cleanMatchedStr}}`)
newEnValue = newEnValue.replace(matchedStr, `{${cleanMatchedStr}}`)
})
zhCN[key] = value;
en[key] = newEnValue;
}
})
return createI18n({
locale: window.__DEFAULT_LOCALE__,
fallbackLocale: window.__FALLBACK_LOCALE__,
messages: {
'zh-CN': zhCN,
en
},
silentFallbackWarn: true,
silentTranslationWarn: true
});
}
This was, putting in es.js
"Hello :name": "Hola :name"
should work as expected:
{{ $t("Hello :name", {name: 'world'}) }},
We've run into some problems for our MultiSite Spartacus setup when doing I18n.
We'd like to have different translations for each site, so we put these on an API that can give back the messages dependent on the baseSite, eg: backend.org/baseSiteX/messages?group=common
But the Spartacus setup doesn't let us pass the baseSite? We can
pass {{lng}} and {{ns}}, but no baseSite.
See https://sap.github.io/spartacus-docs/i18n/#lazy-loading
We'd could do it by overriding i18nextInit, but I'm unsure how to achieve this.
In the documentation, it says you can use crossOrigin: true in the config, but that does not seem to work. The type-checking say it's unsupported, and it still shows uw CORS-issues
Does someone have ideas for these problems?
Currently only language {{lng}} and chunk name {{ns}} are supported as dynamic params in the i18n.backend.loadPath config.
To achieve your goal, you can implement a custom Spartacus CONFIG_INITIALIZER to will populate your i18n.backend.loadPath config based on the value from the BaseSiteService.getActive():
#Injectable({ providedIn: 'root' })
export class I18nBackendPathConfigInitializer implements ConfigInitializer {
readonly scopes = ['i18n.backend.loadPath']; // declare config key that you will resolve
readonly configFactory = () => this.resolveConfig().toPromise();
constructor(protected baseSiteService: BaseSiteService) {}
protected resolveConfig(): Observable<I18nConfig> {
return this.baseSiteService.getActive().pipe(
take(1),
map((baseSite) => ({
i18n: {
backend: {
// initialize your i18n backend path using the basesite value:
loadPath: `https://backend.org/${baseSite}/messages?lang={{lng}}&group={{ns}}`,
},
},
}))
);
}
}
and provide it in your module (i.e. in app.module):
#NgModule({
providers: [
{
provide: CONFIG_INITIALIZER,
useExisting: I18nBackendPathConfigInitializer,
multi: true,
},
],
/* ... */
})
Note: the above solution assumes the active basesite is set only once, on app start (which is the case in Spartacus by default).
I deployed my nextjs app to Vercel and it was a success.
I can see a preview of the website and even the log saying it works well.
But i try to access the website via the default Vercel domain :
https://tly-nextjs.vercel.app/
I get an ERR_TOO_MANY_REDIRECTS.
I do not have this problem locally.
I tried :
Disabling a language redirect that I use (/en for english folks, and / for french people).
Disabling the language detector of i18next.
But none of these solutions changed anything.
Any ideas ?
i18n.js file
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Cache from 'i18next-localstorage-cache';
import LanguageDetector from 'i18next-browser-languagedetector';
const fallbackLng = ['fr'];
const availableLanguages = ['fr', 'en'];
const en = require('./locales/en/common.json');
const fr = require('./locales/fr/common.json');
const options = {
order: ['querystring', 'navigator'],
lookupQuerystring: 'lng'
}
const cacheOptions = {
// turn on or off
enabled: true,
// prefix for stored languages
prefix: 'i18next_res_',
// expiration
expirationTime: 365*24*60*60*1000,
// language versions
//versions: {}
}
i18n
.use(Cache)
.use(initReactI18next)
.use(LanguageDetector)
.init({
cache: cacheOptions,
fallbackLng: fallbackLng,
debug: true,
detection: options,
supportedLngs: availableLanguages,
nonExplicitSupportedLngs: true,
resources: {
en: {translation: en},
fr: {translation: fr},
},
interpolation: {
escapeValue: false,
},
react: {
wait: true,
useSuspense: true,
},
});
export default i18n;
My change Language function :
const changeLanguageInHouse = (lang, bool) => {
setLoading(true);
i18next.changeLanguage(lang).then((t) => {
setLanguage(lang);
bake_cookie("langChoice", lang);
setLoading(false);
if (bool === true) {
var newUrl2 = (lang === "fr" ? "" : "/en") + asPath;
window.location.replace(newUrl2);
}
});
};
What happend at your server is following:
You enter https://tly-nextjs.vercel.app/ and it is redirected to /en with HTTP-Status-Code 307 (Temporary Redirect).
And /en redirect with 301 (Permanent Redirect) to /.
You can reproduce this by open the Browser-Dev-Tools and have a look at the Network Tab.
It might be, that you have some kind of url-rewriting activated at your server, which redirect everything to your domain-root.
Is there a public repo available for this? Here is how it worked for me.
Try changing the order of the locales and the default locale (not sure this helps, but it changed something for me. Undocumented if that is the case!)
So I put the default locale first (which is nl for me) in both the locales array and the domains array.
Let me know if that helps!
module.exports = {
i18n: {
localeDetection: false,
// These are all the locales you want to support in
// your application
locales: ['nl', 'en'],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: 'nl',
// This is a list of locale domains and the default locale they
// should handle (these are only required when setting up domain routing)
domains: [
{
domain: 'example.be',
defaultLocale: 'nl',
},
{
domain: 'example.com',
defaultLocale: 'en',
},
],
},
trailingSlash: true,
};
I changed all my getInitialProps to getServerSideProps
and realised I was doing a redirect on response :
res.writeHead(301, { Location: "/" })
I just delete it.
And now I don't have this endless redirect.
Doing this worked for me...
https://ardasevinc.tech/cloudflare-vercel-too-many-redirects
I think it's the actual solution to the cause of the problem rather than a bandage!
I'm using DocPad to generate system documentation. I am including release notes in the format
http://example.com/releases/1.0
http://example.com/releases/1.1
http://example.com/releases/1.2
http://example.com/releases/1.3
I want to include a link which will redirect to the most recent release.
http://example.com/releases/latest
My question: how do I make a link that will redirect to a relative URL based on configuration? I want this to be easily changeable by a non-programmer.
Update: I've added cleanurls into my docpad.js, similar to example below. (see code below). But using "grunt docpad:generate" seems to skip making the redirect (is this an HTML page?). I've a static site. I also confirmed I'm using the latest cleanurls (2.8.1) in my package.json.
Here's my docpad.js
'use strict';
var releases = require('./releases.json'); // list them as a list, backwards: ["1.3", "1.2", "1.1", "1.0"]
var latestRelease = releases.slice(1,2)[0];
module.exports = {
outPath: 'epicenter/docs/',
templateData: {
site: {
swiftype: {
apiKey: 'XXXX',
resultsUrl: '/epicenter/docs/search.html'
},
ga: 'XXXX'
},
},
collections: {
public: function () {
return this.getCollection('documents').findAll({
relativeOutDirPath: /public.*/, isPage: true
});
}
},
plugins: {
cleanurls: {
simpleRedirects: {'/public/releases/latest': '/public/releases/' + latestRelease}
},
lunr: {
resultsTemplate: 'src/partials/teaser.html.eco',
indexes: {
myIndex: {
collection: 'public',
indexFields: [{
name: 'title',
boost: 10
}, {
name: 'body',
boost: 1
}]
}
}
}
}
};
When I run grunt docpad:generate, my pages get generated, but there is an error near the end:
/data/jenkins/workspace/stage-epicenter-docs/docs/docpad/node_modules/docpad-plugin-cleanurls/node_modules/taskgroup/node_modules/ambi/es6/lib/ambi.js:5
export default function ambi (method, ...args) {
^^^^^^
I can't tell if that's the issue preventing this from running but it seems suspicious.
Providing that your configuration is available to the DocPad Configuration File, you can use the redirect abilities of the cleanurls plugin to accomplish this for both dynamic and static environments.
With a docpad.coffee configuration file, it would look something like this:
releases = require('./releases.json') # ['1.0', '1.1', '1.2', '1.3']
latestRelease = releases.slice(-1)[0]
docpadConfig =
plugins:
cleanurls:
simpleRedirects:
'/releases/latest': '/releases/' + latestRelease
module.exports = docpadConfig