Filtered Topic Lists

[gormus (Osman Gormus)]

	Summary	Allows creating custom topic list using filters. The lists then can be displayed in selected plugin outlet for selected pages.
	Repository	https://github.com/gormus/discourse-filtered-topic-lists
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Allows creating custom topic lists using the topic filters. The lists then can be displayed on selected pages, in selected plugin-outlets.

You can create as many lists as you need, define their headings, how many topics should be listed, what filters should be used for the query, and above all what pages they should be displayed on, and where on those pages.

Make sure to review the experimental topic list filter feature, and supported filters:

Experimental topics list filter feature

We have recently introduced an innovative /filter route, enabling more sophisticated filtering of the topics list. Significantly, this marks the initial step towards a unified topic filtering language for both search and filtering. Additionally, the dedicated route for topic list filtering enhances the customizability of the sidebar, as users can now incorporate links as custom section links within the sidebar. How to turn it on Enable the experimental_topics_filter site settings in the admin i…

Settings

• Title: An optional heading text; when provided it is displayed above the topic list.

• Length: The number of topics to display.

• Query: The query to filter the list

• Plugin Outlet: The curated topic lists can be placed in following plugin outlets/regions:

  • below-site-header
  • above-main-container
  • before-topic-list
  • after-topic-list
  • topic-list-bottom
  • main-outlet-bottom
  • before-main-outlet

• Show on: The page to display the list on.

  • everywhere: Display on every page, except the /admin pages.
  • homepage
  • top_menu: Check your top menu settings, for enabled pages.
  • categories: The /categories page.
  • latest: The /latest page.
  • top
  • new
  • unread
  • read
  • posted
  • bookmarks
  • hot
  • selected_categories:
  • selected_tags

• Selected categories: When show on setting is set to selected_categories, the categories selected in this field are used. The topic list will be shown on these category pages only.

• Selected tags: When show on setting is set to selected_tags, the tags selected in this field are used. The topic list will be shown on these tag pages only.

Plugin Outlets

All available plugin outlets are rendered with red dashed rule around them.

Inspiration

I was inspired by the Featured Lists theme-component. But at the end, I needed a less-opinionated, and more flexible solution for my project.

Make sure to check it out:

Featured Lists

Summary Create and feature custom topic lists Preview Theme Creator Repository GitHub - nolosb/discourse-featured-lists: A Discourse theme component to feature custom topic lists. Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component The component lets you filter custom topic lists and showcase the…

[Heliosurge (Dan DeMontmorency)]

This is pretty cool

Does it use the same targetable classes so you can style your component?

Could you add a couple of samples of custom lists in a couple of outlets?

Thanks

[gormus (Osman Gormus)]

@Heliosurge

Does it use the same targetable classes so you can style your component?

Yes, the filtered topic list tables use the same CSS classes as the main topic-list table. Additionally, there are wrapping DIV elements with classes which would help you customize the topic-list tables in any plugin-outlet.

Below you can see the hierarchy, and note that the .topic-list is the default identifier for the TABLE element. You can also target specific plugin-outlet to apply different styles if you need; see the second code block;

.filtered-topics-list {
    &__wrapper {
    }

    &__header {
        h2 {
        }
    }

    &__content.topic-list {
    }
}

.filtered-topics-list {
    &.below-site-header,
    &.above-main-container,
    &.before-topic-list,
    &.after-topic-list,
    &.topic-list-bottom,
    &.main-outlet-bottom,
    &.before-main-outlet {

        &__wrapper {
        }

        &__header {
            h2 {
            }
        }

        &__content.topic-list {
        }
    }
}

@Heliosurge

Could you add a couple of samples of custom lists in a couple of outlets?

I don’t have a demo site to show you that, but I shared a screenshot displaying all available plugin-outlets with various filtered topic lists.

Please ignore the red dashed rules around them, I only added them to highlight tables, and the regions they are in.

[bekircem]

I’m using /latest as the homepage. I added latest topics from specific categories to my homepage with this component, but I want to remove the standard and infinite scrolling Discourse’s latest topic component. I did this with CSS, but it’s affecting other pages as well. Is it possible to target latest topics component with CSS selectors only the homepage?

[nolo (Manuel)]

I believe you need to query the route and add a custom class using javascript. Here’s an example you could follow:

manuelkostka/discourse/helpers/css-classes/-/blob/main/javascripts/discourse/api-initializers/css-classes.js?ref_type=heads

[jrgong]

Found a bug (or expectded behaviour?):

setting Default List Filter: no subcategories in a category prevents any filtered topic lists to be displayed in any of the outlets.

Tested on latest stable 3.3.1.

[gormus (Osman Gormus)]

Hi @jrgong could you share a screenshot of your preset?