Add an "All" link to the first-level forum next to the subcategory list?

Product Support

AI-generated summary

The discussion revolves around adding an “All” link next to a subcategory list in the first-level forum. mattdm proposes this feature, as they find themselves drawn to selecting a subcategory instead of the main category.

mattdm suggests one possible solution: not allowing posts in the top-level category and creating a second-level category under the first. However, Johani offers an alternative solution: making the entire category container clickable, which would direct users to the parent category’s page. Johani provides the necessary code to implement this solution, including a script for the common > header tab and CSS for the common > CSS tab.

1

So, I’ve got this going on on my category list:

image
image449×187 18.3 KB

and I notice that even though I know what the structure is, I’m drawn to selecting one of the subcategories rather than clicking on the big News & Announcements category. Is there a way I could easily add an “All” link that would go to News & Announcements - Fedora Discussion (same as clicking on the header) either before or after the subcategories?

2

My current idea is to simply not allow posts in the top level, and to create a second-level news category under the first.

I’d love to hear any other ideas!

3

One thing you can try is to make the entire container clickable.

If you click on a subcategory, you get taken to it. If you click anywhere else inside the category container, you get taken to the parent category’s page.

This goes in the common > header tab.

<script type="text/discourse-plugin" version="0.8">
  const DiscourseURL = require("discourse/lib/url").default;

  api.modifyClass("component:categories-and-latest-topics", {
    pluginId: "clickable-category-boxes",
    click(event) {
      const target = event.target;

      const categoryContainer = target.closest("[data-category-id]");
      if (!categoryContainer) {
        return;
      }

      const isSubcategoryLink = target.closest(".badge-wrapper");
      if (isSubcategoryLink) {
        return;
      }

      const categoryLink = categoryContainer.querySelector(
        ".category-title-link"
      );

      const categoryURL = categoryLink.href;
      DiscourseURL.routeTo(categoryURL);
    },
  });
</script>

This goes in the common > CSS tab.

.category-list [data-category-id] {
  cursor: pointer;
}