Tiny fixups

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);

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,
   },
   {

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) {

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 }}>

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;
+};