2022-03-17 16:05:34 +00:00
|
|
|
import AppLayout from "components/AppLayout";
|
|
|
|
import Chip from "components/Chip";
|
|
|
|
import ThumbnailHeader from "components/Content/ThumbnailHeader";
|
|
|
|
import HorizontalLine from "components/HorizontalLine";
|
2022-03-20 12:21:30 +00:00
|
|
|
import LanguageSwitcher from "components/LanguageSwitcher";
|
2022-03-17 16:05:34 +00:00
|
|
|
import Markdawn from "components/Markdown/Markdawn";
|
|
|
|
import TOC from "components/Markdown/TOC";
|
|
|
|
import ReturnButton, {
|
|
|
|
ReturnButtonType,
|
|
|
|
} from "components/PanelComponents/ReturnButton";
|
|
|
|
import ContentPanel from "components/Panels/ContentPanel";
|
|
|
|
import SubPanel from "components/Panels/SubPanel";
|
|
|
|
import RecorderChip from "components/RecorderChip";
|
|
|
|
import ToolTip from "components/ToolTip";
|
2022-03-28 08:43:25 +00:00
|
|
|
import { getPost, getPostsSlugs } from "graphql/operations";
|
2022-03-18 13:10:30 +00:00
|
|
|
import { GetPostQuery, StrapiImage } from "graphql/operations-types";
|
2022-03-27 15:01:14 +00:00
|
|
|
import {
|
|
|
|
GetStaticPathsContext,
|
|
|
|
GetStaticPathsResult,
|
|
|
|
GetStaticPropsContext,
|
|
|
|
} from "next";
|
2022-03-17 16:05:34 +00:00
|
|
|
import { useRouter } from "next/router";
|
|
|
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
2022-03-28 08:43:25 +00:00
|
|
|
import {
|
|
|
|
getLocalesFromLanguages,
|
|
|
|
getStatusDescription,
|
|
|
|
prettySlug,
|
|
|
|
} from "queries/helpers";
|
2022-03-17 16:05:34 +00:00
|
|
|
|
|
|
|
interface PostProps extends AppStaticProps {
|
|
|
|
post: GetPostQuery["posts"]["data"][number]["attributes"];
|
|
|
|
postId: GetPostQuery["posts"]["data"][number]["id"];
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function LibrarySlug(props: PostProps): JSX.Element {
|
2022-03-28 08:43:25 +00:00
|
|
|
const { post, langui } = props;
|
|
|
|
const locales = getLocalesFromLanguages(post.translations_languages);
|
2022-03-17 16:05:34 +00:00
|
|
|
const router = useRouter();
|
|
|
|
|
2022-03-18 13:10:30 +00:00
|
|
|
const thumbnail: StrapiImage | undefined =
|
|
|
|
post.translations.length > 0 && post.translations[0].thumbnail.data
|
|
|
|
? post.translations[0].thumbnail.data.attributes
|
|
|
|
: post.thumbnail.data
|
|
|
|
? post.thumbnail.data.attributes
|
|
|
|
: undefined;
|
|
|
|
|
2022-03-17 16:05:34 +00:00
|
|
|
const subPanel = (
|
|
|
|
<SubPanel>
|
|
|
|
<ReturnButton
|
|
|
|
href="/news"
|
|
|
|
title={langui.news}
|
|
|
|
langui={langui}
|
2022-03-27 15:01:14 +00:00
|
|
|
displayOn={ReturnButtonType.desktop}
|
2022-03-17 16:05:34 +00:00
|
|
|
horizontalLine
|
|
|
|
/>
|
|
|
|
|
|
|
|
{post.translations.length > 0 && (
|
|
|
|
<div className="grid grid-flow-col place-items-center place-content-center gap-2">
|
|
|
|
<p className="font-headers">{langui.status}:</p>
|
|
|
|
|
|
|
|
<ToolTip
|
|
|
|
content={getStatusDescription(post.translations[0].status, langui)}
|
|
|
|
maxWidth={"20rem"}
|
|
|
|
>
|
|
|
|
<Chip>{post.translations[0].status}</Chip>
|
|
|
|
</ToolTip>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{post.authors.data.length > 0 && (
|
|
|
|
<div>
|
|
|
|
<p className="font-headers">{"Authors"}:</p>
|
|
|
|
<div className="grid place-items-center place-content-center gap-2">
|
|
|
|
{post.authors.data.map((author) => (
|
|
|
|
<RecorderChip key={author.id} langui={langui} recorder={author} />
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<HorizontalLine />
|
|
|
|
|
|
|
|
{post.translations.length > 0 && post.translations[0].body && (
|
|
|
|
<TOC
|
|
|
|
text={post.translations[0].body}
|
|
|
|
title={post.translations[0].title}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</SubPanel>
|
|
|
|
);
|
|
|
|
const contentPanel = (
|
|
|
|
<ContentPanel>
|
|
|
|
<ReturnButton
|
|
|
|
href="/news"
|
|
|
|
title={langui.news}
|
|
|
|
langui={langui}
|
2022-03-27 15:01:14 +00:00
|
|
|
displayOn={ReturnButtonType.mobile}
|
2022-03-17 16:05:34 +00:00
|
|
|
className="mb-10"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<ThumbnailHeader
|
2022-03-18 13:10:30 +00:00
|
|
|
thumbnail={thumbnail}
|
2022-03-17 16:05:34 +00:00
|
|
|
title={
|
|
|
|
post.translations.length > 0
|
|
|
|
? post.translations[0].title
|
|
|
|
: prettySlug(post.slug)
|
|
|
|
}
|
|
|
|
description={
|
|
|
|
post.translations.length > 0
|
|
|
|
? post.translations[0].excerpt
|
|
|
|
: undefined
|
|
|
|
}
|
|
|
|
langui={langui}
|
|
|
|
categories={post.categories}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<HorizontalLine />
|
|
|
|
|
2022-03-27 15:01:14 +00:00
|
|
|
{locales.includes(router.locale ?? "en") ? (
|
2022-03-28 08:43:25 +00:00
|
|
|
<Markdawn text={post.translations[0].body} />
|
2022-03-20 12:21:30 +00:00
|
|
|
) : (
|
|
|
|
<LanguageSwitcher
|
|
|
|
locales={locales}
|
|
|
|
languages={props.languages}
|
|
|
|
langui={props.langui}
|
|
|
|
/>
|
2022-03-17 16:05:34 +00:00
|
|
|
)}
|
|
|
|
</ContentPanel>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AppLayout
|
|
|
|
navTitle={langui.news}
|
|
|
|
title={
|
|
|
|
post.translations.length > 0
|
|
|
|
? post.translations[0].title
|
|
|
|
: prettySlug(post.slug)
|
|
|
|
}
|
|
|
|
contentPanel={contentPanel}
|
|
|
|
subPanel={subPanel}
|
2022-03-18 13:10:30 +00:00
|
|
|
thumbnail={thumbnail}
|
2022-03-17 16:05:34 +00:00
|
|
|
{...props}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-03-27 15:01:14 +00:00
|
|
|
export async function getStaticProps(
|
|
|
|
context: GetStaticPropsContext
|
|
|
|
): Promise<{ props: PostProps }> {
|
|
|
|
const slug = context.params?.slug?.toString() ?? "";
|
2022-03-17 16:05:34 +00:00
|
|
|
const post = (
|
|
|
|
await getPost({
|
2022-03-20 12:21:30 +00:00
|
|
|
slug: slug,
|
2022-03-27 15:01:14 +00:00
|
|
|
language_code: context.locale ?? "en",
|
2022-03-17 16:05:34 +00:00
|
|
|
})
|
|
|
|
).posts.data[0];
|
|
|
|
const props: PostProps = {
|
|
|
|
...(await getAppStaticProps(context)),
|
|
|
|
post: post.attributes,
|
|
|
|
postId: post.id,
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
props: props,
|
|
|
|
};
|
2022-03-27 15:01:14 +00:00
|
|
|
}
|
2022-03-17 16:05:34 +00:00
|
|
|
|
2022-03-27 15:01:14 +00:00
|
|
|
export async function getStaticPaths(
|
|
|
|
context: GetStaticPathsContext
|
|
|
|
): Promise<GetStaticPathsResult> {
|
|
|
|
const posts = await getPostsSlugs({});
|
|
|
|
const paths: GetStaticPathsResult["paths"] = [];
|
|
|
|
posts.posts.data.map((item) => {
|
2022-03-17 16:05:34 +00:00
|
|
|
context.locales?.map((local) => {
|
|
|
|
paths.push({ params: { slug: item.attributes.slug }, locale: local });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
return {
|
|
|
|
paths,
|
|
|
|
fallback: false,
|
|
|
|
};
|
2022-03-27 15:01:14 +00:00
|
|
|
}
|