I understand that there is a way to decorate posts after cooking with api.decorateCooked(). Is there a similar method for decorating topic list items or the topic list?
AI-generated summary
The discussion revolves around decorating the topic list with jQuery. jgujgu is seeking a method to decorate topic list items, similar to api.decorateCooked(), for decorating posts.
jgujgu explains that their goal is to display thumbnails in the topic-item using data from a custom tag. They have overridden ExcerptParser.rb methods to allow this custom tag, but need a way to render the thumbnail.
angus suggests breaking down the process into discrete steps and exploring how Topic List Previews (TLP) creates and uses thumbnails.
jgujgu shares their current approach using jQuery to find and render the thumbnail data.
angus recommends a different approach, involving a server-side method to parse the cooked HTML, save the data to a custom field, and then render it in the topic list item using a plugin outlet. This approach avoids making an AJAX request on the client.
jgujgu agrees with angus’ suggestion, acknowledging that using AJAX in such contexts can be a workaround.
What are you trying to achieve?
I’m making a plugin that incidentally interacts with https://meta.discourse.org/t/topic-list-previews/41630.
My end goal is to display these http://bl.ocks.org/ in a post (which I have working), but I also want to display the thumbnail in the topic-item. I overrode ExcerptParser.rb methods to allow my custom tag to go through (akin to the spoiler class attribute on div and span). My hope is to grab the data within the allowed span tag and render the thumbnail after it uses this data to make an ajax request.
Could you break this down a bit more into discrete steps? I assume you’ve looked at how TLP creates and uses thumbnails in the topic list?
Yes I have indeed looked over the TLP code. Unfortunately, particular to how I render the blocks (for example Choropleth · GitHub), the only cooked data that resides in the database is an html tag,
<div class="gist" data-user="mbostock" data-gist="4060606"></div>
For decorating posts, I’m currently using jquery to find the .gist class, get() the gist data according to the user and gist, then render the iframe.
For excerpts, I was hoping to use a similar method, using the untouched div in the excerpt to get the data necessary to find the thumbnail on github.
I reckon the best way to achieve what you’re trying to do is add a method that listens for the post created event on the server. See a similar method in my ratings plugin here.
In this method you should
-
Parse the cooked html for what you need.
-
Use the parsed content to get your data.
-
Save the response to a custom field.
Then you’ll add a new method to the topic list item serializer that gets your saved data from the custom field.
Then you just need to render the serialized data in the topic list item using one of the plugin outlets.
I would avoid making an ajax request on the client if possible.
Your suggestion is quite excellent. I will use your approach when parsing for the thumbnail info.
I will admit, using ajax in contexts like this is a janky work around. 