I am running Meteor release METEOR#1.4.2.3
I recently installed a social media share package via Atmosphere.
meteor add ellisonleao:sharerjs.
You can also read more about it # http://www.ellison.rocks/sharer.js/
My template looks like this:
Template.detail.events({
"click .sharer": function() {
//add new buttons with share behaviour
$('.postedImagesWell').append(<button class="sharer button" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>);
window.Sharer.init();
}
});
Find below the template in code:
<template name="detail">
<div class="postedImagesWell">
<img class = "img-responsive img-rounded postedImages" id = "trial" src="{{this.photo.url}}" alt="thumbnail" >
</template>
when I run click on the Share on Facebook link. I see this error message in my browser:
Uncaught ReferenceError: React is not defined
I have done some research on how to resolve the following issue which resulted in having to install various packages, which have shown to be all futile. I have had to uninstalled the packages.
Any help on how to resolve the issue would be great!
Related
I'm using Vue Social Share package I'm getting only one warning in lighthouse "Links are not crawlable". Please guide how I can fix this issue. Following is my code
<ShareNetwork v-for="network in networks"
:network="network.network"
v-on:click="saveInfo()"
:url="sharing.url"
:title="post.title"
#open="open(network.network)"
>
<i :class="network.icon"></i>
<span>{{ network.name }}</span>
</ShareNetwork>
//method
async open(network = 'no network') {
await this.$axios.post('/social-shares', {
post_title: this.post.title,
network,
})
},
Inspected code looks as follows
steps to reproduce this issue
clone the project from this link
Install dependencies
run lighthouse SEO to see this issue of Links are not crawlable
I am trying to use the Masonry plugin with Bootstrap5 and NuxtJS. When I follow the example here
https://getbootstrap.com/docs/5.0/examples/masonry/ and incorporate it into my own codesandbox, I notice that my demo is not in the correct masonry format. See the gaps? My sandbox
My example:
Bootstrap's example:
What do I need to do to get my demo into format shown on the Bootstrap Masonry example page?
I checked how to load the script from a CDN either globally or locally. It was working but at one condition: you needed to NOT start on the masonry page.
Meaning that if you loaded the app on a specific page, then moved to the one with the masonry it was working. But not if you started on this specific page. So, a pretty subpar solution.
This article was really helpful to understand how to wait until the CDN script is fully loaded: https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
Then I realized that we are far better installing it directly as an NPM dependency. Therefore, I proceeded to the masonry repo. Found a great message on how to setup the whole thing in Nuxt.
And after a removal of some useless stuff and some modern dynamic import, here we are
<template>
<main>
<h1>Bootstrap and Masonry</h1>
<div class="row" id="masonry">
<!-- ... -->
</main>
</template>
<script>
export default {
async mounted() {
if (process.browser) {
let { default: Masonry } = await import('masonry-layout')
new Masonry('#masonry', { percentPosition: true })
}
},
}
</script>
The final solution is looking pretty well and there is not a lot of code. On top of that, the code is properly loaded. And you can load it on a click or any other event.
I am composing my web app as a number of Aurelia "feature" apps - although I'm not using Aurelia features as such. Consequently in my html markup I have two entry points pointing to different apps:
<!-- Top Navigation Bar -->
<div aurelia-app="topnav"></div>
<!-- Main App-->
<div aurelia-app="main"></div>
I am using webpack and everything works perfectly using the single "main" app. Webpack generates a JS file "main.bundle.js" which I include in the src tag.
Things are not so straightforward when I added the "topnav" app. In webpack I tell the plugin to use a different aureliaApp name:
new AureliaPlugin({ aureliaApp: "topnav"}),
and, as you can see my HTML entrypoint also calls "topnav". Webpack generates a JS file "topnav.bundle.js" which I also include. I have a file called "topnav.ts" which contains the aurelia Cionfigure function which ends:
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("nav")));
And a pair of files "nav.ts", "nav.html" which constitute my viewmodel and view.
When I run the app aurelia loads and the "nav" module code executes. But I then get an error - see below.
The module which it reports that it cannot find is the one entered into the HTML markup.
Should this work? Have I missed something?
I should add, everything seems to work. I can create and update properties in the viewmodel and these are bound to the view. It's just that this error is thrown.
You are doing nothing wrong, just unsupported scenario. Per official doc-wiki: https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options#aureliaapp
You can have only 1 auto entry module with aureliaApp configuration. To solve this, you just need to add PLATFORM.moduleName('topnav') to your main.ts (and put it on root level)
Another way to do is to bootstrap manually:
// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';
// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
// do your configuration
aurelia
.start()
.then(() => aurelia.setRoot(
PLATFORM.moduleName('topnav'),
document.querySelector('#topnav')
);
});
// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
// aurelia.use.standardConfiguration();
// ...
aurelia
.start()
.then(() => aurelia.setRoot(
PLATFORM.moduleName('app'),
document.querySelector('app')
)
});
I'm trying to bundle only required Font Awesome 5 icons via webpack, but the icons are not replaced in the DOM.
I've added all required packages from the documentation:
yarn add -D #fortawesome/fontawesome
yarn add -D #fortawesome/fontawesome-pro-solid
yarn add -D #fortawesome/fontawesome-pro-regular
yarn add -D #fortawesome/fontawesome-free-brands
The following custom JS is included:
"use strict";
import fontawesome from '#fortawesome/fontawesome';
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
fontawesome.icon(faCheck);
function iconsDoneRendering () {
console.log('Icons have rendered'); // No output in console
}
fontawesome.dom.i2svg({
callback: iconsDoneRendering,
})
The HTML template:
<head>
<link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css -->
</head>
<body>
<ul class="fa-ul">
<li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li>
<li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li>
</ul>
<script src="/js/app.js?v2.1.4"></script>
</body>
The svg path is inside the bundled JS file, but I can't figure out which method needs to be called.
The following JS code solves the problem (since v5.0.2):
"use strict";
import fontawesome from '#fortawesome/fontawesome';
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '#fortawesome/fontawesome-pro-regular/faPhone';
fontawesome.library.add(faCheck,faPhone);
I realize this is already answered, but I'd like to give some visibility to the full solution since the information above does not include how to execute the SVG icon replacement.
If you're loading Font Awesome 5 via NPM & WebPack for use in front-end HTML like I am, you will need to do something like this in your JS that's included in your bundle:
"use strict";
// Import FontAwesome: https://fontawesome.com/how-to-use/use-with-node-js
import fontawesome from '#fortawesome/fontawesome';
// This enables using FontAwesome in CSS pseudo elements
// see: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements
fontawesome.config.searchPseudoElements = true;
// Icons should be imported individually to keep bundle size down
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '#fortawesome/fontawesome-pro-solid/faPhone';
fontawesome.library.add(faCheck, faPhone);
// If really necessary, entire styles can be loaded instead of specifying individual icons
//import solid from '#fortawesome/fontawesome-pro-solid';
//fontawesome.library.add(solid);
// Execute SVG replacement
fontawesome.dom.i2svg();
That last line is key, you have to execute SVG icon replacement manually.
We just released version 5.0.2 and updated the #fortawesome NPM packages to fix a few bugs related to this. Make sure you upgrade before you try anything else.
The missing step of the above example is to add the icon to the library:
fontawesome.library.add(faCheck)
Try to use
fontawesome.library.add(faCheck);
instead of
fontawesome.icon(faCheck);
If it does not work, please update your question with your DOM template, to see how it's defined in there.
My app needs a login page from external url.
The login logic that I thought is :
Steps
Open external url when ionic is launched
Once user logged in, move back to internal app using deep link (ex : myapp://main)
I tested step 2 which is deep link. Works well.
So, I have to make step 1 now.
First, I tested with iframe.
And got Refused to display 'https:....' in a frame because it set 'X-Frame-Options' to 'deny'. error. Seems this needs a server-side configuration. But anyway we don't want to use this way. iframe feels like a hack.
Second, I tried location.href = this.loginUrl;.
Worked well in chrome browser but when I built in iOS simulator, I see address bar, tool bar, and close button.
I don't like this because I don't want user to close login page or to change url address.
Third, tried window.open(this.loginUrl, '_self', 'location=no').
Same result as second.
Fourth, tried to use ionic version of in-app-browserplugin.
But the result is same as second and third.
It still opens a browser with address bar, tool bar even it shows 'back to myApp'. So user would feel this is out of app.
Check here, people are looking for the solution still.
After spending a day, I don't even know if there is option I can try.
I could resolve by doing this. But in real device.
Xcode iPhone emulators don't have open in-app-browser but built-in browser.
browser:any;
this.platform.ready().then(() => {
this.browser = this.iab.create(this.loginUrl, '_blank', 'location=no,toolbar=no');
});
You can solve this by installing a cordova plugin called cordova-plugin-inappbrowser. Execute the following commands:
ionic plugin add cordova-plugin-inappbrowser
npm install --save #ionic-native/in-app-browser
On your app.module.ts add
import { InAppBrowser } from '#ionic-native/in-app-browser';
and also add the following to your providers in app.module.ts
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Then on your home.ts add
import { InAppBrowser } from '#ionic-native/in-app-browser';
and inject it into the constructor like this
constructor(public navCtrl: NavController, private iab: InAppBrowser) {
}
then add the following method
ionViewDidLoad(){
this.iab.create('url', '_self', { location: 'no' }); }
Check the different options you have for this plugin here
For removing the address bar just use the option:
location: Set to yes or no to turn the InAppBrowser's location bar on or off.