Show content and text
This commit is contained in:
DrMint
parent
1d42821eed
commit
b775e25b70
|
|
@ -53,7 +53,7 @@ query getLibraryItemsPreview($language_code: String) {
|
|||
libraryItems(
|
||||
filters: { root_item: { eq: true } }
|
||||
pagination: { limit: -1 }
|
||||
sort: ["title:asc","subtitle:asc"]
|
||||
sort: ["title:asc", "subtitle:asc"]
|
||||
) {
|
||||
data {
|
||||
id
|
||||
|
|
@ -367,3 +367,248 @@ query getLibraryItem($slug: String, $language_code: String) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
query getContentsSlugs {
|
||||
contents(pagination: { limit: -1 }) {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
query getContent($slug: String, $language_code: String) {
|
||||
contents(filters: { slug: { eq: $slug } }) {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
titles(filters: { language: { code: { eq: $language_code } } }) {
|
||||
pre_title
|
||||
title
|
||||
subtitle
|
||||
}
|
||||
categories {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
name
|
||||
short
|
||||
}
|
||||
}
|
||||
}
|
||||
type {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
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 getContentText($slug: String, $language_code: String) {
|
||||
contents(filters: { slug: { eq: $slug } }) {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
titles(filters: { language: { code: { eq: $language_code } } }) {
|
||||
pre_title
|
||||
title
|
||||
subtitle
|
||||
}
|
||||
categories {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
name
|
||||
short
|
||||
}
|
||||
}
|
||||
}
|
||||
type {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
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(filters: { language: { code: { eq: $language_code } } }) {
|
||||
status
|
||||
text
|
||||
source_language {
|
||||
data {
|
||||
attributes {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
transcribers {
|
||||
data {
|
||||
attributes {
|
||||
username
|
||||
anonymize
|
||||
anonymous_code
|
||||
avatar {
|
||||
data {
|
||||
attributes {
|
||||
name
|
||||
alternativeText
|
||||
caption
|
||||
width
|
||||
height
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
translators {
|
||||
data {
|
||||
attributes {
|
||||
username
|
||||
anonymize
|
||||
anonymous_code
|
||||
avatar {
|
||||
data {
|
||||
attributes {
|
||||
name
|
||||
alternativeText
|
||||
caption
|
||||
width
|
||||
height
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
proofreaders {
|
||||
data {
|
||||
attributes {
|
||||
username
|
||||
anonymize
|
||||
anonymous_code
|
||||
avatar {
|
||||
data {
|
||||
attributes {
|
||||
name
|
||||
alternativeText
|
||||
caption
|
||||
width
|
||||
height
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
notes
|
||||
}
|
||||
|
||||
thumbnail {
|
||||
data {
|
||||
attributes {
|
||||
name
|
||||
alternativeText
|
||||
caption
|
||||
width
|
||||
height
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,13 @@ export enum Enum_Componenttranslationschronologyitem_Status {
|
|||
Done = "Done",
|
||||
}
|
||||
|
||||
export enum Enum_Componentsetstextset_Status {
|
||||
Incomplete = "Incomplete",
|
||||
Draft = "Draft",
|
||||
Review = "Review",
|
||||
Done = "Done",
|
||||
}
|
||||
|
||||
// __________________________________________________________________
|
||||
|
||||
export type GetErasQueryVariables = Exact<{
|
||||
|
|
@ -548,3 +555,324 @@ export type GetLibraryItemQuery = {
|
|||
}>;
|
||||
};
|
||||
};
|
||||
|
||||
export type GetContentsSlugsQueryVariables = Exact<{ [key: string]: never }>;
|
||||
|
||||
export type GetContentsSlugsQuery = {
|
||||
__typename: "Query";
|
||||
contents: {
|
||||
__typename: "ContentEntityResponseCollection";
|
||||
data: Array<{
|
||||
__typename: "ContentEntity";
|
||||
attributes: { __typename: "Content"; slug: string };
|
||||
}>;
|
||||
};
|
||||
};
|
||||
|
||||
export type GetContentQueryVariables = Exact<{
|
||||
slug: InputMaybe<Scalars["String"]>;
|
||||
language_code: InputMaybe<Scalars["String"]>;
|
||||
}>;
|
||||
|
||||
export type GetContentQuery = {
|
||||
__typename: "Query";
|
||||
contents: {
|
||||
__typename: "ContentEntityResponseCollection";
|
||||
data: Array<{
|
||||
__typename: "ContentEntity";
|
||||
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";
|
||||
name: string;
|
||||
short: string;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
type: {
|
||||
__typename: "ContentTypeEntityResponse";
|
||||
data: {
|
||||
__typename: "ContentTypeEntity";
|
||||
attributes: { __typename: "ContentType"; slug: 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 GetContentTextQueryVariables = Exact<{
|
||||
slug: InputMaybe<Scalars["String"]>;
|
||||
language_code: InputMaybe<Scalars["String"]>;
|
||||
}>;
|
||||
|
||||
export type GetContentTextQuery = {
|
||||
__typename: "Query";
|
||||
contents: {
|
||||
__typename: "ContentEntityResponseCollection";
|
||||
data: Array<{
|
||||
__typename: "ContentEntity";
|
||||
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";
|
||||
name: string;
|
||||
short: string;
|
||||
} ;
|
||||
}>;
|
||||
} ;
|
||||
type: {
|
||||
__typename: "ContentTypeEntityResponse";
|
||||
data: {
|
||||
__typename: "ContentTypeEntity";
|
||||
attributes: { __typename: "ContentType"; slug: 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";
|
||||
status: Enum_Componentsetstextset_Status;
|
||||
text: string ;
|
||||
notes: string ;
|
||||
source_language: {
|
||||
__typename: "LanguageEntityResponse";
|
||||
data: {
|
||||
__typename: "LanguageEntity";
|
||||
attributes: { __typename: "Language"; name: string } ;
|
||||
} ;
|
||||
} ;
|
||||
transcribers: {
|
||||
__typename: "RecorderRelationResponseCollection";
|
||||
data: Array<{
|
||||
__typename: "RecorderEntity";
|
||||
attributes: {
|
||||
__typename: "Recorder";
|
||||
username: string;
|
||||
anonymize: boolean;
|
||||
anonymous_code: string;
|
||||
avatar: {
|
||||
__typename: "UploadFileEntityResponse";
|
||||
data: {
|
||||
__typename: "UploadFileEntity";
|
||||
attributes: {
|
||||
__typename: "UploadFile";
|
||||
name: string;
|
||||
alternativeText: string ;
|
||||
caption: string ;
|
||||
width: number ;
|
||||
height: number ;
|
||||
url: string;
|
||||
} ;
|
||||
} ;
|
||||
} ;
|
||||
} ;
|
||||
}>;
|
||||
} ;
|
||||
translators: {
|
||||
__typename: "RecorderRelationResponseCollection";
|
||||
data: Array<{
|
||||
__typename: "RecorderEntity";
|
||||
attributes: {
|
||||
__typename: "Recorder";
|
||||
username: string;
|
||||
anonymize: boolean;
|
||||
anonymous_code: string;
|
||||
avatar: {
|
||||
__typename: "UploadFileEntityResponse";
|
||||
data: {
|
||||
__typename: "UploadFileEntity";
|
||||
attributes: {
|
||||
__typename: "UploadFile";
|
||||
name: string;
|
||||
alternativeText: string ;
|
||||
caption: string ;
|
||||
width: number ;
|
||||
height: number ;
|
||||
url: string;
|
||||
} ;
|
||||
} ;
|
||||
} ;
|
||||
} ;
|
||||
}>;
|
||||
} ;
|
||||
proofreaders: {
|
||||
__typename: "RecorderRelationResponseCollection";
|
||||
data: Array<{
|
||||
__typename: "RecorderEntity";
|
||||
attributes: {
|
||||
__typename: "Recorder";
|
||||
username: string;
|
||||
anonymize: boolean;
|
||||
anonymous_code: string;
|
||||
avatar: {
|
||||
__typename: "UploadFileEntityResponse";
|
||||
data: {
|
||||
__typename: "UploadFileEntity";
|
||||
attributes: {
|
||||
__typename: "UploadFile";
|
||||
name: string;
|
||||
alternativeText: string ;
|
||||
caption: string ;
|
||||
width: number ;
|
||||
height: number ;
|
||||
url: string;
|
||||
} ;
|
||||
} ;
|
||||
} ;
|
||||
} ;
|
||||
}>;
|
||||
} ;
|
||||
} > ;
|
||||
thumbnail: {
|
||||
__typename: "UploadFileEntityResponse";
|
||||
data: {
|
||||
__typename: "UploadFileEntity";
|
||||
attributes: {
|
||||
__typename: "UploadFile";
|
||||
name: string;
|
||||
alternativeText: string ;
|
||||
caption: string ;
|
||||
width: number ;
|
||||
height: number ;
|
||||
url: string;
|
||||
} ;
|
||||
} ;
|
||||
} ;
|
||||
} ;
|
||||
}>;
|
||||
} ;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ import { readFileSync } from "fs";
|
|||
import {
|
||||
GetChronologyItemsQuery,
|
||||
GetChronologyItemsQueryVariables,
|
||||
GetContentQuery,
|
||||
GetContentQueryVariables,
|
||||
GetContentsSlugsQuery,
|
||||
GetContentsSlugsQueryVariables,
|
||||
GetContentTextQuery,
|
||||
GetContentTextQueryVariables,
|
||||
GetErasQuery,
|
||||
GetErasQueryVariables,
|
||||
GetLibraryItemQuery,
|
||||
|
|
@ -77,4 +83,25 @@ export async function getLibraryItem(
|
|||
): Promise<GetLibraryItemQuery> {
|
||||
const query = getQueryFromOperations("getLibraryItem");
|
||||
return await graphQL(query, JSON.stringify(variables));
|
||||
}
|
||||
}
|
||||
|
||||
export async function getContentsSlugs(
|
||||
variables: GetContentsSlugsQueryVariables
|
||||
): Promise<GetContentsSlugsQuery> {
|
||||
const query = getQueryFromOperations("getContentsSlugs");
|
||||
return await graphQL(query, JSON.stringify(variables));
|
||||
}
|
||||
|
||||
export async function getContent(
|
||||
variables: GetContentQueryVariables
|
||||
): Promise<GetContentQuery> {
|
||||
const query = getQueryFromOperations("getContent");
|
||||
return await graphQL(query, JSON.stringify(variables));
|
||||
}
|
||||
|
||||
export async function getContentText(
|
||||
variables: GetContentTextQueryVariables
|
||||
): Promise<GetContentTextQuery> {
|
||||
const query = getQueryFromOperations("getContentText");
|
||||
return await graphQL(query, JSON.stringify(variables));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1013,6 +1013,8 @@ type ComponentTranslationsTextSet {
|
|||
input ComponentTranslationsTitleFiltersInput {
|
||||
language: LanguageFiltersInput
|
||||
title: StringFilterInput
|
||||
subtitle: StringFilterInput
|
||||
pre_title: StringFilterInput
|
||||
and: [ComponentTranslationsTitleFiltersInput]
|
||||
or: [ComponentTranslationsTitleFiltersInput]
|
||||
not: ComponentTranslationsTitleFiltersInput
|
||||
|
|
@ -1022,12 +1024,16 @@ input ComponentTranslationsTitleInput {
|
|||
id: ID
|
||||
language: ID
|
||||
title: String
|
||||
subtitle: String
|
||||
pre_title: String
|
||||
}
|
||||
|
||||
type ComponentTranslationsTitle {
|
||||
id: ID!
|
||||
language: LanguageEntityResponse
|
||||
title: String!
|
||||
subtitle: String
|
||||
pre_title: String
|
||||
}
|
||||
|
||||
enum ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
import { GetStaticPaths, GetStaticProps } from "next";
|
||||
import { applyCustomAppProps } from "pages/_app";
|
||||
import { getContent, getContentsSlugs } from "graphql/operations";
|
||||
import { GetContentQuery } 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";
|
||||
|
||||
type Props = {
|
||||
content: GetContentQuery;
|
||||
};
|
||||
|
||||
applyCustomAppProps(Library, {
|
||||
useSubPanel: false,
|
||||
useContentPanel: true,
|
||||
});
|
||||
|
||||
export default function Library(props: Props): JSX.Element {
|
||||
const content = props.content.contents.data[0].attributes;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentPanel>
|
||||
<div className="grid place-items-center">
|
||||
<div className="grid place-items-center gap-12">
|
||||
<div>
|
||||
<Image
|
||||
className="rounded-lg"
|
||||
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>
|
||||
<div className="grid place-items-center">
|
||||
<p className="text-2xl">{content.titles[0].pre_title}</p>
|
||||
<h1 className="text-3xl">{content.titles[0].title}</h1>
|
||||
<h2 className="text-2xl">{content.titles[0].subtitle}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-flow-col gap-8">
|
||||
{content.type ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3 className="text-xl">Type</h3>
|
||||
<Button>{prettySlug(content.type.data.attributes.slug)}</Button>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{content.categories.data.length > 0 ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3 className="text-xl">Categories</h3>
|
||||
{content.categories.data.map((category) => (
|
||||
<Button key={category.id}>{category.attributes.name}</Button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<HorizontalLine />
|
||||
|
||||
{content.text_set.length > 0 ? (
|
||||
<Button href={`/content/${content.slug}/read/`}>Read content</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{content.audio_set.length > 0 ? (
|
||||
<Button href={`/content/${content.slug}/listen/`}>Listen content</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{content.video_set.length > 0 ? (
|
||||
<Button href={`/content/${content.slug}/watch/`}>View content</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</ContentPanel>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps = async (context) => {
|
||||
if (context.params) {
|
||||
if (context.params.slug && context.locale) {
|
||||
return {
|
||||
props: {
|
||||
content: await getContent({
|
||||
slug: context.params.slug,
|
||||
language_code: context.locale,
|
||||
}),
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
return { props: {} };
|
||||
};
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
type Path = {
|
||||
params: {
|
||||
slug: string;
|
||||
};
|
||||
};
|
||||
|
||||
const data = await getContentsSlugs({});
|
||||
const paths: Path[] = [];
|
||||
data.contents.data.map((item) => {
|
||||
paths.push({ params: { slug: item.attributes.slug } });
|
||||
});
|
||||
return {
|
||||
paths,
|
||||
fallback: false,
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
import { GetStaticPaths, GetStaticProps } from "next";
|
||||
import { applyCustomAppProps } from "pages/_app";
|
||||
import { getContentsSlugs, getContentText } from "graphql/operations";
|
||||
import { GetContentTextQuery } 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";
|
||||
|
||||
type Props = {
|
||||
content: GetContentTextQuery;
|
||||
};
|
||||
|
||||
applyCustomAppProps(Library, {
|
||||
useSubPanel: false,
|
||||
useContentPanel: true,
|
||||
});
|
||||
|
||||
export default function Library(props: Props): JSX.Element {
|
||||
const content = props.content.contents.data[0].attributes;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentPanel>
|
||||
<div className="grid place-items-center">
|
||||
<div className="grid place-items-center gap-12">
|
||||
<div>
|
||||
<Image
|
||||
className="rounded-lg"
|
||||
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>
|
||||
<div className="grid place-items-center">
|
||||
<p className="text-2xl">{content.titles[0].pre_title}</p>
|
||||
<h1 className="text-3xl">{content.titles[0].title}</h1>
|
||||
<h2 className="text-2xl">{content.titles[0].subtitle}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-flow-col gap-8">
|
||||
{content.type ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3 className="text-xl">Type</h3>
|
||||
<Button>{prettySlug(content.type.data.attributes.slug)}</Button>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{content.categories.data.length > 0 ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3 className="text-xl">Categories</h3>
|
||||
{content.categories.data.map((category) => (
|
||||
<Button key={category.id}>{category.attributes.name}</Button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<HorizontalLine />
|
||||
|
||||
{content.text_set.length > 0 ? (
|
||||
<div className="prose">
|
||||
{content.text_set[0].text}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</ContentPanel>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps = async (context) => {
|
||||
if (context.params) {
|
||||
if (context.params.slug && context.locale) {
|
||||
return {
|
||||
props: {
|
||||
content: await getContentText({
|
||||
slug: context.params.slug,
|
||||
language_code: context.locale,
|
||||
}),
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
return { props: {} };
|
||||
};
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
type Path = {
|
||||
params: {
|
||||
slug: string;
|
||||
};
|
||||
};
|
||||
|
||||
const data = await getContentsSlugs({});
|
||||
const paths: Path[] = [];
|
||||
data.contents.data.map((item) => {
|
||||
paths.push({ params: { slug: item.attributes.slug } });
|
||||
});
|
||||
return {
|
||||
paths,
|
||||
fallback: false,
|
||||
};
|
||||
};
|
||||
|
|
@ -7,7 +7,6 @@ import { applyCustomAppProps } from "pages/_app";
|
|||
import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
|
||||
import { GetLibraryItemQuery } from "graphql/operations-types";
|
||||
import {
|
||||
capitalizeString,
|
||||
convertMmToInch,
|
||||
getAssetURL,
|
||||
prettyDate,
|
||||
|
|
@ -78,7 +77,7 @@ export default function Library(props: Props): JSX.Element {
|
|||
</SubPanel>
|
||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||
<div className="grid place-items-center gap-12">
|
||||
<div className="cursor-pointer grid items-end relative hover:rounded-3xl w-96 max-w-full mb-16">
|
||||
<div className="cursor-pointer grid items-end relative w-96 max-w-full mb-16">
|
||||
<div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
|
||||
{item.thumbnail.data ? (
|
||||
<Image
|
||||
|
|
@ -378,55 +377,26 @@ export default function Library(props: Props): JSX.Element {
|
|||
|
||||
{content.attributes.scan_set.length > 0 ? (
|
||||
<Button
|
||||
href={`content/${content.attributes.content.data.attributes.slug}/scans/`}
|
||||
href={`/content/${content.attributes.content.data.attributes.slug}/scans/`}
|
||||
>
|
||||
View scan
|
||||
View scans
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{content.attributes.content.data?.attributes.text_set
|
||||
.length > 0 ? (
|
||||
{content.attributes.content.data ? (
|
||||
<Button
|
||||
href={`content/${content.attributes.content.data.attributes.slug}/read/`}
|
||||
href={`/content/${content.attributes.content.data.attributes.slug}`}
|
||||
>
|
||||
Read content
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{content.attributes.content.data?.attributes.audio_set
|
||||
.length > 0 ? (
|
||||
<Button
|
||||
href={`content/${content.attributes.content.data.attributes.slug}/listen/`}
|
||||
>
|
||||
Listen content
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{content.attributes.content.data?.attributes.video_set
|
||||
.length > 0 ? (
|
||||
<Button
|
||||
href={`content/${content.attributes.content.data.attributes.slug}/watch/`}
|
||||
>
|
||||
View content
|
||||
Open content
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{content.attributes.scan_set.length === 0 &&
|
||||
(!content.attributes.content.data ||
|
||||
(content.attributes.content.data.attributes.text_set
|
||||
.length === 0 &&
|
||||
content.attributes.content.data.attributes.audio_set
|
||||
.length === 0 &&
|
||||
content.attributes.content.data.attributes.video_set
|
||||
.length === 0))
|
||||
!content.attributes.content.data
|
||||
? "The content is not available"
|
||||
: ""}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue