diff --git a/contents.js b/contents.js index 0042c39..f3f1b12 100644 --- a/contents.js +++ b/contents.js @@ -137,8 +137,8 @@ function createDate(string) { if (date) { const options = { year: "numeric", month: "short", day: "numeric" }; parsed = date.toLocaleDateString("en-EN", options); + if (parsed === "Invalid Date") parsed = "???"; } - return parsed; } @@ -149,15 +149,17 @@ function createTags(categories) { let tagsContainer = document.createElement("ul"); // For each category create a li element - categories.forEach((item) => { - let tag = document.createElement("li"); - tag.classList.add("tag"); - tag.innerHTML = item; - tagsContainer.appendChild(tag); - - // add the category to the filters Set to use it later - filters.add(item); - }); + categories + .sort((a, b) => a.localeCompare(b)) + .forEach((item) => { + let tag = document.createElement("li"); + tag.classList.add("tag"); + tag.innerHTML = item; + tagsContainer.appendChild(tag); + + // add the category to the filters Set to use it later + filters.add(item); + }); return tagsContainer; } @@ -168,17 +170,19 @@ function createTags(categories) { // Parse the filters Set to create a list of interactive list elements function createFilters() { - filters.forEach((item) => { - let tag = document.createElement("li"); - // Store the filter value in the markup and use it for filtering later - tag.setAttribute("data-tag", item); - // Tab index is for accessibility via keyboard - tag.setAttribute("tabindex", 0); - tag.setAttribute("role", "button"); - tag.classList.add("tag"); - tag.innerHTML = item; - filtersContainer.appendChild(tag); - }); + Array.from(filters) + .sort((a, b) => a.localeCompare(b)) + .forEach((item) => { + let tag = document.createElement("li"); + // Store the filter value in the markup and use it for filtering later + tag.setAttribute("data-tag", item); + // Tab index is for accessibility via keyboard + tag.setAttribute("tabindex", 0); + tag.setAttribute("role", "button"); + tag.classList.add("tag"); + tag.innerHTML = item; + filtersContainer.appendChild(tag); + }); // Build a list of the tag for managing the filter tagList = document.querySelectorAll("[data-tag]"); } diff --git a/style.css b/style.css index a307f14..d90ff2b 100644 --- a/style.css +++ b/style.css @@ -40,7 +40,8 @@ h1 { background: none; } -.tag:focus { +.tag:focus, +.tag:hover { transform: translateY(-4px); transition: transform 0.2s ease-out; } @@ -51,10 +52,18 @@ ul { /* TABLE */ +table { + border-collapse: collapse; +} + tr { display: none; } +tr:nth-child(even) { + background-color: rgb(251, 237, 225); +} + tr.active { display: table-row; }