Using localeCompare to sort posts in foreign language

[kaviars]

Dear community,

Somehow sorting posts in Latvian results in wrong order. Please help to get the posts sorted by alphabet.
Alphabet (in total Latvian alphabet consits of 33 letters) first 8 letters:
A a | Ā ā | B b | C c | Č č | D d | E e | Ē ē ...

To sort posts according to Latvian alphabet I use localeCompare as follows:

  eleventyConfig.addCollection("postsDescending", function(collection) {
    return collection.getFilteredByGlob("src/posts/*.md").sort(function(a, b) {
      return a.data.title.localeCompare(b.data.title, "lv-LV", {
        sensitivity: "variant",
        ignorePunctuation: true,
        usage: "sort"
      });
    });
  });

In result posts starting with long variation letter are displayed before posts starting with short variation letter, but should be the opposite.

Result:

1. Ērenpress ir velosipēdu ražotājs
2. Egles zarā sēž kaķis

Should be:

1. Egles zarā sēž kaķis
2. Ērenpress ir velosipēdu ražotājs

Just to be sure if localeCompare actually works, tried with other languages and sorting is fine, but not for my native Latvian.
Any ideas how to force sorting posts according to Latvian alphabet?

Tested localeCompare without Eleventy and it does work. #confused

"Ā".localeCompare("a", "lv-LV", {
  caseFirst: "upper",
  sensitivity: "variant",
  usage: "sort"
}) // 1

Thanks in advance,

[kaviars]

Alarm! Beginner in modern web dev!
Perhaps localeCompare polyfill is necessary to get it working properly? Not sure how to set it up though.. in .eleventy.js I've added const localeComparePolyfill = require("locale-compare-polyfill");, but how to connect to my "postsDescending" collection? Swapping localeCompare (from return a.data.title.localeCompare(b.data.title, "lv", {
) with localeComparePolyfill results in error.

[kaviars]

I am the author of that post 😬

[kaviars]

Fellow countryman helped out explaining each line to get sorting done without LocaleCompare. Though in Eleventy the code does not work, still sorting wrong :/
Working sample without Eleventy
https://jsfiddle.net/virsis12/L7vkxjun/

  eleventyConfig.addCollection("postsDescending", function (collection) {
    const alphabet = ['A','a','Ā','ā','B','b','C','c','Č','č','D','d','E','e','Ē','ē','F','f','G','g','Ģ','ģ','H','h','I','i','Ī','ī','J','j','K','k','Ķ','ķ','L','l','Ļ','ļ','M','m','N','n','Ņ','ņ','O','o','P','p','R','r','S','s','Š','š','T','t','U','u','Ū','ū','V','v','Z','z','Ž','ž'];
    return collection.getFilteredByGlob("src/posts/*.md")
    .sort(function (a, b) {
          const byLetters = (index) => {
            const titleA = a[index], titleB = b[index];
            if (!titleA || !titleB) {
              return titleA ? 1 : -1;
            }
            if (titleA === titleB) {
              return byLetters(index+1);
            }
            const indexA = alphabet.findIndex(c => c === titleA);
            const indexB = alphabet.findIndex(c => c === titleB);
            if (indexA < indexB) {
                return -1;
            }
            if (indexA > indexB) {
                return 1;
            }
          }
          return byLetters(0);      
        });
    });

[pdehaan]

I think your problem is around here:

const titleA = a[index], titleB = b[index];

... since a and b are page objects here and not simple strings (like the vanilla jsfiddle code). You probably want something like this:

    const titleA = a.data.title[index];
    const titleB = b.data.title[index];

It seems to work locally for me, but I should add more pages like your sample Latvian strings in

const titles = [
  "Ēnas",
  "Ēna",
  "Epizode",
  "Ēvele",
  "Egles zarā sēž kaķis",
  "Ērenpress ir velosipēdu ražotājs",
];

[kaviars]

🤦 How did I miss that ... Thanks for staying till end! 🙏🙏

[pdehaan]

And here's what my archive page looks like for me in 11ty w/ more pages:

<h2>Posts (sorted)</h2>
<ul>
  <li>aaa</li>
  <li>Egles zarā sēž kaķis</li>
  <li>Egles zarā sēž kaķis</li>
  <li>Egles zarā sēž kaķis</li>
  <li>Epizode</li>
  <li>Epizode</li>
  <li>Ēna</li>
  <li>Ēnas</li>
  <li>Ērenpress ir velosipēdu ražotājs</li>
  <li>Ērenpress ir velosipēdu ražotājs</li>
  <li>Ēvele</li>
  <li>ZZZ</li>
</ul>