Access a specific version of text in Vue I18n - vue.js

I wanted to access a specific version of a text in my localized strings for example.
en : {
title: "Title from en"
},
ja: {
title: "Title from Ja"
}
if the selected locale is ja
I want to access title from the english(en) locale.
something like this $t("title", "en").

Related

Sanity CMS, using type "object" as reference

Is it not possible to use an object type as a reference in sanity? For example this is not working. When I go to the field nothing shows up. If I can't do this how can I access the indexPage objects that have been created under other documents?
export const indexPage = {
title: "Index Page",
name: "indexPage",
type: "object",
fields: [
{
title: "Subheading",
name: "subheading",
type: "array",
of: [{ type: 'block' }]
},
{
title: "Content",
name: "content",
type: "array",
of: [{ type: "block" }]
},
]
}
// in another file
export const coolPage = {
title: "Cool Page",
name: "coolPage",
type: "object",
fields: [
{
title: "Reference Index Page",
name: "refIndexPage",
type: "reference",
to: [{ type: 'indexPage' }]
}
]
}
References can only point to other documents; not to a specific part of a document. So to achieve this, indexPage would need to be a document.
I think modelling indexPage as a document would be a viable option in your case. You mentioned "indexPage objects that have been created under other documents". Instead of creating indexPage data inside a specific document, indexPage should be its own document type. Any other document can then connect to it via a reference. This approach should be really flexible for you.
Sanity Studio recently added support for "references in place", which makes this workflow even better. The studio now allows you to create a document to reference while you are editing the document that references it—without leaving the editor. You can see a demo here (no extra work on your part is needed here, it's handled automatically by Sanity Studio).
In summary: if you have a piece of data you'd like to share between multiple documents, model it as its own document type that is referenced by every document that is related.

Custom 'rendering' of Display Value completing a Survey in SurveyJS

I can't find anything in the documentation of SurveyJS. If there is something I missed, a link would be great!
We have implemented a Custom Widget as described here and it works well. What we want to do next is to change the Display Value on the 'Survey Results' section when testing the survey from the creator. In other words, a 'Signature' question's result is displayed as data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAABS39xVAAAUGklEQVR4nO3dz28j53kH8PwZFYM6btOGAnIwWpRCe2iLAFSK2IgLUD20PTRa9GL4IiUHF2hBnZxDUuoSyT8623rLxAmpbFdCxaVn15n1luQOC3K7IW1yzRKt6HpEgQfyMOSBGPDy9CC9s8MhJc4MZzjvkN8PwIN3sdrZxerr933meZ/3KwQAEBBf8fsBAACsQmABQGAgsAAgMBBYABAYCCwACAwEFgAEBgILAAIDgQUAgYHAAoDAQGABQGAgsABM1JFGtX6Xav0upZUGHZ1ffm63qhOfYu+Cir0LqvW7fj/2SkBgwcpSRxqJnTPab5bp1tMsbebSFMocUihzSGFRoIiUpJh8rH+2y9mx/47mUhSRkhQWBf3XrYsCbRVPaLci0e1WlWr9LinDgd9...
but we don't want to do this, we want to render the result... but not for the signature but for our custom widget.
Also, is there a function to review your answers before submitting? If there is, we'll most probably also need to display a rendered answer of our custom widget here.
Showing a preview of answers before submitting
There is a SurveyJS feature, which does that. To enable it you need to add a survey-level parameter called showPreviewBeforeComplete. You can choose from the following values:
showAllQuestions
showAnsweredQuestions
This feature will automatically render all images or signatures on the preview page.
The feature is also available through the Survey Creator's UI under the "Navigation" section of the survey settings panel.
Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "signaturepad",
"name": "question1"
}
]
}
],
"showPreviewBeforeComplete": "showAnsweredQuestions"
}
Rendering uploaded images
If you would like to create your own widget, which renders uploaded images or signatures, you can base it on the HTML widget. It should contain an <img src='{question1}' /> tag, where the value of the src parameter should be the base64 data string, which you retrieved from the signature pad widget.
Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "signaturepad",
"name": "question1"
}
]
},
{
"name": "page2",
"elements": [
{
"type": "html",
"name": "question2",
"html": "<img src='{question1}' />"
}
]
}
]
}

docusaurus about sidebars of docusaurus to multi-language

I use 'Docusaurus' to docs but I don`t know How to config multi-language sideBar.
[
'#docusaurus/preset-classic',
{
docs: {
path: 'docs',
routeBasePath: '/',
sidebarPath: require.resolve('./sidebars.js')
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
]```
The code only use a kind of sidebars, if I switch the language The sidebars can`t switch.
run the write-translations command, for example your locale is zh-cn, when command finished, you will get a current.json file in the i18n/zh-cn/docusaurus-plugin-content-docs directory
yarn run write-translations -- --locale zh-cn
the current.json contains the docs sidebar's category labels, modify it like the following:
{
"version.label": {
"message": "5.0.0.alpha.1",
"description": "The label for version current"
},
"sidebar.docsSidebar.category.Getting Started": {
"message": "开始上手",
"description": "The label for category Getting Started in sidebar docsSidebar"
},
"sidebar.docsSidebar.category.Guides": {
"message": "指南",
"description": "The label for category Guides in sidebar docsSidebar"
}
}
for more details, refer to:https://docusaurus.io/docs/next/i18n/tutorial#translate-plugin-data
Docusaurus allows you to add a navbar item so the user can select the language they want. You can enable the dropdown by adding the code below, as explained in the official documentation, to the docusaurus.config.js file.
If you want to find out more you can also have a look at this video in which I explain all the steps you need to follow to translate your Docusaurus website.
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'localeDropdown',
position: 'left',
},
],
},
},
};
if I switch the language The sidebars can`t switch
If you properly prepared i18n JSON files, when you switch the locale (language), the sidebar label will show different languages.

How make i18n for vuetify

In my vue.js 2.5.7 / vuetify": "^1.0.8" application I read i18n support
https://vuetifyjs.com/en/framework/internationalization#vue-i18n
and adding lines in my resources/assets/js/app.js :
import en from 'vuetify/src/locale/en' // English
import es from 'vuetify/src/locale/es' // Has no Spain files
import uk from 'vuetify/src/locale/uk' // Ukrainian
Vue.use( Vuetify, {
lang: {
locales: {en, es, uk},
current: 'en'
}
});
and got error in my console :
ERROR in ./resources/assets/js/app.js
Module not found: Error: Can't resolve 'vuetify/src/locale/en' in '/mnt/_work_sdb8/wwwroot/lar/ArtistsRating/resources/assets/js'
1) Looks like I need to upload some i18n files to my project, but I did not find from where and into which subdir?
2) There si no spain support? It was not in listing in ref above...
Thanks!
From the documentation
Create a folder in your project like projectName//i18n/vuetify/ and there create a file that with name es.ts. It should look something like this:
export default {
"dataIterator": {
"rowsPerPageText": "Items per page:",
"rowsPerPageAll": "All",
"pageText": "{0}-{1} of {2}",
"noResultsText": "No matching records found",
"nextPage": "Next page",
"prevPage": "Previous page"
},
"dataTable": {
"rowsPerPageText": "Rows per page:"
},
"noDataText": "No data available"
}
Then in your main js file app.js you should have:
import Vuetify from 'vuetify'
// Your own translation file
import es from './i18n/vuetify/es'
Vue.use(Vuetify, {
lang: {
locales: { es },
current: 'es'
}
})
I haven't tested this but hope it will work.
You need only to change vuetify/src/locale/en by vuetify/lib/locale/en and it should works without the need to create any additional file (spain in now supported by vuertify)

howa to change home to accueil in seedstack Business Theme

I develop an application using the theme seedstack Business Theme, the default theme generates the seedbare part with the home tab, how can I change home by acceuil or another word?
The attached image shows my problem.
!sidebare picture where i want to change the term home for acceuil
this is the code for w20.app.json file:
{
"w20-core": {
"modules": {
"application": {
"home": "/accueil/accueil"
}
}
},
"w20-business-theme": {
"modules": {
"main": {
"sidebar": {
"width": 270
}
}
}
}
}
The home link in the sidebar is automatically generated and its label is based on the translation of i18n key w20.menu.sidebar.home in the currently active culture (or locale).
Since you haven't configured i18n specifically in your application, the default culture is generic english ('en'). To configure i18n, add the following configuration to your w20.app.json file:
{
"w20-core": {
"modules": {
"culture": {
"available": [ "en", "fr" ] // add any culture you need
"default": "fr" // the default culture of your application
}
}
}
}
This configuration make two cultures available in the application (generic english and generic french) with generic french as the default. A culture switcher will be displayed in the topbar.
W20 is provided with translations for english and french only. If you need to add languages, you have to provide your own translations files. Check the documentation for more information about it.