The chronology items now working!

src/components/Chronology/ChronologyItem.tsx

@@ -0,0 +1,51 @@
+import styles from "styles/Chronology/ChronologyItemDisplay.module.css";
+import {
+    ChronologyItem,
+    ChronologyItemsEvent,
+  } from "queries/chronology/overview";
+
+
+export default function ChronologyItemDisplay(pageProps: ChronologyItem) {
+
+    function generateAnchor(year: number, month: number, day:number, event?: number): string {
+        let result: string = "";
+        result += year;
+        if (month) result += '-' + month;
+        if (day) result += '-' + day;
+        return result;
+    }
+
+    function generateDate(displayed_date: string, year: number, month: number, day:number) {
+        let result: string = "";
+        if (displayed_date) {
+            result += displayed_date;
+        } else {
+            result += year;
+        }
+        if (month) result += '/' + month;
+        if (day) result += '/' + day;
+        return result;
+    }
+
+  return (
+    <div id={generateAnchor(item.attributes.year, item.attributes.month, item.attributes.day)}>
+    <h2>{generateDate(item.attributes.displayed_date, item.attributes.year, item.attributes.month, item.attributes.day)}</h2>
+    {item.attributes.events.map((event: ChronologyItemsEvent) => (
+      <div key={"chronoEvent" + event.id}>
+        <h3>
+          {event.translations.length ? event.translations[0].title : ""}
+        </h3>
+        <p>
+          {event.translations.length
+            ? event.translations[0].description
+            : ""}
+          <em> {event.translations.length ? event.translations[0].note : ""}</em>
+        </p>
+        <p>
+          <em>{event.source.data ? event.source.data.attributes.name : ""}</em>
+        </p>
+      </div>
+    ))}
+  </div>
+  );
+}

src/components/Chronology/ChronologyItemComponent.tsx

