Added support for UI translation and other fields

This commit is contained in:
DrMint 2022-02-12 11:02:22 +01:00
parent ee8be64ce3
commit 75da366216
19 changed files with 990 additions and 301 deletions

View File

@ -21,13 +21,17 @@ export default function ThumbnailHeader(
<>
<div className="grid place-items-center gap-12 mb-12">
<div className="drop-shadow-dark-lg">
<Image
className=" rounded-xl"
src={getAssetURL(content.thumbnail.data.attributes.url)}
alt={content.thumbnail.data.attributes.alternativeText}
width={content.thumbnail.data.attributes.width}
height={content.thumbnail.data.attributes.height}
/>
{content.thumbnail.data ? (
<Image
className=" rounded-xl"
src={getAssetURL(content.thumbnail.data.attributes.url)}
alt={content.thumbnail.data.attributes.alternativeText}
width={content.thumbnail.data.attributes.width}
height={content.thumbnail.data.attributes.height}
/>
) : (
<div className="w-full aspect-[4/3] bg-light rounded-xl"></div>
)}
</div>
<div className="grid place-items-center">
<p className="text-2xl">{content.titles[0].pre_title}</p>
@ -40,7 +44,7 @@ export default function ThumbnailHeader(
{content.type ? (
<div className="grid place-items-center place-content-start gap-2">
<h3 className="text-xl">Type</h3>
<Button>{prettySlug(content.type.data.attributes.slug)}</Button>
<Button>{content.type.data.attributes.titles[0].title}</Button>
</div>
) : (
""

View File

@ -32,7 +32,7 @@ export default function LibraryItemComponent(
) : (
<div className="w-full aspect-[21/29.7] bg-light rounded-lg"></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 drop-shadow-dark-lg absolute bottom-2 inset-x-[-0.15rem] opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left">
<div>
<h2 className="text-lg leading-7">{item.title}</h2>
<h3 className="leading-3">{item.subtitle}</h3>

View File

@ -1,10 +1,12 @@
import Button from "components/Button";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
type ReturnButtonProps = {
href: string;
title: string;
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
};
export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
return <Button href={props.href}>&emsp;Return to {props.title}</Button>;
return <Button href={props.href}>&emsp;{props.langui.global_return_label} {props.title}</Button>;
}

View File

@ -4,8 +4,15 @@ import SVG from "components/SVG";
import { useRouter } from "next/router";
import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import Markdown from "markdown-to-jsx";
export default function MainPanel(): JSX.Element {
type Props = {
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
};
export default function MainPanel(props: Props): JSX.Element {
const langui = props.langui;
const router = useRouter();
return (
<div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
@ -37,39 +44,50 @@ export default function MainPanel(): JSX.Element {
<NavOption
url="/library"
icon="library_books"
title="Library"
subtitle="Browse all physical and digital media"
title={langui.main_library}
subtitle={langui.main_library_description}
/>
<NavOption
url="/hubs"
icon="workspaces"
title="Hubs"
subtitle="Explore all content of a specific game/series"
title={langui.main_hub}
subtitle={langui.main_hub_description}
/>
<NavOption
url="/chronology"
icon="watch_later"
title="Chronology"
subtitle="Follow all events in chronological order"
title={langui.main_chronology}
subtitle={langui.main_chronology_description}
/>
<HorizontalLine />
<NavOption url="/news" icon="feed" title="News" />
<NavOption url="/data" icon="travel_explore" title="Data" />
<NavOption url="/gallery" icon="collections" title="Gallery" />
<NavOption url="/archive" icon="inventory" title="Archive" />
<NavOption url="/about-us" icon="info" title="About us" />
<NavOption url="/news" icon="feed" title={langui.main_news} />
<NavOption url="/data" icon="travel_explore" title={langui.main_data} />
<NavOption url="/merch" icon="store" title={langui.main_merch} />
<NavOption
url="/gallery"
icon="collections"
title={langui.main_gallery}
/>
<NavOption
url="/archives"
icon="inventory"
title={langui.main_archives}
/>
<NavOption url="/about-us" icon="info" title={langui.main_about_us} />
<HorizontalLine />
<div className="text-center">
<p>
This website&rsquo;s content is made available under{" "}
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a>{" "}
unless otherwise noted.
{langui.main_licensing ? (
<Markdown>{langui.main_licensing}</Markdown>
) : (
""
)}
</p>
<a
className="transition-[filter] hover:colorize-dark"
@ -94,9 +112,11 @@ export default function MainPanel(): JSX.Element {
</div>
</a>
<p>
Accord&rsquo;s Library is not affiliated with or endorsed by SQUARE
ENIX CO. LTD. All game assets and promotional materials belongs to
©&nbsp;SQUARE ENIX CO. LTD.
{langui.main_copyright ? (
<Markdown>{langui.main_copyright}</Markdown>
) : (
""
)}
</p>
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
<a

View File

@ -1,3 +1,56 @@
query getWebsiteInterface($language_code: String) {
websiteInterfaces(filters: { language: { code: { eq: $language_code } } }) {
data {
attributes {
main_library
main_library_description
main_hub
main_hub_description
main_chronology
main_chronology_description
main_news
main_data
main_merch
main_gallery
main_archives
main_about_us
main_licensing
main_copyright
library_description
library_item_summary
library_item_gallery
library_item_details
library_item_subitems
library_item_variants
library_item_content
global_return_label
global_subitem_of
global_type
global_width
global_height
global_thickness
global_binding
global_language
global_languages
global_page
global_pages
global_page_order
global_release_date
global_price
library_item_physical_size
library_item_type_information
chronology_description
chronology_timelines
chronology_timelines_description
chronology_overview
chronology_overview_description
chronology_walkthrough
chronology_walkthrough_description
}
}
}
}
query getEras($language_code: String) {
chronologyEras {
data {
@ -176,6 +229,11 @@ query getLibraryItem($slug: String, $language_code: String) {
data {
attributes {
slug
titles(
filters: { language: { code: { eq: $language_code } } }
) {
title
}
}
}
}
@ -240,6 +298,11 @@ query getLibraryItem($slug: String, $language_code: String) {
data {
attributes {
slug
titles(
filters: { language: { code: { eq: $language_code } } }
) {
title
}
}
}
}
@ -252,20 +315,16 @@ query getLibraryItem($slug: String, $language_code: String) {
}
}
}
... on ComponentMetadataMerch {
merch_item {
data {
attributes {
slug
}
}
}
}
... on ComponentMetadataOther {
subtype {
data {
attributes {
slug
titles(
filters: { language: { code: { eq: $language_code } } }
) {
title
}
}
}
}
@ -303,6 +362,28 @@ query getLibraryItem($slug: String, $language_code: String) {
}
}
}
submerchs {
data {
id
attributes {
slug
title
subtitle
thumbnail {
data {
attributes {
name
alternativeText
caption
width
height
url
}
}
}
}
}
}
contents(pagination: { limit: -1 }) {
data {
id
@ -338,6 +419,13 @@ query getLibraryItem($slug: String, $language_code: String) {
data {
attributes {
slug
titles(
filters: {
language: { code: { eq: $language_code } }
}
) {
title
}
}
}
}
@ -401,6 +489,9 @@ query getContent($slug: String, $language_code: String) {
data {
attributes {
slug
titles(filters: { language: { code: { eq: $language_code } } }) {
title
}
}
}
}
@ -485,6 +576,9 @@ query getContentText($slug: String, $language_code: String) {
data {
attributes {
slug
titles(filters: { language: { code: { eq: $language_code } } }) {
title
}
}
}
}
@ -595,7 +689,6 @@ query getContentText($slug: String, $language_code: String) {
}
notes
}
thumbnail {
data {
attributes {

View File

@ -29,7 +29,6 @@ export type Scalars = {
But to make the type easier to work with, it went through the following transformation:
- Removed ?
- Removed | null
- Removed | undefined
*/
export enum Enum_Componentmetadatabooks_Binding_Type {
@ -65,6 +64,67 @@ export enum Enum_Componentsetstextset_Status {
// __________________________________________________________________
export type GetWebsiteInterfaceQueryVariables = Exact<{
language_code: InputMaybe<Scalars["String"]>;
}>;
export type GetWebsiteInterfaceQuery = {
__typename: "Query";
websiteInterfaces: {
__typename: "WebsiteInterfaceEntityResponseCollection";
data: Array<{
__typename: "WebsiteInterfaceEntity";
attributes: {
__typename: "WebsiteInterface";
main_library: string;
main_library_description: string;
main_hub: string;
main_hub_description: string;
main_chronology: string;
main_chronology_description: string;
main_news: string;
main_data: string;
main_merch: string;
main_gallery: string;
main_archives: string;
main_about_us: string;
main_licensing: string;
main_copyright: string;
library_description: string;
library_item_summary: string;
library_item_gallery: string;
library_item_details: string;
library_item_subitems: string;
library_item_variants: string;
library_item_content: string;
global_return_label: string;
global_subitem_of: string;
global_type: string;
global_width: string;
global_height: string;
global_thickness: string;
global_binding: string;
global_language: string;
global_languages: string;
global_page: string;
global_pages: string;
global_page_order: string;
global_release_date: string;
global_price: string;
library_item_physical_size: string;
library_item_type_information: string;
chronology_description: string;
chronology_timelines: string;
chronology_timelines_description: string;
chronology_overview: string;
chronology_overview_description: string;
chronology_walkthrough: string;
chronology_walkthrough_description: string;
};
}>;
};
};
export type GetErasQueryVariables = Exact<{
language_code: InputMaybe<Scalars["String"]>;
}>;
@ -304,6 +364,10 @@ export type GetLibraryItemQuery = {
attributes: {
__typename: "TextualSubtype";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
@ -389,6 +453,10 @@ export type GetLibraryItemQuery = {
attributes: {
__typename: "AudioSubtype";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
@ -404,19 +472,6 @@ export type GetLibraryItemQuery = {
}>;
};
}
| {
__typename: "ComponentMetadataMerch";
merch_item: {
__typename: "MerchItemEntityResponse";
data: {
__typename: "MerchItemEntity";
attributes: {
__typename: "MerchItem";
slug: string;
};
};
};
}
| {
__typename: "ComponentMetadataOther";
subtype: {
@ -426,6 +481,10 @@ export type GetLibraryItemQuery = {
attributes: {
__typename: "OtherSubtype";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
@ -473,6 +532,34 @@ export type GetLibraryItemQuery = {
};
}>;
};
submerchs: {
__typename: "MerchItemRelationResponseCollection";
data: Array<{
__typename: "MerchItemEntity";
id: string;
attributes: {
__typename: "MerchItem";
slug: string;
title: string;
subtitle: string;
thumbnail: {
__typename: "UploadFileEntityResponse";
data: {
__typename: "UploadFileEntity";
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
};
};
};
};
}>;
};
contents: {
__typename: "RangedContentRelationResponseCollection";
data: Array<{
@ -524,6 +611,10 @@ export type GetLibraryItemQuery = {
attributes: {
__typename: "ContentType";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
@ -605,7 +696,14 @@ export type GetContentQuery = {
__typename: "ContentTypeEntityResponse";
data: {
__typename: "ContentTypeEntity";
attributes: { __typename: "ContentType"; slug: string };
attributes: {
__typename: "ContentType";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
ranged_contents: {
@ -698,41 +796,48 @@ export type GetContentTextQuery = {
slug: string;
titles: Array<{
__typename: "ComponentTranslationsTitle";
pre_title: string ;
pre_title: string;
title: string;
subtitle: string ;
} > ;
subtitle: string;
}>;
categories: {
__typename: "CategoryRelationResponseCollection";
data: Array<{
__typename: "CategoryEntity";
id: string ;
id: string;
attributes: {
__typename: "Category";
name: string;
short: string;
} ;
};
}>;
} ;
};
type: {
__typename: "ContentTypeEntityResponse";
data: {
__typename: "ContentTypeEntity";
attributes: { __typename: "ContentType"; slug: string } ;
} ;
} ;
attributes: {
__typename: "ContentType";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
ranged_contents: {
__typename: "RangedContentRelationResponseCollection";
data: Array<{
__typename: "RangedContentEntity";
id: string ;
id: string;
attributes: {
__typename: "RangedContent";
slug: string;
scan_set: Array<{
__typename: "ComponentSetsScanSet";
id: string;
} > ;
}>;
library_item: {
__typename: "LibraryItemEntityResponse";
data: {
@ -741,7 +846,7 @@ export type GetContentTextQuery = {
__typename: "LibraryItem";
slug: string;
title: string;
subtitle: string ;
subtitle: string;
thumbnail: {
__typename: "UploadFileEntityResponse";
data: {
@ -749,32 +854,32 @@ export type GetContentTextQuery = {
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string ;
caption: string ;
width: number ;
height: number ;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
} ;
} ;
} ;
} ;
} ;
} ;
} ;
};
};
};
};
};
};
};
}>;
} ;
};
text_set: Array<{
__typename: "ComponentSetsTextSet";
status: Enum_Componentsetstextset_Status;
text: string ;
notes: string ;
text: string;
notes: string;
source_language: {
__typename: "LanguageEntityResponse";
data: {
__typename: "LanguageEntity";
attributes: { __typename: "Language"; name: string } ;
} ;
} ;
attributes: { __typename: "Language"; name: string };
};
};
transcribers: {
__typename: "RecorderRelationResponseCollection";
data: Array<{
@ -791,17 +896,17 @@ export type GetContentTextQuery = {
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string ;
caption: string ;
width: number ;
height: number ;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
} ;
} ;
} ;
} ;
};
};
};
};
}>;
} ;
};
translators: {
__typename: "RecorderRelationResponseCollection";
data: Array<{
@ -818,17 +923,17 @@ export type GetContentTextQuery = {
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string ;
caption: string ;
width: number ;
height: number ;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
} ;
} ;
} ;
} ;
};
};
};
};
}>;
} ;
};
proofreaders: {
__typename: "RecorderRelationResponseCollection";
data: Array<{
@ -845,18 +950,18 @@ export type GetContentTextQuery = {
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string ;
caption: string ;
width: number ;
height: number ;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
} ;
} ;
} ;
} ;
};
};
};
};
}>;
} ;
} > ;
};
}>;
thumbnail: {
__typename: "UploadFileEntityResponse";
data: {
@ -864,15 +969,15 @@ export type GetContentTextQuery = {
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string ;
caption: string ;
width: number ;
height: number ;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
} ;
} ;
} ;
} ;
};
};
};
};
}>;
} ;
};
};

