Display source language for pages

TODO.md

@@ -6,27 +6,28 @@
 - Create a tool to upload scans images and apply them to collectible
 - Automatically generate different sizes of images
 - Handle relationship in RichText Content
-- Add proper localization for formatFilesize, formatInches, formatMillimeters, formatPounds, and formatGrams
 
 ## Mid term
 
-- [Medias] Add Parent pages
-- [Scans] Adapt size of obi based on cover/dustjacket
-- [Scans] Order of cover/dustjacket/obi should be based on the book's page order.
 - [RichTextContent] Add autolink block support
 - Save cookies for longer than just the session
-- [Scripts] Can't run the scripts using node (ts-node?)
 - Support for nameless section
 - [Timeline] Error if collectible not published?
-- [Timeline] Handle no JS for footers
+- [Timeline] display source language
 - [Timeline] Add details button in footer with credits + last updated / created
 - When the tags overflow, the tag group name should be align start (see http://localhost:12499/en/pages/magnitude-negative-chapter-1)
 - [SDK] create a initPayload() that return a payload sdk (and stop hard wirring to ENV or node-cache)
 - [Videos] see why no video on Firefox and no poster on Chrome https://v3.accords-library.com/en/videos/661b672825d380e548dbb8c8
 - [Videos] Display platform info + channel page
+- [Timeline] Handle no JS for footers
 
 ## Long term
 
+- [Scripts] Can't run the scripts using node (ts-node?)
+- [Scans] Adapt size of obi based on cover/dustjacket
+- [Scans] Order of cover/dustjacket/obi should be based on the book's page order.
+- [Medias] Add Parent pages
+- Add proper localization for formatFilesize, formatInches, formatMillimeters, formatPounds, and formatGrams
 - [Timeline] Some filtering options (by source/languages)
 - The Chronicles
 - The Changelog

src/components/LanguageOverride.astro

@@ -6,12 +6,13 @@ import { formatLocale } from "src/utils/format";
 import { getI18n } from "src/i18n/i18n";
 
 interface Props {
-  currentLang: string;
+  currentLanguage: string;
+  currentSourceLanguage: string;
   getPartialUrl: (locale: string) => string;
   availableLanguages: string[];
 }
 
-const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
+const { currentLanguage, currentSourceLanguage, getPartialUrl, availableLanguages } = Astro.props;
 const { t } = await getI18n(Astro.locals.currentLocale);
 ---
 
@@ -19,13 +20,16 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
 <div id="lang-selector" class="when-js when-no-print">
   <Tooltip trigger="click">
-    <Button icon="material-symbols:translate" title={currentLang.toUpperCase()} />
+    <Button
+      icon="material-symbols:translate"
+      title={`${currentLanguage !== currentSourceLanguage ? `${currentSourceLanguage.toUpperCase()} → ` : ""}${currentLanguage.toUpperCase()}`}
+    />
 
     <div id="tooltip-content" slot="tooltip-content">
       {
         availableLanguages.map((id) => (
           <MasoActor href={getPartialUrl(id)}>
-            <p class:list={{ current: id === currentLang, "pressable-link": true }}>
+            <p class:list={{ current: id === currentLanguage, "pressable-link": true }}>
               {formatLocale(id)}
             </p>
           </MasoActor>

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

@@ -22,12 +22,13 @@ interface Props {
 const reqUrl = new URL(Astro.request.url);
 const lang = Astro.props.lang ?? reqUrl.searchParams.get("lang")!;
 const slug = Astro.props.slug ?? reqUrl.searchParams.get("slug")!;
-const page = Astro.props.page ?? (await payload.getPage(slug));
+const { translations, thumbnail, tagGroups } = Astro.props.page ?? (await payload.getPage(slug));
 
 const { getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 const { getLocalizedMatch } = await getI18n(lang);
 
-const translation = getLocalizedMatch(page.translations);
+const { pretitle, title, subtitle, summary, content, credits, toc, language, sourceLanguage } =
+  getLocalizedMatch(translations);
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
@@ -35,22 +36,18 @@ const translation = getLocalizedMatch(page.translations);
 <MasoTarget>
   <AsideLayout>
     <Fragment slot="header">
-      <AppLayoutTitle
+      <AppLayoutTitle title={title} pretitle={pretitle} subtitle={subtitle} />
-        title={translation.title}
-        pretitle={translation.pretitle}
-        subtitle={translation.subtitle}
-      />
     </Fragment>
 
     <Fragment slot="header-aside">
       {
-        page.thumbnail && (
+        thumbnail && (
-          <a href={getLocalizedUrl(`/images/${page.thumbnail.id}`)}>
+          <a href={getLocalizedUrl(`/images/${thumbnail.id}`)}>
             <img
               id="thumbnail"
-              src={page.thumbnail.url}
+              src={thumbnail.url}
-              width={page.thumbnail.width}
+              width={thumbnail.width}
-              height={page.thumbnail.height}
+              height={thumbnail.height}
             />
           </a>
         )
@@ -58,16 +55,17 @@ const translation = getLocalizedMatch(page.translations);
     </Fragment>
 
     <Fragment slot="meta">
-      {translation.summary && <AppLayoutDescription description={translation.summary} />}
+      {summary && <AppLayoutDescription description={summary} />}
-      {page.tagGroups.length > 0 && <TagGroups tagGroups={page.tagGroups} />}
+      {tagGroups.length > 0 && <TagGroups tagGroups={tagGroups} />}
     </Fragment>
 
     <Fragment slot="aside">
       {
-        page.translations.length > 1 && (
+        translations.length > 1 && (
           <LanguageOverride
-            currentLang={lang}
+            currentLanguage={language}
-            availableLanguages={page.translations.map(({ language }) => language)}
+            currentSourceLanguage={sourceLanguage}
+            availableLanguages={translations.map(({ language }) => language)}
             getPartialUrl={(lang) =>
               getLocalizedUrl(`/api/pages/partial?lang=${lang}&slug=${slug}`)
             }
@@ -75,14 +73,14 @@ const translation = getLocalizedMatch(page.translations);
         )
       }
 
-      {translation.credits.length > 0 && <Credits credits={translation.credits} />}
+      {credits.length > 0 && <Credits credits={credits} />}
 
-      {translation.toc.length > 0 && <TableOfContent toc={translation.toc} />}
+      {toc.length > 0 && <TableOfContent toc={toc} />}
     </Fragment>
 
     <hr />
     <div id="text">
-      <RichText content={translation.content} />
+      <RichText content={content} />
     </div>
   </AsideLayout>
 </MasoTarget>