Display error when no source

TODO.md

@@ -2,13 +2,19 @@
 
 ## Short term
 
-- [Scripts] Can't run the scripts using node (ts-node?)
+- [Timeline] inline links to pages not working (timeline 2026/06)
+- [Timeline] 11940-11 says december on the website.
+- [Home] Have the event count reflect the actual number
 - Save cookies for longer than just the session
+- [Payload] Stop sending Rich text content if it is empty
 
 ## Mid term
 
+- [Scripts] Can't run the scripts using node (ts-node?)
 - Support for nameless section
 - [Timeline] Error if collectible not published?
+- [Timeline] Handle no JS for footers
+- [Timeline] Add details button in footer with credits + last updated / created
 - [Collectibles] Create page for gallery
 - [Collectibles] Create page for scans
 - When the tags overflow, the tag group name should be align start (see http://localhost:12499/en/pages/magnitude-negative-chapter-1)
@@ -16,6 +22,7 @@
 
 ## Long term
 
+- [Timeline] Some filtering options (by source/languages/)
 - The Chronicles
 - The Changelog
 - Grid view (all files)

src/components/AppLayout/components/Html.astro

@@ -536,6 +536,23 @@ const { currentTheme } = Astro.locals;
     overflow: hidden !important;
   }
 
+  @keyframes flashingRed {
+    from {
+      background-color: #ff000022;
+    }
+
+    to {
+      background-color: #ff000033;
+    }
+  }
+
+  .error-message {
+    animation: flashingRed;
+    animation-duration: 0.5s;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+  }
+
   @media print {
     .when-no-print {
       display: none !important;

src/components/ErrorMessage.astro

@@ -9,23 +9,17 @@ interface Props {
 const { title, description } = Astro.props;
 ---
 
-<div>
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<div class="error-message">
   <Icon name="material-symbols:error-outline" width={32} height={32} />
   <p id="title">{title}</p>
   {description && <p>{description}</p>}
 </div>
 
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+
 <style>
-  @keyframes flashingRed {
-    from {
-      background-color: #ff000022;
-    }
-
-    to {
-      background-color: #ff000033;
-    }
-  }
-
   div {
     color: var(--color-critical-error) !important;
     padding: 2em 2em !important;
@@ -34,11 +28,6 @@ const { title, description } = Astro.props;
     display: grid;
     place-items: center;
 
-    animation: flashingRed;
-    animation-duration: 0.5s;
-    animation-direction: alternate;
-    animation-iteration-count: infinite;
-
     & > #title {
       font-weight: 600;
       font-size: 120%;

src/dataConfig.ts

@@ -5,11 +5,11 @@ const timelineEras: { name: WordingKey; start: number; end: number }[] = [
   {
     name: "timeline.eras.drakengard3",
     start: 997,
-    end: 1000,
+    end: 1001,
   },
   {
     name: "timeline.eras.drakengard",
-    start: 1001,
+    start: 1003,
     end: 1099,
   },
   {
@@ -31,7 +31,7 @@ const timelineEras: { name: WordingKey; start: number; end: number }[] = [
 
 export const dataConfig = {
   timeline: {
-    yearsWithABreakBefore: [856, 997, 1001, 1118, 1957, 2003, 2049, 2050, 3361, 3463],
+    yearsWithABreakBefore: [856, 997, 1003, 1118, 1957, 2003, 2049, 2050, 3361, 3463],
     eras: timelineEras,
   },
 };

src/i18n/i18n.ts

@@ -159,7 +159,7 @@ export const getI18n = async (locale: string) => {
   };
 
   const formatTimelineDate = ({ year, month, day }: ChronologyEvent["date"]): string => {
-    const date = new Date();
+    const date = new Date(0);
     date.setFullYear(year);
     if (month) date.setMonth(month - 1);
     if (day) date.setDate(day);

src/pages/[locale]/api/timeline/partial.astro

@@ -29,11 +29,13 @@ const { title, description, notes, proofreaders, transcribers, translators } =
   getLocalizedMatch(translations);
 ---
 
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
 <MasoTarget>
   <div class="event">
     <TimelineEventTranslation title={title} description={description} />
     <div id="bottom" class="when-js when-no-print">
-      {sources.length > 0 && <TimelineSourcesButton sources={sources} />}
+      <TimelineSourcesButton sources={sources} />
       {notes && <TimelineNote notes={notes} />}
       <TimelineLanguageOverride
         availableLanguages={translations.map(({ language }) => language)}
@@ -48,6 +50,8 @@ const { title, description, notes, proofreaders, transcribers, translators } =
   </div>
 </MasoTarget>
 
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+
 <style>
   .event {
     display: flex;

src/pages/[locale]/timeline/_components/TimelineSourcesButton.astro

@@ -14,17 +14,30 @@ const { sources } = Astro.props;
 const { t } = await getI18n(Astro.locals.currentLocale);
 ---
 
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+{
+  sources.length === 0 ? (
+    <div class="no-sources error-message">
+      <Icon name="material-symbols:warning-outline" />
+      <p>{t("timeline.eventFooter.sources", { count: sources.length })}</p>
+    </div>
+  ) : (
     <Tooltip trigger="click">
       <div id="tooltip-content" slot="tooltip-content">
-    {sources.map((source) => <SourceRow source={source} />)}
+        {sources.map((source) => (
+          <SourceRow source={source} />
+        ))}
       </div>
       <div class="pressable-label">
         <Icon name="material-symbols:edit-note" />
-    <p>
-      {t("timeline.eventFooter.sources", { count: sources.length })}
-    </p>
+        <p>{t("timeline.eventFooter.sources", { count: sources.length })}</p>
       </div>
     </Tooltip>
+  )
+}
+
+{/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
   #tooltip-content {
@@ -32,4 +45,15 @@ const { t } = await getI18n(Astro.locals.currentLocale);
     gap: 0.5em;
     font-size: 1rem;
   }
+  .no-sources {
+    flex-shrink: 0;
+    display: flex;
+    place-items: center;
+    gap: 0.4em;
+    padding: 0.7em 0.8em;
+    border-radius: 9999px;
+
+    backdrop-filter: blur(10px);
+    color: color-mix(in srgb, var(--color-base-1000) 60%, var(--color-critical-error));
+  }
 </style>