More element are translation-ready

This commit is contained in:
DrMint 2022-02-16 19:44:05 +01:00
parent b21c709873
commit c6b6ec1479
21 changed files with 252 additions and 248 deletions

View File

@ -2,19 +2,19 @@
module.exports = {
reactStrictMode: true,
i18n: {
locales: ['en', 'fr', 'ja', 'es'],
defaultLocale: 'en',
locales: ["en", "fr", "ja", "es", "xx"],
defaultLocale: "en",
},
images: {
domains: ['strapi.accords-library.com'],
domains: ["strapi.accords-library.com"],
},
async redirects() {
return [
{
source: '/discord',
destination: 'https://discord.com/invite/5mcXcRAczj',
source: "/discord",
destination: "https://discord.com/invite/5mcXcRAczj",
permanent: false,
},
]
];
},
}
};

View File

@ -56,7 +56,11 @@ export default function ThumbnailHeader(
{content.type ? (
<div className="grid place-items-center place-content-start gap-2">
<h3 className="text-xl">{langui.global_type}</h3>
<Button>{content.type.data.attributes.titles[0].title}</Button>
<Button>
{content.type.data.attributes.titles.length > 0
? content.type.data.attributes.titles[0].title
: prettySlug(content.type.data.attributes.slug)}
</Button>
</div>
) : (
""

View File

@ -2,12 +2,15 @@ import Link from "next/link";
import { GetContentsQuery } from "graphql/operations-types";
import { getAssetURL, prettySlug } from "queries/helpers";
import Image from "next/image";
import Chip from "components/Chip";
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"];
categories: GetContentsQuery["contents"]["data"][number]["attributes"]["categories"];
type: GetContentsQuery["contents"]["data"][number]["attributes"]["type"];
};
};
@ -21,6 +24,7 @@ export default function LibraryContentPreview(
<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
className=" rounded-md"
src={getAssetURL(item.thumbnail.data.attributes.url)}
alt={item.thumbnail.data.attributes.alternativeText}
height={item.thumbnail.data.attributes.height}
@ -29,17 +33,31 @@ export default function LibraryContentPreview(
) : (
<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 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-1 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>
)}
{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-lg">{prettySlug(item.slug)}</h1>
)}
</div>
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
{item.categories.data.map((category) => (
<Chip key={category.id} className="text-sm">
{category.attributes.short}
</Chip>
))}
</div>
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
{item.type ? (
<Chip>{item.type.data.attributes.titles.length > 0 ? item.type.data.attributes.titles[0].title : prettySlug(item.type.data.attributes.slug)}</Chip>
) : (
""
)}
</div>
</div>
</div>

View File

@ -51,15 +51,15 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
<NavOption
url="/wiki"
icon="travel_explore"
title="Wiki"
subtitle="Explore all content of a specific game/series"
title={langui.main_wiki}
subtitle={langui.main_wiki_description}
/>
<NavOption
url="/chronicles"
icon="watch_later"
title="Chronicles"
subtitle="Experience all events in chronological order"
title={langui.main_chronicles}
subtitle={langui.main_chronicles_description}
/>
<HorizontalLine />

View File

