Versatile Showcase

Customization Theme component

AI-generated summary

The Versatile Showcase theme component, now deprecated, allows users to display diverse topic lists on the homepage with customizable settings for feed titles, filters, and layout. Originally a spin-off from Showcased Categories, it was rewritten by manuel and is hosted on a new repository with a new topic for Discourse 3.2.0.beta3 and above. Users can configure list length, filters, and positioning via outlets like discovery-list-container-top. The component uses flexboxes, allowing flexible layout adjustments through CSS. Feedback includes suggestions for additional outlets and layout improvements, with manuel acknowledging the need to refine title column width and fix a login-related bug where the component fails to render when above-main-container is used. A workaround involves using the discovery-list-container-top outlet. Additionally, a user requests a mobile-friendly divider to improve visual separation between showcase and latest content sections. manuel, Zup, JBM, and Jagster contribute to the discussion.

1

:warning: :mechanic:t4:

I did a full re-write of this component. It’s hosted on a new repository and has a new topic: Featured Lists

This version continues to work fine for now, but if you’re on Discourse 3.2.0.beta3 or above please use the new version.

This component lets you feed diverse topic lists on your homepage. The default look:

Screenshot from 2022-07-29 16-38-47
Screenshot from 2022-07-29 16-38-471243×1006 89.3 KB

On the component settings you can define the feed lists and the outlet postition:

Screenshot from 2022-07-29 16-37-33
Screenshot from 2022-07-29 16-37-33646×561 14.9 KB

The feed list format is a bit advanced and you have to understand a few list concepts of Discourse to make good use of it. You set the

  • feed title
  • list length
  • list filter (latest,top,unread,..)
  • tag filter (as defined by the tag slug)
  • category filter (as defined by the category id)
  • feed link (where clicking the More button takes you)

Lists are set up as flex-boxes, so when there’s only one it will stretch out by default:

Screenshot from 2022-07-29 16-39-33
Screenshot from 2022-07-29 16-39-331177×425 34.5 KB

:+1: Credits: The component is a spin-off from Showcased Categories. @Ahmed_Gagan extended the functionality and I rewrote the architecture. In the end we changed so much that it’s not compatible any more.
:hammer_and_wrench: Repository GitHub - nolosb/discourse-versatile-showcase · GitHub
:question: Install Guide How to install a theme or theme component
18 Likes
Hello Community Experts- are we able to configure discussions to be threads AND questions?
Pinboard, a simple UI theme
Component/plugin to show most active topics?
Showcased Categories
2

Cool plugin, makes the homepage feel more interactive.

I have two, maybe three suggestions:

  1. add a discovery-list-container-bottom outlet
  2. increase width of title first column when multiple lists are side-by-side
  3. optionally configure more than two lists per row?
1 Like
3

Thanks for the suggestions @Zup!

I don’t think I’ll add more outlets as I already have three on it. If you need a specific one you’d need to fork and add it there.

The lists are flexboxes. You can change the flex behavior with CSS and get more or just one list per row.

If you mean this, then yeah, I should adjust the width there better :+1:

image
image266×423 6.13 KB

4

Tks for this great component @manuel .

I would really like to use it but once it’s installed:
-everything seems to be fine, except
-my login box to the instance is set to “display: none” (so the login page becomes totally blank).

I guess there must be a conflit somewhere.

Does anybody already had this kind of trouble and do you have an idea of where i could try to investigate?

Tks a lot.

1 Like
5

houuurraa…

i have a proxy to solve this: i am not shure to understand why but it is 100% ok when i select the discovery-list-container-top

image
image742×317 12.8 KB

i was having the issue with the above-main-container setup. nevermind for now, the discovery-list-container-top is fine with my running instances.

1 Like
6

Thanks for reporting this @JBM. I can reproduce the issue, the code to generate the list is running in a loop when it can’t access the site content (because login is required). It works when the discovery-list-container-top outlet is selected, because this outlet is only available after login. Will have to look into that.

1 Like
7

If you have time would you like to create somekind neat divider for mobiles, there where showcase part where an user moves to ordinary latest? Now it looks like the last part would continue endlessy.