I have i18n perfectly setup and working for themes and plugins of a Docusaurus website.
But for the homepage, I have a component Foo.js located in src/components/Foo.js.
It contains a const Bar = 'happy';
Is a text string that will be part of the HTML returned by the component and I want it translated.
I guess it should be possible; in the documentation is stated:
JSON is used to translate: Your React code: standalone React pages
in src/pages, or other components
and
code.json # Any text label present in the React code
The Bar text is not extracted with docusaurus write-translations.
Should I add manually to code.json ? If yes, which is the correct key to use?
Thank you in advance for your help.
You need to import the Translate component and use it to wrap translatable strings in your custom code.
Details and examples can be found in the Translate your React code section in the Docusaurus i18n documentation.
For your example you'd end up with something like:
import Translate from '#docusaurus/Translate';
const Bar = <Translate id="mcall.foo.bar">happy</Translate>
Related
Hi I come from bootstrap and Im trying to learn some vuetify. I had some questions about the framework that I couldnt find the answer to in the vuetify docs.
What is a prop? (1)
What is the difference between adding a prop and adding it as a class attr? (2)
Is there a list where I can find all the props and helper classes for the components? (3)
For example: I was trying to make a container take the full width of the screen and couldnt find any property that the vuetify docs indicated that would make my container act like, this so I had to look online. I finally read on a stack overflow post that there was a prop called full-height that did exactly what I wanted. The problem was the conatiner docs said nothing about this prop in relation to the container itself. I also looked around the customization and the styles and animations tabs on the docs and could find anything about it. Where are all these props and helper classes defined?
Vuetify uses Vue.js components, so you should be familiar with them.
However, I'll try to answer your 3 questions:
Props are a way to pass data to components. Say, for example, you are building a header component which needs to get the title from the page in which you put it in. Then, you can just declare a title property and then use that inside the component. You can then pass it like your standard HTML attributes, e.g. <the-title title="Main Page" /> If the component is called TheTitle. For more thorough information, There is a whole page about props inside the official Vue.js docs.
In your use case, a class is useful when you have the appropriate CSS styling for it, otherwise it wouldn't do anything. My suggestion would be to use props for styling individual components where you don't have the same style anywhere else and classes for cases where a style repeats itself. If the style is local to the component, make sure you add scoped to the style tag to avoid applying it anywhere else.
Vuetify has a nice API explorer which you can use to browse the entire collection of components. Each one has an API section where you can see all the details, including information about the props and other stuff.
Simple blog in Django (1.11.7 - Python3) in which I have impemented the Markdownx plugin. The plugin works for most of the markdown in preview in my 'edit_article' page, and in the normal view where users can read an article. BUT some of the markup isn't working in either:
Not working:
blockquotes using >
headers using one or more # or _
double-space and carriage return doesn't add a line-break
Links, images, numbered lists, emphasis and bold etc all work.
I posted my markdown in here, but of course it all worked here...
Don't really have any code to post, because most things work, so I'm guessing there isn't any problem with my model/view etc.
Anyone experienced this?
# So, let's try a header
doesn't work, neither does
> this type of blockquote
but they shoud produce
So, lets try a header
and
this type of blockquote
So I found the answer to this myself. I am using a CSS framework that resets the styling on the 'broken' markup tags. Until I add back the framework's CSS classes to the H1-H6 tags for example, the reset makes all headers appear as plain text.
So I have to add some custom CSS to the css framework's styling for those tags that are being overridden, or use html in the textarea in the form which should also work.
So I followed a tutorial setting up a Markdowndeep editor using MVC and the editor and preview work just fine. The tutorial didn't mention how to render specific text on a page using Markdowndeep though. So I did a few Google searches thinking I'd find an obvious answer but to my surprise I didn't.
Can someone show me an example on how to render a portion of text using Razor?
I figured out the syntax. It was #Html.Markdown(Model.Body)
You must have Markdown Helper installed though.
Another option is to force Razor to return the RAW Html.
If we extend the MarkDownDeep Example, we get the following:
// Instantiate
var md=new MarkdownDeep.Markdown();
// Set options
md.ExtraMode=true;
// Translate
var html=md.Transform(plaintext);
<div>#Html.Raw(html)</div>
and your markdown as HTML should be in the div!
I am using file_get_contents to acquire html. From the html page I extract the css, and js. Right now I am using a very expensive function.
$css_elements = $doc->getElementsByTagName('link');
foreach ($css_elements as $css_element) {
$Jdocument->addStyleSheet($css_element->getAttribute('href'));
}
I would like to save the csss links to a file, and then read the file and add the links as a whole to the head tag of the HTML page.
I was wondering is Joomla has an in build function that allows for one to add unwrapped text to the head tag.
Thanx everyone!
I recommend using the Flexi Custom Code module to do this in Joomla:
http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/15251
This module allows us to insert any code like php, javascript PHP, CSS and html at site modules positions. For example, It's can be used for simple code, simple function, embed code, adsense code, affiliation code and others copy and paste codes for Joomla site.
Main Features:
1. Available for PHP, HTML, JAVASCRIPT and CSS codes
2. Available to set the target of this module
3. Easy and flexible
I have am trying to dig into twitter bootstrap and rails3 sites that actually look and function well (new to it all). I have this feature I want where I have a twitter bootstrap navigation (specified in what I guess is the default application layout) that calls a _navigation.erb.html etc. This works great, but on that navigation i want a "Se Habla Espanol" or what not, where when the user clicks there, the navigation text all changes to spanish. i thought easiest would be have another _navigationespanol.erb.html or something that changes the navigation words all around and also when click (toggling into spanish mode) it sets all the text in the pages to spanish by anytime there is a text render or whatever a variable flag was set and is interrogated on page index render show or what have you and it renders spanish or english words...
So ideally click on see it all in spanish, it loads a new layout (my main question) that has the spanish navigation and messages and other twitter bootstrap stuff and it also sets a global var i can look at in other renders to see if im rendering english or spanish.
More than swapping layouts, it seems that you need to implement Internationalization (I18n). In such case you'll have to create an directory config/locales that holds a .yaml file for each of the language you're trying to have translation for, for instance:
# on a file called en.yml
en:
hello: "Hello world"
For a complete guide on how to go about it: Rails Internationalization (I18n) API