@ -4,12 +4,7 @@ query getWebsiteInterface($language_code: String) {
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
@ -39,13 +34,6 @@ query getWebsiteInterface($language_code: String) {
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
library_item_front_matter
library_item_back_matter
library_item_type_textual
@ -64,6 +52,21 @@ query getWebsiteInterface($language_code: String) {
global_hardcover
global_left_to_right
global_right_to_left
main_wiki
main_wiki_description
main_chronicles
main_chronicles_description
library_items
library_items_description
library_content
library_content_description
wiki_description
news_description
chronicles_description
gallery_description
archives_description
about_us_description
merch_description
}
}
}
@ -479,93 +482,92 @@ query getContentsSlugs {
}
query getContents($language_code: String) {
contents(pagination: { limit: -1 }) {
data {
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
}
}
}
}
}
}
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 {

View File

@ -78,12 +78,7 @@ export type GetWebsiteInterfaceQuery = {
__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;
@ -113,13 +108,6 @@ export type GetWebsiteInterfaceQuery = {
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;
library_item_front_matter: string;
library_item_back_matter: string;
library_item_type_textual: string;
@ -138,6 +126,21 @@ export type GetWebsiteInterfaceQuery = {
global_hardcover: string;
global_left_to_right: string;
global_right_to_left: string;
main_wiki: string;
main_wiki_description: string;
main_chronicles: string;
main_chronicles_description: string;
library_items: string;
library_items_description: string;
library_content: string;
library_content_description: string;
wiki_description: string;
news_description: string;
chronicles_description: string;
gallery_description: string;
archives_description: string;
about_us_description: string;
merch_description: string;
};
}>;
};
@ -689,18 +692,18 @@ export type GetContentsQuery = {
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 ;
attributes: { __typename: "Category"; short: string } ;
id: string;
attributes: { __typename: "Category"; short: string };
}>;
} ;
};
type: {
__typename: "ContentTypeEntityResponse";
data: {
@ -711,22 +714,22 @@ export type GetContentsQuery = {
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: {
@ -735,7 +738,7 @@ export type GetContentsQuery = {
__typename: "LibraryItem";
slug: string;
title: string;
subtitle: string ;
subtitle: string;
thumbnail: {
__typename: "UploadFileEntityResponse";
data: {
@ -743,32 +746,32 @@ export type GetContentsQuery = {
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";
id: string;
} > ;
}>;
video_set: Array<{
__typename: "ComponentSetsVideoSet";
id: string;
} > ;
}>;
audio_set: Array<{
__typename: "ComponentSetsAudioSet";
id: string;
} > ;
}>;
thumbnail: {
__typename: "UploadFileEntityResponse";
data: {
@ -776,17 +779,17 @@ export type GetContentsQuery = {
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string ;
caption: string ;
width: number ;
height: number ;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
} ;
} ;
} ;
} ;
};
};
};
};
}>;
} ;
};
};
export type GetContentQuery = {

View File

@ -16,11 +16,11 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
<PanelHeader
icon="info"
title={langui.main_about_us}
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."
description={langui.about_us_description}
/>
</SubPanel>
);
return <AppLayout title="404" langui={langui} subPanel={subPanel} />;
return <AppLayout title={langui.main_about_us} langui={langui} subPanel={subPanel} />;
}
export const getStaticProps: GetStaticProps = async (context) => {

View File

@ -16,11 +16,11 @@ export default function Archives(props: ArchivesProps): JSX.Element {
<PanelHeader
icon="inventory"
title={langui.main_archives}
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."
description={langui.archives_description}
/>
</SubPanel>
);
return <AppLayout title="Archives" langui={langui} subPanel={subPanel} />;
return <AppLayout title={langui.main_archives} langui={langui} subPanel={subPanel} />;
}
export const getStaticProps: GetStaticProps = async (context) => {

View File

@ -15,12 +15,12 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element {
<SubPanel>
<PanelHeader
icon="watch_later"
title="Chronicles"
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."
title={langui.main_chronicles}
description={langui.chronicles_description}
/>
</SubPanel>
);
return <AppLayout title="Chronicles" langui={langui} subPanel={subPanel} />;
return <AppLayout title={langui.main_chronicles} langui={langui} subPanel={subPanel} />;
}
export const getStaticProps: GetStaticProps = async (context) => {

View File

@ -17,7 +17,7 @@ export default function Gallery(props: GalleryProps): JSX.Element {
);
return (
<AppLayout title="Content" langui={langui} contentPanel={contentPanel} />
<AppLayout title={langui.main_gallery} langui={langui} contentPanel={contentPanel} />
);
}

View File

@ -1,48 +0,0 @@
import SubPanel from "components/Panels/SubPanel";
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 HubsProps = {
langui: GetWebsiteInterfaceQuery;
};
export default function Hubs(props: HubsProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
<SubPanel>
<PanelHeader
icon="workspaces"
title={langui.main_hub}
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>Hello</ContentPanel>;
return (
<AppLayout
title="Hub"
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}
/>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: HubsProps = {
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
}
return { props: {} };
};

View File

@ -3,7 +3,6 @@ import ContentPanel from "components/Panels/ContentPanel";
import { getWebsiteInterface } from "graphql/operations";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import Head from "next/head";
type HomeProps = {
langui: GetWebsiteInterfaceQuery;
};
@ -137,7 +136,7 @@ export default function Home(props: HomeProps): JSX.Element {
return (
<>
<AppLayout title="Home" langui={langui} contentPanel={contentPanel} />
<AppLayout title={"Accords Library"} langui={langui} contentPanel={contentPanel} />
</>
);
}

View File

@ -13,6 +13,8 @@ import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine";
import ThumbnailHeader from "components/Content/ThumbnailHeader";
import AppLayout from "components/AppLayout";
import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/PanelComponents/ReturnButton";
type ContentIndexProps = {
content: GetContentQuery;
@ -22,6 +24,16 @@ type ContentIndexProps = {
export default function ContentIndex(props: ContentIndexProps): JSX.Element {
const content = props.content.contents.data[0].attributes;
const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
<SubPanel>
<ReturnButton
href="/library/content"
title={langui.library_content}
langui={langui}
/>
<HorizontalLine />
</SubPanel>
);
const contentPanel = (
<ContentPanel>
<div className="grid place-items-center">
@ -57,7 +69,12 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
);
return (
<AppLayout title="Content" langui={langui} contentPanel={contentPanel} />
<AppLayout
title={langui.library_content}
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}
/>
);
}

View File

