From 5f70ca4b92b2c1447ad24340587f9a35afe9a720 Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Sun, 30 Jun 2024 20:00:49 +0200 Subject: [PATCH] Updated credit + language switcher on pages --- TODO.md | 3 - src/components/InlineCredits.astro | 9 +- src/components/LanguageOverride.astro | 67 -------- src/components/Maso/MasoActor.astro | 6 +- src/i18n/wordings-keys.ts | 35 ++--- .../api/pages/_components/PageCredits.astro | 147 ++++++++++++++++++ src/pages/[locale]/api/pages/partial.astro | 32 ++-- src/shared/payload/payload-sdk.ts | 8 +- 8 files changed, 185 insertions(+), 122 deletions(-) delete mode 100644 src/components/LanguageOverride.astro create mode 100644 src/pages/[locale]/api/pages/_components/PageCredits.astro diff --git a/TODO.md b/TODO.md index e4fe17a..3555b2e 100644 --- a/TODO.md +++ b/TODO.md @@ -9,15 +9,12 @@ ## Short term -- [Bugs] On android Chrome, the setting button in the header flashes for a few ms when the page is loading - [Bugs] Make sure uploads name are slug-like and with an extension. - [Bugs] Nyupun can't upload subtitles files - [Bugs] https://v3.accords-library.com/en/collectibles/dod-original-soundtrack/scans obi is way too big - [Feat] 404, 500 pages - [Feat] [RichTextContent] Handle relationship - [Feat] [Timeline] Improve layout/spacing on mobile -- [Feat] Display if a content has a source language -- [Feat] [JSLess] Display if a content is available in more than one language - [Bugs] Number of audio players seems limited (on Chrome and Firefox) - [Feat] [RichTextContent] Add autolink block support diff --git a/src/components/InlineCredits.astro b/src/components/InlineCredits.astro index 0b28ce2..7621a25 100644 --- a/src/components/InlineCredits.astro +++ b/src/components/InlineCredits.astro @@ -29,11 +29,8 @@ const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale); diff --git a/src/components/LanguageOverride.astro b/src/components/LanguageOverride.astro deleted file mode 100644 index 37b4713..0000000 --- a/src/components/LanguageOverride.astro +++ /dev/null @@ -1,67 +0,0 @@ ---- -import MasoActor from "components/Maso/MasoActor.astro"; -import Tooltip from "components/Tooltip.astro"; -import Button from "components/Button.astro"; -import { formatLocale } from "src/utils/format"; -import { getI18n } from "src/i18n/i18n"; - -interface Props { - currentLanguage: string; - currentSourceLanguage: string; - getPartialUrl: (locale: string) => string; - availableLanguages: string[]; -} - -const { currentLanguage, currentSourceLanguage, getPartialUrl, availableLanguages } = Astro.props; -const { t } = await getI18n(Astro.locals.currentLocale); ---- - -{/* ------------------------------------------- HTML ------------------------------------------- */} - -
- -
- -{/* ------------------------------------------- CSS -------------------------------------------- */} - - diff --git a/src/components/Maso/MasoActor.astro b/src/components/Maso/MasoActor.astro index f35316f..56d4cea 100644 --- a/src/components/Maso/MasoActor.astro +++ b/src/components/Maso/MasoActor.astro @@ -18,8 +18,10 @@ const { href, method = "get", class: className, id } = Astro.props; {/* ------------------------------------------- CSS -------------------------------------------- */} diff --git a/src/i18n/wordings-keys.ts b/src/i18n/wordings-keys.ts index babc282..6bf219f 100644 --- a/src/i18n/wordings-keys.ts +++ b/src/i18n/wordings-keys.ts @@ -69,8 +69,6 @@ export type WordingKey = | "collectibles.bookFormat.binding.hardcover" | "collectibles.bookFormat.binding.readingDirection.leftToRight" | "collectibles.bookFormat.binding.readingDirection.rightToLeft" - | "collectibles.gallery" - | "collectibles.scans" | "collectibles.imageCount" | "header.topbar.settings.tooltip" | "collectibles.contents" @@ -87,31 +85,31 @@ export type WordingKey = | "global.loading" | "pages.tableOfContent.sceneBreak" | "pages.tableOfContent.break" - | "global.languageOverride.availableLanguages" + | "pages.credits.availableLanguages" | "timeline.title" - | "timeline.eras.drakengard3" + | "timeline.description" + | "timeline.eras.cataclysm" | "timeline.eras.drakengard" | "timeline.eras.drakengard2" + | "timeline.eras.drakengard3" | "timeline.eras.nier" | "timeline.eras.nierAutomata" - | "timeline.eras.cataclysm" - | "timeline.description" - | "timeline.notes.title" + | "timeline.jumpTo" | "timeline.notes.content" + | "timeline.notes.title" | "timeline.priorCataclysmNote.title" | "timeline.priorCataclysmNote.content" - | "timeline.jumpTo" | "timeline.year.during" - | "timeline.eventFooter.languages" | "timeline.eventFooter.sources" + | "timeline.eventFooter.languages" | "timeline.eventFooter.note" - | "global.sources.typeLabel.url" - | "global.sources.typeLabel.page" | "global.sources.typeLabel.collectible" - | "global.sources.typeLabel.folder" + | "global.sources.typeLabel.collectible.range.custom" | "global.sources.typeLabel.collectible.range.page" | "global.sources.typeLabel.collectible.range.timestamp" - | "global.sources.typeLabel.collectible.range.custom" + | "global.sources.typeLabel.folder" + | "global.sources.typeLabel.page" + | "global.sources.typeLabel.url" | "global.openMediaPage" | "global.downloadButton" | "global.previewTypes.video" @@ -121,6 +119,8 @@ export type WordingKey = | "global.previewTypes.collectible" | "global.previewTypes.unknown" | "collectibles.scans.title" + | "collectibles.gallery.title" + | "collectibles.gallery.subtitle" | "collectibles.scans.subtitle" | "collectibles.scans.shortIndex.flapFront" | "collectibles.scans.shortIndex.front" @@ -134,11 +134,9 @@ export type WordingKey = | "collectibles.scans.obi" | "collectibles.scans.obiInside" | "collectibles.scans.pages" - | "collectibles.gallery.title" - | "collectibles.gallery.subtitle" - | "global.sources.typeLabel.scans" | "collectibles.scans.dustjacket.description" | "collectibles.scans.obi.description" + | "global.sources.typeLabel.scans" | "global.sources.typeLabel.gallery" | "global.media.attributes.filename" | "global.media.attributes.duration" @@ -152,5 +150,6 @@ export type WordingKey = | "collectibles.nature.digital" | "global.previewTypes.zip" | "global.previewTypes.pdf" - | "files.thumbnail.noPreview" - | "collectibles.files"; + | "collectibles.files" + | "pages.credits.translationLabel" + | "pages.credits.currentLocale"; diff --git a/src/pages/[locale]/api/pages/_components/PageCredits.astro b/src/pages/[locale]/api/pages/_components/PageCredits.astro new file mode 100644 index 0000000..7844513 --- /dev/null +++ b/src/pages/[locale]/api/pages/_components/PageCredits.astro @@ -0,0 +1,147 @@ +--- +import Card from "components/Card.astro"; +import Credits from "components/Credits.astro"; +import InlineCredits from "components/InlineCredits.astro"; +import MasoActor from "components/Maso/MasoActor.astro"; +import { getI18n } from "src/i18n/i18n"; +import type { EndpointCredit, EndpointPage } from "src/shared/payload/payload-sdk"; +import { formatLocale } from "src/utils/format"; + +interface Props { + slug: string; + currentLocale: string; + sourceLanguage: string; + credits: EndpointCredit[]; + otherTranslations: EndpointPage["translations"]; +} + +const { slug, currentLocale, sourceLanguage, credits, otherTranslations } = Astro.props; + +const { t, getLocalizedUrl } = await getI18n(currentLocale); +--- + +
+ +

