From 6cb971b5a5ffd5d8f4f07b033d76b6c6f86ab892 Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Sun, 2 Jun 2024 09:59:03 +0200 Subject: [PATCH] Limit attributes count on preview cards + fix media pages title --- TODO.md | 4 +- .../AppLayout/components/Html.astro | 25 ++++++++++ src/components/HeaderTitle.astro | 12 ++--- src/components/Lightbox.astro | 6 +-- .../Previews/CollectiblePreview.astro | 49 +++++++++++++++++-- src/components/Previews/GenericPreview.astro | 48 +++++++++++++++--- src/components/Previews/PagePreview.astro | 18 +++++-- src/pages/[locale]/audios/[id].astro | 10 +--- .../collectibles/[slug]/gallery/[index].astro | 1 + .../collectibles/[slug]/scans/[index].astro | 1 + src/pages/[locale]/dev/index.astro | 35 +++++++++++++ src/pages/[locale]/images/[id].astro | 1 + src/pages/[locale]/timeline/index.astro | 6 +-- src/pages/[locale]/videos/[id].astro | 9 +--- 14 files changed, 181 insertions(+), 44 deletions(-) create mode 100644 src/pages/[locale]/dev/index.astro diff --git a/TODO.md b/TODO.md index 6407752..3e7de78 100644 --- a/TODO.md +++ b/TODO.md @@ -9,7 +9,6 @@ ## Short term - [Feat] 404, 500 pages -- [Bugs] [iOS] Video doesn't seem to start - [Feat] Add languages to collectibles and pages previews - [Feat] [RichTextContent] Handle relationship - [Bugs] Vollkorn doesn't support many languages @@ -21,7 +20,6 @@ ## Mid term -- [Feat] [Payload] Home as parent folders for home folders - [Bugs] [Timeline] Error if collectible not published? - [Feat] [Timeline] display source language - [Feat] [Timeline] Add details button in footer with credits + last updated / created @@ -32,6 +30,8 @@ ## Long term +- [Bugs] [iOS] Video doesn't seem to start +- [Feat] [Folders] Provide a list view, and a list/grid toggle - [Feat] [Payload] Endpoints should provide a simple text-based version of the content (for OG purposes) - [Feat] [WebManifest] Add shortcuts https://web.dev/patterns/web-apps/shortcuts - [Feat] [PWA] Rich install UI https://web.dev/patterns/web-apps/richer-install-ui/ diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro index 9fbc4b2..6463a07 100644 --- a/src/components/AppLayout/components/Html.astro +++ b/src/components/AppLayout/components/Html.astro @@ -701,6 +701,31 @@ const { currentTheme } = Astro.locals; > h5 + h6 { margin-top: -0.75em; } + + h2 { + font-size: var(--font-size-4xl); + font-variation-settings: "wght" 800; + } + + h3 { + font-size: var(--font-size-3xl); + font-variation-settings: "wght" 750; + } + + h4 { + font-size: var(--font-size-2xl); + font-variation-settings: "wght" 700; + } + + h5 { + font-size: var(--font-size-xl); + font-variation-settings: "wght" 600; + } + + h6 { + font-size: var(--font-size-l); + font-variation-settings: "wght" 500; + } } @view-transition { diff --git a/src/components/HeaderTitle.astro b/src/components/HeaderTitle.astro index 2e7cc05..5f7aad6 100644 --- a/src/components/HeaderTitle.astro +++ b/src/components/HeaderTitle.astro @@ -11,27 +11,27 @@ const { header, id } = Astro.props; { header === 1 ? ( -

