Wanted: Discourse Hacker News Plugin

commonpawn · January 8, 2016, 3:06am

Continuing the conversation from this thread.

(Posted this in feature, wanted to post in plugin but don’t think i have the rights to post in the category - feel free to move this topic to the most appropriate thread. This is a plugin request)

Why we need a hacker news plugin

Introduction

Forums and communities are different. Some communities are all about long, written content. Others, such as Dribble, very visually oriented. Some are mainly about things that happen other places on the internet, such as Reddit, Hacker News and Designer News. A link is a representation of something else and can just as easily create conversation as a text post - which is why we think Discourse need a plugin for this.

In our case, we’re building a community for graphic, ux and web designers in Denmark. We anticipate the site will mainly be used for:

Posting links to what is going on in the design scene in Denmark and rest of the world (link posts)
Asking the community questions, such as ‘What tool do you use for prototyping websites?’ (text post)
Showcasing work for critique, e.g. posting pictures from a recent project. (text and images)

Basically something very close to Designer News who have appropriated the format of hacker news to design news.

Problem formulation

Discourse is an amazing platform! It comes with every possible feature you would ever need out of the box. Except a content type / category for links. What we’re hoping to solve with this plugin is:

Make it even easier and faster to simply post a link: One line of text and a link - that’s it!
Make it easy for viewers to visit the site, click a bunch of links front the front page and leave.
Maximize engagement by making it easy to vote on a good post from the front-page.

Why is Discourse a great platform to build a hacker news kind of site on top on?
We spent a long time considering using other platforms: build it ourselves vs. using reddit’s source code vs. using drupal vs. using telescope. We decided on Discourse because:

It is so smooth, fast and well made for discussions and community!
It already has a way to display top posts
It has a built in digest email engine (great for sending top links and questions to inactive users - almost like a mailing list)
Has a voting (like) system in place
Has wonderful notification system in place
Just needs that special content type / category!

New features needed

See wireframe section for details

A special category/content type called ‘Links’
Links category only has a one lined content field for posting a link. Before posting, Discourse checks if it is an actual link that has been pasted in the field
Links are shortened and displayed on front page. Link posts are clickable from front page and users are taken to external link when clicking the title of a link topic.
Users can vote on topics from the front page (basically moving the like functionality of first post onto front page)
Title and link is embedded in first post of a topic within the links category.
Link embedded in popular topics in digest email

Wireframes

Creating a new topic - nothing different here. I want to tell people about this awesome tool called ‘Slack’.

User selects the category called ‘Links’ - “Ok, i am posting a link here - not writing a text post”

The text-editor collapses, removes the WYSIWYG editor and i am presented with this single line field where i can post in my link.

Woops, forgot the ‘ht’ part of the link. (Plugin does a simple check to see if this is actually a valid link)
“Silly me”

Here we go!

Thread view

That was easy! We’re planning to make posts a bit simpler. Biggest feature here is the fact that likes has been styled as a score counter (as seen on reddit, hacker news, etc.) and moved out to the left
** The post is basically the title of the post with link.*
** Category is displayed in top - this category is a link*
** Likes on replies are disguised as ‘points’.*

Back on the front-page. This is what it looks like.

A bit information on how to navigate the front-page

New feature:Upvote/like topics from front-page
You can basically just like/unlike – Press to give it one point, press again to remove that point you just gave it.

Digest email

Basically same look and logic in the digest email: if a popular topic is from the link category the user can click the title to be taken directly to the destination link. He/she can also click the comments icon to be taken to the discussion about this link.
This is great because it will serve as a mailing list filled with the most popular links for our less active users.

How to build this?

I am posting this in the feature / plugin request section, hoping this could be built as an official plugin for Discourse as this fairly simple plugin can enable Discourse to serve even more types of communities.

We’re very interested in hearing the opinion from the community in here - and get a better sense of how difficult it would be to build something like this.

I live in the Bay Are, so I am also willing to meet up in person if people live here. I volunteer to support with design and UX support to build this.

erlend_sh · January 8, 2016, 10:06am

Excellent mockups. One thing is unclear to me though: Your wording bounces back and forth a bit between “we’d like to see this happen” to “we will make this happen”. Which is it?

This type of functionality has not been in high demand, so it’s unlikely to make it into any core developer’s TODO list. It’s a perfectly legit use case though, so you’re sure to get some guidance if you start asking asking technical questions on dev. I believe you want to be looking into “archetypes”, which is at the top of my wishlist for “Howto” articles (/me pokes @eviltrout)

It’s in the right place! We changed the categories around a bit. The Plugins category is strictly for finished plugins. All feature requests, be it for core or plugins, belong in feature. Edited the category description to reflect that.

erlend_sh · January 8, 2016, 10:07am

As for the proposal in and of itself, I like all your design choices except for the “upvotes”. You came up with an elegant workaround to fit Likes into Upvotes, but did you have to work around it in the first place? This design will inevitably Make Me Think (which I Don’t want to do):

Where’s the downvote button?
Oh the entire thing is an upvote button. Didn’t expect that but ok.
Now I see the downvote button, but wait, if I click it am I removing my upvote or will it turn into a downvote?

