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

Added more details in the item pages

Browse Source
This commit is contained in:
DrMint 2022-01-27 03:16:32 +01:00
parent 9fdd1ead6b
commit 33983d38ee
12 changed files with 724 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(
<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>
{props.item.attributes.thumbnail.data ? (
<img
className="z-10"
<Image
src={getAssetURL(
props.item.attributes.thumbnail.data.attributes.url
)}
alt={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="[background:linear-gradient(to_right,_#f0d1b3,_#ffedd8_3%,_#ffedd8_97%,_#f0d1b3)] 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>
<h2 className="text-lg leading-7">{props.item.attributes.title}</h2>
<h3 className="leading-3">{props.item.attributes.subtitle}</h3>

2
src/components/PanelComponents/PanelHeader.tsx
View File

@ -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 (
<div className="w-full grid place-items-center">
{props.icon ? (

159
src/graphql/operation.graphql
View File

@ -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
}
}
}
}
}
}
}
}

235
src/graphql/operations-types.ts
View File

@ -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<Scalars["String"]>;
}>;
@ -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" }
>;
};
}>;
};
};
}>;
};

21
src/graphql/operations.ts
View File

@ -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<GetLibraryItemsSkeletonQuery> {
const query = getQueryFromOperations("getLibraryItemsSkeleton");
export async function getLibraryItemsSlugs(
variables: GetLibraryItemsSlugsQueryVariables
): Promise<GetLibraryItemsSlugsQuery> {
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));
}

128
src/graphql/schema.graphql
View File

@ -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
}

14
src/pages/gallery/index.tsx Normal file
View File

@ -0,0 +1,14 @@
import { applyCustomAppProps } from "pages/_app";
applyCustomAppProps(Chronology, {
useSubPanel: false,
useContentPanel: true,
});
export default function Chronology(): JSX.Element {
return (
<>
<iframe className="w-full h-screen" src="https://gallery.accords-library.com/posts"></iframe>
</>
);
}

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

@ -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 (
<>
<ContentPanel>
<h1>{libraryItem.attributes.title}</h1>
<h2>{libraryItem.attributes.subtitle}</h2>
{libraryItem.attributes.thumbnail.data ? (
<Image
src={getAssetURL(
libraryItem.attributes.thumbnail.data.attributes.url
)}
alt={
libraryItem.attributes.thumbnail.data.attributes.alternativeText
}
width={libraryItem.attributes.thumbnail.data.attributes.width}
height={libraryItem.attributes.thumbnail.data.attributes.height}
/>
) : (
""
)}
{libraryItem.attributes.subitems.data.map((subitem) => (
<Link
href={router.asPath + "/" + subitem.attributes.slug}
key={subitem.id}
passHref
>
<div>
{subitem.attributes.thumbnail.data ? (
<Image
src={getAssetURL(
subitem.attributes.thumbnail.data.attributes.url
)}
alt={
subitem.attributes.thumbnail.data.attributes.alternativeText
}
width={subitem.attributes.thumbnail.data.attributes.width}
height={subitem.attributes.thumbnail.data.attributes.height}
/>
) : (
""
)}
</div>
</Link>
))}
</ContentPanel>
</>
);
}
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;
}

239
src/pages/library/[slug].tsx Normal file
View File

@ -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 (
<>
<SubPanel>
<ReturnButton title="Library" url="/library" />
<hr />
<div className="grid place-items-center">
<div className="cursor-pointer grid items-end relative hover:rounded-3xl w-[80%] max-w-full mb-8">
<div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-lg"></div>
{libraryItem.attributes.thumbnail.data ? (
<Image
src={getAssetURL(
libraryItem.attributes.thumbnail.data.attributes.url
)}
alt={
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>
<h1 className="text-2xl">{libraryItem.attributes.title}</h1>
{libraryItem.attributes.subtitle ? (
<h2 className="text-1xl">{libraryItem.attributes.subtitle}</h2>
) : (
""
)}
</div>
<hr />
<NavOption title="Summary" url="#summary" border={true} />
<NavOption title="Gallery" url="#gallery" border={true} />
<NavOption title="Details" url="#details" border={true} />
<NavOption title="Subitems" url="#subitems" border={true} />
<NavOption title="Content" url="#content" border={true} />
</SubPanel>
<ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid place-items-center gap-8">
<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>
{libraryItem.attributes.thumbnail.data ? (
<Image
src={getAssetURL(
libraryItem.attributes.thumbnail.data.attributes.url
)}
alt={
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>
<div
id="summary"
className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
>
<div className="max-w-2xl grid place-items-center gap-8">
{libraryItem.attributes.subitem_of.data.length > 0 ? (
<div className="grid place-items-center">
<p>Subitem of</p>
<Link
href={`/library/${libraryItem.attributes.subitem_of.data[0].attributes.slug}`}
passHref
>
<button>
{
libraryItem.attributes.subitem_of.data[0].attributes
.title
}
{libraryItem.attributes.subitem_of.data[0].attributes
.subtitle
? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
: ""}
</button>
</Link>
</div>
) : (
""
)}
<div>
<h1 className="text-3xl">{libraryItem.attributes.title}</h1>
{libraryItem.attributes.subtitle ? (
<h2 className="text-2xl">
{libraryItem.attributes.subtitle}
</h2>
) : (
""
)}
</div>
{libraryItem.attributes.descriptions.length > 0 ? (
<p>{libraryItem.attributes.descriptions[0].description}</p>
) : (
""
)}
</div>
</div>
<div id="gallery"></div>
<div
id="details"
className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
>
<div className="max-w-2xl grid place-items-center gap-8">
<h2 className="text-2xl">Details</h2>
<div className="grid grid-cols-3 place-items-center">
<p>Type</p>
<p>Release date</p>
<p>Price</p>
</div>
</div>
</div>
<div id="subitems">
{libraryItem.attributes.subitems.data.map((subitem) => (
<Link
href={`/library/${subitem.attributes.slug}`}
key={subitem.id}
passHref
>
<div>
{subitem.attributes.thumbnail.data ? (
<Image
src={getAssetURL(
subitem.attributes.thumbnail.data.attributes.url
)}
alt={
subitem.attributes.thumbnail.data.attributes
.alternativeText
}
width={subitem.attributes.thumbnail.data.attributes.width}
height={
subitem.attributes.thumbnail.data.attributes.height
}
/>
) : (
""
)}
</div>
</Link>
))}
<div id="content">
{libraryItem.attributes.contents.data.map((content) => (
<div
key={content.id}
className="grid grid-flow-col gap-4 w-full"
>
<h3>{content.attributes.title[0].title}</h3>
<p>
{content.attributes.range[0].__typename ===
"ComponentRangePageRange"
? content.attributes.range[0].starting_page
: ""}
</p>
<p>{content.attributes.type.data.attributes.slug}</p>
</div>
))}
</div>
</div>
</div>
</ContentPanel>
</>
);
}
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,
};
};

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

@ -19,7 +19,6 @@ applyCustomAppProps(Library, {
});
export default function Library(props: Props): JSX.Element {
console.log(props);
return (
<>
<SubPanel>

6
src/tailwind.css
View File

@ -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;

10
tailwind.config.js
View File

@ -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'))",
},
});
}),
],
};