Added source urls to pages

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>

src/components/InlineCredits.astro

@@ -23,6 +23,7 @@ const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
       />
     ))
   }
+  <slot />
 </div>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}

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>

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",
         };

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";
+

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>
         ))}

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
         )}

src/shared

@@ -1 +1 @@
-Subproject commit 63d17331a17a5ab7874599d1df4ecf6b45ac89f3
+Subproject commit c2702ea508dde59264ee66100054bacc0834c029

src/utils/urls.ts

@@ -0,0 +1,3 @@
+export const isExternalLink = (url: string): boolean => {
+  return url.startsWith("http");
+};