I’m not saying everyone will think this, I’m just saying no one will think this if you stick with a compatible concept such as Likes or +1s.

Tom_Newsom · January 8, 2016, 11:03am

Just chipping in to say I agree - no need to rename Likes. Just move the heart icon and maybe overlay the counter on the heart, but no need to call it anything else.

mcwumbly · January 8, 2016, 12:03pm

So if its a link-post, I have to click the talk bubble icon to go to the discussion?

I realize that’s how reddit works, but I always find it frustrating on reddit that when I click the main text in the list I’m taken different places depending on what type of post it is.

What do you think about the idea of switching things around a bit in your case to have a more seamless experience when browsing via the default Latest page?

I think the implementation could reduce the scope of the effort and possibly create wider appeal:

Create a plugin where an additional URL field is can be made available on topics, not unlike what the tags plugin does here.
If a link is included in a main topic post, an icon is displayed next to the topic to show there is a main, outbound link associated with the topic (not unlike what the solved-button plugin does here).
If I click on this icon I’m taken off-site immediately to the link destination
Otherwise, if I click on the topic name text, I’m taken to the discussion as normal.

Separately, an up-vote plugin could enable all the other functionality you described. I can see that being useful independently and it has also come up here on meta several times.

commonpawn · January 8, 2016, 8:29pm

Yeah, i think what i am trying to say is that we have no idea how to build it. So putting this out here hoping for someone in the community thinking this would be a great plugin and would work with us to make it happen. We’re UX designers and front end dev’s so we can at least contribute to that part.

I am really trying to gauge how difficult this is to create as i am not familiar with building plugins for discourse. In my mind it seems relatively simple as we’re only talking about a few basic features to be added.

Regarding likes vs upvote
@erlend_sh & @Tom_Newsom

I was thinking a lot about that. The system i propose is actually the way they implemented it on Designer News and i think it works pretty well. +1 could also work - but i think it has to be clear that you’re ‘upvoting’ something and not simply liking it, which also means the total number of ‘votes’ should be big and clearly visible so the user understands why some things show up higher in the lists than others. (Notice the default home screen view is the Top posts)

I can try updated the wireframes with a +1 solution instead!

URL Field

I think these are great suggestions. I agree that it can be a little confusing for some users that you sometimes click a title to reach content on the site and sometimes get redirected to an external link. Let me maybe try mock something up based on what you’re suggesting.

Regarding having an additional URL field, like the tags plugin - i am a little worried that it can be a bit confusing if it is always there no matter what category you’re posting in. What if you’re making a normal text thread and it contains multiple links? Some users might be confused when seeing the input field saying ‘Add link here’. “What link should i add in there?”
That is why i suggest that we have a dedicated link Category which changes the normal text field to a one-line input field for an URL without the WYSIWYG editor

ewan · January 9, 2016, 2:11pm

Hi just thought I’d mention http://www.echojs.com/ which is a clone of hackernews using opensource https://github.com/antirez/lamernews

commonpawn · January 11, 2016, 6:41pm

This is great!

However, this platform, just like Telescope, is lacking all the other features that makes Discourse a great platform for discussion and community, such as

Notifications
Extensive user profiles
Mentions
Great comment features, such as an easy to use wysiwyg editor with drag and drop image upload
Follow posts
Super fast interface

Which is having this plugin for discourse would be amazing

commonpawn · January 22, 2016, 8:39pm

Update: Simplified and divided into two plugins

Big thanks goes out to people who took the time to give feedback on the plugin idea. As pointed out, this can be simplified and even split up into two different plugins. What i boiled it down to are these two plugins:

Link plugin

Need to have features

Ability to create link category where the WYSIWYG editor is replaced by a one-line link input field
Link is shown and can be accessed from front page of discourse forum in thread list view
In the thread itself, the link is the only content of the first post

Nice to have features

If Discourse cannot create one-box from link, the link is a simplified one-box where favicon and title is fetched.
Links are also shown in thread lists in digest mails from Discourse forum, so they can be accessed directly from your email client
Links are checked when pasted into link input field (e.g. did you type in a valid URL)

Wireframes

Link category

One-line input field which checks if URL is valid

If the link points to a destination we cannot create one-box from, link is displayed in a similar fashion as one-box without all the info that is usually fetched. Preferably we fetch fav-icon and title from destination URL

Thread view - first post only contains link

Front (Ability to click links in grey box to go directly to external link)

Digest email (Ability to click links in grey box to go directly to external link)

Upvote plugin

Basically a plugin that disguises Discourse’ default ‘like-system’ as an upvote system which also gives users the ability to vote posts from front page.

Need to have features

Ability to up-vote first post in a thread from front page of discourse forum
Change of name from likes to up-votes

Wireframes
Front page voting

Click to give your vote. Click again to remove it.

What it looks like in the thread view (Votes on first original posts are the ones shown on front. Notice all likes have been changed to up-voting for consistency)

We need your help

We’re designers, not developers. We have no clue how to build this. We hope someone wants to build this for free as a community plugin, but if that is not the case we’re also interested in hearing from plugin developers to get a quote on how much this would cost to build.

