Чотири найсвіжіші нотатки
без ручного сортування

Один список, два представлення

На головній Kotka.dev є маленький блокнот: обираєш заголовок — і на кремовій сторінці з’являється прев’ю. Архіву потрібні всі записи, головній — лише чотири найсвіжіші. Якби ми редагували два списки вручну, один із них легко було б забути.

Метадані й мовні версії зберігаємо в assets/js/notes-data.js. Запис має сталий id, дату, тему та явний статус. Повна стаття також має поле page. Саме цей список — джерело даних; обидві сторінки будують із нього власні представлення.

1. Не змінюй джерело
   Зроби копію масиву перед сортуванням. Архів і тести зможуть працювати з початковим порядком.
2. Спочатку найновіші
   Порівнюй дати, а не перекладені заголовки чи підписи для показу.
3. Візьми не більше чотирьох
   Головна отримує зріз, архів — повний відсортований список.

Невеликий приклад, який можна запустити

Запусти цей самодостатній JavaScript у консолі браузера або Node.js. У прикладі п’ять записів, зокрема два з однаковою датою. Початковий порядок навмисно не хронологічний.

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() змінює масив, який отримує, тому спочатку стоїть [...notes]. Копія поверхнева: об’єкти записів спільні, але функція лише читає їх. За однакових дат зберігається початковий порядок. MDN: sort()

slice(0, 4) бере індекси від 0 до 3 і нічого не видаляє з джерела. Якщо записів менше чотирьох, повертає лише наявні; порожній список залишається порожнім. Спершу сортування, потім зріз — інакше новіший запис унизу списку навіть не потрапить у порівняння. MDN: slice()

Дати — це домовленість про дані

Для нових записів використовуємо YYYY-MM-DD з нулями: наприклад, 2026-09-26. За такого узгодженого формату рік, місяць і день можна порівнювати як рядки. Підпис 26 · 09 · 2026 — лише оформлення; він не має ставати ключем сортування.

Короткі робочі нотатки, що підсумовують місяць, мають лише YYYY-MM: вони описують місяць, а не окремий день. Нинішнє рядкове порівняння ставить запис із днем перед записом лише з місяцем у межах того самого місяця. Це правило показу, а не доказ того, що було написано раніше. Якщо потрібна точна хронологія, потрібна й точна дата.

Під’єднай один раз і перевір правила

У нашій реалізації sorted та latest — спільні допоміжні функції в assets/js/notes.js. Архів показує all, кремове прев’ю та кнопки вибору працюють із latest. При виборі нотатки змінюється її ID, а не сама колекція.

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

• Додай найновіший запис у кінець вхідного масиву: на головній він усе одно має бути першим.
• Спробуй нуль, два й понад чотири записи. Переконайся, що початковий масив не змінився.
• Дай двом записам однакову дату. Порядок має відповідати джерелу, зокрема після перемикання мови.
• Відкрий п’ятий запис через архів. Зникнення з головної не має видаляти його чи ламати посилання.

Приклад вище також виконується в наших автоматичних перевірках. Його результат порівнюється зі справжньою вибіркою сайту, щоб пояснення непомітно не розійшлося з реалізацією.