@ -57,7 +57,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
return (
<AppLayout
title="Read"
title={langui.library_content}
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}

View File

@ -13,6 +13,7 @@ import AppLayout from "components/AppLayout";
import ReturnButton from "components/PanelComponents/ReturnButton";
import HorizontalLine from "components/HorizontalLine";
import LibraryContentPreview from "components/Library/LibraryContentPreview";
import { prettyinlineTitle } from "queries/helpers";
type LibraryProps = {
contents: GetContentsQuery;
@ -21,6 +22,13 @@ type LibraryProps = {
export default function Library(props: LibraryProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
props.contents.contents.data.sort((a, b) => {
const titleA = a.attributes.titles.length > 0 ? prettyinlineTitle(a.attributes.titles[0].pre_title, a.attributes.titles[0].title, a.attributes.titles[0].subtitle) : a.attributes.slug
const titleB = b.attributes.titles.length > 0 ? prettyinlineTitle(b.attributes.titles[0].pre_title, b.attributes.titles[0].title, b.attributes.titles[0].subtitle) : b.attributes.slug
return titleA.localeCompare(titleB);
});
const subPanel = (
<SubPanel>
<ReturnButton
@ -31,8 +39,8 @@ export default function Library(props: LibraryProps): JSX.Element {
<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."
title={langui.library_content}
description={langui.library_content_description}
/>
</SubPanel>
);
@ -47,7 +55,7 @@ export default function Library(props: LibraryProps): JSX.Element {
);
return (
<AppLayout
title="Library"
title={langui.library_content}
langui={langui}
subPanel={subPanel}
contentPanel={contentPanel}

View File

@ -21,24 +21,24 @@ export default function Library(props: LibraryProps): JSX.Element {
<PanelHeader
icon="library_books"
title={langui.main_library}
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."
description={langui.library_description}
/>
<NavOption
url="/library/items"
title="Items"
subtitle="A comprehensive list of all Yokoverses physical or digital items"
title={langui.library_items}
subtitle={langui.library_items_description}
border={true}
/>
<NavOption
url="/library/content"
title="Content"
subtitle="Search for a specific content depending on its type or category"
title={langui.library_content}
subtitle={langui.library_content_description}
border={true}
/>
</SubPanel>
);
return <AppLayout title="Library" langui={langui} subPanel={subPanel} />;
return <AppLayout title={langui.main_library} langui={langui} subPanel={subPanel} />;
}
export const getStaticProps: GetStaticProps = async (context) => {

View File

@ -43,7 +43,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<SubPanel>
<ReturnButton
href="/library/items"
title="Media"
title={langui.library_items}
langui={langui}
/>
<HorizontalLine />
@ -493,6 +493,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
</ContentPanel>
);
// Sort content by range
item.contents.data.sort((a, b) => {
if (
a.attributes.range[0].__typename === "ComponentRangePageRange" &&
@ -508,7 +509,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
return (
<AppLayout
title="Library"
title={langui.library_items}
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}

View File

@ -34,8 +34,8 @@ export default function Library(props: LibraryProps): JSX.Element {
<HorizontalLine />
<PanelHeader
icon="library_books"
title="Media"
description="A comprehensive list of all Yokoverses 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.library_items}
description={langui.library_items_description}
/>
</SubPanel>
);
@ -50,7 +50,7 @@ export default function Library(props: LibraryProps): JSX.Element {
);
return (
<AppLayout
title="Library"
title={langui.library_items}
langui={langui}
subPanel={subPanel}
contentPanel={contentPanel}

View File

@ -16,12 +16,12 @@ export default function Merch(props: MerchProps): JSX.Element {
<PanelHeader
icon="store"
title={langui.main_merch}
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."
description={langui.merch_description}
/>
</SubPanel>
);
return <AppLayout title="Merch" langui={langui} subPanel={subPanel} />;
return <AppLayout title={langui.main_merch} langui={langui} subPanel={subPanel} />;
}
export const getStaticProps: GetStaticProps = async (context) => {

View File

@ -16,12 +16,12 @@ export default function News(props: NewsProps): JSX.Element {
<PanelHeader
icon="feed"
title={langui.main_news}
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."
description={langui.news_description}
/>
</SubPanel>
);
return <AppLayout title="Merch" langui={langui} subPanel={subPanel} />;
return <AppLayout title={langui.main_news} langui={langui} subPanel={subPanel} />;
}
export const getStaticProps: GetStaticProps = async (context) => {

View File

@ -16,8 +16,8 @@ export default function Hubs(props: WikiProps): JSX.Element {
<SubPanel>
<PanelHeader
icon="travel_explore"
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."
title={langui.main_wiki}
description={langui.wiki_description}
/>
</SubPanel>
);
@ -25,7 +25,7 @@ export default function Hubs(props: WikiProps): JSX.Element {
return (
<AppLayout
title="Wiki"
title={langui.main_wiki}
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}