Make category listings on sortable chronologically

[haraldgroven]

Description

When using Quarto website categories are by default sorted alphabetically, starting with an "All" category. However, if categories are numeric, like years in YYYY format, lowest numbers are sorted first. Are there some undocumented? settings for having a custom sort order for listings, so that highest number (eg years) are first, while non-numeric categories are sorted A-Z?
If not, it can be a feature request.

[mcanouil]

Could you modify your alt-text to be informative? Same goes for your "undocumented?" link.
Thank you!

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

Important

Accessibility: For better accessibility, please ensure link text is descriptive and meaningful rather than using generic terms such as "here". This helps all users understand the link's destination. See Writing meaningful link text (WCAG).

[mcanouil]

Categories are sorted alphabetically, this is done is:

• quarto-cli/src/project/types/website/listing/website-listing-categories.ts

  Lines 75 to 84 in 333f9bd

  	for (
  	const cat of Object.keys(cats).sort((a: string, b: string) =>
  	a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase())
  	)
  	) {
  	const count = cats[cat];
  	const catEl = categoryElement(doc, cat, formatFn(cat, count), cat);
  	categoriesEl.appendChild(catEl);
  	}

There are no native option to change that.

Because, it's HTML, you can access the DOM and modify it as you wish.
Modify sortCategories in whatever way you see fit. (try it first)

include-after-body:
  - text: |
      <script src="custom-category-sort.js"></script>

custom-category-sort.js:

/**
 * Custom Category Sorting for Quarto Listings
 * Sorts: All first, then numerical (descending), then alphabetical (ascending).
 *
 * @author Mickaël Canouil
 * @license MIT
 * @copyright 2026 Mickaël Canouil
 */
(function () {
  "use strict";

  function sortCategories() {
    const container = document.querySelector(".quarto-listing-category");
    if (!container) return;

    [...container.querySelectorAll(".category")]
      .sort((a, b) => {
        const attrA = a.dataset.category;
        const attrB = b.dataset.category;
        if (attrA === "") return -1;
        if (attrB === "") return 1;

        const textA = a.textContent.trim().replace(/\s*\(\d+\)$/, "");
        const textB = b.textContent.trim().replace(/\s*\(\d+\)$/, "");
        const numA = /^\d+$/.test(textA);
        const numB = /^\d+$/.test(textB);

        if (numA && numB) return +textB - +textA;
        if (numA !== numB) return numA ? -1 : 1;
        return textA.localeCompare(textB);
      })
      .forEach((el) => container.appendChild(el));
  }

  const orig = window["quarto-listing-loaded"];
  window["quarto-listing-loaded"] = () => {
    if (orig) orig();
    sortCategories();
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", sortCategories);
  } else {
    sortCategories();
  }
})();