Cztery najnowsze notatki
bez ręcznego sortowania

Jedna lista, dwa widoki

Na stronie głównej Kotka.dev jest mały notatnik: wybierasz tytuł, a na kremowej kartce pojawia się podgląd. Archiwum potrzebuje wszystkich wpisów, strona główna — tylko czterech najnowszych. Gdybyśmy ręcznie prowadziły dwie listy, łatwo byłoby zapomnieć o jednej z nich.

Metadane i wersje językowe przechowujemy w assets/js/notes-data.js. Wpis ma stałe id, datę, temat i jawny status. Pełny artykuł ma też pole page. To właśnie ta lista jest źródłem danych; obie strony budują na jej podstawie własne widoki.

1. Nie zmieniaj źródła
   Przed sortowaniem zrób kopię tablicy. Archiwum i testy będą mogły korzystać z pierwotnej kolejności.
2. Najnowsze na początek
   Porównuj daty, a nie przetłumaczone tytuły czy etykiety wyświetlane na stronie.
3. Weź najwyżej cztery
   Strona główna dostaje wycinek, a archiwum — całą posortowaną listę.

Mały przykład, który można uruchomić

Uruchom ten samodzielny JavaScript w konsoli przeglądarki lub w Node.js. Przykład zawiera pięć wpisów, w tym dwa z tą samą datą. Początkowa kolejność celowo nie jest chronologiczna.

function latestFour(notes) {
  return [...notes]
    .sort((a, b) => b.date.localeCompare(a.date))
    .slice(0, 4);
}

const notes = [
  { id: "a", date: "2026-08-01" },
  { id: "b", date: "2026-09-26" },
  { id: "c", date: "2026-01-10" },
  { id: "d", date: "2026-09-26" },
  { id: "e", date: "2026-09-22" }
];

const before = JSON.stringify(notes);
const result = latestFour(notes);
console.log(result.map(note => note.id));
// ["b", "d", "e", "a"]

console.assert(result.length === 4);
console.assert(JSON.stringify(notes) === before);
console.assert(latestFour([]).length === 0);
console.assert(latestFour(notes.slice(0, 2)).length === 2);

sort() zmienia otrzymaną tablicę, dlatego najpierw pojawia się [...notes]. To płytka kopia: obiekty wpisów są wspólne, ale funkcja tylko je odczytuje. Przy równych datach zachowuje pierwotną kolejność. MDN: sort()

slice(0, 4) wybiera indeksy od 0 do 3 i niczego nie usuwa ze źródła. Jeśli wpisów jest mniej niż cztery, zwraca tylko dostępne; pusta lista pozostaje pusta. Najpierw sortowanie, potem wycinek — inaczej nowszy wpis na końcu listy w ogóle nie trafi do porównania. MDN: slice()

Daty wymagają wspólnej konwencji

Nowe wpisy zapisujemy w formacie YYYY-MM-DD z zerami wiodącymi, na przykład 2026-09-26. Przy takim spójnym zapisie rok, miesiąc i dzień można porównywać jako ciągi znaków. Etykieta 26 · 09 · 2026 służy tylko do wyświetlania; nie powinna być kluczem sortowania.

Krótkie notatki robocze podsumowujące miesiąc mają jedynie YYYY-MM, bo opisują miesiąc, a nie konkretny dzień. Obecne porównanie tekstowe ustawia wpis z dniem przed wpisem zawierającym tylko miesiąc, jeśli dotyczą tego samego miesiąca. To reguła wyświetlania, nie dowód na kolejność powstania. Dokładna chronologia wymaga dokładnej daty.

Podłącz raz i sprawdź reguły

W naszej implementacji sorted i latest to wspólne funkcje pomocnicze w assets/js/notes.js. Archiwum pokazuje all, a kremowy podgląd i przyciski wyboru korzystają z latest. Wybranie notatki zmienia jej ID, nie całą kolekcję.

const all = window.KotkaNotebookData.sorted(
  window.KOTKA_NOTES || []
);
const latest = window.KotkaNotebookData.latest(all);

• Dodaj najnowszy wpis na końcu tablicy wejściowej: na stronie głównej nadal powinien być pierwszy.
• Sprawdź zero, dwa i więcej niż cztery wpisy. Upewnij się, że tablica źródłowa się nie zmieniła.
• Nadaj dwóm wpisom tę samą datę. Ich kolejność powinna odpowiadać źródłu, także po zmianie języka.
• Otwórz piąty wpis przez archiwum. Zniknięcie ze strony głównej nie może go usuwać ani psuć jego linku.

Powyższy przykład uruchamiamy również w testach automatycznych. Jego wynik porównujemy z faktyczną funkcją wyboru wpisów, aby opis nie rozminął się po cichu z działaniem strony.