{t("pages.credits.currentLocale")}

+

+ {formatLocale(currentLocale)} + { + sourceLanguage !== currentLocale && ( + + {t("pages.credits.translationLabel", { + locale: formatLocale(sourceLanguage), + })} + + ) + } +

+ +
+ {credits.length > 0 && } +
+ + + { + otherTranslations.length > 0 && ( +
+

{t("pages.credits.availableLanguages", { count: otherTranslations.length })}

+ + {otherTranslations.map((translation) => ( + + +

+ {formatLocale(translation.language)} + {translation.sourceLanguage !== translation.language && ( + + {t("pages.credits.translationLabel", { + locale: formatLocale(translation.sourceLanguage), + })} + + )} +

+ + {translation.credits.length > 0 && } + + + ))} +
+ ) + } +
+ + diff --git a/src/pages/[locale]/api/pages/partial.astro b/src/pages/[locale]/api/pages/partial.astro index 70e1db0..127ff76 100644 --- a/src/pages/[locale]/api/pages/partial.astro +++ b/src/pages/[locale]/api/pages/partial.astro @@ -4,14 +4,13 @@ import type { EndpointPage } from "src/shared/payload/payload-sdk"; import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro"; import MasoTarget from "components/Maso/MasoTarget.astro"; import TableOfContent from "components/TableOfContent/TableOfContent.astro"; -import LanguageOverride from "components/LanguageOverride.astro"; -import Credits from "components/Credits.astro"; import { getI18n } from "src/i18n/i18n"; import AsideLayout from "components/AppLayout/AsideLayout.astro"; import Attributes from "components/Attributes.astro"; import type { Attribute } from "src/utils/attributes"; import { payload } from "src/utils/payload"; import { sizesToSrcset } from "src/utils/img"; +import PageCredits from "./_components/PageCredits.astro"; export const partial = true; @@ -103,16 +102,15 @@ if (updatedBy) { -
- language)} - getPartialUrl={(lang) => getLocalizedUrl(`/api/pages/partial?lang=${lang}&slug=${slug}`)} - /> - - {credits.length > 0 && } -
+ otherTranslation.language !== language + )} + /> {metaAttributes.length > 0 && } @@ -136,16 +134,6 @@ if (updatedBy) { width: min(100%, 35rem); } - #credits { - display: flex; - flex-direction: column; - gap: 16px; - - @media (max-width: 35rem) { - gap: 32px; - } - } - #summary { @media (max-width: 1280.5px) { margin-top: -2em; diff --git a/src/shared/payload/payload-sdk.ts b/src/shared/payload/payload-sdk.ts index 50b66f3..dd4ea31 100644 --- a/src/shared/payload/payload-sdk.ts +++ b/src/shared/payload/payload-sdk.ts @@ -1566,7 +1566,7 @@ export type EndpointFolderPreview = { }[]; }; -export type EndpointFolder = EndpointFolderPreview & { +export type EndpointFolder = Omit & { translations: (EndpointFolderPreview["translations"][number] & { description?: RichTextContent; })[]; @@ -1719,7 +1719,7 @@ export type EndpointPagePreview = { updatedAt: string; }; -export type EndpointPage = EndpointPagePreview & { +export type EndpointPage = Omit & { backgroundImage?: EndpointPayloadImage; translations: (EndpointPagePreview["translations"][number] & { sourceLanguage: string; @@ -1752,7 +1752,7 @@ export type EndpointCollectiblePreview = { }; }; -export type EndpointCollectible = EndpointCollectiblePreview & { +export type EndpointCollectible = Omit & { translations: (EndpointCollectiblePreview["translations"][number] & { description?: RichTextContent; })[]; @@ -1985,7 +1985,7 @@ export type EndpointMediaPreview = { }[]; }; -export type EndpointMedia = EndpointMediaPreview & { +export type EndpointMedia = Omit & { filesize: number; updatedAt: string; createdAt: string;