How can i change the default language of the firebase-ui login ?
LanguageLogin
I achieved firebaseUI translation to my local language by following these steps:
Clone firebaseui-web repository
git clone https://github.com/firebase/firebaseui-web
Once the repo is cloned, go inside the just created firebaseui-web folder and run:
npm install
npm run build build-js-pt-BR && npm run build build-npm-pt-BR
*Note: In my case I wanted to set firebaseUI to brazilian portuguese, therefore I used the language code pt-BR when running 'npm build'. Consequently the generated files will have a pt_br suffix.
Just replace this with your desired language code to have firebaseUI working on the language you want. Here you find a list of all supported languages and its codes:
https://github.com/firebase/firebaseui-web/blob/master/LANGUAGES.md
In the created firebaseui-web/dist/ folder, copy the "firebaseui__pt_br.js" and "npm__pt_br.js" files and paste them into your project's node_modules/firebaseui/dist/ folder
Go to your your project and replace the standard firebaseui import: Instead of importing from firebaseui, refer now to the firebase/dist/npm__pt_br.js file you just added into node_modules, like this:
import * as firebaseui from 'firebaseui/dist/npm__pt_br'
That's it! 💫
Now you should have firebaseUI configured to our language of choice!
picture of firebaseUI translated to brazilian portuguese
More details on these links:
https://github.com/firebase/firebaseui-web#building
https://github.com/RaphaelJenni/FirebaseUI-Angular/issues/42
This answer was obtained from https://pt.stackoverflow.com/questions/423285/alterar-idioma-do-template-do-firebaseui. Thanx #Klebers for the having this issue solved!
From the documentation:
Localized versions of the widget are available through the CDN. To use a localized widget, load the localized JS library instead of the default library:
<script src="https://www.gstatic.com/firebasejs/ui/3.4.0/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/3.4.0/firebase-ui-auth.css" />
where {LANGUAGE_CODE} is replaced by the code of the language you want.
For a longer explanation read the docs on Github linked above.
Related
I can't use Font-awesome in React.js.
I follow the document but I got the error like
./src/components/xxx.js
Error: /Users/xxx/Desktop/my_app/my_project_frontend/src/components/xxx.js: #fortawesome/fontawesome-svg-core/import.macro: config license must be either 'free' or 'pro' Learn more: https://www.npmjs.com/package/#fortawesome/fontawesome-svg-core
The document link
https://fontawesome.com/v6/docs/web/use-with/react/add-icons
I did install fontawesome already.
Do I miss something?
This is how my project is
I have one single code-base for my Vue application, but for different end users I need to compile this application with different styles. Let's say in my public (or assests) folder I have subfolders with css for each single end user (by users in fact I mean a group/organization). So, I have subfolders like:
\public\user1\all.css
\public\user2\all.css
\public\user3\all.css
And when I build my application (npm run build) I need to apply somehow specific styles. Something, like
$ npm run build -css_path \public\user1\all.css
But I don not know, if it is technically possible and if I'm on the right track. Probably, it should be done some other way. So, what is the best practice to apply different styles to Vue application on the fly (on build or compilation stage)?
You can specify environment variable with a particular value, in your case I think it would be userN values.
If css files in the public directory.
Just reference your css file in index.html with environment variable:
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %><%= VUE_APP_MY_VARIABLE %>/all.css">
And build with VUE_APP_MY_VARIABLE=user1 npm run build
If css files in the assets directory.
Using the same env variable but we should import that css file in the top of the main.js(if you use default project structure):
require('./assets/custom/' + process.env.VUE_APP_MY_VARIABLE + '/all.css');
or
import(/* webpackMode: "eager" */'./assets/custom/' + process.env.VUE_APP_MY_VARIABLE + '/all.css');
And build with VUE_APP_MY_VARIABLE=user1 npm run build as well.
I also recommend to create .env.local with, for instance, VUE_APP_MY_VARIABLE=user1 to be able to serve your local site and reference some default style to debug your app.
P.S. Check cross-env package which make your life easier with passing env variables. Because my build string is related to bash. With that package it would be cross platform:
cross-env VUE_APP_MY_VARIABLE=user1 npm run build
I made changes to the people-finder.js script to change the sort order, and locally everything works well. To override the functionality, I used the following directory structure and Maven-based SDK to generate AMP file:
As I expected, locally everything works fine and I can see my changes:
Next, I deploy the AMP file on the remote server, as described here: Install the AMP file
And here I do not see my changes:
Directory /opt/alfresco-community/tomcat/webapps/share/components/people-finder also contains the scripts without changes.
And thus, sorting does not work as I need.
Additional information: I unpacked the AMP file and not found there branch /web/components/... Of course, people-finder.js and people-finder-min.js is not present there also.
What could be the reason?
All that was required is to add a parameter -force:
sudo java -jar bin/alfresco-mmt.jar install amps/some-customization-share-1.0-SNAPSHOT.amp tomcat/webapps/share.war -force
Thank you very much Sanjay Patel for your assistance!
These discussions can also be useful:
Client-side changes don't apply after deployment the AMP
Files inside src/main/amp/web folder aren't packaged inside the resulting amp file
Modifications of original client-side files are not picked up
For example, I want to use Slider Pro in my meteor project as an npm package without having to create an Atmosphere package out of it, however the docs (https://github.com/bqworks/slider-pro) say to include files in <head>. See Image Snippet of Docs. How would I do that?
There are a few ways you could do this. Either way you choose you still need to add it as an npm package through Meteor:
meteor npm install --save slider-pro
And then what I commonly do, is create a file inside imports/startup/client directory called vendor.js, and just use this code in the vendor.js file:
import '../../../node_modules/slider-pro/dist/js/jquery.sliderPro.js';
import '../../../node_modules/slider-pro/dist/css/slider-pro.css';
Then in the file located at imports/startup/index.js just add this to include that vendor.js file:
import './vendor.js';
You just need to make sure that the path is correct, in the vendor.js file, as you can see, since my vendor.js file is nested 3 directories deeper than the node_modules directory, all files have to be prepended with ../../../ which basically means "go back three directories"
The package I am using is linter-jshint, even after I add the .jshintignore file both in the project directory and home directory. It still lints the JavaScripe code inside the .md file.
How to make it only lint the file with .js extension.
That is actually a bug in the core language-gfm package. The base linter determines which providers to invoke using the scopes that grammars provide us, the language-gfm grammar provides incorrect scopes which results in linter-jshint being triggered in markdown files, it provides us source.js, instead of source.embedded.js.
You can find more info about this bug in atom/language-gfm#121.
As a workaround you can disable language-gfm package and install the language-markdown package.