106 lines
4.7 KiB
TypeScript
106 lines
4.7 KiB
TypeScript
/**
|
|
Copyright 2021 Forestry.io Holdings, Inc.
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { Container } from "../util/container";
|
|
import { Section } from "../util/section";
|
|
import format from "date-fns/format";
|
|
import { TinaMarkdown } from "tinacms/dist/rich-text";
|
|
import { PostType } from "../../pages/posts/[filename]";
|
|
import { tinaField } from "tinacms/dist/react";
|
|
import richTextComponents from "../rich-text/rich-text-definitions";
|
|
|
|
export const Post = (props: PostType) => {
|
|
const date = new Date(props.date);
|
|
let formattedDate = "";
|
|
if (!isNaN(date.getTime())) {
|
|
formattedDate = format(date, "MMM dd, yyyy");
|
|
}
|
|
|
|
return (
|
|
<Section className="flex-1">
|
|
<Container width="small" className={ "flex-1 pb-2" } size="large">
|
|
<h2
|
|
data-tina-field={ tinaField(props, "title") }
|
|
className={ "w-full relative mb-8 text-6xl font-extrabold tracking-normal text-center title-font" }
|
|
>
|
|
<span
|
|
className={ "bg-clip-text text-transparent bg-gradient-to-r" }
|
|
>
|
|
{ props.title }
|
|
</span>
|
|
</h2>
|
|
<div
|
|
data-tina-field={ tinaField(props, "author") }
|
|
className="flex items-center justify-center mb-16"
|
|
>
|
|
{ props.author && (
|
|
<>
|
|
<div className="flex-shrink-0 mr-4">
|
|
<img
|
|
data-tina-field={ tinaField(props.author, "avatar") }
|
|
className="h-14 w-14 object-cover rounded-full shadow-sm"
|
|
src={ props.author.avatar }
|
|
alt={ props.author.name }
|
|
/>
|
|
</div>
|
|
<p
|
|
data-tina-field={ tinaField(props.author, "name") }
|
|
className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white"
|
|
>
|
|
{ props.author.name }
|
|
</p>
|
|
<span className="font-bold text-gray-200 dark:text-gray-500 mx-2">
|
|
—
|
|
</span>
|
|
</>
|
|
) }
|
|
<p
|
|
data-tina-field={ tinaField(props, "date") }
|
|
className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150"
|
|
>
|
|
{ formattedDate }
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
{ props.heroImg && (
|
|
<div className="px-4 w-full">
|
|
<div
|
|
data-tina-field={ tinaField(props, "heroImg") }
|
|
className="relative max-w-4xl lg:max-w-5xl mx-auto"
|
|
>
|
|
<img
|
|
src={ props.heroImg }
|
|
className="absolute block rounded-lg w-full h-auto blur-2xl brightness-150 contrast-[0.9] dark:brightness-150 saturate-200 opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-hard-light"
|
|
aria-hidden="true"
|
|
/>
|
|
<img
|
|
src={ props.heroImg }
|
|
alt={ props.title }
|
|
className="relative z-10 mb-14 block rounded-lg w-full h-auto opacity-100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) }
|
|
<Container className={ "flex-1 pt-4" } width="small" size="large">
|
|
<div
|
|
data-tina-field={ tinaField(props, "_body") }
|
|
className="prose dark:prose-dark w-full max-w-none"
|
|
>
|
|
<TinaMarkdown components={ richTextComponents } content={ props._body } />
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
};
|