@@ -0,0 +1,82 @@
+import styles from "styles/Chronology/ChronologyItemComponent.module.css";
+import {
+  ChronologyItem,
+  ChronologyItemsEvent,
+  ChronologyItemsEventTranslation,
+} from "queries/chronology/overview";
+
+export default function ChronologyItemComponent(pageProps: ChronologyItem) {
+  function generateAnchor(
+    year: number,
+    month: number,
+    day: number,
+    event?: number
+  ): string {
+    let result: string = "";
+    result += year;
+    if (month) result += "-" + month;
+    if (day) result += "-" + day;
+    return result;
+  }
+
+  function generateYear(displayed_date: string, year: number): string {
+    if (displayed_date) {
+      return displayed_date;
+    } else {
+      return year.toString();
+    }
+  }
+
+  function generateDate(month: number, day: number): string {
+    let result: string = "";
+    if (month) result += month.toString().padStart(2, "0");
+    if (day) result += "/" + day.toString().padStart(2, "0");
+    return result;
+  }
+
+  return (
+    <div
+      className={styles.chronologyItem}
+      id={generateAnchor(
+        pageProps.attributes.year,
+        pageProps.attributes.month,
+        pageProps.attributes.day
+      )}
+    >
+      <p className={styles.year}>
+        {generateYear(
+          pageProps.attributes.displayed_date,
+          pageProps.attributes.year
+        )}
+      </p>
+
+      <p className={styles.date}>
+        {generateDate(pageProps.attributes.month, pageProps.attributes.day)}
+      </p>
+
+      <div className={styles.events}>
+        {pageProps.attributes.events.map((event: ChronologyItemsEvent) => (
+          <div className={styles.event} key={event.id}>
+            {event.translations.map(
+              (translation: ChronologyItemsEventTranslation) => (
+                <>
+                  <h3>{translation.title}</h3>
+                  <p className={event.translations.length > 1 ? styles.bulletItem : ""}>
+                    {translation.description}
+                    <em> {translation.note}</em>
+                  </p>
+                </>
+              )
+            )}
+
+            <p className={styles.source}>
+              {event.source.data
+                ? "(" + event.source.data.attributes.name + ")"
+                : ""}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/Chronology/ChronologyYearComponent.tsx

@@ -0,0 +1,23 @@
+import styles from "styles/Chronology/ChronologyYearComponent.module.css";
+import {
+  ChronologyItem
+} from "queries/chronology/overview";
+import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
+
+type ChronologyYearComponentProps = {
+    items: ChronologyItem[];
+}
+
+export default function ChronologyYearComponent(props: ChronologyYearComponentProps) {
+  return (
+    <div>
+      {props.items.map((item: ChronologyItem, index: number) => (
+        <ChronologyItemComponent
+          key={item.id}
+          id={item.id}
+          attributes={item.attributes}
+        />
+      ))}
+    </div>
+  );
+}

src/pages/chronology/overview.tsx

@@ -3,11 +3,14 @@ import ContentPanel from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
 import ReturnButton from "components/Panels/ReturnButton";
 import NavOption from "components/Panels/NavOption";
+import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
+import ChronologyYearComponent from "components/Chronology/ChronologyYearComponent";
 import {
   getChronologyItems,
   getChronologyEras,
   ChronologyItem,
   ChronologyEra,
+  ChronologyItemsEvent,
 } from "queries/chronology/overview";
 
 type Props = {
@@ -16,26 +19,86 @@ type Props = {
 };
 
 export default function ChronologyOverview(props: Props): JSX.Element {
+
+  let previousYear = -1;
+
+  let chronologyItemYearGroups: ChronologyItem[][] = [];
+
+
+  // Group by year the Chronology items
+  props.chronologyItems.map((item: ChronologyItem) => {
+    if (!chronologyItemYearGroups.hasOwnProperty(item.attributes.year)) {
+      chronologyItemYearGroups[item.attributes.year] = [item];
+    } else {
+      chronologyItemYearGroups[item.attributes.year].push(item);
+    }
+  });
+
+  console.log(chronologyItemYearGroups);
+
+  
+
   return (
     <>
       <SubPanel>
+        {props.chronologyEras.map((era: ChronologyEra) => {
+          if (era.id == undefined) console.warn(era);
+        })}
+
         <ReturnButton url="/chronology" title="Chronology" />
         <hr />
 
-        {console.log(props.chronologyEras)}
-
         {props.chronologyEras.map((era: ChronologyEra) => (
           <NavOption
             key={era.id}
             url={"#" + era.attributes.slug}
-            title={era.attributes.title[0].title ? era.attributes.title[0].title : ''}
+            title={
-            subtitle={era.attributes.starting_year + " → " + era.attributes.ending_year}
+              era.attributes.title.length ? era.attributes.title[0].title : ""
+            }
+            subtitle={
+              era.attributes.starting_year + " → " + era.attributes.ending_year
+            }
             border={true}
           />
         ))}
       </SubPanel>
 
+      <ContentPanel>
+        {props.chronologyItems.map((item: ChronologyItem) => {
+          if (!item.attributes.year)
+            console.warn("Missing year on ChronologyItem (" + item.id + ")");
+          item.attributes.events.map((event: ChronologyItemsEvent) => {
+            if (!event.source.data) {
+              console.warn(
+                "Missing Source on ChronologyItem (" +
+                  item.id +
+                  "), Event (" +
+                  event.id +
+                  ")"
+              );
+            }
+            if (event.translations.length !== 1) {
+              console.warn(
+                "Wrong number of Translation(s) on ChronologyItem (" +
+                  item.id +
+                  "), Event (" +
+                  event.id +
+                  ")"
+              );
+            }
+          });
+        })}
 
+        {chronologyItemYearGroups.map((items: ChronologyItem[], index: number) => {
+          return (
+            <ChronologyYearComponent
+              key={index}
+              items={items}
+            />
+          )
+
+        })}
+      </ContentPanel>
     </>
   );
 }
@@ -43,7 +106,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
 export const getStaticProps: GetStaticProps = async (context) => {
   return {
     props: {
-      /*chronologyItems: await getChronologyItems(context.locale),*/
+      chronologyItems: await getChronologyItems(context.locale),
       chronologyEras: await getChronologyEras(context.locale),
     },
   };

src/queries/chronology/overview.ts

@@ -2,36 +2,76 @@ import { queryGraphQL } from "queries/helpers";
 
 export type ChronologyItem = {
   id: string;
+  attributes: ChronologyItemAttributes;
+};
+
+export type ChronologyItemAttributes = {
   year: number;
   month: number;
   day: number;
-  translations: ChronologyItemsTranslation[];
+  displayed_date: string;
+  events: ChronologyItemsEvent[];
+}
+
+export type ChronologyItemsEvent = {
+  id: string;
+  source: Source
+  translations: ChronologyItemsEventTranslation[];
 };
 
-export type ChronologyItemsTranslation = {
+export type ChronologyItemsEventTranslation = {
   title: string;
-};
+  description: string;
+  note: string;
+  status: string;
+}
+
+export type Source = {
+  data: {
+    attributes: {
+      name: string;
+    }
+  }
+}
 
 export async function getChronologyItems(
-  languages_code: String | undefined
+  language_code: String | undefined
 ): Promise<ChronologyItem[]> {
   return (
     await queryGraphQL(
       `
-          {
+      {
-              chronology_items {
+        chronologyItems (pagination: {limit: -1}, sort: ["year:asc", "month:asc", "day:asc"]) {
-                  id
+          data {
-                  year
+            id
-                  month
+            attributes {
-                  day
+              year
-                  translations(filter: { languages_code: { code: { _eq: "` + languages_code + `" } } }) {
+              month
-                      title
+              day
+              displayed_date
+              events {
+                id
+                source {
+                  data {
+                    attributes {
+                      name
+                    }
                   }
+                }
+                translations(filters: { language: { code: { eq: "` + language_code + `" } } }) {
+                  title
+                  description
+                  note
+                  status
+                }
               }
+            }
           }
-          `
+        }
+      }
+      `
     )
-  ).chronology_items;
+  ).chronologyItems.data;
 }
 
 export type ChronologyEra = {
@@ -40,9 +80,9 @@ export type ChronologyEra = {
 };
 
 export type ChronologyEraAttributes = {
+  slug: string;
   starting_year: number;
   ending_year: number;
-  slug: string;
   title: ChronologyEraTranslation[];
 }
 
@@ -59,7 +99,9 @@ export async function getChronologyEras(
       {
         chronologyEras {
           data {
+            id
             attributes {
+              slug
               starting_year
               ending_year
               title (filters: {language: {code: {eq: "` + language_code + `"}}}){

src/styles/Chronology/ChronologyItemComponent.module.css

@@ -0,0 +1,62 @@
+.chronologyItem {
+    display: grid;
+    grid-template-areas:
+        "year events"
+        "date events"
+        ;
+    grid-column-gap: 1em;
+    place-content: start;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 4em;
+    margin-bottom: 1.5em;
+}
+
+.chronologyItem:target {
+    background-color: var(--color-main-base);
+    border-radius: 1em;
+    padding: 1em 2em 1em 1.5em;
+}
+
+.chronologyItem > .year {
+    grid-area: year;
+    margin: 0;
+    font-weight: bold;
+}
+
+.chronologyItem > .date {
+    grid-area: date;
+    margin: 0;
+}
+
+.chronologyItem > .events {
+    grid-area: events;
+}
+
+.event {
+    margin-bottom: 1em;
+}
+
+.event > h3 {
+    margin: 0;
+}
+
+.event > p {
+    margin: 0;
+}
+
+.event > .bulletItem::before {
+    content: "⁃";
+    color: var(--color-main-dark);
+    display: inline-block;
+    width: 1em;
+    margin-left: -1em
+}
+
+.event > .bulletItem {
+    margin-top: .5em;
+}
+
+.source {
+    color: var(--color-main-dark);
+    font-size: 80%;
+}

src/styles/Panels/Panels.module.css

@@ -9,6 +9,7 @@
   grid-row-gap: 0.5em;
   place-content: start center;
   scrollbar-width: none;
+  scroll-behavior: smooth;
 }
 
 .panel::-webkit-scrollbar {

src/styles/globals.css

@@ -74,4 +74,13 @@ button {
 button:hover {
   background: var(--color-main-dark);
   color: var(--color-main-light);
+}
+
+*::selection {
+  background-color: var(--color-main-dark);
+  color: var(--color-main-light)
+}
+
+*:target {
+  scroll-margin-top: 1em;
 }