updated Blogposts
This commit is contained in:
parent
98aaea1566
commit
ab40b56d0b
|
@ -1,18 +1,21 @@
|
|||
import Head from 'next/head';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { METADATA } from '../constants';
|
||||
import { PageType, setPageType, setPostTitle } from '../state/navigation';
|
||||
import { IPost } from '../types/cms';
|
||||
import { generateTitle } from '../utils/metadata';
|
||||
|
||||
import { Article } from '../components/article/Article';
|
||||
import CustomHead from './CustomHead';
|
||||
|
||||
interface Props {
|
||||
post: IPost;
|
||||
}
|
||||
|
||||
// Parallax on bg as mouse moves
|
||||
export default function BlogPost({ post, url }: { post: IPost; url: string }) {
|
||||
export default function BlogPost(props: Props) {
|
||||
const { post } = props;
|
||||
const dispatch = useDispatch();
|
||||
const pageTitle = generateTitle(post?.title);
|
||||
const imageURL = post?.featureImage?.imageUrl;
|
||||
|
||||
useEffect(() => {
|
||||
if (post) {
|
||||
|
@ -23,28 +26,23 @@ export default function BlogPost({ post, url }: { post: IPost; url: string }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{pageTitle}</title>
|
||||
<meta name="description" content={post?.description}></meta>
|
||||
<meta property="og:title" content={pageTitle} key="ogtitle" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content={post?.description}
|
||||
key="ogdesc"
|
||||
/>
|
||||
<meta property="og:type" content="article" />
|
||||
<meta name="image_src" content={imageURL} />
|
||||
<meta name="image_url" content={imageURL} />
|
||||
<meta name="keywords" content={post?.tags?.join(' ')} />
|
||||
<meta property="og:image" content={imageURL} key="ogimage" />
|
||||
<meta property="og:url" content={url} />
|
||||
<link rel="canonical" href={url}></link>{' '}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={pageTitle} />
|
||||
<meta name="twitter:description" content={post?.description} />
|
||||
<meta name="twitter:image" content={imageURL} />
|
||||
</Head>
|
||||
|
||||
<CustomHead
|
||||
title={post?.title}
|
||||
metadata={{
|
||||
TYPE: METADATA.BLOG_PAGE.TYPE,
|
||||
DESCRIPTION: post?.description,
|
||||
OG_IMAGE: {
|
||||
URL: post?.featureImage.imageUrl ?? METADATA.OG_IMAGE.URL,
|
||||
WIDTH: Number(post?.featureImage?.width) ?? METADATA.OG_IMAGE.WIDTH,
|
||||
HEIGHT:
|
||||
Number(post?.featureImage?.height) ?? METADATA.OG_IMAGE.HEIGHT,
|
||||
ALT: post?.featureImage?.title ?? METADATA.OG_IMAGE.ALT,
|
||||
},
|
||||
TAGS: post.tags,
|
||||
ARTICLE_SECTION: post.tags[0],
|
||||
PUBLISHED_TIME: post.publishedDateISO,
|
||||
}}
|
||||
/>
|
||||
<div className="bg-alt">
|
||||
<Article {...post} />
|
||||
</div>
|
||||
|
|
|
@ -20,6 +20,10 @@ export function generateTitle(prefix: string) {
|
|||
: METADATA.TITLE;
|
||||
}
|
||||
|
||||
export function generateURL(prefix: string) {
|
||||
return prefix ? `${METADATA.HOST_URL}${prefix}` : METADATA.HOST_URL;
|
||||
}
|
||||
|
||||
const METADATA = {
|
||||
HOST_URL: 'https://oxen.io',
|
||||
SITE_NAME: 'Oxen',
|
||||
|
|
|
@ -48,8 +48,8 @@ export const getStaticPaths: GetStaticPaths = async () => {
|
|||
|
||||
export async function getStaticProps({ params }) {
|
||||
console.log(`Building Page %c${params.page}`, 'color: purple;');
|
||||
const href = params?.page ?? '';
|
||||
const id = unslugify(String(href));
|
||||
const url = params?.page ?? '';
|
||||
const id = unslugify(String(url));
|
||||
|
||||
try {
|
||||
const cms = new CmsApi();
|
||||
|
@ -58,7 +58,7 @@ export async function getStaticProps({ params }) {
|
|||
if (SideMenuItem[id]) {
|
||||
page = await cms.fetchPageById(SideMenuItem[id]);
|
||||
} else {
|
||||
page = await cms.fetchEntryBySlug(href, 'post');
|
||||
page = await cms.fetchEntryBySlug(url, 'post');
|
||||
// embedded links in post body need metadata for preview
|
||||
page.body = await generateLinkMeta(page.body);
|
||||
}
|
||||
|
@ -66,7 +66,6 @@ export async function getStaticProps({ params }) {
|
|||
return {
|
||||
props: {
|
||||
page,
|
||||
href: `/${href}`,
|
||||
},
|
||||
revalidate: CMS.CONTENT_REVALIDATE_RATE,
|
||||
};
|
||||
|
@ -79,15 +78,9 @@ export async function getStaticProps({ params }) {
|
|||
}
|
||||
}
|
||||
|
||||
export default function Page({
|
||||
page,
|
||||
href,
|
||||
}: {
|
||||
page: ISplitPage | IPost;
|
||||
href: string;
|
||||
}) {
|
||||
export default function Page({ page }: { page: ISplitPage | IPost }) {
|
||||
if (isPost(page)) {
|
||||
return <BlogPost post={page} url={href} />;
|
||||
return <BlogPost post={page} />;
|
||||
} else {
|
||||
return <RichPage page={page} />;
|
||||
}
|
||||
|
|
|
@ -23,7 +23,7 @@ import {
|
|||
ITagList,
|
||||
} from '../types/cms';
|
||||
import isLive from '../utils/environment';
|
||||
import { generateURL } from '../utils/metadata';
|
||||
import { generateURL } from '../constants/metadata';
|
||||
import { fetchContent } from './embed';
|
||||
|
||||
function loadOptions(options: any) {
|
||||
|
@ -279,6 +279,7 @@ export class CmsApi {
|
|||
body: rawPost.body ?? null,
|
||||
subtitle: rawPost.subtitle ?? null,
|
||||
description: rawPost.description ?? null,
|
||||
publishedDateISO: rawPost.date,
|
||||
publishedDate: format(parseISO(rawPost.date), 'dd MMMM yyyy'),
|
||||
slug: rawPost.slug,
|
||||
tags: rawPost?.tags, //?.map(t => t?.fields?.label) ?? [],
|
||||
|
|
|
@ -28,6 +28,7 @@ export interface IPost {
|
|||
description: string;
|
||||
body: Document;
|
||||
author?: IAuthor;
|
||||
publishedDateISO: string;
|
||||
publishedDate: string;
|
||||
featureImage?: IFigureImage;
|
||||
tags: Array<string>;
|
||||
|
|
|
@ -1,12 +0,0 @@
|
|||
import { METADATA } from '../constants';
|
||||
import { titleCase } from './text';
|
||||
|
||||
// DELETE THIS FILE WHEN DONE
|
||||
|
||||
export function generateTitle(prefix: string) {
|
||||
return prefix ? `${titleCase(prefix)} - ${METADATA.TITLE}` : METADATA.TITLE;
|
||||
}
|
||||
|
||||
export function generateURL(prefix: string) {
|
||||
return prefix ? `${METADATA.HOST_URL}${prefix}` : METADATA.HOST_URL;
|
||||
}
|
Loading…
Reference in New Issue