diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 6bfba9b..764b5da 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -8,6 +8,7 @@ interface Props { children: React.ReactNode; active?: boolean; locale?: string; + target?: "_blank"; onClick?: MouseEventHandler; } @@ -30,6 +31,14 @@ export default function Button(props: Props): JSX.Element { ); + if (props.target) { + return ( + +
{button}
+
+ ); + } + return (
{ diff --git a/src/components/Img.tsx b/src/components/Img.tsx index c0a467d..84e0606 100644 --- a/src/components/Img.tsx +++ b/src/components/Img.tsx @@ -66,6 +66,7 @@ export function getAssetURL(url: string, quality: ImageQuality): string { let newUrl = url; newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`); newUrl = newUrl.replace(/.jpg$/u, ".webp"); + newUrl = newUrl.replace(/.jpeg$/u, ".webp"); newUrl = newUrl.replace(/.png$/u, ".webp"); if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg"); return process.env.NEXT_PUBLIC_URL_IMG + newUrl; diff --git a/src/graphql/operations/getLibraryItem.graphql b/src/graphql/operations/getLibraryItem.graphql index c923ad1..dd20e9f 100644 --- a/src/graphql/operations/getLibraryItem.graphql +++ b/src/graphql/operations/getLibraryItem.graphql @@ -39,6 +39,9 @@ query getLibraryItem($slug: String, $language_code: String) { } } } + urls { + url + } size { width height diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx index ac46e69..88958a6 100644 --- a/src/pages/library/[slug]/index.tsx +++ b/src/pages/library/[slug]/index.tsx @@ -37,6 +37,7 @@ import { prettyPrice, prettyTestError, prettyTestWarning, + prettyURL, sortContent, } from "queries/helpers"; import { useState } from "react"; @@ -191,6 +192,37 @@ export default function LibrarySlug(props: Props): JSX.Element { {item?.descriptions?.[0] && (

{item.descriptions[0].description}

)} + {!( + item?.metadata && + item.metadata[0]?.__typename === "ComponentMetadataGroup" && + (item.metadata[0].subtype?.data?.attributes?.slug === + "variant-set" || + item.metadata[0].subtype?.data?.attributes?.slug === + "relation-set") + ) && ( + <> + {item?.urls && item?.urls?.length ? ( +
+

Available at

+ {item?.urls?.map((url) => ( + <> + {url?.url && ( + + )} + + ))} +
+ ) : ( +

This item is not for sale or is no longer available

+ )} + + )}
@@ -433,7 +465,7 @@ export async function getStaticProps( slug: context.params?.slug ? context.params.slug.toString() : "", language_code: context.locale ?? "en", }); - if (!item.libraryItems) return { notFound: true }; + if (!item.libraryItems?.data[0]?.attributes) return { notFound: true }; const props: Props = { ...(await getAppStaticProps(context)), item: item.libraryItems.data[0].attributes, diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index 8c21f97..66cb2be 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -322,6 +322,11 @@ function prettyTestWritter( } } +export function prettyURL(url: string): string { + let domain = new URL(url); + return domain.hostname.replace("www.", ""); +} + export function capitalizeString(string: string): string { function capitalizeWord(word: string): string { return word.charAt(0).toUpperCase() + word.substring(1);