From f94d6b24ab7bc9bf54012da3f39636e822b04c44 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sat, 13 Jul 2024 10:57:53 +0200
Subject: [PATCH] Tiny fixups

---
 src/i18n/i18n.ts                              |  4 ++--
 src/pages/[locale]/images/[id].astro          |  4 ++--
 src/pages/[locale]/index.astro                | 20 ++++++++++++-------
 .../timeline/_components/TimelineEvent.astro  |  3 ++-
 src/utils/format.ts                           |  8 ++++++++
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
index aa31395..a601956 100644
--- a/src/i18n/i18n.ts
+++ b/src/i18n/i18n.ts
@@ -1,5 +1,5 @@
 import type { WordingKey } from "src/i18n/wordings-keys";
-import type { ChronologyEvent, EndpointSource } from "src/shared/payload/payload-sdk";
+import type { EndpointChronologyEvent, EndpointSource } from "src/shared/payload/payload-sdk";
 import { contextCache } from "src/utils/payload";
 import { capitalize, formatInlineTitle } from "src/utils/format";
 
@@ -177,7 +177,7 @@ export const getI18n = async (locale: string) => {
     return number.toLocaleString(locale, options);
   };
 
-  const formatTimelineDate = ({ year, month, day }: ChronologyEvent["date"]): string => {
+  const formatTimelineDate = ({ year, month, day }: EndpointChronologyEvent["date"]): string => {
     const date = new Date(0);
     date.setFullYear(year);
     if (month) date.setMonth(month - 1);
diff --git a/src/pages/[locale]/images/[id].astro b/src/pages/[locale]/images/[id].astro
index b7f78b9..731d241 100644
--- a/src/pages/[locale]/images/[id].astro
+++ b/src/pages/[locale]/images/[id].astro
@@ -27,7 +27,7 @@ const {
   height,
 } = image;
 
-const { getLocalizedMatch, formatDate, t, formatFilesize } = await getI18n(
+const { getLocalizedMatch, formatDate, t, formatFilesize, formatNumber } = await getI18n(
   Astro.locals.currentLocale
 );
 
@@ -56,7 +56,7 @@ const metaAttributes = [
   {
     title: t("global.media.attributes.resolution"),
     icon: "material-symbols:photo-size-select-large",
-    values: [{ name: `${width} x ${height}` }],
+    values: [{ name: `${formatNumber(width)} x ${formatNumber(height)}` }],
     withBorder: false,
   },
   {
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 33813a3..26d54f9 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -143,19 +143,25 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
     margin-top: 64px;
   }
 
-  section {
+  section:not([hidden]) {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    
+    & > h2 {
+      margin-bottom: -12px;
+    }
+
+    & > a {
+      width: fit-content
+    }
+
     & > p {
       max-width: 35em;
       line-height: 1.5;
-      margin-top: 12px;
-      margin-bottom: 24px;
     }
 
     &#library {
-      & > a {
-        display: block;
-        margin-bottom: 24px;
-      }
 
       & > .grid {
         @media (max-width: 40rem) {
diff --git a/src/pages/[locale]/timeline/_components/TimelineEvent.astro b/src/pages/[locale]/timeline/_components/TimelineEvent.astro
index e1d651b..7d48fe4 100644
--- a/src/pages/[locale]/timeline/_components/TimelineEvent.astro
+++ b/src/pages/[locale]/timeline/_components/TimelineEvent.astro
@@ -2,6 +2,7 @@
 import { getI18n } from "src/i18n/i18n";
 import type { EndpointChronologyEvent } from "src/shared/payload/payload-sdk";
 import TimelineEventPartial from "../../api/timeline/partial.astro";
+import { formatTimelineDateToId } from "src/utils/format";
 
 interface Props {
   event: EndpointChronologyEvent;
@@ -25,7 +26,7 @@ const multiple = displayDate && events.length > 1;
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<div class="event-container">
+<div class="event-container" id={formatTimelineDateToId(date)}>
   {
     displayDate && (
       <h3 class="font-xl" class:list={{ multiple }}>
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 47282a2..4a17dbe 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -3,6 +3,7 @@ import {
   isNodeListNode,
   isNodeParagraphNode,
   isNodeTextNode,
+  type EndpointChronologyEvent,
   type RichTextContent,
   type RichTextNode,
 } from "src/shared/payload/payload-sdk";
@@ -53,3 +54,10 @@ export const capitalize = (string: string): string => {
   if (firstLetter === undefined) return "";
   return [firstLetter.toUpperCase(), ...otherLetters].join("");
 };
+
+export const formatTimelineDateToId = (date: EndpointChronologyEvent["date"]): string => {
+  let result = date.year.toString();
+  if (date.month) result += `-${date.month.toString().padStart(2, "0")}`;
+  if (date.day) result += `-${date.day.toString().padStart(2, "0")}`;
+  return result;
+};