Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added more info on library items

This commit is contained in:
DrMint 2022-02-08 05:52:22 +01:00
parent ddc6c1b491
commit 676b73318e
5 changed files with 167 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Library/LibraryItemComponent.tsx
View File

@ -10,47 +10,44 @@ export type LibraryItemComponentProps = {
export default function LibraryItemComponent( export default function LibraryItemComponent(
props: LibraryItemComponentProps props: LibraryItemComponentProps
): JSX.Element { ): JSX.Element {
const item = props.item.attributes;
return ( return (
<Link href={"/library/" + props.item.attributes.slug} passHref> <Link href={"/library/" + item.slug} passHref>
<div className="cursor-pointer grid items-end relative hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform"> <div className="cursor-pointer grid items-end relative hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
<div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div> <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
{props.item.attributes.thumbnail.data ? ( {item.thumbnail.data ? (
<Image <Image
src={getAssetURL( src={getAssetURL(item.thumbnail.data.attributes.url)}
props.item.attributes.thumbnail.data.attributes.url alt={item.thumbnail.data.attributes.alternativeText}
)} height={item.thumbnail.data.attributes.height}
alt={ width={item.thumbnail.data.attributes.width}
props.item.attributes.thumbnail.data.attributes.alternativeText
}
height={props.item.attributes.thumbnail.data.attributes.height}
width={props.item.attributes.thumbnail.data.attributes.width}
/> />
) : ( ) : (
<div className="w-full aspect-[21/29.7]"></div> <div className="w-full aspect-[21/29.7]"></div>
)} )}
<div className="linearbg-1 shadow-[0_0_1em_rgb(0,0,0,0.2)] absolute bottom-0 left-0 right-0 h-auto opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left"> <div className="linearbg-1 shadow-[0_0_1em_rgb(0,0,0,0.2)] absolute bottom-0 left-0 right-0 h-auto opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left">
<div> <div>
<h2 className="text-lg leading-7">{props.item.attributes.title}</h2> <h2 className="text-lg leading-7">{item.title}</h2>
<h3 className="leading-3">{props.item.attributes.subtitle}</h3> <h3 className="leading-3">{item.subtitle}</h3>
</div> </div>
<div className="grid grid-flow-col"> <div className="grid grid-flow-col">
{props.item.attributes.price ? ( {item.price ? (
<p className="text-sm"> <p className="text-sm">
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons !text-base translate-y-[.15em] mr-1">
event event
</span> </span>
{prettyDate(props.item.attributes.release_date)} {prettyDate(item.release_date)}
</p> </p>
) : ( ) : (
"" ""
)} )}
{props.item.attributes.price ? ( {item.price ? (
<p className="text-sm justify-self-end"> <p className="text-sm justify-self-end">
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons !text-base translate-y-[.15em] mr-1">
shopping_cart shopping_cart
</span> </span>
{prettyPrice(props.item.attributes.price)} {prettyPrice(item.price)}
</p> </p>
) : ( ) : (
"" ""

2
src/graphql/operation.graphql
View File

@ -53,7 +53,7 @@ query getLibraryItemsPreview($language_code: String) {
libraryItems( libraryItems(
filters: { root_item: { eq: true } } filters: { root_item: { eq: true } }
pagination: { limit: -1 } pagination: { limit: -1 }
sort: ["slug:asc"] sort: ["title:asc","subtitle:asc"]
) { ) {
data { data {
id id

205
src/pages/library/[slug].tsx
View File

@ -2,12 +2,12 @@ import ContentPanel, {
ContentPanelWidthSizes, ContentPanelWidthSizes,
} from "components/Panels/ContentPanel"; } from "components/Panels/ContentPanel";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { GetStaticPaths, GetStaticProps } from "next"; import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app"; import { applyCustomAppProps } from "pages/_app";
import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations"; import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
import { GetLibraryItemQuery } from "graphql/operations-types"; import { GetLibraryItemQuery } from "graphql/operations-types";
import { import {
capitalizeString,
convertMmToInch, convertMmToInch,
getAssetURL, getAssetURL,
prettyDate, prettyDate,
@ -32,9 +32,9 @@ applyCustomAppProps(Library, {
}); });
export default function Library(props: Props): JSX.Element { export default function Library(props: Props): JSX.Element {
const libraryItem = props.libraryItem.libraryItems.data[0]; const item = props.libraryItem.libraryItems.data[0].attributes;
libraryItem.attributes.contents.data.sort((a, b) => { item.contents.data.sort((a, b) => {
if ( if (
a.attributes.range[0].__typename === "ComponentRangePageRange" && a.attributes.range[0].__typename === "ComponentRangePageRange" &&
b.attributes.range[0].__typename === "ComponentRangePageRange" b.attributes.range[0].__typename === "ComponentRangePageRange"
@ -55,7 +55,7 @@ export default function Library(props: Props): JSX.Element {
<NavOption title="Summary" url="#summary" border={true} /> <NavOption title="Summary" url="#summary" border={true} />
{libraryItem.attributes.gallery.data.length > 0 ? ( {item.gallery.data.length > 0 ? (
<NavOption title="Gallery" url="#gallery" border={true} /> <NavOption title="Gallery" url="#gallery" border={true} />
) : ( ) : (
"" ""
@ -63,13 +63,13 @@ export default function Library(props: Props): JSX.Element {
<NavOption title="Details" url="#details" border={true} /> <NavOption title="Details" url="#details" border={true} />
{libraryItem.attributes.subitems.data.length > 0 ? ( {item.subitems.data.length > 0 ? (
<NavOption title="Subitems" url="#subitems" border={true} /> <NavOption title="Subitems" url="#subitems" border={true} />
) : ( ) : (
"" ""
)} )}
{libraryItem.attributes.contents.data.length > 0 ? ( {item.contents.data.length > 0 ? (
<NavOption title="Content" url="#content" border={true} /> <NavOption title="Content" url="#content" border={true} />
) : ( ) : (
"" ""
@ -79,17 +79,12 @@ export default function Library(props: Props): JSX.Element {
<div className="grid place-items-center gap-12"> <div className="grid place-items-center gap-12">
<div className="cursor-pointer grid items-end relative hover:rounded-3xl w-96 max-w-full mb-16"> <div className="cursor-pointer grid items-end relative hover:rounded-3xl w-96 max-w-full mb-16">
<div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div> <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
{libraryItem.attributes.thumbnail.data ? ( {item.thumbnail.data ? (
<Image <Image
src={getAssetURL( src={getAssetURL(item.thumbnail.data.attributes.url)}
libraryItem.attributes.thumbnail.data.attributes.url alt={item.thumbnail.data.attributes.alternativeText}
)} width={item.thumbnail.data.attributes.width}
alt={ height={item.thumbnail.data.attributes.height}
libraryItem.attributes.thumbnail.data.attributes
.alternativeText
}
width={libraryItem.attributes.thumbnail.data.attributes.width}
height={libraryItem.attributes.thumbnail.data.attributes.height}
/> />
) : ( ) : (
<div className="w-full aspect-[21/29.7]"></div> <div className="w-full aspect-[21/29.7]"></div>
@ -100,17 +95,16 @@ export default function Library(props: Props): JSX.Element {
id="summary" id="summary"
className="bg-mid w-full grid place-items-center p-8 rounded-2xl" className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
> >
<div className="max-w-2xl grid place-items-center gap-8"> <div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
{libraryItem.attributes.subitem_of.data.length > 0 ? ( {item.subitem_of.data.length > 0 ? (
<div className="grid place-items-center"> <div className="grid place-items-center">
<p>Subitem of</p> <p>Subitem of</p>
<Button <Button
href={`/library/${libraryItem.attributes.subitem_of.data[0].attributes.slug}`} href={`/library/${item.subitem_of.data[0].attributes.slug}`}
> >
{libraryItem.attributes.subitem_of.data[0].attributes.title} {item.subitem_of.data[0].attributes.title}
{libraryItem.attributes.subitem_of.data[0].attributes {item.subitem_of.data[0].attributes.subtitle
.subtitle ? ` - ${item.subitem_of.data[0].attributes.subtitle}`
? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
: ""} : ""}
</Button> </Button>
</div> </div>
@ -118,28 +112,26 @@ export default function Library(props: Props): JSX.Element {
"" ""
)} )}
<div className="grid place-items-center"> <div className="grid place-items-center">
<h1 className="text-3xl">{libraryItem.attributes.title}</h1> <h1 className="text-3xl">{item.title}</h1>
{libraryItem.attributes.subtitle ? ( {item.subtitle ? (
<h2 className="text-2xl"> <h2 className="text-2xl">{item.subtitle}</h2>
{libraryItem.attributes.subtitle}
</h2>
) : ( ) : (
"" ""
)} )}
</div> </div>
{libraryItem.attributes.descriptions.length > 0 ? ( {item.descriptions.length > 0 ? (
<p>{libraryItem.attributes.descriptions[0].description}</p> <p>{item.descriptions[0].description}</p>
) : ( ) : (
"" ""
)} )}
</div> </div>
</div> </div>
{libraryItem.attributes.gallery.data.length > 0 ? ( {item.gallery.data.length > 0 ? (
<div id="gallery" className="grid place-items-center gap-8 w-full"> <div id="gallery" className="grid place-items-center gap-8 w-full">
<h2 className="text-2xl">Gallery</h2> <h2 className="text-2xl">Gallery</h2>
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]"> <div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
{libraryItem.attributes.gallery.data.map((galleryItem) => ( {item.gallery.data.map((galleryItem) => (
<div <div
key={galleryItem.id} key={galleryItem.id}
className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer" className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
@ -166,61 +158,131 @@ export default function Library(props: Props): JSX.Element {
id="details" id="details"
className="bg-mid w-full grid place-items-center p-8 rounded-2xl" className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
> >
<div className="max-w-2xl grid place-items-center gap-8"> <div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
<h2 className="text-2xl">Details</h2> <h2 className="text-2xl text-center">Details</h2>
<div className="grid grid-flow-col place-items-center gap-8"> <div className="grid grid-flow-col w-full place-content-between">
{item.metadata.length > 0 ? (
<div className="grid place-items-center"> <div className="grid place-items-center">
<h3>Type</h3> <h3 className="text-xl">Type</h3>
</div> <Button>
{item.metadata[0].__typename.substring(
{libraryItem.attributes.release_date ? ( "ComponentMetadata".length
<div className="grid place-items-center"> )}
<h3>Release date</h3> </Button>
<p>{prettyDate(libraryItem.attributes.release_date)}</p>
</div> </div>
) : ( ) : (
"" ""
)} )}
{libraryItem.attributes.release_date ? ( {item.release_date ? (
<div className="grid place-items-center"> <div className="grid place-items-center">
<h3>Price</h3> <h3 className="text-xl">Release date</h3>
<p>{prettyPrice(libraryItem.attributes.price)}</p> <p>{prettyDate(item.release_date)}</p>
</div>
) : (
""
)}
{item.release_date ? (
<div className="grid place-items-center">
<h3 className="text-xl">Price</h3>
<p>{prettyPrice(item.price)}</p>
</div> </div>
) : ( ) : (
"" ""
)} )}
</div> </div>
<h3>Physical size</h3> {item.size ? (
<div className="grid grid-flow-col place-items-center gap-8"> <>
<div className="grid place-items-center"> <h3 className="text-xl">Physical Size</h3>
<p className="font-bold">Width</p> <div className="grid grid-flow-col w-full place-content-between">
<p>{libraryItem.attributes.size.width} mm</p> <div className="grid place-items-start grid-flow-col gap-4">
<p>{convertMmToInch(libraryItem.attributes.size.width)} in</p> <p className="font-bold">Width:</p>
<div>
<p>{item.size.width} mm</p>
<p>{convertMmToInch(item.size.width)} in</p>
</div> </div>
<div className="grid place-items-center"> </div>
<p className="font-bold">Height</p> <div className="grid place-items-start grid-flow-col gap-4">
<p>{libraryItem.attributes.size.height} mm</p> <p className="font-bold">Height:</p>
<p> <div>
{convertMmToInch(libraryItem.attributes.size.height)} in <p>{item.size.height} mm</p>
</p> <p>{convertMmToInch(item.size.height)} in</p>
</div> </div>
<div className="grid place-items-center"> </div>
<p className="font-bold">Thickness</p> {item.size.thickness ? (
<p>{libraryItem.attributes.size.thickness} mm</p> <div className="grid place-items-start grid-flow-col gap-4">
<p> <p className="font-bold">Thickness:</p>
{convertMmToInch(libraryItem.attributes.size.thickness)} in <div>
<p>{item.size.thickness} mm</p>
<p>{convertMmToInch(item.size.thickness)} in</p>
</div>
</div>
) : (
""
)}
</div>
</>
) : (
""
)}
{item.metadata.length > 0 ? (
<>
<h3 className="text-xl">Type Information</h3>
<div className="grid grid-cols-2 w-full place-content-between">
{item.metadata[0].__typename ===
"ComponentMetadataBooks" ? (
<>
<div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold">Type:</p>
<Chip>
{capitalizeString(
item.metadata[0].subtype.data.attributes.slug
)}
</Chip>
</div>
<div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold">Pages:</p>
<p>{item.metadata[0].page_count}</p>
</div>
<div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold">Binding:</p>
<p>{item.metadata[0].binding_type}</p>
</div>
<div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold">Page order:</p>
<p>{item.metadata[0].page_order}</p>
</div>
<div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold">Languages:</p>
{item.metadata[0].languages.data.map((lang) => (
<p key={lang.attributes.code}>
{lang.attributes.name}
</p> </p>
))}
</div> </div>
</>
) : (
""
)}
</div> </div>
</>
) : (
""
)}
</div> </div>
</div> </div>
{libraryItem.attributes.subitems.data.length > 0 ? ( {item.subitems.data.length > 0 ? (
<div id="subitems" className="grid place-items-center gap-8"> <div id="subitems" className="grid place-items-center gap-8">
<h2 className="text-2xl">Subitems</h2> <h2 className="text-2xl">Subitems</h2>
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]"> <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
{libraryItem.attributes.subitems.data.map((subitem) => ( {item.subitems.data.map((subitem) => (
<LibraryItemComponent key={subitem.id} item={subitem} /> <LibraryItemComponent key={subitem.id} item={subitem} />
))} ))}
</div> </div>
@ -229,11 +291,11 @@ export default function Library(props: Props): JSX.Element {
"" ""
)} )}
{libraryItem.attributes.contents.data.length > 0 ? ( {item.contents.data.length > 0 ? (
<div id="content" className="w-full grid place-items-center"> <div id="content" className="w-full grid place-items-center gap-8">
<h2 className="text-2xl">Content</h2> <h2 className="text-2xl">Content</h2>
<div className="grid gap-4 w-full"> <div className="grid gap-4 w-full">
{libraryItem.attributes.contents.data.map((content) => ( {item.contents.data.map((content) => (
<div <div
id={content.attributes.slug} id={content.attributes.slug}
key={content.id} key={content.id}
@ -245,10 +307,7 @@ export default function Library(props: Props): JSX.Element {
{content.attributes.content.data {content.attributes.content.data
? content.attributes.content.data.attributes ? content.attributes.content.data.attributes
.titles[0].title .titles[0].title
: prettySlug( : prettySlug(content.attributes.slug, item.slug)}
content.attributes.slug,
libraryItem.attributes.slug
)}
</h3> </h3>
</a> </a>
<div className="grid grid-flow-col gap-1"> <div className="grid grid-flow-col gap-1">

2
src/pages/library/index.tsx
View File

@ -30,7 +30,7 @@ export default function Library(props: Props): JSX.Element {
</SubPanel> </SubPanel>
<ContentPanel width={ContentPanelWidthSizes.large}> <ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]"> <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
{props.libraryItems.libraryItems.data.map((item) => ( {props.libraryItems.libraryItems.data.map((item) => (
<LibraryItemComponent key={item.id} item={item} /> <LibraryItemComponent key={item.id} item={item} />
))} ))}

18
src/queries/helpers.ts
View File

@ -1,4 +1,7 @@
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; import {
GetLibraryItemQuery,
GetLibraryItemsPreviewQuery,
} from "graphql/operations-types";
export function getAssetURL(url: string): string { export function getAssetURL(url: string): string {
return process.env.NEXT_PUBLIC_URL_CMS + url; return process.env.NEXT_PUBLIC_URL_CMS + url;
@ -28,9 +31,18 @@ export function prettyPrice(
export function prettySlug(slug: string, parentSlug?: string): string { export function prettySlug(slug: string, parentSlug?: string): string {
if (parentSlug && slug.startsWith(parentSlug)) if (parentSlug && slug.startsWith(parentSlug))
slug = slug.substring(parentSlug.length + 1); slug = slug.substring(parentSlug.length + 1);
let words = slug.split("-"); return capitalizeString(slug.replace(new RegExp("-", 'g'), " "))
return slug;
}
export function capitalizeString(string:string):string {
function capitalizeWord(word: string): string {
return word.charAt(0).toUpperCase() + word.substring(1);
}
let words = string.split(" ");
words = words.map( words = words.map(
(word) => (word = word.charAt(0).toUpperCase() + word.substring(1)) (word) => (word = capitalizeWord(word))
); );
return words.join(" "); return words.join(" ");
} }