feature: add list of articles to author

NobbZ · Jul 2, 2023 · d5de445 · d5de445
1 parent 8049053
commit d5de445
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/plugins/gatsby-transformer-nz-author/gatsby-node.ts b/plugins/gatsby-transformer-nz-author/gatsby-node.ts
@@ -25,6 +25,7 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
         lastName: String!
         nickName: String
         social: JSON
+        articles: [Blog] @link(by: "author.slug", from: "slug")
       }
     `);
   };

diff --git a/src/components/articlepreview.tsx b/src/components/articlepreview.tsx
@@ -5,7 +5,7 @@ import { GatsbyImage, ImageDataLike, getImage } from "gatsby-plugin-image";
 
 import { Tag } from "../templates/tags";
 
-type BlogPostNode = Queries.PreviewDataFragment;
+export type BlogPostNode = Queries.PreviewDataFragment;
 interface PreviewProps {
   node: BlogPostNode;
 }

diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts
@@ -35,6 +35,7 @@ type AVIFOptions = {
 };
 
 type Author = Node & {
+  readonly articles: Maybe<ReadonlyArray<Maybe<Blog>>>;
   readonly children: ReadonlyArray<Node>;
   readonly firstName: Scalars['String'];
   readonly gatsbyPath: Maybe<Scalars['String']>;
@@ -98,6 +99,7 @@ type AuthorEdge = {
 };
 
 type AuthorFieldSelector = {
+  readonly articles: InputMaybe<BlogFieldSelector>;
   readonly children: InputMaybe<NodeFieldSelector>;
   readonly firstName: InputMaybe<FieldSelectorEnum>;
   readonly gatsbyPath: InputMaybe<FieldSelectorEnum>;
@@ -111,6 +113,7 @@ type AuthorFieldSelector = {
 };
 
 type AuthorFilterInput = {
+  readonly articles: InputMaybe<BlogFilterListInput>;
   readonly children: InputMaybe<NodeFilterListInput>;
   readonly firstName: InputMaybe<StringQueryOperatorInput>;
   readonly gatsbyPath: InputMaybe<StringQueryOperatorInput>;
@@ -169,6 +172,7 @@ type AuthorGroupConnection_sumArgs = {
 };
 
 type AuthorSortInput = {
+  readonly articles: InputMaybe<BlogSortInput>;
   readonly children: InputMaybe<NodeSortInput>;
   readonly firstName: InputMaybe<SortOrderEnum>;
   readonly gatsbyPath: InputMaybe<SortOrderEnum>;
@@ -2130,6 +2134,7 @@ type Query_allSitePluginArgs = {
 
 
 type Query_authorArgs = {
+  articles: InputMaybe<BlogFilterListInput>;
   children: InputMaybe<NodeFilterListInput>;
   firstName: InputMaybe<StringQueryOperatorInput>;
   gatsbyPath: InputMaybe<StringQueryOperatorInput>;
@@ -3144,7 +3149,7 @@ type AuthorInfoByIdQueryVariables = Exact<{
 }>;
 
 
-type AuthorInfoByIdQuery = { readonly author: { readonly firstName: string, readonly lastName: string, readonly nickName: string | null, readonly social: Record<string, unknown> | null } | null };
+type AuthorInfoByIdQuery = { readonly author: { readonly firstName: string, readonly lastName: string, readonly nickName: string | null, readonly social: Record<string, unknown> | null, readonly articles: ReadonlyArray<{ readonly date: string, readonly excerpt: string | null, readonly slug: string, readonly tags: ReadonlyArray<string>, readonly title: string, readonly heroImage: { readonly alt: string, readonly image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null }, readonly readingTime: { readonly text: string | null } | null } | null> | null } | null };
 
 type BlogPostByIdQueryVariables = Exact<{
   id: InputMaybe<Scalars['String']>;

diff --git a/src/pages/author/{author.slug}/index.tsx b/src/pages/author/{author.slug}/index.tsx
@@ -3,7 +3,8 @@ import * as React from "react";
 import { PageProps, graphql } from "gatsby";
 import { Icon } from "@iconify-icon/react";
 
-import { Layout, MDXWrapper } from "~components";
+import { ArticlePreview, Layout, MDXWrapper } from "~components";
+import type { BlogPostNode } from "~components/articlepreview";
 
 type AuthorPageProps = PageProps<Queries.AuthorInfoByIdQuery>;
 
@@ -84,10 +85,16 @@ const AuthorPage = ({ data, children }: AuthorPageProps) => {
     </div>
   ) : undefined;
 
+  const previews = (data.author.articles ? data.author.articles : [])
+    .filter((article): article is BlogPostNode => article !== null)
+    .sort((a, b) => (a.date > b.date ? -1 : 1))
+    .map((article) => <ArticlePreview node={article} key={article.slug} />);
+
   return (
     <Layout pageTitle={title}>
       {socialBox}
       <MDXWrapper>{children}</MDXWrapper>
+      {previews}
     </Layout>
   );
 };
@@ -99,6 +106,9 @@ export const query = graphql`
       lastName
       nickName
       social
+      articles {
+        ...PreviewData
+      }
     }
   }
 `;