+

) : header === 2 ? ( -

+

) : header === 3 ? ( -

+

) : header === 4 ? ( -

+

) : header === 5 ? ( -
+
) : ( -
+
) diff --git a/src/components/Lightbox.astro b/src/components/Lightbox.astro index f9017a1..4edb13b 100644 --- a/src/components/Lightbox.astro +++ b/src/components/Lightbox.astro @@ -27,6 +27,7 @@ interface Props { metaAttributes?: ComponentProps["attributes"] | undefined; credits?: EndpointCredit[] | undefined; filename?: string | undefined; + smallTitle?: boolean | undefined; } const { @@ -41,10 +42,9 @@ const { title, subtitle, filename, + smallTitle = false, } = Astro.props; -const smallTitle = !subtitle && !pretitle; - const hasNavigation = previousImageHref || nextImageHref; --- @@ -96,7 +96,7 @@ const hasNavigation = previousImageHref || nextImageHref;
{ smallTitle ? ( -

{title}

+

{title}

) : ( ) diff --git a/src/components/Previews/CollectiblePreview.astro b/src/components/Previews/CollectiblePreview.astro index 5c2e46d..33e6356 100644 --- a/src/components/Previews/CollectiblePreview.astro +++ b/src/components/Previews/CollectiblePreview.astro @@ -2,18 +2,61 @@ import GenericPreview from "components/Previews/GenericPreview.astro"; import { getI18n } from "src/i18n/i18n"; import type { EndpointCollectible } from "src/shared/payload/payload-sdk"; +import type { Attribute } from "src/utils/attributes"; +import { convert } from "src/utils/currencies"; +import { formatLocale } from "src/utils/format"; interface Props { collectible: EndpointCollectible; } -const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale); +const { getLocalizedMatch, getLocalizedUrl, t, formatPrice, formatDate } = await getI18n( + Astro.locals.currentLocale +); const { - collectible: { slug, translations, thumbnail, attributes }, + collectible: { slug, translations, thumbnail, attributes, languages, price, releaseDate }, } = Astro.props; const { title, pretitle, subtitle } = getLocalizedMatch(translations); + +const additionalAttributes: Attribute[] = []; + +if (languages.length > 0) { + additionalAttributes.push({ + title: t("collectibles.languages"), + icon: "material-symbols:translate", + values: languages.map((lang) => ({ name: formatLocale(lang) })), + withBorder: true, + }); +} + +if (releaseDate) { + additionalAttributes.push({ + title: t("collectibles.releaseDate"), + icon: "material-symbols:calendar-month", + values: [{ name: formatDate(new Date(releaseDate)) }], + withBorder: false, + }); +} + +if (price) { + const preferredCurrency = Astro.locals.currentCurrency; + + const convertedPrice = { + amount: convert(price.currency, preferredCurrency, price.amount), + currency: preferredCurrency, + }; + + additionalAttributes.push({ + title: t("collectibles.price"), + icon: "material-symbols:sell", + values: [ + { name: price.amount === 0 ? t("collectibles.price.free") : formatPrice(convertedPrice) }, + ], + withBorder: false, + }); +} --- {/* ------------------------------------------- HTML ------------------------------------------- */} @@ -24,7 +67,7 @@ const { title, pretitle, subtitle } = getLocalizedMatch(translations); subtitle={subtitle} thumbnail={thumbnail} href={getLocalizedUrl(`/collectibles/${slug}`)} - attributes={attributes} + attributes={[...attributes, ...additionalAttributes]} icon="material-symbols:category" iconHoverLabel={t("global.previewTypes.collectible")} disableRoundedTop diff --git a/src/components/Previews/GenericPreview.astro b/src/components/Previews/GenericPreview.astro index 81940b0..3646e48 100644 --- a/src/components/Previews/GenericPreview.astro +++ b/src/components/Previews/GenericPreview.astro @@ -1,8 +1,10 @@ --- -import type { - EndpointImage, - EndpointMediaThumbnail, - EndpointScanImage, +import { + AttributeTypes, + type EndpointAttribute, + type EndpointImage, + type EndpointMediaThumbnail, + type EndpointScanImage, } from "src/shared/payload/payload-sdk"; import Card from "components/Card.astro"; import { Icon } from "astro-icon/components"; @@ -10,6 +12,7 @@ import type { ComponentProps } from "astro/types"; import { getI18n } from "src/i18n/i18n"; import InlineAttributes from "components/InlineAttributes.astro"; import { sizesToSrcset, sizesForGridLayout } from "src/utils/img"; +import type { Attribute } from "src/utils/attributes"; interface Props { thumbnail?: EndpointImage | EndpointMediaThumbnail | EndpointScanImage | undefined; @@ -24,7 +27,7 @@ interface Props { iconHoverLabel?: string; } -const { t } = await getI18n(Astro.locals.currentLocale); +const { t, getLocalizedMatch } = await getI18n(Astro.locals.currentLocale); const { thumbnail, @@ -38,6 +41,37 @@ const { icon = "material-symbols:unknown-document", iconHoverLabel = t("global.previewTypes.unknown"), } = Astro.props; + +/* Clip the number of attributes such that the card isn't ridiculously long */ +let metaLength = 0; +const maxMetaLength = 230; + +metaLength += (pretitle?.length ?? 0) * 1.5; +metaLength += (title?.length ?? 0) * 3; +metaLength += (subtitle?.length ?? 0) * 3; + +const clippedAttributes: (Attribute | EndpointAttribute)[] = []; +for (const attribute of attributes) { + if (metaLength > maxMetaLength) { + clippedAttributes.pop(); + break; + } + if ("title" in attribute) { + metaLength += attribute.title.length; + metaLength += attribute.values.join(", ").length; + clippedAttributes.push(attribute); + } else { + metaLength += getLocalizedMatch(attribute.translations).name.length; + if (attribute.type === AttributeTypes.Tags) { + metaLength += attribute.value + .map(({ translations }) => getLocalizedMatch(translations).name) + .join(", ").length; + metaLength += clippedAttributes.push(attribute); + } + // TODO: Handle other attribute types + } + metaLength += 8; +} --- {/* ------------------------------------------- HTML ------------------------------------------- */} @@ -89,11 +123,11 @@ const { } { - attributes.length > 0 && ( + clippedAttributes.length > 0 && ( <> {subtitle &&
}
- +
) diff --git a/src/components/Previews/PagePreview.astro b/src/components/Previews/PagePreview.astro index 854d1a4..673fc2a 100644 --- a/src/components/Previews/PagePreview.astro +++ b/src/components/Previews/PagePreview.astro @@ -2,18 +2,30 @@ import GenericPreview from "components/Previews/GenericPreview.astro"; import { getI18n } from "src/i18n/i18n"; import type { EndpointPage } from "src/shared/payload/payload-sdk"; +import type { Attribute } from "src/utils/attributes"; interface Props { page: EndpointPage; } -const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale); +const { getLocalizedMatch, getLocalizedUrl, t, formatDate } = await getI18n( + Astro.locals.currentLocale +); const { - page: { slug, translations, thumbnail, attributes }, + page: { slug, translations, thumbnail, attributes, updatedAt }, } = Astro.props; const { title, pretitle, subtitle } = getLocalizedMatch(translations); + +const metaAttributes: Attribute[] = [ + { + title: t("global.media.attributes.updatedAt"), + icon: "material-symbols:edit-calendar", + values: [{ name: formatDate(new Date(updatedAt)) }], + withBorder: false, + }, +]; --- {/* ------------------------------------------- HTML ------------------------------------------- */} @@ -24,7 +36,7 @@ const { title, pretitle, subtitle } = getLocalizedMatch(translations); subtitle={subtitle} thumbnail={thumbnail} href={getLocalizedUrl(`/pages/${slug}`)} - attributes={attributes} + attributes={[...attributes, ...metaAttributes]} icon="material-symbols:docs" iconHoverLabel={t("global.previewTypes.page")} /> diff --git a/src/pages/[locale]/audios/[id].astro b/src/pages/[locale]/audios/[id].astro index 0bc4e75..03076e7 100644 --- a/src/pages/[locale]/audios/[id].astro +++ b/src/pages/[locale]/audios/[id].astro @@ -34,8 +34,6 @@ const { const { pretitle, title, subtitle, description } = getLocalizedMatch(translations); -const smallTitle = !subtitle && !pretitle; - const metaAttributes = [ ...(filename && title !== filename ? [ @@ -81,13 +79,7 @@ const metaAttributes = [
- { - smallTitle ? ( -

{title}

- ) : ( - - ) - } + {description && } {attributes.length > 0 && } {credits.length > 0 && } diff --git a/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro b/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro index 6ecdcdf..c96cc47 100644 --- a/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro +++ b/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro @@ -76,5 +76,6 @@ const metaAttributes = [ attributes={attributes} metaAttributes={metaAttributes} credits={credits} + smallTitle={title === filename} /> diff --git a/src/pages/[locale]/collectibles/[slug]/scans/[index].astro b/src/pages/[locale]/collectibles/[slug]/scans/[index].astro index c14cbed..4125158 100644 --- a/src/pages/[locale]/collectibles/[slug]/scans/[index].astro +++ b/src/pages/[locale]/collectibles/[slug]/scans/[index].astro @@ -40,5 +40,6 @@ const translation = getLocalizedMatch(translations); ? getLocalizedUrl(`/collectibles/${slug}/scans/${nextIndex}`) : undefined} filename={image.filename} + smallTitle /> diff --git a/src/pages/[locale]/dev/index.astro b/src/pages/[locale]/dev/index.astro new file mode 100644 index 0000000..22cd196 --- /dev/null +++ b/src/pages/[locale]/dev/index.astro @@ -0,0 +1,35 @@ +--- +import AppLayout from "components/AppLayout/AppLayout.astro"; +import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro"; +import { getI18n } from "src/i18n/i18n"; + +const { getLocalizedUrl } = await getI18n(Astro.locals.currentLocale); +--- + +{/* ------------------------------------------- HTML ------------------------------------------- */} + + + + + + +{/* ------------------------------------------- CSS -------------------------------------------- */} + + diff --git a/src/pages/[locale]/images/[id].astro b/src/pages/[locale]/images/[id].astro index 6f00599..ffe6ce2 100644 --- a/src/pages/[locale]/images/[id].astro +++ b/src/pages/[locale]/images/[id].astro @@ -64,5 +64,6 @@ const metaAttributes = [ attributes={attributes} metaAttributes={metaAttributes} credits={credits} + smallTitle={title === filename} /> diff --git a/src/pages/[locale]/timeline/index.astro b/src/pages/[locale]/timeline/index.astro index 9f41f19..093b9a0 100644 --- a/src/pages/[locale]/timeline/index.astro +++ b/src/pages/[locale]/timeline/index.astro @@ -24,7 +24,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
-

{t("timeline.notes.title")}

+

{t("timeline.notes.title")}

-

{t("timeline.priorCataclysmNote.title")}

+

{t("timeline.priorCataclysmNote.title")}

-

{t("timeline.jumpTo")}

+

{t("timeline.jumpTo")}

{ cache.config.timeline.eras.map(({ name, startingYear, endingYear }) => ( diff --git a/src/pages/[locale]/videos/[id].astro b/src/pages/[locale]/videos/[id].astro index 8839de0..154a4fc 100644 --- a/src/pages/[locale]/videos/[id].astro +++ b/src/pages/[locale]/videos/[id].astro @@ -33,7 +33,6 @@ const { } = video; const { pretitle, title, subtitle, description } = getLocalizedMatch(translations); -const smallTitle = !subtitle && !pretitle; const metaAttributes = [ ...(filename && title !== filename @@ -80,13 +79,7 @@ const metaAttributes = [
- { - smallTitle ? ( -

{title}

- ) : ( - - ) - } + {description && } {attributes.length > 0 && } {credits.length > 0 && }