127 lines
3.5 KiB
TypeScript
127 lines
3.5 KiB
TypeScript
import { GetStaticPaths, GetStaticProps } from "next";
|
|
import {
|
|
getContent,
|
|
getContentsSlugs,
|
|
getWebsiteInterface,
|
|
} from "graphql/operations";
|
|
import {
|
|
GetContentQuery,
|
|
GetWebsiteInterfaceQuery,
|
|
} from "graphql/operations-types";
|
|
import ContentPanel from "components/Panels/ContentPanel";
|
|
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";
|
|
import { prettyinlineTitle, prettySlug } from "queries/helpers";
|
|
|
|
type ContentIndexProps = {
|
|
content: GetContentQuery;
|
|
langui: GetWebsiteInterfaceQuery;
|
|
};
|
|
|
|
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="/contents" title={"Contents"} langui={langui} />
|
|
<HorizontalLine />
|
|
</SubPanel>
|
|
);
|
|
const contentPanel = (
|
|
<ContentPanel>
|
|
<div className="grid place-items-center">
|
|
<ThumbnailHeader content={content} langui={langui} />
|
|
|
|
<HorizontalLine />
|
|
|
|
{content.text_set.length > 0 ? (
|
|
<Button href={`/contents/${content.slug}/read/`}>
|
|
{langui.content_read_content}
|
|
</Button>
|
|
) : (
|
|
""
|
|
)}
|
|
|
|
{content.audio_set.length > 0 ? (
|
|
<Button href={`/contents/${content.slug}/listen/`}>
|
|
{langui.content_listen_content}
|
|
</Button>
|
|
) : (
|
|
""
|
|
)}
|
|
|
|
{content.video_set.length > 0 ? (
|
|
<Button href={`/contents/${content.slug}/watch/`}>
|
|
{langui.content_watch_content}
|
|
</Button>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
</ContentPanel>
|
|
);
|
|
|
|
return (
|
|
<AppLayout
|
|
navTitle="Contents"
|
|
title={
|
|
content.titles.length > 0
|
|
? prettyinlineTitle(content.titles[0].pre_title, content.titles[0].title, content.titles[0].subtitle)
|
|
: prettySlug(content.slug)
|
|
}
|
|
thumbnail={content.thumbnail.data.attributes}
|
|
langui={langui}
|
|
contentPanel={contentPanel}
|
|
subPanel={subPanel}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export const getStaticProps: GetStaticProps = async (context) => {
|
|
if (context.params) {
|
|
if (context.params.slug && context.locale) {
|
|
if (context.params.slug instanceof Array)
|
|
context.params.slug = context.params.slug.join("");
|
|
|
|
const props: ContentIndexProps = {
|
|
content: await getContent({
|
|
slug: context.params.slug,
|
|
language_code: context.locale,
|
|
}),
|
|
langui: await getWebsiteInterface({
|
|
language_code: context.locale,
|
|
}),
|
|
};
|
|
return {
|
|
props: props,
|
|
};
|
|
}
|
|
}
|
|
return { props: {} };
|
|
};
|
|
|
|
export const getStaticPaths: GetStaticPaths = async (context) => {
|
|
type Path = {
|
|
params: {
|
|
slug: string;
|
|
};
|
|
locale: string;
|
|
};
|
|
|
|
const data = await getContentsSlugs({});
|
|
const paths: Path[] = [];
|
|
data.contents.data.map((item) => {
|
|
context.locales?.map((local) => {
|
|
paths.push({ params: { slug: item.attributes.slug }, locale: local });
|
|
});
|
|
});
|
|
return {
|
|
paths,
|
|
fallback: false,
|
|
};
|
|
};
|