diff --git a/src/components/Library/LibraryItemComponent.tsx b/src/components/Library/LibraryItemComponent.tsx index a020f90..74c52a0 100644 --- a/src/components/Library/LibraryItemComponent.tsx +++ b/src/components/Library/LibraryItemComponent.tsx @@ -1,6 +1,7 @@ import Link from "next/link"; import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; import { getAssetURL } from "queries/helpers"; +import Image from "next/image"; export type LibraryItemComponentProps = { item: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]; @@ -26,16 +27,18 @@ export default function LibraryItemComponent(
{props.item.attributes.thumbnail.data ? ( - {props.item.attributes.thumbnail.data.attributes.alternativeText} ) : (
)} -
+

{props.item.attributes.title}

{props.item.attributes.subtitle}

diff --git a/src/components/PanelComponents/PanelHeader.tsx b/src/components/PanelComponents/PanelHeader.tsx index ffd75c6..480e2db 100644 --- a/src/components/PanelComponents/PanelHeader.tsx +++ b/src/components/PanelComponents/PanelHeader.tsx @@ -4,7 +4,7 @@ type NavOptionProps = { description?: string; }; -export default function NavOption(props: NavOptionProps): JSX.Element { +export default function PanelHeader(props: NavOptionProps): JSX.Element { return (
{props.icon ? ( diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 0f26434..9f1612a 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -102,37 +102,19 @@ query getLibraryItemsPreview($language_code: String) { } } -query getLibraryItemsSkeleton { - libraryItems(filters: { root_item: { eq: true } }) { +query getLibraryItemsSlugs { + libraryItems( + pagination: { limit: -1 } + ) { data { attributes { slug - subitems { - data { - attributes { - slug - subitems { - data { - attributes { - slug - subitems { - data { - attributes { - slug - } - } - } - } - } - } - } - } - } } } } } + query getLibraryItem($slug: String, $language_code: String) { libraryItems(filters: { slug: { eq: $slug } }) { data { @@ -177,6 +159,100 @@ query getLibraryItem($slug: String, $language_code: String) { descriptions(filters: { language: { code: { eq: $language_code } } }) { description } + metadata { + __typename + ... on ComponentMetadataBooks { + subtype { + data { + attributes { + slug + } + } + } + binding_type + page_count + page_order + languages { + data { + attributes { + code + name + } + } + } + } + ... on ComponentMetadataVideo { + resolution + audio_languages { + data { + attributes { + code + name + } + } + } + } + ... on ComponentMetadataGame { + platform { + data { + attributes { + short + } + } + } + audio_languages { + data { + attributes { + code + name + } + } + } + sub_languages { + data { + attributes { + code + name + } + } + } + interface_languages { + data { + attributes { + code + name + } + } + } + } + ... on ComponentMetadataAudio { + subtype { + data { + attributes { + slug + } + } + } + languages { + data { + attributes { + code + name + } + } + } + } + } + subitem_of { + data { + id + attributes { + title + subtitle + slug + } + } + } subitems { data { id @@ -199,6 +275,43 @@ query getLibraryItem($slug: String, $language_code: String) { } } } + contents { + data { + id + attributes { + slug + title(filters: { language: { code: { eq: $language_code } } }) { + title + } + type { + data { + attributes { + slug + } + } + } + categories { + data { + attributes { + name + short + } + } + } + range { + __typename + ... on ComponentRangePageRange { + starting_page + ending_page + } + ... on ComponentRangeTimeRange { + starting_time + ending_time + } + } + } + } + } } } } diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index ac0db0d..a5587f3 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -32,6 +32,23 @@ export type Scalars = { - Removed | undefined */ +export enum Enum_Componentmetadatabooks_Binding_Type { + Paperback = "Paperback", + Hardcover = "Hardcover", +} + +export enum Enum_Componentmetadatabooks_Page_Order { + LeftToRight = "Left_to_Right", + RightToLeft = "Right_to_Left", +} + +export enum Enum_Componentmetadatavideo_Resolution { + Sd_480p = "SD_480p", + Hd_720p = "HD_720p", + FullHd_1080p = "FullHD_1080p", + QuadHd_2160p = "QuadHD_2160p", +} + export type GetErasQueryVariables = Exact<{ language_code: InputMaybe; }>; @@ -167,50 +184,17 @@ export type GetLibraryItemsPreviewQuery = { }; }; -export type GetLibraryItemsSkeletonQueryVariables = Exact<{ +export type GetLibraryItemsSlugsQueryVariables = Exact<{ [key: string]: never; }>; -export type GetLibraryItemsSkeletonQuery = { +export type GetLibraryItemsSlugsQuery = { __typename: "Query"; libraryItems: { __typename: "LibraryItemEntityResponseCollection"; data: Array<{ __typename: "LibraryItemEntity"; - attributes: { - __typename: "LibraryItem"; - slug: string; - subitems: { - __typename: "LibraryItemRelationResponseCollection"; - data: Array<{ - __typename: "LibraryItemEntity"; - attributes: { - __typename: "LibraryItem"; - slug: string; - subitems: { - __typename: "LibraryItemRelationResponseCollection"; - data: Array<{ - __typename: "LibraryItemEntity"; - attributes: { - __typename: "LibraryItem"; - slug: string; - subitems: { - __typename: "LibraryItemRelationResponseCollection"; - data: Array<{ - __typename: "LibraryItemEntity"; - attributes: { - __typename: "LibraryItem"; - slug: string; - }; - }>; - }; - }; - }>; - }; - }; - }>; - }; - }; + attributes: { __typename: "LibraryItem"; slug: string }; }>; }; }; @@ -278,6 +262,134 @@ export type GetLibraryItemQuery = { __typename: "ComponentTranslationsLibraryItems"; description: string; }>; + metadata: Array< + | { + __typename: "ComponentMetadataBooks"; + binding_type: Enum_Componentmetadatabooks_Binding_Type; + page_count: number; + page_order: Enum_Componentmetadatabooks_Page_Order; + subtype: { + __typename: "TextualSubtypeEntityResponse"; + data: { + __typename: "TextualSubtypeEntity"; + attributes: { + __typename: "TextualSubtype"; + slug: string; + }; + }; + }; + languages: { + __typename: "LanguageRelationResponseCollection"; + data: Array<{ + __typename: "LanguageEntity"; + attributes: { + __typename: "Language"; + code: string; + name: string; + }; + }>; + }; + } + | { + __typename: "ComponentMetadataVideo"; + resolution: Enum_Componentmetadatavideo_Resolution; + audio_languages: { + __typename: "LanguageRelationResponseCollection"; + data: Array<{ + __typename: "LanguageEntity"; + attributes: { + __typename: "Language"; + code: string; + name: string; + }; + }>; + }; + } + | { + __typename: "ComponentMetadataGame"; + platform: { + __typename: "GamePlatformEntityResponse"; + data: { + __typename: "GamePlatformEntity"; + attributes: { + __typename: "GamePlatform"; + short: string; + }; + }; + }; + audio_languages: { + __typename: "LanguageRelationResponseCollection"; + data: Array<{ + __typename: "LanguageEntity"; + attributes: { + __typename: "Language"; + code: string; + name: string; + }; + }>; + }; + sub_languages: { + __typename: "LanguageRelationResponseCollection"; + data: Array<{ + __typename: "LanguageEntity"; + attributes: { + __typename: "Language"; + code: string; + name: string; + }; + }>; + }; + interface_languages: { + __typename: "LanguageRelationResponseCollection"; + data: Array<{ + __typename: "LanguageEntity"; + attributes: { + __typename: "Language"; + code: string; + name: string; + }; + }>; + }; + } + | { + __typename: "ComponentMetadataAudio"; + subtype: { + __typename: "AudioSubtypeEntityResponse"; + data: { + __typename: "AudioSubtypeEntity"; + attributes: { + __typename: "AudioSubtype"; + slug: string; + }; + }; + }; + languages: { + __typename: "LanguageRelationResponseCollection"; + data: Array<{ + __typename: "LanguageEntity"; + attributes: { + __typename: "Language"; + code: string; + name: string; + }; + }>; + }; + } + | { __typename: "Error" } + >; + subitem_of: { + __typename: "LibraryItemRelationResponseCollection"; + data: Array<{ + __typename: "LibraryItemEntity"; + id: string; + attributes: { + __typename: "LibraryItem"; + title: string; + subtitle: string; + slug: string; + }; + }>; + }; subitems: { __typename: "LibraryItemRelationResponseCollection"; data: Array<{ @@ -306,6 +418,57 @@ export type GetLibraryItemQuery = { }; }>; }; + contents: { + __typename: "LibraryContentRelationResponseCollection"; + data: Array<{ + __typename: "LibraryContentEntity"; + id: string; + attributes: { + __typename: "LibraryContent"; + slug: string; + title: Array<{ + __typename: "ComponentTranslationsLibraryContent"; + title: string; + }>; + type: { + __typename: "ContentTypeEntityResponse"; + data: { + __typename: "ContentTypeEntity"; + attributes: { + __typename: "ContentType"; + slug: string; + }; + }; + }; + categories: { + __typename: "CategoryRelationResponseCollection"; + data: Array<{ + __typename: "CategoryEntity"; + attributes: { + __typename: "Category"; + name: string; + short: string; + }; + }>; + }; + range: Array< + | { + __typename: "ComponentRangePageRange"; + starting_page: number; + ending_page: number; + } + | { + __typename: "ComponentRangeTimeRange"; + starting_time: any; + ending_time: any; + } + | { __typename: "ComponentRangeGameAspect" } + | { __typename: "ComponentRangeOther" } + | { __typename: "Error" } + >; + }; + }>; + }; }; }>; }; diff --git a/src/graphql/operations.ts b/src/graphql/operations.ts index ebeff8a..219b447 100644 --- a/src/graphql/operations.ts +++ b/src/graphql/operations.ts @@ -1,3 +1,5 @@ +import { readFileSync } from "fs"; + import { GetChronologyItemsQuery, GetChronologyItemsQueryVariables, @@ -7,8 +9,8 @@ import { GetLibraryItemQueryVariables, GetLibraryItemsPreviewQuery, GetLibraryItemsPreviewQueryVariables, - GetLibraryItemsSkeletonQuery, - GetLibraryItemsSkeletonQueryVariables, + GetLibraryItemsSlugsQuery, + GetLibraryItemsSlugsQueryVariables, } from "graphql/operations-types"; const graphQL = async (query: string, variables?: string) => { @@ -27,11 +29,7 @@ const graphQL = async (query: string, variables?: string) => { }; function getQueryFromOperations(queryName: string): string { - const fs = require("fs"); - const operations: string = fs.readFileSync( - "./src/graphql/operation.graphql", - "utf8" - ); + const operations = readFileSync("./src/graphql/operation.graphql", "utf8"); let startingIndex = -1; let endingIndex = -1; const lines = operations.split("\n"); @@ -67,10 +65,10 @@ export async function getLibraryItemsPreview( return await graphQL(query, JSON.stringify(variables)); } -export async function getLibraryItemsSkeleton( - variables: GetLibraryItemsSkeletonQueryVariables -): Promise { - const query = getQueryFromOperations("getLibraryItemsSkeleton"); +export async function getLibraryItemsSlugs( + variables: GetLibraryItemsSlugsQueryVariables +): Promise { + const query = getQueryFromOperations("getLibraryItemsSlugs"); return await graphQL(query, JSON.stringify(variables)); } @@ -80,4 +78,3 @@ export async function getLibraryItem( const query = getQueryFromOperations("getLibraryItem"); return await graphQL(query, JSON.stringify(variables)); } - diff --git a/src/graphql/schema.graphql b/src/graphql/schema.graphql index 3d2c72c..8a10333 100644 --- a/src/graphql/schema.graphql +++ b/src/graphql/schema.graphql @@ -379,16 +379,26 @@ type ComponentMetadataAudio { subtype: AudioSubtypeEntityResponse } +enum ENUM_COMPONENTMETADATABOOKS_BINDING_TYPE { + Paperback + Hardcover +} + +enum ENUM_COMPONENTMETADATABOOKS_PAGE_ORDER { + Left_to_Right + Right_to_Left +} + type ComponentMetadataBooks { id: ID! - binding_type: String + binding_type: ENUM_COMPONENTMETADATABOOKS_BINDING_TYPE page_count: Int languages( filters: LanguageFiltersInput pagination: PaginationArg = {} sort: [String] = [] ): LanguageRelationResponseCollection - page_order: String! + page_order: ENUM_COMPONENTMETADATABOOKS_PAGE_ORDER! subtype: TextualSubtypeEntityResponse } @@ -413,9 +423,16 @@ type ComponentMetadataGame { ): LanguageRelationResponseCollection } +enum ENUM_COMPONENTMETADATAVIDEO_RESOLUTION { + SD_480p + HD_720p + FullHD_1080p + QuadHD_2160p +} + type ComponentMetadataVideo { id: ID! - resolution: String + resolution: ENUM_COMPONENTMETADATAVIDEO_RESOLUTION audio_languages( filters: LanguageFiltersInput pagination: PaginationArg = {} @@ -516,6 +533,13 @@ type ComponentSourceUrlSource { credits: ComponentBasicsCredits! } +enum ENUM_COMPONENTTRANSLATIONSAUDIOSETS_STATUS { + Incomplete + Draft + Review + Done +} + input ComponentTranslationsAudioSetsFiltersInput { language: LanguageFiltersInput status: StringFilterInput @@ -528,7 +552,7 @@ input ComponentTranslationsAudioSetsInput { id: ID language: ID audiofile: ID - status: String + status: ENUM_COMPONENTTRANSLATIONSAUDIOSETS_STATUS credits: ComponentBasicsCreditsInput } @@ -536,7 +560,7 @@ type ComponentTranslationsAudioSets { id: ID! language: LanguageEntityResponse audiofile: UploadFileEntityResponse! - status: String! + status: ENUM_COMPONENTTRANSLATIONSAUDIOSETS_STATUS! credits: ComponentBasicsCredits! } @@ -560,6 +584,13 @@ type ComponentTranslationsChronologyEra { language: LanguageEntityResponse } +enum ENUM_COMPONENTTRANSLATIONSCHRONOLOGYITEM_STATUS { + Incomplete + Draft + Review + Done +} + input ComponentTranslationsChronologyItemFiltersInput { language: LanguageFiltersInput title: StringFilterInput @@ -577,7 +608,7 @@ input ComponentTranslationsChronologyItemInput { title: String description: String note: String - status: String + status: ENUM_COMPONENTTRANSLATIONSCHRONOLOGYITEM_STATUS } type ComponentTranslationsChronologyItem { @@ -586,7 +617,14 @@ type ComponentTranslationsChronologyItem { title: String description: String note: String - status: String! + status: ENUM_COMPONENTTRANSLATIONSCHRONOLOGYITEM_STATUS! +} + +enum ENUM_COMPONENTTRANSLATIONSGLOSSARYDEFINITION_STATUS { + Incomplete + Draft + Review + Done } input ComponentTranslationsGlossaryDefinitionFiltersInput { @@ -602,14 +640,14 @@ input ComponentTranslationsGlossaryDefinitionInput { id: ID definition: String language: ID - status: String + status: ENUM_COMPONENTTRANSLATIONSGLOSSARYDEFINITION_STATUS } type ComponentTranslationsGlossaryDefinition { id: ID! definition: String language: LanguageEntityResponse - status: String! + status: ENUM_COMPONENTTRANSLATIONSGLOSSARYDEFINITION_STATUS! } input ComponentTranslationsGlossaryItemFiltersInput { @@ -672,6 +710,13 @@ type ComponentTranslationsLibraryItems { language: LanguageEntityResponse } +enum ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS { + Incomplete + Draft + Review + Done +} + input ComponentTranslationsPostsFiltersInput { Status: StringFilterInput title: StringFilterInput @@ -683,7 +728,7 @@ input ComponentTranslationsPostsFiltersInput { input ComponentTranslationsPostsInput { id: ID - Status: String + Status: ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS title: String excerpt: String thumbnail: ID @@ -691,12 +736,19 @@ input ComponentTranslationsPostsInput { type ComponentTranslationsPosts { id: ID! - Status: String! + Status: ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS! title: String! excerpt: String thumbnail: UploadFileEntityResponse } +enum ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS { + Incomplete + Draft + Review + Done +} + input ComponentTranslationsScanSetFiltersInput { language: LanguageFiltersInput status: StringFilterInput @@ -709,7 +761,7 @@ input ComponentTranslationsScanSetInput { id: ID language: ID pages: [ID] - status: String + status: ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS credits: ComponentBasicsCreditsInput } @@ -721,10 +773,17 @@ type ComponentTranslationsScanSet { pagination: PaginationArg = {} sort: [String] = [] ): UploadFileRelationResponseCollection! - status: String! + status: ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS! credits: ComponentBasicsCredits! } +enum ENUM_COMPONENTTRANSLATIONSTEXTSET_STATUS { + Incomplete + Draft + Review + Done +} + input ComponentTranslationsTextSetFiltersInput { text: StringFilterInput language: LanguageFiltersInput @@ -738,7 +797,7 @@ input ComponentTranslationsTextSetInput { id: ID text: String language: ID - status: String + status: ENUM_COMPONENTTRANSLATIONSTEXTSET_STATUS credits: ComponentBasicsCreditsInput } @@ -746,10 +805,17 @@ type ComponentTranslationsTextSet { id: ID! text: String language: LanguageEntityResponse - status: String! + status: ENUM_COMPONENTTRANSLATIONSTEXTSET_STATUS! credits: ComponentBasicsCredits! } +enum ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS { + Incomplete + Draft + Review + Done +} + input ComponentTranslationsVideoSetsFiltersInput { language: LanguageFiltersInput video_url: StringFilterInput @@ -766,7 +832,7 @@ input ComponentTranslationsVideoSetsInput { video_url: String video_embed: String subfile: ID - status: String + status: ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS credits: ComponentBasicsCreditsInput } @@ -776,10 +842,17 @@ type ComponentTranslationsVideoSets { video_url: String! video_embed: String subfile: UploadFileEntityResponse - status: String! + status: ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS! credits: ComponentBasicsCredits! } +enum ENUM_COMPONENTTRANSLATIONSWEAPONSTORYSTORY_STATUS { + Incomplete + Draft + Review + Done +} + input ComponentTranslationsWeaponStoryStoryFiltersInput { description: StringFilterInput level_1: StringFilterInput @@ -801,7 +874,7 @@ input ComponentTranslationsWeaponStoryStoryInput { level_3: String level_4: String language: ID - status: String + status: ENUM_COMPONENTTRANSLATIONSWEAPONSTORYSTORY_STATUS } type ComponentTranslationsWeaponStoryStory { @@ -812,7 +885,7 @@ type ComponentTranslationsWeaponStoryStory { level_3: String level_4: String language: LanguageEntityResponse - status: String! + status: ENUM_COMPONENTTRANSLATIONSWEAPONSTORYSTORY_STATUS! } input ComponentTranslationsWeaponStoryTypeFiltersInput { @@ -1186,6 +1259,12 @@ type AudioSubtypeEntityResponseCollection { meta: ResponseCollectionMeta! } +enum ENUM_CATEGORY_SERIES { + Drakengard + NieR + YoRHa +} + input CategoryFiltersInput { id: IDFilterInput name: StringFilterInput @@ -1201,13 +1280,13 @@ input CategoryFiltersInput { input CategoryInput { name: String short: String - series: String + series: ENUM_CATEGORY_SERIES } type Category { name: String! short: String! - series: String + series: ENUM_CATEGORY_SERIES createdAt: DateTime updatedAt: DateTime } @@ -1580,6 +1659,7 @@ input LibraryContentFiltersInput { audio_set: AudioSetFiltersInput video_set: VideoSetFiltersInput type: ContentTypeFiltersInput + categories: CategoryFiltersInput createdAt: DateTimeFilterInput updatedAt: DateTimeFilterInput and: [LibraryContentFiltersInput] @@ -1597,6 +1677,7 @@ input LibraryContentInput { audio_set: ID video_set: ID type: ID + categories: [ID] } type LibraryContent { @@ -1613,6 +1694,11 @@ type LibraryContent { audio_set: AudioSetEntityResponse video_set: VideoSetEntityResponse type: ContentTypeEntityResponse + categories( + filters: CategoryFiltersInput + pagination: PaginationArg = {} + sort: [String] = [] + ): CategoryRelationResponseCollection createdAt: DateTime updatedAt: DateTime } diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx new file mode 100644 index 0000000..747a58d --- /dev/null +++ b/src/pages/gallery/index.tsx @@ -0,0 +1,14 @@ +import { applyCustomAppProps } from "pages/_app"; + +applyCustomAppProps(Chronology, { + useSubPanel: false, + useContentPanel: true, +}); + +export default function Chronology(): JSX.Element { + return ( + <> + + + ); +} diff --git a/src/pages/library/[...slug].tsx b/src/pages/library/[...slug].tsx deleted file mode 100644 index c257b8b..0000000 --- a/src/pages/library/[...slug].tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { useRouter } from "next/router"; -import ContentPanel from "components/Panels/ContentPanel"; -import Image from "next/image"; -import Link from "next/link"; -import { GetStaticPaths, GetStaticProps } from "next"; -import { applyCustomAppProps } from "pages/_app"; -import { getLibraryItem, getLibraryItemsSkeleton } from "graphql/operations"; -import { GetLibraryItemQuery } from "graphql/operations-types"; -import { getAssetURL } from "queries/helpers"; - -type Props = { - libraryItem: GetLibraryItemQuery; -}; - -applyCustomAppProps(Library, { - useSubPanel: false, - useContentPanel: true, -}); - -export default function Library(props: Props): JSX.Element { - const router = useRouter(); - const libraryItem = props.libraryItem.libraryItems.data[0]; - return ( - <> - -

{libraryItem.attributes.title}

-

{libraryItem.attributes.subtitle}

- {libraryItem.attributes.thumbnail.data ? ( - { - ) : ( - "" - )} - - {libraryItem.attributes.subitems.data.map((subitem) => ( - -
- {subitem.attributes.thumbnail.data ? ( - { - ) : ( - "" - )} -
- - ))} - - - ); -} - -export const getStaticProps: GetStaticProps = async (context) => { - if (context.params && Array.isArray(context.params.slug)) { - const slug = context.params.slug.pop(); - if (slug && context.locale) { - return { - props: { - libraryItem: await getLibraryItem({ - slug: slug, - language_code: context.locale, - }), - }, - }; - } - } - - return { props: {} }; -}; - -export const getStaticPaths: GetStaticPaths = async () => { - const paths = await getAllSlugs(); - return { - paths, - fallback: false, - }; -}; - -async function getAllSlugs() { - type Path = { - params: { - slug: string[]; - }; - }; - - const data = await getLibraryItemsSkeleton({}); - console.log(data); - const paths: Path[] = []; - data.libraryItems.data.map((item) => { - const breadcrumbs = getBreadcrumbs([], item); - breadcrumbs.map((breadcrumb) => { - paths.push({ params: { slug: breadcrumb } }); - }); - }); - return paths; -} - -export type LibraryItemSkeleton = { - attributes: { - slug: string; - subitems: { - data: LibraryItemSkeleton[]; - }; - }; -}; - -function getBreadcrumbs(parentBreadcrumb: string[], data: LibraryItemSkeleton) { - const result: string[][] = []; - const itemBreadcrumb = [...parentBreadcrumb, data.attributes.slug]; - result.push(itemBreadcrumb); - data.attributes.subitems.data.map((subitem) => { - result.push(...getBreadcrumbs(itemBreadcrumb, subitem)); - }); - return result; -} diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx new file mode 100644 index 0000000..4e4cfd1 --- /dev/null +++ b/src/pages/library/[slug].tsx @@ -0,0 +1,239 @@ +import { useRouter } from "next/router"; +import ContentPanel, { + ContentPanelWidthSizes, +} from "components/Panels/ContentPanel"; +import Image from "next/image"; +import Link from "next/link"; +import { GetStaticPaths, GetStaticProps } from "next"; +import { applyCustomAppProps } from "pages/_app"; +import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations"; +import { GetLibraryItemQuery } from "graphql/operations-types"; +import { getAssetURL } from "queries/helpers"; +import SubPanel from "components/Panels/SubPanel"; +import ReturnButton from "components/PanelComponents/ReturnButton"; +import NavOption from "components/PanelComponents/NavOption"; + +type Props = { + libraryItem: GetLibraryItemQuery; +}; + +applyCustomAppProps(Library, { + useSubPanel: true, + useContentPanel: true, +}); + +export default function Library(props: Props): JSX.Element { + const router = useRouter(); + const libraryItem = props.libraryItem.libraryItems.data[0]; + + return ( + <> + + +
+ +
+
+
+ {libraryItem.attributes.thumbnail.data ? ( + { + ) : ( +
+ )} +
+ +

{libraryItem.attributes.title}

+ {libraryItem.attributes.subtitle ? ( +

{libraryItem.attributes.subtitle}

+ ) : ( + "" + )} +
+ +
+ + + + + + + + +
+
+
+ {libraryItem.attributes.thumbnail.data ? ( + { + ) : ( +
+ )} +
+ +
+
+ {libraryItem.attributes.subitem_of.data.length > 0 ? ( +
+

Subitem of

+ + + +
+ ) : ( + "" + )} +
+

{libraryItem.attributes.title}

+ {libraryItem.attributes.subtitle ? ( +

+ {libraryItem.attributes.subtitle} +

+ ) : ( + "" + )} +
+ {libraryItem.attributes.descriptions.length > 0 ? ( +

{libraryItem.attributes.descriptions[0].description}

+ ) : ( + "" + )} +
+
+ + + +
+
+

Details

+
+

Type

+

Release date

+

Price

+
+
+
+ +
+ {libraryItem.attributes.subitems.data.map((subitem) => ( + +
+ {subitem.attributes.thumbnail.data ? ( + { + ) : ( + "" + )} +
+ + ))} + +
+ {libraryItem.attributes.contents.data.map((content) => ( +
+

{content.attributes.title[0].title}

+

+ {content.attributes.range[0].__typename === + "ComponentRangePageRange" + ? content.attributes.range[0].starting_page + : ""} +

+

{content.attributes.type.data.attributes.slug}

+
+ ))} +
+
+
+ + + ); +} + +export const getStaticProps: GetStaticProps = async (context) => { + if (context.params) { + if (context.params.slug && context.locale) { + return { + props: { + libraryItem: await getLibraryItem({ + slug: context.params.slug, + language_code: context.locale, + }), + }, + }; + } + } + return { props: {} }; +}; + +export const getStaticPaths: GetStaticPaths = async () => { + type Path = { + params: { + slug: string; + }; + }; + + const data = await getLibraryItemsSlugs({}); + const paths: Path[] = []; + data.libraryItems.data.map((item) => { + console.log(item.attributes.slug); + paths.push({ params: { slug: item.attributes.slug } }); + }); + return { + paths, + fallback: false, + }; +}; diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 762f7ee..ef65d32 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -19,7 +19,6 @@ applyCustomAppProps(Library, { }); export default function Library(props: Props): JSX.Element { - console.log(props); return ( <> diff --git a/src/tailwind.css b/src/tailwind.css index ab116e6..eba0e27 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -7,8 +7,8 @@ body { padding: 0; margin: 0; - background-color: var(--color-main-light); - color: var(--color-main-black); + background-color: theme("colors.light"); + color: theme("colors.black"); } /* HORIZONTAL LINE */ @@ -31,7 +31,7 @@ place-items: center; border: 0.1rem solid theme("colors.dark"); color: theme("colors.dark"); - background: theme("colors.light"); + background: inherit; border-radius: 100vmax; padding: 0.4em 1em; cursor: pointer; diff --git a/tailwind.config.js b/tailwind.config.js index b9330bb..bb18fba 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -44,5 +44,15 @@ module.exports = { }, }); }), + + plugin(function ({ addUtilities }) { + addUtilities({ + ".linearbg-1": { + background: + "linear-gradient(to right, theme('colors.mid'), theme('colors.light') 3%, theme('colors.light') 97%, theme('colors.mid'))", + }, + }); + }), + ], };