View File

@ -17,6 +17,8 @@ import {
GetLibraryItemsPreviewQueryVariables,
GetLibraryItemsSlugsQuery,
GetLibraryItemsSlugsQueryVariables,
GetWebsiteInterfaceQuery,
GetWebsiteInterfaceQueryVariables,
} from "graphql/operations-types";
const graphQL = async (query: string, variables?: string) => {
@ -50,6 +52,13 @@ function getQueryFromOperations(queryName: string): string {
return lines.slice(startingIndex, endingIndex).join("\n");
}
export async function getWebsiteInterface(
variables: GetWebsiteInterfaceQueryVariables
): Promise<GetWebsiteInterfaceQuery> {
const query = getQueryFromOperations("getWebsiteInterface");
return await graphQL(query, JSON.stringify(variables));
}
export async function getEras(
variables: GetErasQueryVariables
): Promise<GetErasQuery> {

View File

@ -995,6 +995,26 @@ type ComponentTranslationsScanSet {
credits: ComponentBasicsCredits!
}
input ComponentTranslationsSimpleTitleFiltersInput {
language: LanguageFiltersInput
title: StringFilterInput
and: [ComponentTranslationsSimpleTitleFiltersInput]
or: [ComponentTranslationsSimpleTitleFiltersInput]
not: ComponentTranslationsSimpleTitleFiltersInput
}
input ComponentTranslationsSimpleTitleInput {
id: ID
language: ID
title: String
}
type ComponentTranslationsSimpleTitle {
id: ID!
language: LanguageEntityResponse
title: String!
}
enum ENUM_COMPONENTTRANSLATIONSTEXTSET_STATUS {
Incomplete
Draft
@ -1225,10 +1245,16 @@ input AudioSubtypeFiltersInput {
input AudioSubtypeInput {
slug: String
titles: [ComponentTranslationsSimpleTitleInput]
}
type AudioSubtype {
slug: String!
titles(
filters: ComponentTranslationsSimpleTitleFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): [ComponentTranslationsSimpleTitle]
createdAt: DateTime
updatedAt: DateTime
}
@ -1481,10 +1507,16 @@ input ContentTypeFiltersInput {
input ContentTypeInput {
slug: String
titles: [ComponentTranslationsSimpleTitleInput]
}
type ContentType {
slug: String!
titles(
filters: ComponentTranslationsSimpleTitleFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): [ComponentTranslationsSimpleTitle]
createdAt: DateTime
updatedAt: DateTime
}
@ -1711,7 +1743,6 @@ union LibraryItemMetadataDynamicZone =
| ComponentMetadataVideo
| ComponentMetadataGame
| ComponentMetadataAudio
| ComponentMetadataMerch
| ComponentMetadataOther
| Error
@ -1725,8 +1756,10 @@ input LibraryItemFiltersInput {
subitems: LibraryItemFiltersInput
subitem_of: LibraryItemFiltersInput
root_item: BooleanFilterInput
variants: LibraryVariantFiltersInput
contents: RangedContentFiltersInput
digital: BooleanFilterInput
primary: BooleanFilterInput
submerchs: MerchItemFiltersInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
and: [LibraryItemFiltersInput]
@ -1743,7 +1776,6 @@ input LibraryItemInput {
subitem_of: [ID]
root_item: Boolean
price: ComponentBasicsPriceInput
variants: ID
metadata: [LibraryItemMetadataDynamicZoneInput!]
size: ComponentBasicsSizeInput
release_date: ComponentBasicsDatepickerInput
@ -1751,6 +1783,9 @@ input LibraryItemInput {
gallery: [ID]
contents: [ID]
images: ComponentCollectionsComponentLibraryImagesInput
digital: Boolean
primary: Boolean
submerchs: [ID]
}
type LibraryItem {
@ -1770,7 +1805,6 @@ type LibraryItem {
): LibraryItemRelationResponseCollection
root_item: Boolean!
price: ComponentBasicsPrice
variants: LibraryVariantEntityResponse
metadata: [LibraryItemMetadataDynamicZone]
size: ComponentBasicsSize
release_date: ComponentBasicsDatepicker
@ -1790,6 +1824,13 @@ type LibraryItem {
sort: [String] = []
): RangedContentRelationResponseCollection
images: ComponentCollectionsComponentLibraryImages
digital: Boolean!
primary: Boolean!
submerchs(
filters: MerchItemFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): MerchItemRelationResponseCollection
createdAt: DateTime
updatedAt: DateTime
}
@ -1812,47 +1853,12 @@ type LibraryItemRelationResponseCollection {
data: [LibraryItemEntity!]!
}
input LibraryVariantFiltersInput {
id: IDFilterInput
items: LibraryItemFiltersInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
and: [LibraryVariantFiltersInput]
or: [LibraryVariantFiltersInput]
not: LibraryVariantFiltersInput
}
input LibraryVariantInput {
items: [ID]
}
type LibraryVariant {
items(
filters: LibraryItemFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): LibraryItemRelationResponseCollection
createdAt: DateTime
updatedAt: DateTime
}
type LibraryVariantEntity {
id: ID
attributes: LibraryVariant
}
type LibraryVariantEntityResponse {
data: LibraryVariantEntity
}
type LibraryVariantEntityResponseCollection {
data: [LibraryVariantEntity!]!
meta: ResponseCollectionMeta!
}
input MerchItemFiltersInput {
id: IDFilterInput
slug: StringFilterInput
library_items: LibraryItemFiltersInput
title: StringFilterInput
subtitle: StringFilterInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
and: [MerchItemFiltersInput]
@ -1862,10 +1868,22 @@ input MerchItemFiltersInput {
input MerchItemInput {
slug: String
library_items: [ID]
title: String
subtitle: String
thumbnail: ID
}
type MerchItem {
slug: String!
library_items(
filters: LibraryItemFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): LibraryItemRelationResponseCollection
title: String!
subtitle: String
thumbnail: UploadFileEntityResponse
createdAt: DateTime
updatedAt: DateTime
}
@ -1884,6 +1902,10 @@ type MerchItemEntityResponseCollection {
meta: ResponseCollectionMeta!
}
type MerchItemRelationResponseCollection {
data: [MerchItemEntity!]!
}
input OtherSubtypeFiltersInput {
id: IDFilterInput
slug: StringFilterInput
@ -1896,10 +1918,16 @@ input OtherSubtypeFiltersInput {
input OtherSubtypeInput {
slug: String
titles: [ComponentTranslationsSimpleTitleInput]
}
type OtherSubtype {
slug: String!
titles(
filters: ComponentTranslationsSimpleTitleFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): [ComponentTranslationsSimpleTitle]
createdAt: DateTime
updatedAt: DateTime
}
@ -2137,10 +2165,16 @@ input TextualSubtypeFiltersInput {
input TextualSubtypeInput {
slug: String
titles: [ComponentTranslationsSimpleTitleInput]
}
type TextualSubtype {
slug: String!
titles(
filters: ComponentTranslationsSimpleTitleFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): [ComponentTranslationsSimpleTitle]
createdAt: DateTime
updatedAt: DateTime
}
@ -2298,6 +2332,172 @@ type WeaponStoryTypeEntityResponseCollection {
meta: ResponseCollectionMeta!
}
input WebsiteInterfaceFiltersInput {
id: IDFilterInput
language: LanguageFiltersInput
main_library: StringFilterInput
main_library_description: StringFilterInput
main_hub: StringFilterInput
main_hub_description: StringFilterInput
main_chronology: StringFilterInput
main_chronology_description: StringFilterInput
main_news: StringFilterInput
main_data: StringFilterInput
main_merch: StringFilterInput
main_gallery: StringFilterInput
main_archives: StringFilterInput
main_about_us: StringFilterInput
main_licensing: StringFilterInput
main_copyright: StringFilterInput
library_description: StringFilterInput
library_item_summary: StringFilterInput
library_item_gallery: StringFilterInput
library_item_details: StringFilterInput
library_item_subitems: StringFilterInput
library_item_variants: StringFilterInput
library_item_content: StringFilterInput
global_return_label: StringFilterInput
global_subitem_of: StringFilterInput
global_type: StringFilterInput
global_width: StringFilterInput
global_height: StringFilterInput
global_thickness: StringFilterInput
global_binding: StringFilterInput
global_language: StringFilterInput
global_languages: StringFilterInput
global_page: StringFilterInput
global_pages: StringFilterInput
global_page_order: StringFilterInput
global_release_date: StringFilterInput
global_price: StringFilterInput
library_item_physical_size: StringFilterInput
library_item_type_information: StringFilterInput
chronology_description: StringFilterInput
chronology_timelines: StringFilterInput
chronology_timelines_description: StringFilterInput
chronology_overview: StringFilterInput
chronology_overview_description: StringFilterInput
chronology_walkthrough: StringFilterInput
chronology_walkthrough_description: StringFilterInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
and: [WebsiteInterfaceFiltersInput]
or: [WebsiteInterfaceFiltersInput]
not: WebsiteInterfaceFiltersInput
}
input WebsiteInterfaceInput {
language: ID
main_library: String
main_library_description: String
main_hub: String
main_hub_description: String
main_chronology: String
main_chronology_description: String
main_news: String
main_data: String
main_merch: String
main_gallery: String
main_archives: String
main_about_us: String
main_licensing: String
main_copyright: String
library_description: String
library_item_summary: String
library_item_gallery: String
library_item_details: String
library_item_subitems: String
library_item_variants: String
library_item_content: String
global_return_label: String
global_subitem_of: String
global_type: String
global_width: String
global_height: String
global_thickness: String
global_binding: String
global_language: String
global_languages: String
global_page: String
global_pages: String
global_page_order: String
global_release_date: String
global_price: String
library_item_physical_size: String
library_item_type_information: String
chronology_description: String
chronology_timelines: String
chronology_timelines_description: String
chronology_overview: String
chronology_overview_description: String
chronology_walkthrough: String
chronology_walkthrough_description: String
}
type WebsiteInterface {
language: LanguageEntityResponse
main_library: String
main_library_description: String
main_hub: String
main_hub_description: String
main_chronology: String
main_chronology_description: String
main_news: String
main_data: String
main_merch: String
main_gallery: String
main_archives: String
main_about_us: String
main_licensing: String
main_copyright: String
library_description: String
library_item_summary: String
library_item_gallery: String
library_item_details: String
library_item_subitems: String
library_item_variants: String
library_item_content: String
global_return_label: String
global_subitem_of: String
global_type: String
global_width: String
global_height: String
global_thickness: String
global_binding: String
global_language: String
global_languages: String
global_page: String
global_pages: String
global_page_order: String
global_release_date: String
global_price: String
library_item_physical_size: String
library_item_type_information: String
chronology_description: String
chronology_timelines: String
chronology_timelines_description: String
chronology_overview: String
chronology_overview_description: String
chronology_walkthrough: String
chronology_walkthrough_description: String
createdAt: DateTime
updatedAt: DateTime
}
type WebsiteInterfaceEntity {
id: ID
attributes: WebsiteInterface
}
type WebsiteInterfaceEntityResponse {
data: WebsiteInterfaceEntity
}
type WebsiteInterfaceEntityResponseCollection {
data: [WebsiteInterfaceEntity!]!
meta: ResponseCollectionMeta!
}
union GenericMorph =
ComponentBasicsCredits
| ComponentBasicsDatepicker
@ -2340,6 +2540,7 @@ union GenericMorph =
| ComponentTranslationsLibraryItems
| ComponentTranslationsPosts
| ComponentTranslationsScanSet
| ComponentTranslationsSimpleTitle
| ComponentTranslationsTextSet
| ComponentTranslationsTitle
| ComponentTranslationsVideoSets
@ -2359,7 +2560,6 @@ union GenericMorph =
| GlossaryItemType
| Language
| LibraryItem
| LibraryVariant
| MerchItem
| OtherSubtype
| Post
@ -2370,6 +2570,7 @@ union GenericMorph =
| WeaponStory
| WeaponStoryGroup
| WeaponStoryType
| WebsiteInterface
input FileInfoInput {
name: String
@ -2463,12 +2664,6 @@ type Query {
pagination: PaginationArg = {}
sort: [String] = []
): LibraryItemEntityResponseCollection
libraryVariant(id: ID): LibraryVariantEntityResponse
libraryVariants(
filters: LibraryVariantFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): LibraryVariantEntityResponseCollection
merchItem(id: ID): MerchItemEntityResponse
merchItems(
filters: MerchItemFiltersInput
@ -2530,6 +2725,12 @@ type Query {
pagination: PaginationArg = {}
sort: [String] = []
): WeaponStoryTypeEntityResponseCollection
websiteInterface(id: ID): WebsiteInterfaceEntityResponse
websiteInterfaces(
filters: WebsiteInterfaceFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): WebsiteInterfaceEntityResponseCollection
}
type Mutation {
@ -2592,12 +2793,6 @@ type Mutation {
createLibraryItem(data: LibraryItemInput!): LibraryItemEntityResponse
updateLibraryItem(id: ID!, data: LibraryItemInput!): LibraryItemEntityResponse
deleteLibraryItem(id: ID!): LibraryItemEntityResponse
createLibraryVariant(data: LibraryVariantInput!): LibraryVariantEntityResponse
updateLibraryVariant(
id: ID!
data: LibraryVariantInput!
): LibraryVariantEntityResponse
deleteLibraryVariant(id: ID!): LibraryVariantEntityResponse
createMerchItem(data: MerchItemInput!): MerchItemEntityResponse
updateMerchItem(id: ID!, data: MerchItemInput!): MerchItemEntityResponse
deleteMerchItem(id: ID!): MerchItemEntityResponse
@ -2647,6 +2842,14 @@ type Mutation {
data: WeaponStoryTypeInput!
): WeaponStoryTypeEntityResponse
deleteWeaponStoryType(id: ID!): WeaponStoryTypeEntityResponse
createWebsiteInterface(
data: WebsiteInterfaceInput!
): WebsiteInterfaceEntityResponse
updateWebsiteInterface(
id: ID!
data: WebsiteInterfaceInput!
): WebsiteInterfaceEntityResponse
deleteWebsiteInterface(id: ID!): WebsiteInterfaceEntityResponse
upload(
refId: ID
ref: String

View File

@ -2,18 +2,28 @@ import Link from "next/link";
import ContentPanel from "components/Panels/ContentPanel";
import { applyCustomAppProps } from "./_app";
import Head from "next/head";
import { getWebsiteInterface } from "graphql/operations";
import { GetStaticProps } from "next";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import MainPanel from "components/Panels/MainPanel";
applyCustomAppProps(FourOhFour, {
useSubPanel: false,
useContentPanel: true,
});
export default function FourOhFour(): JSX.Element {
type Props = {
langui: GetWebsiteInterfaceQuery;
};
export default function FourOhFour(props: Props): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
return (
<>
<Head>
<title>Accord&rsquo;s Library - 404</title>
</Head>
<MainPanel langui={langui} />
<ContentPanel>
<h1>404 - Page Not Found</h1>
<Link href="/">
@ -23,3 +33,17 @@ export default function FourOhFour(): JSX.Element {
</>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: Props = {
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
}
return { props: {} };
};

View File

@ -31,7 +31,6 @@ export default function AccordsLibraryApp(appProps: AppProps) {
: "grid grid-cols-[20rem]"
}
>
<MainPanel />
<appProps.Component {...appProps.pageProps} />
</div>
);

View File

@ -2,43 +2,67 @@ import SubPanel from "components/Panels/SubPanel";
import NavOption from "components/PanelComponents/NavOption";
import { applyCustomAppProps } from "pages/_app";
import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations";
applyCustomAppProps(Chronology, {
useSubPanel: true,
useContentPanel: false,
});
export default function Chronology(): JSX.Element {
type Props = {
langui: GetWebsiteInterfaceQuery;
};
export default function Chronology(props: Props): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
return (
<>
<MainPanel langui={langui} />
<SubPanel>
<PanelHeader
icon="watch_later"
title="Chronology"
description="Follow all events in chronological order. Here we can write more about this section of the website, whatever we like in fact."
title={langui.main_chronology}
description={langui.chronology_description}
/>
<NavOption
url="/chronology/timelines"
title="Timelines"
subtitle="Diagram of how the games connect to each other"
title={langui.chronology_timelines}
subtitle={langui.chronology_timelines_description}
border={true}
/>
<NavOption
url="/chronology/overview"
title="Chronology Overview"
subtitle="List of all the events from the main timeline"
title={langui.chronology_overview}
subtitle={langui.chronology_overview_description}
border={true}
/>
<NavOption
url="/chronology/walkthrough"
title="Chronology Walkthrough"
subtitle="Chronological exploration of the lore and stories"
title={langui.chronology_walkthrough}
subtitle={langui.chronology_walkthrough_description}
border={true}
/>
</SubPanel>
</>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: Props = {
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
}
return { props: {} };
};

View File

@ -6,15 +6,22 @@ import { applyCustomAppProps } from "pages/_app";
import {
GetChronologyItemsQuery,
GetErasQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import { getEras, getChronologyItems } from "graphql/operations";
import {
getEras,
getChronologyItems,
getWebsiteInterface,
} from "graphql/operations";
import NavOption from "components/PanelComponents/NavOption";
import ReturnButton from "components/PanelComponents/ReturnButton";
import HorizontalLine from "components/HorizontalLine";
import MainPanel from "components/Panels/MainPanel";
interface Props {
chronologyItems: GetChronologyItemsQuery;
chronologyEras: GetErasQuery;
langui: GetWebsiteInterfaceQuery;
}
applyCustomAppProps(ChronologyOverview, {
@ -24,7 +31,7 @@ applyCustomAppProps(ChronologyOverview, {
export default function ChronologyOverview(props: Props): JSX.Element {
// Group by year the Chronology items
const langui = props.langui.websiteInterfaces.data[0].attributes;
let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][] =
[];
@ -40,8 +47,9 @@ export default function ChronologyOverview(props: Props): JSX.Element {
return (
<>
<MainPanel langui={langui} />
<SubPanel>
<ReturnButton href="/chronology" title="Chronology" />
<ReturnButton href="/chronology" title="Chronology" langui={langui} />
<HorizontalLine />
{props.chronologyEras.chronologyEras.data.map((era) => (
@ -75,16 +83,19 @@ export default function ChronologyOverview(props: Props): JSX.Element {
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale)
return {
props: {
chronologyItems: await getChronologyItems({
language_code: context.locale,
}),
chronologyEras: await getEras({ language_code: context.locale }),
},
if (context.locale) {
const props: Props = {
chronologyItems: await getChronologyItems({
language_code: context.locale,
}),
chronologyEras: await getEras({ language_code: context.locale }),
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
else {
return { props: {} };
}
return { props: {} };
};

View File

@ -1,16 +1,25 @@
import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
import { getContent, getContentsSlugs } from "graphql/operations";
import { GetContentQuery } from "graphql/operations-types";
import {
getContent,
getContentsSlugs,
getWebsiteInterface,
} from "graphql/operations";
import {
GetContentQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import ContentPanel from "components/Panels/ContentPanel";
import Image from "next/image";
import { getAssetURL, prettySlug } from "queries/helpers";
import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine";
import ThumbnailHeader from "components/Content/ThumbnailHeader";
import MainPanel from "components/Panels/MainPanel";
type Props = {
content: GetContentQuery;
langui: GetWebsiteInterfaceQuery;
};
applyCustomAppProps(Library, {
@ -20,9 +29,11 @@ applyCustomAppProps(Library, {
export default function Library(props: Props): JSX.Element {
const content = props.content.contents.data[0].attributes;
const langui = props.langui.websiteInterfaces.data[0].attributes;
return (
<>
<MainPanel langui={langui} />
<ContentPanel>
<div className="grid place-items-center">
<ThumbnailHeader content={content} />
@ -63,30 +74,38 @@ export const getStaticProps: GetStaticProps = async (context) => {
if (context.params.slug && context.locale) {
if (context.params.slug instanceof Array)
context.params.slug = context.params.slug.join("");
const props: Props = {
content: await getContent({
slug: context.params.slug,
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: {
content: await getContent({
slug: context.params.slug,
language_code: context.locale,
}),
},
props: props,
};
}
}
return { props: {} };
};
export const getStaticPaths: GetStaticPaths = async () => {
export const getStaticPaths: GetStaticPaths = async (context) => {
type Path = {
params: {
slug: string;
};
locale: string;
};
const data = await getContentsSlugs({});
const paths: Path[] = [];
data.contents.data.map((item) => {
paths.push({ params: { slug: item.attributes.slug } });
context.locales?.map((local) => {
paths.push({ params: { slug: item.attributes.slug }, locale: local });
});
});
return {
paths,

View File

@ -1,7 +1,14 @@
import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
import { getContentsSlugs, getContentText } from "graphql/operations";
import { GetContentTextQuery } from "graphql/operations-types";
import {
getContentsSlugs,
getContentText,
getWebsiteInterface,
} from "graphql/operations";
import {
GetContentTextQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import ContentPanel from "components/Panels/ContentPanel";
import Image from "next/image";
import { getAssetURL, prettySlug } from "queries/helpers";
@ -12,9 +19,11 @@ import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/PanelComponents/ReturnButton";
import SceneBreak from "components/Markdown/SceneBreak";
import ThumbnailHeader from "components/Content/ThumbnailHeader";
import MainPanel from "components/Panels/MainPanel";
type Props = {
content: GetContentTextQuery;
langui: GetWebsiteInterfaceQuery;
};
applyCustomAppProps(Library, {
@ -24,11 +33,13 @@ applyCustomAppProps(Library, {
export default function Library(props: Props): JSX.Element {
const content = props.content.contents.data[0].attributes;
const langui = props.langui.websiteInterfaces.data[0].attributes;
return (
<>
<MainPanel langui={langui} />
<SubPanel>
<ReturnButton href={`/content/${content.slug}`} title="Content" />
<ReturnButton href={`/content/${content.slug}`} title={"Content"} langui={langui} />
</SubPanel>
<ContentPanel>
<div className="grid place-items-center">
@ -54,33 +65,41 @@ export default function Library(props: Props): JSX.Element {
export const getStaticProps: GetStaticProps = async (context) => {
if (context.params) {
if (context.params.slug instanceof Array)
context.params.slug = context.params.slug.join("");
if (context.params.slug && context.locale) {
if (context.params.slug instanceof Array)
context.params.slug = context.params.slug.join("");
const props: Props = {
content: await getContentText({
slug: context.params.slug,
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: {
content: await getContentText({
slug: context.params.slug,
language_code: context.locale,
}),
},
props: props,
};
}
}
return { props: {} };
};
export const getStaticPaths: GetStaticPaths = async () => {
export const getStaticPaths: GetStaticPaths = async (context) => {
type Path = {
params: {
slug: string;
};
locale: string;
};
const data = await getContentsSlugs({});
const paths: Path[] = [];
data.contents.data.map((item) => {
paths.push({ params: { slug: item.attributes.slug } });
context.locales?.map((local) => {
paths.push({ params: { slug: item.attributes.slug }, locale: local });
});
});
return {
paths,

View File

@ -1,13 +1,23 @@
import MainPanel from "components/Panels/MainPanel";
import { getWebsiteInterface } from "graphql/operations";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
applyCustomAppProps(Chronology, {
applyCustomAppProps(Gallery, {
useSubPanel: false,
useContentPanel: true,
});
export default function Chronology(): JSX.Element {
type Props = {
langui: GetWebsiteInterfaceQuery;
};
export default function Gallery(props: Props): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
return (
<>
<MainPanel langui={langui} />
<iframe
className="w-full h-screen"
src="https://gallery.accords-library.com/posts"
@ -15,3 +25,17 @@ export default function Chronology(): JSX.Element {
</>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: Props = {
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
}
return { props: {} };
};

View File

@ -1,4 +1,8 @@
import ContentPanel from "components/Panels/ContentPanel";
import MainPanel from "components/Panels/MainPanel";
import { getWebsiteInterface } from "graphql/operations";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import Head from "next/head";
import { applyCustomAppProps } from "./_app";
@ -7,12 +11,20 @@ applyCustomAppProps(Home, {
useContentPanel: true,
});
export default function Home(): JSX.Element {
type Props = {
langui: GetWebsiteInterfaceQuery;
};
export default function Home(props: Props): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
return (
<>
<Head>
<title>Accord&rsquo;s Library - Home</title>
</Head>
<MainPanel langui={langui} />
<ContentPanel autoformat={true}>
<h2>Discover Analyse Translate Archive</h2>
<h2>What is this?</h2>
@ -139,3 +151,18 @@ export default function Home(): JSX.Element {
</>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: Props = {
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
} else {
return { props: {} };
}
};

View File

@ -4,8 +4,15 @@ import ContentPanel, {
import Image from "next/image";
import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
import { GetLibraryItemQuery } from "graphql/operations-types";
import {
getLibraryItem,
getLibraryItemsSlugs,
getWebsiteInterface,
} from "graphql/operations";
import {
GetLibraryItemQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import {
convertMmToInch,
getAssetURL,
@ -21,9 +28,11 @@ import LibraryItemComponent from "components/Library/LibraryItemComponent";
import Chip from "components/Chip";
import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine";
import MainPanel from "components/Panels/MainPanel";
type Props = {
libraryItem: GetLibraryItemQuery;
langui: GetWebsiteInterfaceQuery;
};
applyCustomAppProps(Library, {
@ -33,6 +42,7 @@ applyCustomAppProps(Library, {
export default function Library(props: Props): JSX.Element {
const item = props.libraryItem.libraryItems.data[0].attributes;
const langui = props.langui.websiteInterfaces.data[0].attributes;
item.contents.data.sort((a, b) => {
if (
@ -49,28 +59,62 @@ export default function Library(props: Props): JSX.Element {
return (
<>
<MainPanel langui={langui} />
<SubPanel>
<ReturnButton title="Library" href="/library" />
<ReturnButton
title={langui.main_library}
href="/library"
langui={langui}
/>
<HorizontalLine />
<NavOption title="Summary" url="#summary" border={true} />
<NavOption
title={langui.library_item_summary}
url="#summary"
border={true}
/>
{item.gallery.data.length > 0 ? (
<NavOption title="Gallery" url="#gallery" border={true} />
<NavOption
title={langui.library_item_gallery}
url="#gallery"
border={true}
/>
) : (
""
)}
<NavOption title="Details" url="#details" border={true} />
<NavOption
title={langui.library_item_details}
url="#details"
border={true}
/>
{item.subitems.data.length > 0 ? (
<NavOption title="Subitems" url="#subitems" border={true} />
item.metadata[0].__typename === "ComponentMetadataOther" &&
item.metadata[0].subtype.data.attributes.slug === "variant-set" ? (
<NavOption
title={langui.library_item_variants}
url="#variants"
border={true}
/>
) : (
<NavOption
title={langui.library_item_subitems}
url="#subitems"
border={true}
/>
)
) : (
""
)}
{item.contents.data.length > 0 ? (
<NavOption title="Content" url="#content" border={true} />
<NavOption
title={langui.library_item_content}
url="#content"
border={true}
/>
) : (
""
)}
@ -86,7 +130,7 @@ export default function Library(props: Props): JSX.Element {
height={item.thumbnail.data.attributes.height}
/>
) : (
<div className="w-full aspect-[21/29.7]"></div>
<div className="w-full aspect-[21/29.7] bg-light rounded-xl"></div>
)}
</div>
@ -97,7 +141,7 @@ export default function Library(props: Props): JSX.Element {
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
{item.subitem_of.data.length > 0 ? (
<div className="grid place-items-center">
<p>Subitem of</p>
<p>{langui.global_subitem_of}</p>
<Button
href={`/library/${item.subitem_of.data[0].attributes.slug}`}
>
@ -129,8 +173,8 @@ export default function Library(props: Props): JSX.Element {
{item.gallery.data.length > 0 ? (
<div id="gallery" className="grid place-items-center gap-8 w-full">
<h2 className="text-2xl">Gallery</h2>
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
<h2 className="text-2xl">{langui.library_item_gallery}</h2>
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
{item.gallery.data.map((galleryItem) => (
<div
key={galleryItem.id}
@ -159,11 +203,13 @@ export default function Library(props: Props): JSX.Element {
className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
>
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
<h2 className="text-2xl text-center">Details</h2>
<h2 className="text-2xl text-center">
{langui.library_item_details}
</h2>
<div className="grid grid-flow-col w-full place-content-between">
{item.metadata.length > 0 ? (
<div className="grid place-items-center">
<h3 className="text-xl">Type</h3>
<h3 className="text-xl">{langui.global_type}</h3>
<Button>
{item.metadata[0].__typename.substring(
"ComponentMetadata".length
@ -176,7 +222,7 @@ export default function Library(props: Props): JSX.Element {
{item.release_date ? (
<div className="grid place-items-center">
<h3 className="text-xl">Release date</h3>
<h3 className="text-xl">{langui.global_release_date}</h3>
<p>{prettyDate(item.release_date)}</p>
</div>
) : (
@ -185,7 +231,7 @@ export default function Library(props: Props): JSX.Element {
{item.release_date ? (
<div className="grid place-items-center">
<h3 className="text-xl">Price</h3>
<h3 className="text-xl">{langui.global_price}</h3>
<p>{prettyPrice(item.price)}</p>
</div>
) : (
@ -194,17 +240,19 @@ export default function Library(props: Props): JSX.Element {
</div>
{item.size ? (
<>
<h3 className="text-xl">Physical Size</h3>
<h3 className="text-xl">
{langui.library_item_physical_size}
</h3>
<div className="grid grid-flow-col w-full place-content-between">
<div className="grid place-items-start grid-flow-col gap-4">
<p className="font-bold">Width:</p>
<p className="font-bold">{langui.global_width}:</p>
<div>
<p>{item.size.width} mm</p>
<p>{convertMmToInch(item.size.width)} in</p>
</div>
</div>
<div className="grid place-items-start grid-flow-col gap-4">
<p className="font-bold">Height:</p>
<p className="font-bold">{langui.global_height}:</p>
<div>
<p>{item.size.height} mm</p>
<p>{convertMmToInch(item.size.height)} in</p>
@ -212,7 +260,7 @@ export default function Library(props: Props): JSX.Element {
</div>
{item.size.thickness ? (
<div className="grid place-items-start grid-flow-col gap-4">
<p className="font-bold">Thickness:</p>
<p className="font-bold">{langui.global_thickness}:</p>
<div>
<p>{item.size.thickness} mm</p>
<p>{convertMmToInch(item.size.thickness)} in</p>
@ -229,37 +277,47 @@ export default function Library(props: Props): JSX.Element {
{item.metadata.length > 0 ? (
<>
<h3 className="text-xl">Type Information</h3>
<h3 className="text-xl">
{langui.library_item_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>
<p className="font-bold">{langui.global_type}:</p>
<Chip>
{prettySlug(
item.metadata[0].subtype.data.attributes.slug
)}
{item.metadata[0].subtype.data.attributes.titles
.length > 0
? item.metadata[0].subtype.data.attributes
.titles[0].title
: prettySlug(
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 className="font-bold">{langui.global_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 className="font-bold">{langui.global_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 className="font-bold">
{langui.global_page_order}:
</p>
<p>{prettySlug(item.metadata[0].page_order)}</p>
</div>
<div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold">Languages:</p>
<p className="font-bold">
{langui.global_languages}:
</p>
{item.metadata[0].languages.data.map((lang) => (
<p key={lang.attributes.code}>
{lang.attributes.name}
@ -276,18 +334,19 @@ export default function Library(props: Props): JSX.Element {
) : item.metadata[0].__typename ===
"ComponentMetadataGame" ? (
<></>
) : item.metadata[0].__typename ===
"ComponentMetadataMerch" ? (
<></>
) : item.metadata[0].__typename ===
"ComponentMetadataOther" ? (
<>
<div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold">Type:</p>
<p className="font-bold">{langui.global_type}:</p>
<Chip>
{prettySlug(
item.metadata[0].subtype.data.attributes.slug
)}
{item.metadata[0].subtype.data.attributes.titles
.length > 0
? item.metadata[0].subtype.data.attributes
.titles[0].title
: prettySlug(
item.metadata[0].subtype.data.attributes.slug
)}
</Chip>
</div>
</>
@ -303,24 +362,45 @@ export default function Library(props: Props): JSX.Element {
</div>
{item.subitems.data.length > 0 ? (
<div id="subitems" className="grid place-items-center gap-8 w-full">
<h2 className="text-2xl">Subitems</h2>
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
{item.subitems.data.map((subitem) => (
<LibraryItemComponent
key={subitem.id}
item={subitem.attributes}
/>
))}
item.metadata[0].__typename === "ComponentMetadataOther" &&
item.metadata[0].subtype.data.attributes.slug === "variant-set" ? (
<div
id="variants"
className="grid place-items-center gap-8 w-full"
>
<h2 className="text-2xl">{langui.library_item_variants}</h2>
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
{item.subitems.data.map((variant) => (
<LibraryItemComponent
key={variant.id}
item={variant.attributes}
/>
))}
</div>
</div>
</div>
) : (
<div
id="subitems"
className="grid place-items-center gap-8 w-full"
>
<h2 className="text-2xl">{langui.library_item_subitems}</h2>
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
{item.subitems.data.map((subitem) => (
<LibraryItemComponent
key={subitem.id}
item={subitem.attributes}
/>
))}
</div>
</div>
)
) : (
""
)}
{item.contents.data.length > 0 ? (
<div id="content" className="w-full grid place-items-center gap-8">
<h2 className="text-2xl">Content</h2>
<h2 className="text-2xl">{langui.library_item_content}</h2>
<div className="grid gap-4 w-full">
{item.contents.data.map((content) => (
<div
@ -363,10 +443,14 @@ export default function Library(props: Props): JSX.Element {
</p>
{content.attributes.content.data ? (
<Chip className="place-self-end">
{prettySlug(
content.attributes.content.data.attributes.type.data
.attributes.slug
)}
{content.attributes.content.data.attributes.type.data
.attributes.titles.length > 0
? content.attributes.content.data.attributes.type
.data.attributes.titles[0].title
: prettySlug(
content.attributes.content.data.attributes.type
.data.attributes.slug
)}
</Chip>
) : (
""
@ -420,31 +504,38 @@ export const getStaticProps: GetStaticProps = async (context) => {
if (context.params.slug && context.locale) {
if (context.params.slug instanceof Array)
context.params.slug = context.params.slug.join("");
const props: Props = {
libraryItem: await getLibraryItem({
slug: context.params.slug,
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: {
libraryItem: await getLibraryItem({
slug: context.params.slug,
language_code: context.locale,
}),
},
props: props,
};
}
}
return { props: {} };
};
export const getStaticPaths: GetStaticPaths = async () => {
export const getStaticPaths: GetStaticPaths = async (context) => {
type Path = {
params: {
slug: string;
};
locale: 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 } });
context.locales?.map((local) => {
paths.push({ params: { slug: item.attributes.slug }, locale: local });
});
});
return {
paths,

View File

@ -5,12 +5,21 @@ import ContentPanel, {
} from "components/Panels/ContentPanel";
import LibraryItemComponent from "components/Library/LibraryItemComponent";
import { applyCustomAppProps } from "pages/_app";
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
import { getLibraryItemsPreview } from "graphql/operations";
import {
GetLibraryItemsPreviewQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import {
getLibraryItemsPreview,
getWebsiteInterface,
} from "graphql/operations";
import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import Head from "next/head";
type Props = {
libraryItems: GetLibraryItemsPreviewQuery;
langui: GetWebsiteInterfaceQuery;
};
applyCustomAppProps(Library, {
@ -19,13 +28,18 @@ applyCustomAppProps(Library, {
});
export default function Library(props: Props): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
return (
<>
<Head>
<title>Accord&rsquo;s Library - Library</title>
</Head>
<MainPanel langui={langui} />
<SubPanel>
<PanelHeader
icon="library_books"
title="Library"
description="A comprehensive list of all Yokoverse&rsquo;s side materials (books, novellas, artbooks, stage plays, manga, drama CDs, and comics). For each, we provide photos and/or scans of the content, information about what it is, when and how it was released, size, initial price…"
title={langui.main_library}
description={langui.library_description}
/>
</SubPanel>
@ -41,15 +55,19 @@ export default function Library(props: Props): JSX.Element {
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale)
return {
props: {
libraryItems: await getLibraryItemsPreview({
language_code: context.locale,
}),
},
if (context.locale) {
const props: Props = {
libraryItems: await getLibraryItemsPreview({
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
else {
return {
props: props,
};
} else {
return { props: {} };
}
};

View File

@ -1,7 +1,4 @@
import {
GetLibraryItemQuery,
GetLibraryItemsPreviewQuery,
} from "graphql/operations-types";
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
export function getAssetURL(url: string): string {
return process.env.NEXT_PUBLIC_URL_CMS + url;