We’re hoping to launch our website sometime within the next 1-2 months and would love to have this feature at launch.

commonpawn · January 26, 2016, 8:30pm

Question: A very simple way to do this might be if it is possible to add custom field to a topic - e.g. like what has been done with the tagging plugin.

Would it be possible to make something simple like:

For a specific category a custom input field is shown and normal text input field is hidden
Content of custom field is shown in thread list on front page (like tagging plugin)
In thread itself the content of custom field is injected in content area of first post

Scripore · February 3, 2016, 12:53am

How difficult would it be to implement something like this? And to maintain the plugin so it continues working with future Discourse updates?

commonpawn · February 3, 2016, 2:15am

For the whole thing i heard everything from a week’s work to a month from people i contacted.

However, i think the simplest way to get started, by making a super super simple ‘submit link’ plugin would only be a couple of hours of work for an experienced developer. I outlined my idea of what it should be able to do below:

I am offering a brand new 32gb Nexus 5x to however could build the above

commonpawn · February 10, 2016, 10:05pm

Here is a list of communities/forums that applied the ‘hacker news logic’

https://news.ycombinator.com/

https://www.reddit.com/

https://crater.io/

joebuhlig · April 30, 2016, 11:32am

Hey team! I want to add some information to this thread since I just made an attempt to build a piece of this.

Creating the link topic seems to be covered by this plugin: https://github.com/danskdynamit/discourse-links-category

What I attempted was the upvote plugin. I found that without a significant amount of duplication of code and monkey-patching, it’s not possible to break out the like button and reuse it elsewhere. In order to add this like/vote button on the topic list, that’s exactly what you would need to do.

Currently, the like button is created within the widget for the post-menu. And since the like button has multiple actions tied to it, extracting it out of that widget isn’t a simple task. This is especially true when you account for those actions only being available from child widgets, which you can’t create from a plugin. So you would have to recreate the necessary actions and duplicate code.

As a community manager, my recommendation would be to sit tight and wait for plugins to be able to do this.

As a plugin author and contributor, I would ask if it’s possible to break the buttons in the post-menu out into their own widgets. I don’t think that would be too difficult and could likely lead to a lot of flexibility in authoring plugins.

michaeld · April 30, 2016, 3:40pm

You can’t just use likes to implement upvotes. Upvotes decay over time, likes don’t. So there is more to it.

commonpawn · May 9, 2016, 4:28pm

I agree
The plugin that would change the name of likes to upvotes and place them on the front-page was simply a quick and dirty fix and it would work to some extend since Discourse uses likes to rank top topics and what to include in digest mails.

What would be really awesome would be to have this implemented on the Feature Voting Plugin so you can vote on topics from the front-page and a custom view that shows trending/hot and top topics this week and some way to make the highest rated topics be included in the digest email

commonpawn · May 10, 2016, 3:53pm

Link Plugin

The Link Plugin, as mentioned earlier in this thread, has been built by @fantasticfears - read more about it here
https://meta.discourse.org/t/links-category-for-discourse/43532

See it in action here
http://beta.danskdynamit.com/

angus · July 20, 2016, 1:03pm

What’s the current status on the ‘upvote’ part of this spec?

As @joebuhlig notes, moving the like functionality to the discovery stream is a little tricky, but not impossible. It works relatively well in Topic Previews atm. The design of that could be tweaked to fit this spec.

Then it would be a matter of tweaking the list algo.

commonpawn · July 20, 2016, 3:52pm

We worked with @joebuhlig to try implement the voting buttons on the front page - but it turned out it was not as easy as we thought. So we’ve put that on ice for now.

So the plan for our site is to use plugin, Topic Previews, to display a like button on the front-page and we’re currently working with @joebuhlig on building a ‘hot topics page’ which is using a similar algorithm as Hackernews to sort topics. It should be done very soon and released on Github when ready.

Below how we plan to implement the like button on the topic list on Dansk Dynamit

Our dream is to completely customize the like buttons on discourse to maybe even change the name to upvote and maybe even change the markup to accommodate interaction animations like this one that i mocked up

angus · July 20, 2016, 5:58pm

Cool, looks like you’ve got all the pieces you need.

In terms of putting all the pieces together, I reckon you have two options, both of which are viable.

Integrate the code that topic previews uses to put like buttons in the topic list into the plugin @joebuhlig is building, rather than use two separate plugins. This would give you a bit more direct control, however will require a bigger dev investment. I can help out with thinking through any issues in translating the code.
Use Topic Previews with your own CSS skin. Topic Previews is under active development, so you get maintenance for free. On this front, I assume you’ve tested the interoperability of the link plugin with topic previews? Just on first glance, there may be some conflicts.

Topic		Replies	Views
Comment on a question instead of answering it Support	13	3464	December 14, 2023
A more social Discourse layout UX	52	7971	April 17, 2022
Dansk Dynamit website running on Discourse Praise	6	5682	April 26, 2017
A reddit-ish theme for Discourse Theme	67	8604	November 2, 2024
Header Submenus Theme component official , header-submenus	84	35882	October 22, 2024