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.