mirror of
https://github.com/oxen-io/oxen-website.git
synced 2023-12-13 21:00:18 +01:00
support contentful's native tags
This commit is contained in:
parent
1735af5458
commit
9fba6918e5
|
@ -1,5 +1,5 @@
|
||||||
import classNames from 'classnames';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
tag: string;
|
tag: string;
|
||||||
|
@ -9,7 +9,7 @@ interface Props {
|
||||||
|
|
||||||
export function TagBlock(props: Props) {
|
export function TagBlock(props: Props) {
|
||||||
const { tag, size = 'small', classes } = props;
|
const { tag, size = 'small', classes } = props;
|
||||||
const href = `/tag/${tag.toLowerCase()}`;
|
const href = `/tag/${tag}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
|
@ -23,7 +23,7 @@ export function TagBlock(props: Props) {
|
||||||
classes,
|
classes,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span className="px-2">{tag.toLowerCase()}</span>
|
<span className="px-2">{tag}</span>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { CMS, METADATA } from '@/constants';
|
import { CMS, METADATA } from '@/constants';
|
||||||
import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
|
import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
|
||||||
|
import { IPost, ITagList } from '@/types/cms';
|
||||||
import { PageType, setPageType } from '@/state/navigation';
|
import { PageType, setPageType } from '@/state/navigation';
|
||||||
import { ReactElement, useEffect } from 'react';
|
import { ReactElement, useEffect } from 'react';
|
||||||
|
|
||||||
|
@ -9,7 +10,6 @@ import { CmsApi } from '@/services/cms';
|
||||||
import { Contained } from '@/components/Contained';
|
import { Contained } from '@/components/Contained';
|
||||||
import CustomHead from '@/components/CustomHead';
|
import CustomHead from '@/components/CustomHead';
|
||||||
import { IPath } from '@/types';
|
import { IPath } from '@/types';
|
||||||
import { IPost } from '@/types/cms';
|
|
||||||
import Pagination from '@/components/Pagination';
|
import Pagination from '@/components/Pagination';
|
||||||
import { TagBlock } from '@/components/TagBlock';
|
import { TagBlock } from '@/components/TagBlock';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
@ -38,7 +38,7 @@ export default function Tag(props: Props): ReactElement {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(setPageType(PageType.BLOG));
|
dispatch(setPageType(PageType.BLOG));
|
||||||
}, []);
|
}, [dispatch]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -177,16 +177,16 @@ export const getStaticProps: GetStaticProps = async (
|
||||||
export const getStaticPaths: GetStaticPaths = async () => {
|
export const getStaticPaths: GetStaticPaths = async () => {
|
||||||
const cms = new CmsApi();
|
const cms = new CmsApi();
|
||||||
|
|
||||||
const tags = Object.values(await cms.fetchTagList());
|
const tags: ITagList = await cms.fetchTagList();
|
||||||
const paths: IPath[] = [];
|
const paths: IPath[] = [];
|
||||||
|
|
||||||
for (let i = 0; i < tags.length; i++) {
|
for (let tag of Object.values(tags)) {
|
||||||
const { entries, total } = await cms.fetchBlogEntriesByTag(tags[i]);
|
const { entries, total } = await cms.fetchBlogEntriesByTag(tag);
|
||||||
const pageCount = Math.ceil(total / CMS.BLOG_RESULTS_PER_PAGE);
|
const pageCount = Math.ceil(total / CMS.BLOG_RESULTS_PER_PAGE);
|
||||||
const _paths = [];
|
const _paths = [];
|
||||||
|
|
||||||
for (let j = 1; j <= pageCount; j++) {
|
for (let j = 1; j <= pageCount; j++) {
|
||||||
_paths.push({ params: { slug: [tags[i], String(j)] } });
|
_paths.push({ params: { slug: [tag, String(j)] } });
|
||||||
}
|
}
|
||||||
|
|
||||||
paths.push(..._paths);
|
paths.push(..._paths);
|
||||||
|
|
|
@ -43,15 +43,10 @@ export class CmsApi {
|
||||||
}
|
}
|
||||||
|
|
||||||
public async fetchTagList(): Promise<ITagList> {
|
public async fetchTagList(): Promise<ITagList> {
|
||||||
// TODO Migrate to Contentful Tag System
|
const _tags = await this.client.getTags();
|
||||||
const { entries, total } = await this.fetchBlogEntries();
|
|
||||||
const tags: ITagList = {};
|
const tags: ITagList = {};
|
||||||
entries.forEach(entry => {
|
_tags.items.forEach(tag => {
|
||||||
entry.tags.forEach(tag => {
|
tags[tag.sys.id] = tag.name;
|
||||||
if (!tags[tag]) {
|
|
||||||
tags[tag] = tag;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
return tags;
|
return tags;
|
||||||
}
|
}
|
||||||
|
@ -79,10 +74,15 @@ export class CmsApi {
|
||||||
quantity = CMS.BLOG_RESULTS_PER_PAGE_TAGGED,
|
quantity = CMS.BLOG_RESULTS_PER_PAGE_TAGGED,
|
||||||
page = 1,
|
page = 1,
|
||||||
): Promise<IFetchBlogEntriesReturn> {
|
): Promise<IFetchBlogEntriesReturn> {
|
||||||
|
const taglist = await this.fetchTagList();
|
||||||
|
const id = Object.entries(taglist).filter(([_, value]) => {
|
||||||
|
return tag === value;
|
||||||
|
})[0][0];
|
||||||
|
|
||||||
const _entries = await this.client.getEntries({
|
const _entries = await this.client.getEntries({
|
||||||
content_type: 'post',
|
content_type: 'post',
|
||||||
order: '-fields.date',
|
order: '-fields.date',
|
||||||
'fields.tags[in]': tag,
|
'metadata.tags.sys.id[in]': id,
|
||||||
limit: quantity,
|
limit: quantity,
|
||||||
skip: (page - 1) * quantity,
|
skip: (page - 1) * quantity,
|
||||||
});
|
});
|
||||||
|
@ -102,11 +102,11 @@ export class CmsApi {
|
||||||
quantity = CMS.BLOG_RESULTS_PER_PAGE,
|
quantity = CMS.BLOG_RESULTS_PER_PAGE,
|
||||||
page = 1,
|
page = 1,
|
||||||
): Promise<IFetchBlogEntriesReturn> {
|
): Promise<IFetchBlogEntriesReturn> {
|
||||||
const DEV_UPDATE_TAG = 'dev-update';
|
const DEV_UPDATE_TAG = 'devUpdate';
|
||||||
const _entries = await this.client.getEntries({
|
const _entries = await this.client.getEntries({
|
||||||
content_type: 'post', // only fetch blog post entry
|
content_type: 'post', // only fetch blog post entry
|
||||||
order: '-fields.date',
|
order: '-fields.date',
|
||||||
'fields.tags[ne]': DEV_UPDATE_TAG, // Exclude blog posts with the "dev-update" tag
|
'metadata.tags.sys.id[nin]': DEV_UPDATE_TAG, // Exclude blog posts with the "dev-update" tag
|
||||||
limit: quantity,
|
limit: quantity,
|
||||||
skip: (page - 1) * quantity,
|
skip: (page - 1) * quantity,
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue