Topic preview

razibal

I really like the preview feature where if you link to an existing topic, a preview is generated when you hover over that link. I would like to leverage this preview as an embed in external pages/websites in an iframe. Is there an existing route for the preview or would I need a plugin to expose it?
As a corollary to the above, how would I go about exposing the votes on a post to an external page? Is the socket API open for usage on a different site (same domain, but different subdomain)

<baris>

It is a socket call, the source is here https://github.com/NodeBB/NodeBB/blob/master/src/socket.io/posts.js#L61-L75. The same call returns the vote count as part of the post object. You can try it with console.log(await socket.emit('posts.getPostSummaryByPid', { pid: 92373 }));

Not sure how you can call it from an external page, might be easier to make a GET route in a plugin and call that.

razibal

@baris thanks! Do you happen to know which template is used to render the data from the socket call? I'll probably create a simple plugin to make the socket call and render the output so it can be embedded in the external page.

<baris>

The template used is here https://github.com/NodeBB/NodeBB/blob/master/src/views/partials/topic/post-preview.tpl

razibal

thanks again!

julian

@baris said in Topic preview:

might be easier to make a GET route in a plugin and call that

If you ask nicely I'll get to work on converting this to a write API route

razibal

Please? I think this would be a useful route as it would make nodeBB posts embeddable in any external website

julian

In looking at this briefly, I see that we already have a GET route for a post, would this work for you?

razibal

This would be a little different in that I wouldn't need to get the content and then render myself. My thought, at least for the plugin was that the route /preview/{pid} would provide a rendered post that could then be embedded in an iframe.

julian

@razibal https://github.com/NodeBB/NodeBB/pull/11475

razibal

Hi guys, the plugin to return the embeddable post works great. However, I noticed that there appears to be caching of the results somewhere in the pipeline. If I make a change to the post, its not reflected in the posts.getPostSummaryByPid call until after a restart. Is there a way to force retrieval of the refreshed post content?

<baris>

How are you editing the post? When a post is edited through nodebbs post.edit method the cache is cleared so posts.getPostSummaryByPid should return the latest data.

razibal

@baris, It's just a normal post edit and the action:posts.edited hook fires as I have another plugin that waits for this hook

razibal

@baris my bad, I was using a different test instance that was connected to the same DB. You are absolutely correct, the cache is cleared when using the same instances.
Thanks!

razibal

One more question, how are events bound to template elements? As an example, lets say I want to include the post/upvote or post/downvote components in a custom template, how would these links get bound to an action that ultimately calls the appropriate upvote/downvote method?

<baris>

It happens here https://github.com/NodeBB/NodeBB/blob/master/public/src/client/topic/postTools.js#L124-L130. The module that handles upvoting is https://github.com/NodeBB/NodeBB/blob/master/public/src/client/topic/votes.js. When a click is detected on the vote buttons this function is called https://github.com/NodeBB/NodeBB/blob/master/public/src/client/topic/votes.js#L73.

So if you want the upvoting on a different template you need to add the click handlers and call votes.toggleVote and pass the correct parameters like we do.

razibal

@baris Thank you, that works perfectly. Now the only thing left is listening for the change to update the vote count. I aplogize for the many questions but I've been working so long in the react/vuejs ecosystem that I've forgotten how data bindings are handled in jquery.

<baris>

That happens here https://github.com/NodeBB/NodeBB/blob/master/public/src/client/topic/events.js#L43-L45,
when a vote happens (upvoted,downvote or unvote) an event is sent from the server. We listen to that with socket.on(eventName, handler) and update the UI in this function https://github.com/NodeBB/NodeBB/blob/master/public/src/client/topic/events.js#L224

razibal

Perfect, as always your help is much appreciated.