I have made a website for my company which have theme system like wordpress. Now I've 4 themes. The selected theme name is coming with API. But it's taking all 4 themes when it get build.
Is there any way I can build the website with only the theme name coming from API? and remove other 3 themes code?
The site loading is effecting for loading all 4 themes. So It would be great to me if I could control build without unnecessary themes.
Here is my .env file, I'm taking the theme name from this. And conditionally code is after this.
REACT_APP_HOVERCRAFT_END_POINT='www.example.com'
REACT_APP_SITE_URL='www.example.com'
REACT_APP_FABLE_END_POINT='www.example.com'
REACT_APP_REFRESH_POPUP_TIMEOUT=10
REACT_APP_ASSETS_URL='/assets/'
REACT_APP_BRAND='brand'
REACT_APP_TEMPLATE='delta' // Theme Name
REACT_APP_TEMPLATE_VAR='wun'
REACT_APP_FOOTER_LOGO="alternate"
Conditional code:
// Conditional Theme code
const flightFields = () => {
switch (template) {
case 'alfa':
return require(./bravo);
case 'charlie':
return require(./charlie);
case 'delta':
return require(./delta);
default:
return require(./bravo);
}
}
Related
My ExtJs application has to be multilingual.
On the login page, I asked the user to select the language from a dropdown list.
the current structure of my application files as the following
[app]
[classic]
[src]
[view]
[customers]
customerController.js
customerView.js
customerView.scss
How can I have multiple scss files for the same view ?
For example customerView.scss to be a general file loaded all the time, customerView.en.scss to be English specific, only when the user selects English on the login page, and customerView.es.scss only when the user selects Spanish on the login page
Or is there any better idea?
The easeiest way might be to add a class to the viewport:
Ext.getBody().addCls('language-en')
Inside your scss files you add:
.language-en {
.customer-view {
}
}
.language-de {
.customer-view {
}
}
Otherwise you have to get into the build.xml and into the fashion builder.
In the fashion builder you have to rearrange the build.
I'm trying to change firebase language dynamically, meaning that I have a button on the page that allows me to switch language which triggers the handling below:
useEffect(() => {
if (!firebase) return;
// This sets up firebaseui
let localizedFirebaseui;
switch (langCode) {
case 'hu':
localizedFirebaseui = require('../intl/firebaseui/npm__hu.js');
break;
case 'pl':
localizedFirebaseui = require('../intl/firebaseui/npm__pl.js');
break;
default:
localizedFirebaseui = require('../intl/firebaseui/npm__en.js');
break;
}
// Configure FirebaseUI.
const uiConfig = {
// Popup sign-in flow rather than redirect flow.
signInFlow: 'popup',
// We will display Google and Facebook as auth providers.
signInOptions: [
originalFirebase.auth.EmailAuthProvider.PROVIDER_ID,
originalFirebase.auth.GoogleAuthProvider.PROVIDER_ID,
originalFirebase.auth.FacebookAuthProvider.PROVIDER_ID,
],
signInSuccessUrl: ROUTE_PATH_TYPEWRITER,
tosUrl: ROUTE_PATH_TERMS_OF_USE,
privacyPolicyUrl: ROUTE_PATH_PRIVACY_POLICY,
};
const authUi = new localizedFirebaseui.auth.AuthUI(originalFirebase.auth());
firebaseuiRef.current && authUi.start(firebaseuiRef.current, uiConfig);
return () => {
authUi && authUi.delete();
};
}, [firebase]);
firebase is an initialized instance in this case, basically on every render of the page useEffect is called which allows me to load localized data and start the UI, and then I delete the instance to be able to reinitialize it again with a different set of translations.
The problem is that the language switch works until I'm choosing every language for the first time, for instance, if I start with en, switch to pl, I'm not able to go back to en, but loading hu will work properly.
Language change itself is fine because the rest of the app is switching without an issue.
Any ideas on how to fix it? Or maybe it's not even possible, or there is a better solution than deleting and starting the UI over and over? I'm having a hard time finding anything related to the topic, I don't know why, is it some trivial error that no one faced before?
I have React app which render 300 pages. They are divided into 4 groups. There are common settings, custom settings for each group and settings for each page in .json files. I don't want to load all the settings for all pages, but only those needed for a particular page. I try use require to import necessary file:
const getThemeConfig = (theme) => {
const filePath = `./themes/${theme}/config.json`;
return require(`${filePath}`)
};
const themeConfig = getThemeConfig(currentTheme);
this file is imported, but at the same time the application tries to upload absolutely all .json files in ./themes directory. IDK how to fix it.
We would like to distribute a set of PDF files within our application. Originally we were opening these with a React PDF viewer however the users really need to be able to save these files to their computer so they can read/annotate/print these in their own time etc.
We are using Create React App within Electron - do you have any suggestions?
Thanks!
Managed to get this working using the following method:
PDFLink= (e)=> { // Open PDF with `shell` method
console.log("Clicked PDF: ");
var attrs=e.currentTarget.attributes;
const shell = window.require('electron').shell;
const remote = window.require('electron').remote;
const appPath = remote.app.getAppPath();
console.log('appPath: ', appPath);
for (var a=0;a<attrs.length;a++)
{
console.log(attrs[a].name+"="+attrs[a].value);
switch (attrs[a].name)
{
case 'data-pdf':
//console.log(app.getAppPath());
shell.openItem(appPath+'\\public\\pages\\test1.pdf');
break;
default:
break;
}
}
}
If the PDFs are shipped with your app, you could just use the shell module to open them: shell.openItem(fullPath).
shell
Manage files and URLs using their default applications.
shell.openItem(fullPath)
Returns Boolean - Whether the item was successfully opened
Open the given file in the desktop's default manner.
Prelude
Drupal 7
Bootstrap Business (Active Theme)
Turn on Maintenance Mode
Actions that I have already carried out
Copy maintenance-page.tpl.php from modules/system/maintenance-page.tpl.php
Edit to your needs
Paste it on theme's root folder --> /public_html/sites/all/themes/bootstrap-business
Set $conf variable in /public_html/sites/default/settings.php : $conf['maintenance_theme'] = 'bootstrap_business';`
Nonetheless, the site keeps on showing the modules/system/maintenance-page.tpl.php . I don't know why it is not working. I´ve also tried:
Adding a maintenance-page--offline.page.tpl.php
Setting the theme name as bootstrap-business
None of the above work. I don't think spending 45 minutes on such a simple task is adequate. I know I could just edit the modules/system/maintenance-page.tpl.php, but I don´t believe that's the right way to go.
Any suggestions?
Clear/Flush caches (Theme Registry cache) and try again. If you already did that and did not work add a page preprocess function to your default theme template.php:
bootstrap_business_preprocess_maintenance_page(&$variables) {
if (isset($variables['db_is_active']) && !$variables['db_is_active']) {
// Template suggestion for offline site
$variables['theme_hook_suggestion'] = 'maintenance_page__offline';
}
else {
// Template suggestion for live site (in maintenance mode)
$variables['theme_hook_suggestion'] = 'maintenance_page';
}
}
Related question: https://drupal.stackexchange.com/q/76946/12163