Added some automatic CMS testing

package.json

@@ -5,7 +5,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "text": "NODE_ENV=test next build"
   },
   "dependencies": {
     "@fontsource/material-icons": "^4.5.2",

public/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+    "name": "Accord’s Library",
+    "short_name": "Accord’s Lib",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#FFEDD8",
+    "theme_color": "#FFEDD8",
+    "description": "Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer.",
+    "icons": [{
+      "src": "favicon.png",
+      "sizes": "551x551",
+      "type": "image/png"
+    }]
+  }
+  

src/components/Chronology/ChronologyItemComponent.tsx

@@ -1,4 +1,8 @@
-import { GetChronologyItemsQuery } from "graphql/operations-types";
+import Chip from "components/Chip";
+import {
+  Enum_Componenttranslationschronologyitem_Status,
+  GetChronologyItemsQuery,
+} from "graphql/operations-types";
 
 export type ChronologyItemComponentProps = {
   item: GetChronologyItemsQuery["chronologyItems"]["data"][number];
@@ -80,7 +84,29 @@ export default function ChronologyItemComponent(
           <div className="m-0" key={event.id}>
             {event.translations.map((translation) => (
               <>
-                {translation.title ? <h3>{translation.title}</h3> : ""}
+                <div className="place-items-start place-content-start grid grid-flow-col gap-2">
+                  {translation.status !==
+                    Enum_Componenttranslationschronologyitem_Status.Done && (
+                    <div
+                      data-tip={
+                        translation.status ===
+                        Enum_Componenttranslationschronologyitem_Status.Incomplete
+                          ? "This entry is only partially translated/transcribed."
+                          : translation.status ===
+                            Enum_Componenttranslationschronologyitem_Status.Draft
+                          ? "This entry is just a draft. It usually means that this is a work-in-progress. Translation/transcription might be poor and/or computer-generated."
+                          : translation.status ===
+                            Enum_Componenttranslationschronologyitem_Status.Review
+                          ? "This entry has not yet being proofread. The content should still be accurate."
+                          : ""
+                      }
+                      data-for={"ChronologyTooltip"}
+                    >
+                      <Chip>{translation.status}</Chip>
+                    </div>
+                  )}
+                  {translation.title ? <h3>{translation.title}</h3> : ""}
+                </div>
 
                 {translation.description ? (
                   <p
@@ -103,7 +129,7 @@ export default function ChronologyItemComponent(
               </>
             ))}
 
-            <p className="text-dark text-xs inline-grid place-items-center grid-flow-col gap-1">
+            <p className="text-dark text-xs grid place-self-start grid-flow-col gap-1 mt-1">
               {event.source.data ? (
                 "(" + event.source.data.attributes.name + ")"
               ) : (

src/components/Library/LibraryContentPreview.tsx

@@ -33,7 +33,7 @@ export default function LibraryContentPreview(
         )}
         <div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
           <div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
-            {item.type ? (
+            {item.type.data ? (
               <Chip>
                 {item.type.data.attributes.titles.length > 0
                   ? item.type.data.attributes.titles[0].title

src/pages/_document.tsx

@@ -68,8 +68,7 @@ class MyDocument extends Document {
             name="apple-mobile-web-app-status-bar-style"
             content="black-translucent"
           />
-          <link rel="manifest" href="manifest.json" />
+          <link rel="manifest" href="manifest.webmanifest" />
-          <meta name="theme-color" content="#FFEDD8" />
         </Head>
         <body>
           <Main />

src/pages/contents/[slug]/index.tsx

@@ -77,7 +77,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
             )
           : prettySlug(content.slug)
       }
-      thumbnail={content.thumbnail.data.attributes}
+      thumbnail={content.thumbnail.data?.attributes}
       langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}

src/pages/wiki/chronology.tsx

@@ -18,6 +18,8 @@ import HorizontalLine from "components/HorizontalLine";
 import AppLayout from "components/AppLayout";
 import { prettySlug } from "queries/helpers";
 import InsetBox from "components/InsetBox";
+import { useRouter } from "next/router";
+import ReactTooltip from "react-tooltip";
 
 interface DataChronologyProps {
   chronologyItems: GetChronologyItemsQuery;
@@ -31,12 +33,13 @@ export default function DataChronology(
   const langui = props.langui.websiteInterfaces.data[0].attributes;
   const chronologyItems = props.chronologyItems.chronologyItems;
   const chronologyEras = props.chronologyEras.chronologyEras;
+  useTesting(props.chronologyItems, props.chronologyEras);
 
   // Group by year the Chronology items
   let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] =
     [];
 
-  chronologyEras.data.map((era) => {
+  chronologyEras.data.map(() => {
     chronologyItemYearGroups.push([]);
   });
 
@@ -114,6 +117,16 @@ export default function DataChronology(
           ))}
         </>
       ))}
+
+      <ReactTooltip
+        id="ChronologyTooltip"
+        place="top"
+        type="light"
+        effect="solid"
+        delayShow={50}
+        clickable={true}
+        className="drop-shadow-shade-xl !opacity-100 mobile:after:!border-r-light !bg-light !rounded-lg desktop:after:!border-t-light text-left !text-black max-w-xs"
+      />
     </ContentPanel>
   );
 
@@ -144,3 +157,51 @@ export const getStaticProps: GetStaticProps = async (context) => {
   }
   return { props: {} };
 };
+
+export function useTesting(
+  chronologyItems: GetChronologyItemsQuery,
+  chronologyEras: GetErasQuery
+) {
+  const router = useRouter();
+  chronologyEras.chronologyEras.data.map((era) => {
+    if (era.attributes.title.length === 0) {
+      console.warn(
+        `${router.pathname} | ${router.locale} | chronologyEras | ${era.attributes.slug} | Missing translation for title and description, using slug instead`
+      );
+    } else if (era.attributes.title.length > 1) {
+      console.warn(
+        `${router.pathname} | ${router.locale} | chronologyEras | ${era.attributes.slug} | More than one title and description`
+      );
+    } else {
+      if (!era.attributes.title[0].title)
+        console.warn(
+          `${router.pathname} | ${router.locale} | chronologyEras | ${era.attributes.slug} | Missing title, using slug instead`
+        );
+      if (!era.attributes.title[0].description)
+        console.warn(
+          `${router.pathname} | ${router.locale} | chronologyEras | ${era.attributes.slug} | Missing description`
+        );
+    }
+  });
+
+  chronologyItems.chronologyItems.data.map((item) => {
+    if (!(item.attributes.events.length > 0)) {
+      console.warn(
+        `${router.pathname} | ${router.locale} | chronologyItems | ${item.attributes.year}/${item.attributes.month}/${item.attributes.day} | No events for this date`
+      );
+    } else {
+      item.attributes.events.map((event) => {
+        if (!event.source.data) {
+          console.warn(
+            `${router.pathname} | ${router.locale} | chronologyItems | ${item.attributes.year}/${item.attributes.month}/${item.attributes.day} | ${event.id} | No source for this event`
+          );
+        }
+        if (!(event.translations.length > 0)) {
+          console.warn(
+            `${router.pathname} | ${router.locale} | chronologyItems | ${item.attributes.year}/${item.attributes.month}/${item.attributes.day} | ${event.id} | No translation for this event`
+          );
+        }
+      });
+    }
+  });
+}

src/tailwind.css

@@ -72,6 +72,11 @@
   .prose footer > div:target {
     @apply bg-mid shadow-inner-sm shadow-shade;
   }
+
+  .prose li::marker {
+    @apply text-dark;
+  }
+
 }
 
 @layer components {