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

Replaced Data and Hubs with Wiki

This commit is contained in:
DrMint 2022-02-16 17:09:46 +01:00
parent 502d5866f4
commit 9a630d29da
14 changed files with 527 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Library/LibraryContentPreview.tsx Normal file
View File

@ -0,0 +1,48 @@
import Link from "next/link";
import { GetContentsQuery } from "graphql/operations-types";
import { getAssetURL, prettySlug } from "queries/helpers";
import Image from "next/image";
export type LibraryContentPreviewProps = {
item: {
slug: GetContentsQuery["contents"]["data"][number]["attributes"]["slug"];
thumbnail: GetContentsQuery["contents"]["data"][number]["attributes"]["thumbnail"];
titles: GetContentsQuery["contents"]["data"][number]["attributes"]["titles"];
};
};
export default function LibraryContentPreview(
props: LibraryContentPreviewProps
): JSX.Element {
const item = props.item;
return (
<Link href={"/library/media/" + item.slug} passHref>
<div className="drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
{item.thumbnail.data ? (
<Image
src={getAssetURL(item.thumbnail.data.attributes.url)}
alt={item.thumbnail.data.attributes.alternativeText}
height={item.thumbnail.data.attributes.height}
width={item.thumbnail.data.attributes.width}
/>
) : (
<div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
)}
<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>
{item.titles.length > 0 ? (
<>
<p>{item.titles[0].pre_title}</p>
<h1 className="text-lg">{item.titles[0].title}</h1>
<h2>{item.titles[0].subtitle}</h2>
</>
) : (
<h1 className="text-3xl">{prettySlug(item.slug)}</h1>
)}
</div>
</div>
</div>
</Link>
);
}

13
src/components/Library/LibraryItemComponent.tsx → src/components/Library/LibraryItemsPreview.tsx
View File

