This is related to a post I recently made regarding ember-fastboot and saving a webpage for offline viewing.
I am making a separate post because I believe this is more an ember-fastboot question and isn't specific to the website I am trying to save for offline viewing.
Basically, I am trying to find out how, on the local end, to completely override ember. That is, since I already have open in my browser the rendered page, what does one need to do in order to save the page such that when opened later locally as offline page, the page appears the same way it did when rendered in the first place?
It seems like I am in a paradox. I have a rendered page, with content such as a javascript media player. I save rendered page. I then open the locally saved, rendered page but then the ember javascript kicks in and alters the page, such that the javascript media player no longer loads, due to ember altering a div's class name to specify that the player is not booted! The thing is, once rendered, I don't need ember doing anything, as I am just interested in viewing a frozen copy of the rendered page with no interest in subsequent connections to the rendering server.
Anyway, hope someone can shed some light on this.
Thanks!
You could remove <script> tags from the index.html after saving it. That would prevent the app from starting, leaving the pre-rendered HTML intact.
You might need to split the JS bundle if you need a JS player to be running independently. Splitting the bundle is an advanced technique. If you need it, please ask a separate question.
Related
I'm working on a Drupal 8.6 multi site installation, where every site has it's own database, and I'm having a problem where the first time a content is shared on Facebook it uses the wrong image.
The meta tag is configured right, it is something like this:
<meta property="og:image" content="https://xxxx.com/image.jpg?itok=w8tMeCC0" />
This image problem happens only at the first share and I believe it happens because the image has not been created yet at the moment of the first share.
I would like to know what I could do to force the image to be generated as soon as the content is published and if there is a way to create all the missing images.
I found this post and I'm trying to implement in a module (I never worked on Drupal before) but I don't even know how to schedule this piece of script to be executed.
Is there an existing module or setting that does that?
Thanks for any help!
Have you tried the facebook Debugger?
https://developers.facebook.com/tools/debug/
Facebook usually stores the metatags in cache during shares. What I usually do is debug the webpage at least once with the right metatags configured in the debugger and ensure the page loads correctly there.
Afterwards, the share will be loading all the assets correctly.
Folks,
I am pretty sure I am not the first one to stumble on this problem. But somehow I am unable to find any relevant resources out there.
Here is my issue, I have a backend in Django and my front completely written in Reactjs- React Router - Redux (nice combo right).
when entering the url webhost.com/, django provides me with a page with links to a bundle that is my whole react application and different stylesheets
The problem arise when I want to refresh a page, the browser still tries to query the server even though a route exists in my react-router configuration.
I had a look at the answer here (catch-all option) React-router urls don't work when refreshing or writting manually , but I don't quite understand it and I am afraid to have a new redux state everytime Django will provide the user with a new page.
You can setup up a wildcard url pattern that will render the same view that gets rendered when a request is sent to webhost.com. I don't know if that's going to retain your store though.
What I have been trying to find, with no answer yet, is how I could have a user click on link to a template, then instead of waiting for the whole page to load, allow the user to view what has already loaded while they wait for more load heavy content to arrive, similar to what Facebook does when you first get to a page and see things loading.
There is not much more I can say as the question is pretty self-explanatory. I have checked google and stack overflow.
In order to allow the use to view the loaded page and dynamically view the rest of the page, you use a technology known as AJAX. It allows you to make asynchronous calls to the database, which can be triggered by some JS event(like onscroll) and load the queried data without reloading the entire page.
AJAX in Django is pretty straightforward, though some knowledge of JQuery(or even Javascript) will be required. You may also use the python package django-dajax which will make things easier. I think you will find the following links useful:
Tango with Django ajax guide (one of the best, but a bit tough)
django-dajax docs
Hope this helps!
I am creating an Ember.js application which basically has a very simple UI: header, content, footer -- all this in the application layer.
But, when you see the site at first, you have a hybrid application -- google needs to reach parts of it, but login, registration, dashboard, and other pages, should be handled by Ember.
And I might have a bit of an issue, because if I render some views, say on the homepage, in some outlets, then those outlets are going to be different after login, on the user's dashboard.
I cannot show off the UI, but i could try to provide more details if needed.
My question would be how to handle this issue?
I used a bit of a hack for now: just before Ember initialize, I remove from the DOM the content rendered server-side.
This might be ugly, but it works. This way robots may reach the content I want them to reach, the users on the other hand will see something better.
A question like this was asked before and the person got nothing but criticisms, hope this won't be the case here.
I have a website that allows a business to add their menu to my site, and some have requested to be able to import a menu (a pdf or jpg) that is already online elsewhere. So I made a form that saves a url to the db and then that url is used in the src of an iframe on my site.
I tested it all and it worked fine on my local machine (using Django development server). When I synced it over to my production server and saved the same url I was testing with, the iframe loads no content.
I imagine that it has something to do with trying to read an individual file from another server because it works if I make the url google.com or to an image that is under my domain name. Is there anything I can do to fix this? Storing a url instead of a pdf in my db is much more efficient so doing this way is preferred over uploading their menu to my site.
I don't think this question needs any code attached, but if you want to see some let me hear it.
Thanks
The menu you're testing with probably has the X-Frame-Options response header set.
Is there a reason you're putting the image/pdf as the src on an iframe instead of just using the img tag (or putting an img tag inside your iframe)? There's still no guarantee that will work for all pages, as some sites will refuse to serve media to an external page, but I suspect this is your problem in this case.