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

Show content and text

This commit is contained in:
DrMint 2022-02-08 16:49:15 +01:00
parent 1d42821eed
commit b775e25b70
7 changed files with 851 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
src/graphql/operation.graphql
View File

@ -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
}
}
}
}
}
}
}

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

@ -56,6 +56,13 @@ export enum Enum_Componenttranslationschronologyitem_Status {
Done = "Done", Done = "Done",
} }
export enum Enum_Componentsetstextset_Status {
Incomplete = "Incomplete",
Draft = "Draft",
Review = "Review",
Done = "Done",
}
// __________________________________________________________________ // __________________________________________________________________
export type GetErasQueryVariables = Exact<{ 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;
} ;
} ;
} ;
} ;
}>;
} ;
};

27
src/graphql/operations.ts
View File

@ -3,6 +3,12 @@ import { readFileSync } from "fs";
import { import {
GetChronologyItemsQuery, GetChronologyItemsQuery,
GetChronologyItemsQueryVariables, GetChronologyItemsQueryVariables,
GetContentQuery,
GetContentQueryVariables,
GetContentsSlugsQuery,
GetContentsSlugsQueryVariables,
GetContentTextQuery,
GetContentTextQueryVariables,
GetErasQuery, GetErasQuery,
GetErasQueryVariables, GetErasQueryVariables,
GetLibraryItemQuery, GetLibraryItemQuery,
@ -78,3 +84,24 @@ export async function getLibraryItem(
const query = getQueryFromOperations("getLibraryItem"); const query = getQueryFromOperations("getLibraryItem");
return await graphQL(query, JSON.stringify(variables)); 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));
}

6
src/graphql/schema.graphql
View File

@ -1013,6 +1013,8 @@ type ComponentTranslationsTextSet {
input ComponentTranslationsTitleFiltersInput { input ComponentTranslationsTitleFiltersInput {
language: LanguageFiltersInput language: LanguageFiltersInput
title: StringFilterInput title: StringFilterInput
subtitle: StringFilterInput
pre_title: StringFilterInput
and: [ComponentTranslationsTitleFiltersInput] and: [ComponentTranslationsTitleFiltersInput]
or: [ComponentTranslationsTitleFiltersInput] or: [ComponentTranslationsTitleFiltersInput]
not: ComponentTranslationsTitleFiltersInput not: ComponentTranslationsTitleFiltersInput
@ -1022,12 +1024,16 @@ input ComponentTranslationsTitleInput {
id: ID id: ID
language: ID language: ID
title: String title: String
subtitle: String
pre_title: String
} }
type ComponentTranslationsTitle { type ComponentTranslationsTitle {
id: ID! id: ID!
language: LanguageEntityResponse language: LanguageEntityResponse
title: String! title: String!
subtitle: String
pre_title: String
} }
enum ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS { enum ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS {

123
src/pages/content/[slug]/index.tsx Normal file
View File

@ -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,
};
};

113
src/pages/content/[slug]/read.tsx Normal file
View File

@ -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,
};
};

44
src/pages/library/[slug].tsx
View File

@ -7,7 +7,6 @@ import { applyCustomAppProps } from "pages/_app";
import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations"; import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
import { GetLibraryItemQuery } from "graphql/operations-types"; import { GetLibraryItemQuery } from "graphql/operations-types";
import { import {
capitalizeString,
convertMmToInch, convertMmToInch,
getAssetURL, getAssetURL,
prettyDate, prettyDate,
@ -78,7 +77,7 @@ export default function Library(props: Props): JSX.Element {
</SubPanel> </SubPanel>
<ContentPanel width={ContentPanelWidthSizes.large}> <ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid place-items-center gap-12"> <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> <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
{item.thumbnail.data ? ( {item.thumbnail.data ? (
<Image <Image
@ -378,55 +377,26 @@ export default function Library(props: Props): JSX.Element {
{content.attributes.scan_set.length > 0 ? ( {content.attributes.scan_set.length > 0 ? (
<Button <Button
href={`content/${content.attributes.content.data.attributes.slug}/scans/`} href={`/content/${content.attributes.content.data.attributes.slug}/scans/`}
> >
View scan View scans
</Button> </Button>
) : ( ) : (
"" ""
)} )}
{content.attributes.content.data?.attributes.text_set {content.attributes.content.data ? (
.length > 0 ? (
<Button <Button
href={`content/${content.attributes.content.data.attributes.slug}/read/`} href={`/content/${content.attributes.content.data.attributes.slug}`}
> >
Read content Open 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
</Button> </Button>
) : ( ) : (
"" ""
)} )}
{content.attributes.scan_set.length === 0 && {content.attributes.scan_set.length === 0 &&
(!content.attributes.content.data || !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))
? "The content is not available" ? "The content is not available"
: ""} : ""}
</div> </div>