diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index dc6b638..a3e08ee 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -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 + } + } + } + } + } + } +} diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index c9d1675..f597959 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -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; + language_code: InputMaybe; +}>; + +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; + language_code: InputMaybe; +}>; + +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; + } ; + } ; + } ; + } ; + }>; + } ; +}; diff --git a/src/graphql/operations.ts b/src/graphql/operations.ts index c88b334..a088cc4 100644 --- a/src/graphql/operations.ts +++ b/src/graphql/operations.ts @@ -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 { const query = getQueryFromOperations("getLibraryItem"); return await graphQL(query, JSON.stringify(variables)); -} \ No newline at end of file +} + +export async function getContentsSlugs( + variables: GetContentsSlugsQueryVariables +): Promise { + const query = getQueryFromOperations("getContentsSlugs"); + return await graphQL(query, JSON.stringify(variables)); +} + +export async function getContent( + variables: GetContentQueryVariables +): Promise { + const query = getQueryFromOperations("getContent"); + return await graphQL(query, JSON.stringify(variables)); +} + +export async function getContentText( + variables: GetContentTextQueryVariables +): Promise { + const query = getQueryFromOperations("getContentText"); + return await graphQL(query, JSON.stringify(variables)); +} diff --git a/src/graphql/schema.graphql b/src/graphql/schema.graphql index e8050d3..b136f8c 100644 --- a/src/graphql/schema.graphql +++ b/src/graphql/schema.graphql @@ -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 { diff --git a/src/pages/content/[slug]/index.tsx b/src/pages/content/[slug]/index.tsx new file mode 100644 index 0000000..b8a5aff --- /dev/null +++ b/src/pages/content/[slug]/index.tsx @@ -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 ( + <> + +
+
+
+ {content.thumbnail.data.attributes.alternativeText} +
+
+

{content.titles[0].pre_title}

+

{content.titles[0].title}

+

{content.titles[0].subtitle}

+
+
+ +
+ {content.type ? ( +
+

Type

+ +
+ ) : ( + "" + )} + + {content.categories.data.length > 0 ? ( +
+

Categories

+ {content.categories.data.map((category) => ( + + ))} +
+ ) : ( + "" + )} +
+ + + + {content.text_set.length > 0 ? ( + + ) : ( + "" + )} + + {content.audio_set.length > 0 ? ( + + ) : ( + "" + )} + + {content.video_set.length > 0 ? ( + + ) : ( + "" + )} +
+
+ + ); +} + +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, + }; +}; diff --git a/src/pages/content/[slug]/read.tsx b/src/pages/content/[slug]/read.tsx new file mode 100644 index 0000000..cc1cea4 --- /dev/null +++ b/src/pages/content/[slug]/read.tsx @@ -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 ( + <> + +
+
+
+ {content.thumbnail.data.attributes.alternativeText} +
+
+

{content.titles[0].pre_title}

+

{content.titles[0].title}

+

{content.titles[0].subtitle}

+
+
+ +
+ {content.type ? ( +
+

Type

+ +
+ ) : ( + "" + )} + + {content.categories.data.length > 0 ? ( +
+

Categories

+ {content.categories.data.map((category) => ( + + ))} +
+ ) : ( + "" + )} +
+ + + + {content.text_set.length > 0 ? ( +
+ {content.text_set[0].text} +
+ ) : ( + "" + )} +
+
+ + ); +} + +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, + }; +}; diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index af683f2..9927e66 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -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 {
-
+
{item.thumbnail.data ? ( 0 ? ( ) : ( "" )} - {content.attributes.content.data?.attributes.text_set - .length > 0 ? ( + {content.attributes.content.data ? ( - ) : ( - "" - )} - - {content.attributes.content.data?.attributes.audio_set - .length > 0 ? ( - - ) : ( - "" - )} - - {content.attributes.content.data?.attributes.video_set - .length > 0 ? ( - ) : ( "" )} {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" : ""}