Im trying to use nuxt-I18n module for localization.
I have installed "nuxt-i18n": "^6.4.1"
Also in my nuxt.config.js i have the fallowing
modules: [
[
'nuxt-i18n',
{
defaultLocale: 'en',
lazy: true,
langDir: 'locales/',
locales: [
{
code: 'mk',
name: 'Македонски',
file: 'mk.js',
},
{
code: 'en',
name: 'English',
file: 'en.js',
},
],
},
],
],
I also created folder locale where i have my 2 files where i write my localization. Mostly of the text in my project is simple so I was doing fine with this setup. However i end up on a problem.
I have a text paragraph with a link inside that goes something like this:
<p>Lorem ipsum This is link dolor sit amet. </p>
I was trying to solve this with component that comes of i18n but i had a lot of errors with it.
Can anyone give me an example how to solve this ?
I solved my problem so I want it to share if someone faces the same.
To understand better you can read the fallowing link about component interpolation.
<i18n path="text" tag="p">
<template v-slot:link>
<a>{{ $t('link') }}</a>
</template>
</i18n
And my locales look like:
en: {
text: 'You can check {link} for more details.',
link: 'component interpolation',
}
Related
TailwindCSS is looking like a great frontend tool but I'm wondering how to use it with the Rails Slim template language?
For example:
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
If I run it through HTML2SLIM I get this recommendation:
.bg-red-500.sm:bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500
Which produces the following HTML:
<div class="bg-red-500 sm">
<bg-green-500 class="md">
<bg-blue-500 class="lg">
<bg-pink-500 class="xl">
<bg-teal-500></bg-teal-500>
</bg-pink-500>
</bg-blue-500>
</bg-green-500>
</div>
It seems that the colon ':' is interperted as multiple html elemments. Im wondering if there's a way around this? I'd love to use Slim with TailwindCSS.
So far I've made some progress using Rails' content_tag:
= content_tag :span, 'Accounts', class: 'invisible md:visible lg:visible'
But I can only go so far with this.
Another option is to configure Tailwind to use another separator as documented here: https://tailwindcss.com/docs/configuration/#separator
// tailwind.config.js
module.exports = {
separator: "_",
}
Then you could do .sm_bg-green-500 and so on.
There are also class names like .w-1/2 in Tailwind, that are not affected by this setting. You could add custom class names to work around that, e.g.
// tailwind.config.js
module.exports = {
…
theme: {
extend: {
width: {
"1-of-2": "50%"
}
}
}
}
and then use .w-1-of-2.
It's just not possible to have these colons in the class shorthand notation. You can do the following though
div class="bg-red-500.sm::bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500"
which results in the desired HTML:
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
I'm currently building a Yeoman generator, and although I seem to have mastered the basics, I'm struggling to figure out how to include various dependencies only when the user chooses to include them.
After looking at some existing generators, I've worked out that a checkbox prompt is the standard way of allowing users to select which dependencies they'd like to include in their new app:
var prompts = [{
type: 'checkbox',
name: 'features',
message: 'What more would you like?',
choices: [{
name: 'Sass',
value: 'includeSass',
checked: true
}, {
name: 'Bootstrap',
value: 'includeBootstrap',
checked: true
}, {
name: 'Modernizr',
value: 'includeModernizr',
checked: true
}]
}];
From here on in though, I'm stumped. What I'd like is to allow users to choose what dependencies they'd like to include both using bower, and NPM (through the package.json file).
How would I go about doing this?
Thanks in advance for any help!
Making sure to only include the dependencies the user needs is a good practice!
The easiest way - and also the way the official generators do it - is to make the package.json you're generating a template. The template can then include arbitrary conditions to mix and match the packages you need.
The first step is to export the answers from the prompt, so they're available in the template:
this.prompt(prompts, function (answers) {
var features = answers.features;
function hasFeature(feat) {
return features && features.indexOf(feat) !== -1;
}
this.includeSass = hasFeature('includeSass');
this.includeBootstrap = hasFeature('includeBootstrap');
this.includeModernizr = hasFeature('includeModernizr');
}.bind(this));
The template for the example would then look something like this. The <% ... %> syntax is actual JavaScript and is executed before the result is written to disk.
templates/_package.json
{
"name": "<%= _.slugify(appname) %>",
"dependencies": {
"my-dependency-a": "^0.4.5",<% if (includeModernizr) { %>
"modernizr": "^0.11.0",<% } %><% if (includeBootstrap) { %>
"bootstrap": "^3.3.4",<% } %>
"my-dependency-b": "^0.5.0"
},
"engines": {
"node": ">=0.10.0"
}
}
Back in your generator code, make sure to generate this file from the template:
packageJSON: function () {
this.template('_package.json', 'package.json');
}
And as a final step, you want to actually run npm install in the generated directory. There's a helper available for Yeoman, that does this for you:
this.on('end', function () {
this.installDependencies();
});
If you look at the generator-webapp code that does this, there are a few more subtleties to handle cases where the user might not want to install the dependencies automatically and special handling for test frameworks. But for the case you describe, the above is completely sufficient.
I hope this helps. :)
I use django with django-nvd3 to generate some charts. I'am not good in javascript at all.
I have this example (java script was created by django-nvd3)
http://jsfiddle.net/rkorzen/87WVr/2/
I want to add extra info to tooltip (if this extra info exist for my bar).
Data is composed of the blocks:
{"values": [{"y": 19, "x": "Checkpoint 1", "info":"ABDG"},
{"y": 17, "x": "Checkpoint 2"}],
"key": "Very good", "yAxis": "1"
},
in this point I want to ad info "ABDG" to tooltip for bar x="Checkpoint 1" and y=19
But don't have idea how :(
I'am not sure if django-nvd3 have some options for this. So decided to ask about js.
Maybe someone Can help:)
Try using extra dict :
'chartdata': {
'x' : 'your_x_axis data',
'name1': 'Somename',
'y1': 'y_axis_data' ,
'extra1': {
"tooltip": {"y_start": "", "y_end": " cal"},
},
}
When exporting chart in Highchart, all my characters are displayed well, except Chinese colon.
Do I need to set something specical?
Even in the highchart exporting example from its site, there is still the problem
Please see an example in http://jsfiddle.net/warmwind/Prah7/2
When setting title as below, it cannot be export correctly
title: {
text: 'Exporting it：colon in between'
}
Something is wrong with the defautlt font on the export-server for this chinese character. Please, specify a font-family for your title. Like this,
title: {
text: 'Exporting it：colon in between',
style: {
"font-family":'verdana'
},
},
There´s reported an issue for this, see https://github.com/highslide-software/highcharts.com/issues/2120
I am modifying an ebook I purchased. I'm getting stuck on an error that epubcheck finds. The error is:
/path/to/ebook/file.html(43,53): element "blockquote" not allowed here; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")
Line 43 of the file in question looks like:
<h4 class="calibre41"><blockquote class="calibre42"><span class="calibre2">SUGGESTIONS FOR GETTING THE MOST FROM YOUR STUDY OF THE SCRIPTURES AND OF THIS COMPANION VOLUME</span></blockquote></h4><div class="calibre43"> </div>
I'm getting many similar messages and I don't know what they mean. Can someone help me understand what is wrong with this line so I can fix it (and the many others)?
Thanks!
A <blockquote> tag is not allowed inside an <h4> tag. This rule applies to HTML in general, not just epub. Change the markup so that it's valid, either by replacing <blockquote> with one of the allowed tags, or removing it. Note: you might lose some CSS styling if you don't preserve the class attribute. You might lose it anyway if the <blockquote> tag is styled explicitly.