Wordings related to credits

src/components/Credits.astro

@@ -1,32 +1,41 @@
 ---
 import type { EndpointRecorder } from "src/shared/payload/payload-sdk";
 import Metadata from "./Metadata.astro";
+import { getI18n } from "src/i18n/i18n";
 
 interface Props {
   translators?: EndpointRecorder[] | undefined;
   transcribers?: EndpointRecorder[] | undefined;
   proofreaders?: EndpointRecorder[] | undefined;
+  authors?: EndpointRecorder[] | undefined;
 }
 
-const { translators = [], transcribers = [], proofreaders = [] } = Astro.props;
+const { translators = [], transcribers = [], proofreaders = [], authors = [] } = Astro.props;
+const { t } = await getI18n(Astro.locals.currentLocale);
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <Metadata
   icon="material-symbols:person-outline"
-  title="Translators"
+  title={t("global.credits.translators")}
   values={translators.map(({ username }) => username)}
 />
 
 <Metadata
   icon="material-symbols:person-edit-outline"
-  title="Transcribers"
+  title={t("global.credits.transcribers")}
   values={transcribers.map(({ username }) => username)}
 />
 
 <Metadata
   icon="material-symbols:person-check-outline"
-  title="Proofreaders"
+  title={t("global.credits.proofreaders")}
   values={proofreaders.map(({ username }) => username)}
 />
+
+<Metadata
+  icon="material-symbols:person-check-outline"
+  title={t("global.credits.authors")}
+  values={authors.map(({ username }) => username)}
+/>

src/i18n/wordings-keys.ts

@@ -74,4 +74,8 @@ export type WordingKey =
   | "collectibles.imageCount"
   | "header.topbar.settings.tooltip"
   | "collectibles.contents"
-  | "collectibles.weight";
+  | "collectibles.weight"
+  | "global.credits.transcribers"
+  | "global.credits.translators"
+  | "global.credits.proofreaders"
+  | "global.credits.authors";

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

@@ -73,7 +73,11 @@ const translation = getLocalizedMatch(page.translations);
             />
           )
         }
-        <Credits translators={translation.translators} proofreaders={translation.proofreaders} />
+        <Credits
+          translators={translation.translators}
+          proofreaders={translation.proofreaders}
+          authors={page.authors}
+        />
       </div>
 
       {
@@ -118,6 +122,7 @@ const translation = getLocalizedMatch(page.translations);
           translators={translation.translators}
           transcribers={translation.transcribers}
           proofreaders={translation.proofreaders}
+          authors={page.authors}
         />
       </div>