@ -3,7 +3,7 @@ import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers";
import Image from "next/image";
export type LibraryItemComponentProps = {
export type LibraryItemsPreviewProps = {
item: {
slug: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["slug"];
thumbnail: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["thumbnail"];
@ -14,13 +14,13 @@ export type LibraryItemComponentProps = {
};
};
export default function LibraryItemComponent(
props: LibraryItemComponentProps
export default function LibraryItemsPreview(
props: LibraryItemsPreviewProps
): JSX.Element {
const item = props.item;
return (
<Link href={"/library/" + item.slug} passHref>
<Link href={"/library/items/" + item.slug} passHref>
<div className="drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
{item.thumbnail.data ? (
<Image
@ -38,12 +38,12 @@ export default function LibraryItemComponent(
<h3 className="leading-3">{item.subtitle}</h3>
</div>
<div className="grid grid-flow-col">
{item.price ? (
{item.release_date ? (
<p className="text-sm">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
event
</span>
{item.release_date ? prettyDate(item.release_date) : ""}
{prettyDate(item.release_date)}
</p>
) : (
""
@ -64,3 +64,4 @@ export default function LibraryItemComponent(
</Link>
);
}

67
src/components/Library/LibraryMediaPreview.tsx Normal file
View File

@ -0,0 +1,67 @@
import Link from "next/link";
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers";
import Image from "next/image";
export type LibraryContentPreviewProps = {
item: {
slug: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["slug"];
thumbnail: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["thumbnail"];
title: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["title"];
subtitle: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["subtitle"];
price?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"];
release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"];
};
};
export default function LibraryContentPreview(
props: LibraryContentPreviewProps
): JSX.Element {
const item = props.item;
return (
<Link href={"/library/media/" + item.slug} passHref>
<div className="drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
{item.thumbnail.data ? (
<Image
src={getAssetURL(item.thumbnail.data.attributes.url)}
alt={item.thumbnail.data.attributes.alternativeText}
height={item.thumbnail.data.attributes.height}
width={item.thumbnail.data.attributes.width}
/>
) : (
<div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
)}
<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>
</div>
<div className="grid grid-flow-col">
{item.release_date ? (
<p className="text-sm">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
event
</span>
{prettyDate(item.release_date)}
</p>
) : (
""
)}
{item.price ? (
<p className="text-sm justify-self-end">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
shopping_cart
</span>
{prettyPrice(item.price)}
</p>
) : (
""
)}
</div>
</div>
</div>
</Link>
);
}

9
src/components/Panels/MainPanel.tsx
View File

@ -49,10 +49,10 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
/>
<NavOption
url="/hubs"
icon="workspaces"
title={langui.main_hub}
subtitle={langui.main_hub_description}
url="/wiki"
icon="travel_explore"
title="Wiki"
subtitle="Explore all content of a specific game/series"
/>
<NavOption
@ -65,7 +65,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
<HorizontalLine />
<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"

2
src/components/Panels/SubPanel.tsx
View File

@ -4,7 +4,7 @@ type SubPanelProps = {
export default function SubPanel(props: SubPanelProps): JSX.Element {
return (
<div className="grid justify-center content-start p-8 gap-y-2 justify-items-center text-center">
<div className="grid p-8 gap-y-2 justify-items-center text-center">
{props.children}
</div>
);

88
src/graphql/operation.graphql
View File

@ -478,6 +478,94 @@ query getContentsSlugs {
}
}
query getContents($language_code: String) {
contents(pagination: { limit: -1 }) {
data {
id
attributes {
slug
titles(filters: { language: { code: { eq: $language_code } } }) {
pre_title
title
subtitle
}
categories {
data {
id
attributes {
short
}
}
}
type {
data {
attributes {
slug
titles(filters: { language: { code: { eq: $language_code } } }) {
title
}
}
}
}
ranged_contents {
data {
id
attributes {
slug
scan_set {
id
}
library_item {
data {
attributes {
slug
title
subtitle
thumbnail {
data {
attributes {
name
alternativeText
caption
width
height
url
}
}
}
}
}
}
}
}
}
text_set {
id
}
video_set {
id
}
audio_set {
id
}
thumbnail {
data {
attributes {
name
alternativeText
caption
width
height
url
}
}
}
}
}
}
}
query getContent($slug: String, $language_code: String) {
contents(filters: { slug: { eq: $slug } }) {
data {

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

@ -673,6 +673,122 @@ export type GetContentQueryVariables = Exact<{
language_code: InputMaybe<Scalars["String"]>;
}>;
export type GetContentsQueryVariables = Exact<{
language_code: InputMaybe<Scalars["String"]>;
}>;
export type GetContentsQuery = {
__typename: "Query";
contents: {
__typename: "ContentEntityResponseCollection";
data: Array<{
__typename: "ContentEntity";
id: string;
attributes: {
__typename: "Content";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsTitle";
pre_title: string ;
title: string;
subtitle: string ;
} > ;
categories: {
__typename: "CategoryRelationResponseCollection";
data: Array<{
__typename: "CategoryEntity";
id: string ;
attributes: { __typename: "Category"; short: string } ;
}>;
} ;
type: {
__typename: "ContentTypeEntityResponse";
data: {
__typename: "ContentTypeEntity";
attributes: {
__typename: "ContentType";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
} > ;
} ;
} ;
} ;
ranged_contents: {
__typename: "RangedContentRelationResponseCollection";
data: Array<{
__typename: "RangedContentEntity";
id: string ;
attributes: {
__typename: "RangedContent";
slug: string;
scan_set: Array<{
__typename: "ComponentSetsScanSet";
id: string;
} > ;
library_item: {
__typename: "LibraryItemEntityResponse";
data: {
__typename: "LibraryItemEntity";
attributes: {
__typename: "LibraryItem";
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;
} ;
} ;
} ;
} ;
} ;
} ;
} ;
}>;
} ;
text_set: Array<{
__typename: "ComponentSetsTextSet";
id: string;
} > ;
video_set: Array<{
__typename: "ComponentSetsVideoSet";
id: string;
} > ;
audio_set: Array<{
__typename: "ComponentSetsAudioSet";
id: string;
} > ;
thumbnail: {
__typename: "UploadFileEntityResponse";
data: {
__typename: "UploadFileEntity";
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string ;
caption: string ;
width: number ;
height: number ;
url: string;
} ;
} ;
} ;
} ;
}>;
} ;
};
export type GetContentQuery = {
__typename: "Query";
contents: {

10
src/graphql/operations.ts
View File

@ -5,6 +5,8 @@ import {
GetChronologyItemsQueryVariables,
GetContentQuery,
GetContentQueryVariables,
GetContentsQuery,
GetContentsQueryVariables,
GetContentsSlugsQuery,
GetContentsSlugsQueryVariables,
GetContentTextQuery,
@ -101,6 +103,14 @@ export async function getContentsSlugs(
return await graphQL(query, JSON.stringify(variables));
}
export async function getContents(
variables: GetContentsQueryVariables
): Promise<GetContentsQuery> {
const query = getQueryFromOperations("getContents");
return await graphQL(query, JSON.stringify(variables));
}
export async function getContent(
variables: GetContentQueryVariables
): Promise<GetContentQuery> {

74
src/pages/library/content/index.tsx Normal file
View File

@ -0,0 +1,74 @@
import { GetStaticProps } from "next";
import SubPanel from "components/Panels/SubPanel";
import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import {
GetContentsQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import { getContents, getWebsiteInterface } from "graphql/operations";
import PanelHeader from "components/PanelComponents/PanelHeader";
import AppLayout from "components/AppLayout";
import ReturnButton from "components/PanelComponents/ReturnButton";
import HorizontalLine from "components/HorizontalLine";
import LibraryContentPreview from "components/Library/LibraryContentPreview";
type LibraryProps = {
contents: GetContentsQuery;
langui: GetWebsiteInterfaceQuery;
};
export default function Library(props: LibraryProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
<SubPanel>
<ReturnButton
href="/library"
title={langui.main_library}
langui={langui}
/>
<HorizontalLine />
<PanelHeader
icon="library_books"
title="Content"
description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
/>
</SubPanel>
);
const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
{props.contents.contents.data.map((item) => (
<LibraryContentPreview key={item.id} item={item.attributes} />
))}
</div>
</ContentPanel>
);
return (
<AppLayout
title="Library"
langui={langui}
subPanel={subPanel}
contentPanel={contentPanel}
/>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: LibraryProps = {
contents: await getContents({
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
} else {
return { props: {} };
}
};

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

@ -1,22 +1,16 @@
import { GetStaticProps } from "next";
import SubPanel from "components/Panels/SubPanel";
import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import LibraryItemComponent from "components/Library/LibraryItemComponent";
import {
GetLibraryItemsPreviewQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import {
getLibraryItemsPreview,
getWebsiteInterface,
} from "graphql/operations";
import PanelHeader from "components/PanelComponents/PanelHeader";
import AppLayout from "components/AppLayout";
import NavOption from "components/PanelComponents/NavOption";
type LibraryProps = {
libraryItems: GetLibraryItemsPreviewQuery;
langui: GetWebsiteInterfaceQuery;
};
@ -27,35 +21,29 @@ export default function Library(props: LibraryProps): JSX.Element {
<PanelHeader
icon="library_books"
title={langui.main_library}
description={langui.library_description}
description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
/>
<NavOption
url="/library/items"
title="Items"
subtitle="A comprehensive list of all Yokoverse’s physical or digital items"
border={true}
/>
<NavOption
url="/library/content"
title="Content"
subtitle="Search for a specific content depending on its type or category"
border={true}
/>
</SubPanel>
);
const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(14rem,1fr))]">
{props.libraryItems.libraryItems.data.map((item) => (
<LibraryItemComponent key={item.id} item={item.attributes} />
))}
</div>
</ContentPanel>
);
return (
<AppLayout
title="Library"
langui={langui}
subPanel={subPanel}
contentPanel={contentPanel}
/>
);
return <AppLayout title="Library" langui={langui} subPanel={subPanel} />;
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: LibraryProps = {
libraryItems: await getLibraryItemsPreview({
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),

10
src/pages/library/[slug].tsx → src/pages/library/items/[slug].tsx
View File

@ -25,11 +25,11 @@ import {
import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/PanelComponents/ReturnButton";
import NavOption from "components/PanelComponents/NavOption";
import LibraryItemComponent from "components/Library/LibraryItemComponent";
import Chip from "components/Chip";
import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine";
import AppLayout from "components/AppLayout";
import LibraryMediaPreview from "components/Library/LibraryItemsPreview";
type LibrarySlugProps = {
libraryItem: GetLibraryItemQuery;
@ -42,8 +42,8 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
const subPanel = (
<SubPanel>
<ReturnButton
title={langui.main_library}
href="/library"
href="/library/items"
title="Media"
langui={langui}
/>
<HorizontalLine />
@ -370,7 +370,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<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
<LibraryMediaPreview
key={variant.id}
item={variant.attributes}
/>
@ -382,7 +382,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<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
<LibraryMediaPreview
key={subitem.id}
item={subitem.attributes}
/>

77
src/pages/library/items/index.tsx Normal file
View File

@ -0,0 +1,77 @@
import { GetStaticProps } from "next";
import SubPanel from "components/Panels/SubPanel";
import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import {
GetLibraryItemsPreviewQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import {
getLibraryItemsPreview,
getWebsiteInterface,
} from "graphql/operations";
import PanelHeader from "components/PanelComponents/PanelHeader";
import AppLayout from "components/AppLayout";
import ReturnButton from "components/PanelComponents/ReturnButton";
import HorizontalLine from "components/HorizontalLine";
import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
type LibraryProps = {
libraryItems: GetLibraryItemsPreviewQuery;
langui: GetWebsiteInterfaceQuery;
};
export default function Library(props: LibraryProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
<SubPanel>
<ReturnButton
href="/library"
title={langui.main_library}
langui={langui}
/>
<HorizontalLine />
<PanelHeader
icon="library_books"
title="Media"
description="A comprehensive list of all Yokoverse’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…"
/>
</SubPanel>
);
const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]">
{props.libraryItems.libraryItems.data.map((item) => (
<LibraryItemsPreview key={item.id} item={item.attributes} />
))}
</div>
</ContentPanel>
);
return (
<AppLayout
title="Library"
langui={langui}
subPanel={subPanel}
contentPanel={contentPanel}
/>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: LibraryProps = {
libraryItems: await getLibraryItemsPreview({
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
} else {
return { props: {} };
}
};

0
src/pages/data/chronology.tsx → src/pages/wiki/chronology.tsx
View File

48
src/pages/data/index.tsx → src/pages/wiki/index.tsx
View File

@ -1,61 +1,41 @@
import SubPanel from "components/Panels/SubPanel";
import NavOption from "components/PanelComponents/NavOption";
import PanelHeader from "components/PanelComponents/PanelHeader";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations";
import ContentPanel from "components/Panels/ContentPanel";
import AppLayout from "components/AppLayout";
type DataProps = {
type WikiProps = {
langui: GetWebsiteInterfaceQuery;
};
export default function Data(props: DataProps): JSX.Element {
export default function Hubs(props: WikiProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
<SubPanel>
<PanelHeader
icon="travel_explore"
title={langui.main_data}
title="Wiki"
description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
/>
<NavOption
url="/data/timelines"
title={langui.chronology_timelines}
subtitle={langui.chronology_timelines_description}
border={true}
/>
<NavOption
url="/data/chronology"
title="Chronology"
subtitle={langui.chronology_overview_description}
border={true}
/>
<NavOption
url="/data/weapon-stories"
title="Weapon Stories"
subtitle="Reiciendis id reiciendis at ullam."
border={true}
/>
<NavOption
url="/data/glossary"
title="Glossary"
subtitle="Reiciendis id reiciendis at ullam."
border={true}
/>
</SubPanel>
);
const contentPanel = <ContentPanel>Hello</ContentPanel>;
return <AppLayout title="Content" langui={langui} subPanel={subPanel} />;
return (
<AppLayout
title="Wiki"
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}
/>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: DataProps = {
const props: WikiProps = {
langui: await getWebsiteInterface({
language_code: context.locale,
}),