@services The need to render a static view for social media crawlers is a real pain in the butt when doing a SPA. As you discovered, there is no way to have the meta tags be generated on the page by javascript, the crawlers won’t run the javascript. It requires some form of SSR at least for requests from the crawlers. Its even more painful if the SPA is being served up from something like AWS Cloudfront. I spent a week iterating trying to make the SPA work with social links until I learnt that its not possible. Ended up doing a rather painful implementation with lambda@edge that detects if the request is from one of the social crawler bots and effectively SSR renders a custom page with just the header / meta tags and the minimum content (images primarily). Hopefully a blog post someday. Since you are using nginx/apache, you can just have the routes in there look at the user-agent for crawlers and send it to the service route to generate the special page, which can be simple hiccup like https://gist.github.com/rberger/b2b484e6a4af8b029e8f2d776b31bbb2 And for non crawler routes just go to your normal path to server your SPA.
I'm trying to call document.querySelector("#my-id").scrollIntoView()
for a url that goes to a different view (from /my-view
to /my-other-view#my-id
) by dispatching two effects (`[:navigate-to "my-other-view"]` followed by [:scroll-to "my-id"]
).
Unfortunately this doesn't work because the :scroll-to
event is fired before the corresponding element exists (both events seem to fire as a batch, before the view is rendered).
Is there a way to ensure that the :scroll-to
effect doesn't get applied until after the view has been re-rendered?
Yes. By not using the effect and instead calling scrollIntoView
inside the component itself.
I would 100% not use re-frame machinery for this particular task.
Yeah I think that's what I'll end up having to do
And, of course, before calling the scroll function you would have to check that the URL fragment points to the relevant view.
I had this solution in place for moving around an already loaded page (where it works fine), and was hoping for a quick fix so I wouldn't have to redesign it right away
I've been in your shoes before, and I don't think there's a proper fix here. There's a dirty workaround - just firing up setInterval
and checking if the element exists.
Yeah okay, thanks 🙂
I have a question on http-fx. So here: https://github.com/day8/re-frame-http-fx#step-3a-handling-on-success I have to write a global callback for each http call? Seems quite clumsy?
You're using that fx in an event handler that's also available globally. Same thing.
This comes clumsy when
(defn some-func []
(call-http-1)
(use-the above-http-result)
(call-http-2 with the above transformed result))
So we have to write lots of call backs here for a specific purpose.Zero clue what you mean with that code, to be honest.
(defn some-func []
(-> (call-http-1)
(use-the-above-http-result)
(call-http-2 with the above transformed result)))
Maybe more direct. So if I want to make several http requests with the later depending on the further. It is a little bit verbose to go with the (dispath [:response-handler]) approach.
Events in re-frame are in general indeed a bit more verbose when you need to chain then. That's a given, regardless of whether you're using re-frame-http-fx or not. There are libraries that try to alleviate that, like https://github.com/ingesolvoll/re-chain for example.
Thanks. It’s a quite niche package. How do you get to know that?
You mean, how I found that library? No clue. I just hoard and catalog all links that I see that seem to be useful. So probably someone mentioned it here before.
Also, the same guy is behind kee-frame, which I use - so maybe that's how I know about it.
alas, re-frame-10x doesn't work in a sandboxed iframe, which is part of my (admittedly unusual) app architecture.
is there any hope of making that a soft requirement, maybe with degraded functionality? or is it vital to how 10x works?