Removed some static text and use textui

.github/workflows/node.js.yml

@@ -4,14 +4,13 @@
 name: Node.js CI
 
 on:
-#  push:
+  #  push:
-#    branches: [ main ]
+  #    branches: [ main ]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,18 +19,18 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v2
+      - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+        uses: actions/setup-node@v2
-      with:
+        with:
-        node-version: ${{ matrix.node-version }}
+          node-version: ${{ matrix.node-version }}
-        cache: 'npm'
+          cache: "npm"
-    - run: npm ci
+      - run: npm ci
-    - run: npm run lint
+      - run: npm run lint
-    - run: npm run build --if-present
+      - run: npm run build --if-present
-      env:
+        env:
-        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-        NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }}
+          NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }}
-        NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }}
+          NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }}
-        NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }}
+          NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }}
-        URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }}
+          URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }}

src/components/AppLayout.tsx

@@ -218,7 +218,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           >
             {appLayout.mainPanelOpen ? "close" : "menu"}
           </span>
-          <p className="text-2xl font-black font-headers">{props.navTitle}</p>
+          <p
+            className={`font-black font-headers text-center overflow-hidden ${
+              props.navTitle.length > 30
+                ? "text-xl max-h-14"
+                : "text-2xl max-h-16"
+            }`}
+          >
+            {props.navTitle}
+          </p>
           <span
             className="material-icons mt-[.1em] cursor-pointer"
             onClick={() => {

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

@@ -1,44 +1,167 @@
 import AppLayout from "components/AppLayout";
 import Button from "components/Button";
+import Chip from "components/Chip";
 import ThumbnailHeader from "components/Content/ThumbnailHeader";
 import HorizontalLine from "components/HorizontalLine";
+import LanguageSwitcher from "components/LanguageSwitcher";
+import Markdawn from "components/Markdown/Markdawn";
+import TOC from "components/Markdown/TOC";
 import ReturnButton, {
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
 import ContentPanel from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import { getContent, getContentsSlugs } from "graphql/operations";
+import RecorderChip from "components/RecorderChip";
-import { GetContentQuery } from "graphql/operations-types";
+import ToolTip from "components/ToolTip";
+import { getContentsSlugs, getContentText } from "graphql/operations";
+import { GetContentTextQuery } from "graphql/operations-types";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
+import { useRouter } from "next/router";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { prettyinlineTitle, prettySlug } from "queries/helpers";
+import {
+  getLocalesFromLanguages,
+  getStatusDescription,
+  prettyinlineTitle,
+  prettyLanguage,
+  prettySlug,
+  prettyTestError,
+  prettyTestWarning,
+} from "queries/helpers";
 
-interface ContentIndexProps extends AppStaticProps {
+interface Props extends AppStaticProps {
-  content: GetContentQuery["contents"]["data"][number]["attributes"];
+  content: GetContentTextQuery["contents"]["data"][number]["attributes"];
+  contentId: GetContentTextQuery["contents"]["data"][number]["id"];
 }
 
-export default function ContentIndex(props: ContentIndexProps): JSX.Element {
+export default function Content(props: Props): JSX.Element {
-  const { content, langui } = props;
+  useTesting(props);
+  const { langui, content, languages } = props;
+  const router = useRouter();
+  const locales = getLocalesFromLanguages(content.text_set_languages);
+
   const subPanel = (
     <SubPanel>
       <ReturnButton
-        href="/contents"
+        href={`/contents`}
-        title={"Contents"}
+        title={langui.contents}
         langui={langui}
         displayOn={ReturnButtonType.desktop}
         horizontalLine
       />
+
+      {content.text_set.length > 0 && content.text_set[0].source_language.data && (
+        <div className="grid gap-5">
+          <h2 className="text-xl">
+            {content.text_set[0].source_language.data.attributes.code ===
+            router.locale
+              ? langui.transcript_notice
+              : langui.translation_notice}
+          </h2>
+
+          {content.text_set[0].source_language.data.attributes.code !==
+            router.locale && (
+            <div className="grid place-items-center gap-2">
+              <p className="font-headers">{langui.source_language}:</p>
+              <Button
+                href={router.asPath}
+                locale={
+                  content.text_set[0].source_language.data.attributes.code
+                }
+              >
+                {prettyLanguage(
+                  content.text_set[0].source_language.data.attributes.code,
+                  languages
+                )}
+              </Button>
+            </div>
+          )}
+
+          <div className="grid grid-flow-col place-items-center place-content-center gap-2">
+            <p className="font-headers">{langui.status}:</p>
+
+            <ToolTip
+              content={getStatusDescription(content.text_set[0].status, langui)}
+              maxWidth={"20rem"}
+            >
+              <Chip>{content.text_set[0].status}</Chip>
+            </ToolTip>
+          </div>
+
+          {content.text_set[0].transcribers.data.length > 0 && (
+            <div>
+              <p className="font-headers">{langui.transcribers}:</p>
+              <div className="grid place-items-center place-content-center gap-2">
+                {content.text_set[0].transcribers.data.map((recorder) => (
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {content.text_set[0].translators.data.length > 0 && (
+            <div>
+              <p className="font-headers">{langui.translators}:</p>
+              <div className="grid place-items-center place-content-center gap-2">
+                {content.text_set[0].translators.data.map((recorder) => (
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {content.text_set[0].proofreaders.data.length > 0 && (
+            <div>
+              <p className="font-headers">{langui.proofreaders}:</p>
+              <div className="grid place-items-center place-content-center gap-2">
+                {content.text_set[0].proofreaders.data.map((recorder) => (
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {content.text_set.length > 0 && content.text_set[0].text && (
+        <>
+          <HorizontalLine />
+          <TOC
+            text={content.text_set[0].text}
+            title={
+              content.titles.length > 0
+                ? prettyinlineTitle(
+                    content.titles[0].pre_title,
+                    content.titles[0].title,
+                    content.titles[0].subtitle
+                  )
+                : prettySlug(content.slug)
+            }
+          />
+        </>
+      )}
     </SubPanel>
   );
   const contentPanel = (
     <ContentPanel>
       <ReturnButton
-        href="/contents"
+        href={`/contents/${content.slug}`}
-        title={"Contents"}
+        title={langui.content}
         langui={langui}
         displayOn={ReturnButtonType.mobile}
         className="mb-10"
@@ -69,22 +192,14 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
 
         <HorizontalLine />
 
-        {content.text_set.length > 0 && (
+        {locales.includes(router.locale ?? "en") ? (
-          <Button href={`/contents/${content.slug}/read/`}>
+          <Markdawn text={content.text_set[0].text} />
-            {langui.read_content}
+        ) : (
-          </Button>
+          <LanguageSwitcher
-        )}
+            locales={locales}
-
+            languages={props.languages}
-        {content.audio_set.length > 0 && (
+            langui={props.langui}
-          <Button href={`/contents/${content.slug}/listen/`}>
+          />
-            {langui.listen_content}
-          </Button>
-        )}
-
-        {content.video_set.length > 0 && (
-          <Button href={`/contents/${content.slug}/watch/`}>
-            {langui.watch_content}
-          </Button>
         )}
       </div>
     </ContentPanel>
@@ -108,15 +223,9 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
     description += "\n";
   }
 
-  if (content.titles.length > 0 && content.titles[0].description) {
-    description += "\n";
-    description += content.titles[0].description;
-  }
-
   return (
     <AppLayout
-      navTitle="Contents"
+      navTitle={
-      title={
         content.titles.length > 0
           ? prettyinlineTitle(
               content.titles[0].pre_title,
@@ -136,17 +245,19 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
 
 export async function getStaticProps(
   context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: ContentIndexProps }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
+  const slug = context.params?.slug?.toString() ?? "";
   const content = (
-    await getContent({
+    await getContentText({
-      slug: context.params?.slug?.toString() ?? "",
+      slug: slug,
       language_code: context.locale ?? "en",
     })
-  ).contents.data[0].attributes;
+  ).contents.data[0];
   if (!content) return { notFound: true };
-  const props: ContentIndexProps = {
+  const props: Props = {
     ...(await getAppStaticProps(context)),
-    content: content,
+    content: content.attributes,
+    contentId: content.id,
   };
   return {
     props: props,
@@ -168,3 +279,100 @@ export async function getStaticPaths(
     fallback: "blocking",
   };
 }
+
+function useTesting(props: Props) {
+  const router = useRouter();
+  const { content, contentId } = props;
+
+  const contentURL = `/admin/content-manager/collectionType/api::content.content/${contentId}`;
+
+  if (router.locale === "en") {
+    if (content.categories.data.length === 0) {
+      prettyTestError(router, "Missing categories", ["content"], contentURL);
+    }
+  }
+
+  if (content.ranged_contents.data.length === 0) {
+    prettyTestWarning(
+      router,
+      "Unconnected to any source",
+      ["content"],
+      contentURL
+    );
+  }
+
+  if (content.text_set.length === 0) {
+    prettyTestWarning(
+      router,
+      "Has no textset, nor audioset, nor videoset",
+      ["content"],
+      contentURL
+    );
+  }
+
+  if (content.text_set.length > 1) {
+    prettyTestError(
+      router,
+      "More than one textset for this language",
+      ["content", "text_set"],
+      contentURL
+    );
+  }
+
+  if (content.text_set.length === 1) {
+    const textset = content.text_set[0];
+
+    if (!textset.text) {
+      prettyTestError(
+        router,
+        "Missing text",
+        ["content", "text_set"],
+        contentURL
+      );
+    }
+    if (!textset.source_language.data) {
+      prettyTestError(
+        router,
+        "Missing source language",
+        ["content", "text_set"],
+        contentURL
+      );
+    } else if (textset.source_language.data.attributes.code === router.locale) {
+      // This is a transcript
+      if (textset.transcribers.data.length === 0) {
+        prettyTestError(
+          router,
+          "Missing transcribers attribution",
+          ["content", "text_set"],
+          contentURL
+        );
+      }
+      if (textset.translators.data.length > 0) {
+        prettyTestError(
+          router,
+          "Transcripts shouldn't have translators",
+          ["content", "text_set"],
+          contentURL
+        );
+      }
+    } else {
+      // This is a translation
+      if (textset.translators.data.length === 0) {
+        prettyTestError(
+          router,
+          "Missing translators attribution",
+          ["content", "text_set"],
+          contentURL
+        );
+      }
+      if (textset.transcribers.data.length > 0) {
+        prettyTestError(
+          router,
+          "Translations shouldn't have transcribers",
+          ["content", "text_set"],
+          contentURL
+        );
+      }
+    }
+  }
+}

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

@@ -399,8 +399,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
 
   return (
     <AppLayout
-      navTitle={langui.library}
+      navTitle={prettyinlineTitle("", item.title, item.subtitle)}
-      title={prettyinlineTitle("", item.title, item.subtitle)}
       contentPanel={contentPanel}
       subPanel={subPanel}
       thumbnail={item.thumbnail.data?.attributes}

src/pages/library/[slug]/scans.tsx

@@ -134,8 +134,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
 
   return (
     <AppLayout
-      navTitle={langui.library}
+      navTitle={prettyinlineTitle("", item.title, item.subtitle)}
-      title={prettyinlineTitle("", item.title, item.subtitle)}
       contentPanel={contentPanel}
       subPanel={subPanel}
       thumbnail={item.thumbnail.data?.attributes}

src/pages/news/[slug].tsx

@@ -130,8 +130,7 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
 
   return (
     <AppLayout
-      navTitle={langui.news}
+      navTitle={
-      title={
         post.translations.length > 0
           ? post.translations[0].title
           : prettySlug(post.slug)

src/pages/wiki/chronology.tsx

@@ -133,7 +133,7 @@ export default function Chronology(props: ChronologyProps): JSX.Element {
 
   return (
     <AppLayout
-      navTitle="Chronology"
+      navTitle={langui.chronology}
       contentPanel={contentPanel}
       subPanel={subPanel}
       {...props}

src/pages/wiki/index.tsx

@@ -16,7 +16,7 @@ export default function Wiki(props: WikiProps): JSX.Element {
         title={langui.wiki}
         description={langui.wiki_description}
       />
-      <NavOption title="Chronology" url="/wiki/chronology" border />
+      <NavOption title={langui.chronology} url="/wiki/chronology" border />
     </SubPanel>
   );