From d293565e6f16e233b08bfb2c409af9c23d4bba46 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:24:29 +0200
Subject: [PATCH] Added source urls to pages

---
 src/components/Credits.astro                  |  3 +-
 src/components/InlineCredits.astro            |  1 +
 src/components/Metadata.astro                 | 27 ++++++++----
 src/i18n/i18n.ts                              |  4 +-
 src/i18n/wordings-keys.ts                     |  4 +-
 .../api/pages/_components/PageCredits.astro   | 44 ++++++++++++++-----
 src/pages/[locale]/api/pages/partial.astro    |  9 ++--
 src/shared                                    |  2 +-
 src/utils/urls.ts                             |  3 ++
 9 files changed, 66 insertions(+), 31 deletions(-)
 create mode 100644 src/utils/urls.ts

diff --git a/src/components/Credits.astro b/src/components/Credits.astro
index eb4a3ee..d75ca8f 100644
--- a/src/components/Credits.astro
+++ b/src/components/Credits.astro
@@ -30,6 +30,7 @@ const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.curren
       );
     })
   }
+  <slot />
 </div>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
@@ -37,6 +38,6 @@ const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.curren
 <style>
   div {
     display: grid;
-    gap: 2em;
+    gap: 1.5em;
   }
 </style>
diff --git a/src/components/InlineCredits.astro b/src/components/InlineCredits.astro
index fc5514f..2361a43 100644
--- a/src/components/InlineCredits.astro
+++ b/src/components/InlineCredits.astro
@@ -23,6 +23,7 @@ const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
       />
     ))
   }
+  <slot />
 </div>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
diff --git a/src/components/Metadata.astro b/src/components/Metadata.astro
index c9d93d5..a6d8464 100644
--- a/src/components/Metadata.astro
+++ b/src/components/Metadata.astro
@@ -1,6 +1,7 @@
 ---
 import type { Attribute } from "src/utils/attributes";
 import TitleIcon from "./TitleIcon.astro";
+import { isExternalLink } from "src/utils/urls";
 
 interface Props extends Attribute {}
 
@@ -15,15 +16,23 @@ if (values.length === 0) return;
   <TitleIcon title={title} icon={icon} lang={titleLang} />
   <div id="values" class:list={{ "with-border": withBorder }}>
     {
-      values.map(({ name, href, lang }) =>
-        href ? (
-          <a class="pressable" href={href} lang={lang}>
-            {name}
-          </a>
-        ) : (
-          <div lang={lang}>{name}</div>
-        )
-      )
+      values.map(({ name, href, lang }) => {
+        if (!href) {
+          return <div lang={lang}>{name}</div>;
+        } else {
+          const newTab = isExternalLink(href);
+          return (
+            <a
+              class="pressable"
+              href={href}
+              lang={lang}
+              target={newTab ? "_blank" : undefined}
+              rel={newTab ? "noopener noreferrer" : undefined}>
+              {name}
+            </a>
+          );
+        }
+      })
     }
   </div>
 </div>
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
index de42ef2..c2b9e63 100644
--- a/src/i18n/i18n.ts
+++ b/src/i18n/i18n.ts
@@ -255,9 +255,9 @@ export const getI18n = async (locale: string) => {
     switch (relation.type) {
       case "url":
         return {
-          href: relation.url,
+          href: relation.value.url,
           typeLabel: t("global.sources.typeLabel.url"),
-          label: relation.label,
+          label: relation.value.label,
           target: "_blank",
           rel: "noopener noreferrer",
         };
diff --git a/src/i18n/wordings-keys.ts b/src/i18n/wordings-keys.ts
index e523cf7..ed5938e 100644
--- a/src/i18n/wordings-keys.ts
+++ b/src/i18n/wordings-keys.ts
@@ -184,4 +184,6 @@ export type WordingKey =
   | "global.relationPage.folders"
   | "global.relationPage.collectibles"
   | "global.relationPage.timelineEvents"
-  | "global.relationPage.title";
+  | "global.relationPage.title"
+  | "pages.credits.sources";
+
diff --git a/src/pages/[locale]/api/pages/_components/PageCredits.astro b/src/pages/[locale]/api/pages/_components/PageCredits.astro
index 575cff1..d1d2683 100644
--- a/src/pages/[locale]/api/pages/_components/PageCredits.astro
+++ b/src/pages/[locale]/api/pages/_components/PageCredits.astro
@@ -2,34 +2,34 @@
 import Card from "components/Card.astro";
 import Credits from "components/Credits.astro";
 import InlineCredits from "components/InlineCredits.astro";
+import InlineMetadata from "components/InlineMetadata.astro";
 import MasoActor from "components/Maso/MasoActor.astro";
+import Metadata from "components/Metadata.astro";
 import { getI18n } from "src/i18n/i18n";
-import type { EndpointCredit, EndpointPage } from "src/shared/payload/endpoint-types";
+import type { EndpointPage } from "src/shared/payload/endpoint-types";
 import { formatLocale } from "src/utils/format";
 
 interface Props {
   slug: string;
-  currentLocale: string;
-  sourceLanguage: string;
-  credits: EndpointCredit[];
+  activeTranslation: EndpointPage["translations"][number];
   otherTranslations: EndpointPage["translations"];
 }
 
-const { slug, currentLocale, sourceLanguage, credits, otherTranslations } = Astro.props;
+const { slug, activeTranslation, otherTranslations } = Astro.props;
 
-const { t, getLocalizedUrl } = await getI18n(currentLocale);
+const { t, getLocalizedUrl } = await getI18n(activeTranslation.language);
 ---
 
 <div id="credits">
   <Card class="partial_page-card">
     <p>{t("pages.credits.currentLocale")}</p>
     <p class="font-2xl">
-      {formatLocale(currentLocale)}
+      {formatLocale(activeTranslation.language)}
       {
-        sourceLanguage !== currentLocale && (
+        activeTranslation.sourceLanguage !== activeTranslation.language && (
           <span class="font-m">
             {t("pages.credits.translationLabel", {
-              locale: formatLocale(sourceLanguage),
+              locale: formatLocale(activeTranslation.sourceLanguage),
             })}
           </span>
         )
@@ -37,9 +37,18 @@ const { t, getLocalizedUrl } = await getI18n(currentLocale);
     </p>
 
     {
-      credits.length > 0 && (
+      (activeTranslation.credits.length > 0 || activeTranslation.sourceUrls.length > 0) && (
         <div>
-          <Credits credits={credits} />
+          <Credits credits={activeTranslation.credits}>
+            <Metadata
+              icon="material-symbols:web-traffic"
+              title={t("pages.credits.sources", { count: activeTranslation.sourceUrls.length })}
+              values={activeTranslation.sourceUrls.map(({ label, url }) => ({
+                name: label,
+                href: url,
+              }))}
+            />
+          </Credits>
         </div>
       )
     }
@@ -65,7 +74,18 @@ const { t, getLocalizedUrl } = await getI18n(currentLocale);
                 )}
               </p>
 
-              {translation.credits.length > 0 && <InlineCredits credits={translation.credits} />}
+              {(translation.credits.length > 0 || translation.sourceUrls.length > 0) && (
+                <InlineCredits credits={translation.credits}>
+                  <InlineMetadata
+                    icon="material-symbols:web-traffic"
+                    title={t("pages.credits.sources", { count: translation.sourceUrls.length })}
+                    values={translation.sourceUrls.map(({ label, url }) => ({
+                      name: label,
+                      href: url,
+                    }))}
+                  />
+                </InlineCredits>
+              )}
             </Card>
           </MasoActor>
         ))}
diff --git a/src/pages/[locale]/api/pages/partial.astro b/src/pages/[locale]/api/pages/partial.astro
index 42c4f52..0d11b7c 100644
--- a/src/pages/[locale]/api/pages/partial.astro
+++ b/src/pages/[locale]/api/pages/partial.astro
@@ -38,8 +38,9 @@ const { translations, thumbnail, createdAt, updatedAt, updatedBy, attributes } =
 const { getLocalizedUrl, t, formatDate } = await getI18n(Astro.locals.currentLocale);
 const { getLocalizedMatch } = await getI18n(lang);
 
-const { pretitle, title, subtitle, summary, content, credits, toc, language, sourceLanguage } =
-  getLocalizedMatch(translations);
+const activeTranslation = getLocalizedMatch(translations);
+
+const { pretitle, title, subtitle, summary, content, toc, language } = activeTranslation;
 
 const metaAttributes: Attribute[] = [
   {
@@ -107,9 +108,7 @@ if (updatedBy) {
     <Fragment slot="aside">
       <PageCredits
         slug={slug}
-        currentLocale={language}
-        sourceLanguage={sourceLanguage}
-        credits={credits}
+        activeTranslation={activeTranslation}
         otherTranslations={translations.filter(
           (otherTranslation) => otherTranslation.language !== language
         )}
diff --git a/src/shared b/src/shared
index 63d1733..c2702ea 160000
--- a/src/shared
+++ b/src/shared
@@ -1 +1 @@
-Subproject commit 63d17331a17a5ab7874599d1df4ecf6b45ac89f3
+Subproject commit c2702ea508dde59264ee66100054bacc0834c029
diff --git a/src/utils/urls.ts b/src/utils/urls.ts
new file mode 100644
index 0000000..42bd404
--- /dev/null
+++ b/src/utils/urls.ts
@@ -0,0 +1,3 @@
+export const isExternalLink = (url: string): boolean => {
+  return url.startsWith("http");
+};