@@ -2,12 +2,13 @@ import { useRouter } from "next/router";
22import {
33 getPostBySlug,
44 getAllPosts,
5− getNextPost,
6− getPreviousPost,
75 formatDate,
6+ getSimilarGrants,
87} from "../../lib/lib";
98import Head from "next/head";
109import Link from "next/link";
10+import { decode } from "html-entities";
11+import classnames from "classnames";
1112import ErrorPage from "../404";
1213import Container from "../../components/Container";
1314import Markdown from "../../components/Markdown";
@@ -16,18 +17,12 @@ import Footer from "../../components/Footer";
1617import BackgroundImage from "../../components/BackgroundImage";
1718import SingleColumn from "../../components/SingleColumn";
1819import NewsletterSignup from "../../components/NewletterSignup";
19−import PostPreview from "../../components/PostPreview";
20+import GrantPreview from "../../components/GrantPreview";
21+import Section from "../../components/Section";
2022import { name, contact } from "../../lib/constants";
2123import markdownStyles from "../../styles/markdown.module.css";
22−import { decode } from "html-entities";
2324
24−export default function Grant({
25− post,
26− nextPost,
27− markdown,
28− previousPost,
29− search,
30−}) {
25+export default function Grant({ post, markdown, search, similarGrants }) {
3126 const router = useRouter();
3227 if (!router.isFallback && !post?.slug) {
3328 return <ErrorPage />;
@@ -37,7 +32,7 @@ export default function Grant({
3732 <Container>
3833 <SingleColumn>
3934 <Header search={search} />
40− <section className="flex flex-col layout-narrow">
35+ <Section narrow short>
4136 <h1>{post.title}</h1>
4237 {post.extra.author ? (
4338 <div className="type-ui text-gray mt-4">{post.extra.author}</div>
@@ -45,36 +40,41 @@ export default function Grant({
4540 {post.extra.ship ? (
4641 <div className="type-ui text-gray font-mono">{post.extra.ship}</div>
4742 ) : null}
48− <div className="type-ui text-gray mt-8 md:mt-12 lg:mt-16">
43+ <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">
4944 {formatDate(new Date(post.date))}
5045 </div>
51− </section>
52− <div className={"layout-narrow " + markdownStyles["markdown"]}>
46+ <div className="flex items-center flex-wrap mt-4 md:mt-8 lg:mt-10">
47+ {post.taxonomies.grant_type.map((category) => {
48+ const className = classnames({
49+ "bg-blue text-white": category === "Proposal",
50+ "bg-green text-white": category === "Apprenticeship",
51+ "bg-yellow": category === "Bounty",
52+ });
53+ return (
54+ <div className={`${className} badge-sm mr-1 my-1`}>
55+ {category}
56+ </div>
57+ );
58+ })}
59+ {post.taxonomies.grant_category.map((category) => (
60+ <div className="bg-gray text-wall badge-sm mr-1 my-1">
61+ {category}
62+ </div>
63+ ))}
64+ </div>
65+ </Section>
66+ <Section className={markdownStyles["markdown"]}>
5367 <article
5468 dangerouslySetInnerHTML={{ __html: decode(markdown) }}
5569 ></article>
56− </div>
70+ </Section>
5771
58− <section className="layout-wide flex">
59− {previousPost === null ? (
60− <div className={"w-1/2 mr-4"} />
61− ) : (
62− <PostPreview
63− title="Previous Post"
64− post={previousPost}
65− className="mr-4 w-1/2"
66− />
67− )}
68− {nextPost === null ? (
69− <div className={"w-1/2 ml-4"} />
70− ) : (
71− <PostPreview
72− title="Next Post"
73− post={nextPost}
74− className="ml-4 w-1/2"
75− />
76− )}
77− </section>
72+ <Section narrow className="flex flex-col">
73+ <h3 className="pb-8">Similar Grants</h3>
74+ {similarGrants.map((grant) => {
75+ return <GrantPreview post={grant} />;
76+ })}
77+ </Section>
7878 </SingleColumn>
7979 <Footer />
8080 </Container>
@@ -83,30 +83,22 @@ export default function Grant({
8383
8484//
8585export async function getStaticProps({ params }) {
86− const nextPost =
87− getNextPost(
88− params.slug,
89− ["title", "slug", "date", "description", "extra"],
90− "grants"
91− ) || null;
92−
93− const previousPost =
94− getPreviousPost(
95− params.slug,
96− ["title", "slug", "date", "description", "extra"],
97− "grants"
98− ) || null;
99−
10086 const post = getPostBySlug(
10187 params.slug,
102− ["title", "slug", "date", "description", "content", "extra"],
88+ ["title", "slug", "date", "description", "content", "extra", "taxonomies"],
10389 "grants"
10490 );
10591
92+ const similarGrants = getSimilarGrants(
93+ post.taxonomies.grant_type,
94+ post.taxonomies.grant_category,
95+ 4
96+ );
97+
10698 const markdown = await Markdown({ post });
10799
108100 return {
109− props: { post, markdown, nextPost, previousPost },
101+ props: { post, markdown, similarGrants },
110102 };
111103}
112104