Merge pull request #265 from dgattey/dgattey/projects

feat: fetch real project data + add thumbnails on home page
dgattey · Jan 14, 2022 · bf124ef · bf124ef · vercel · Jan 14, 2022
2 parents 68f74bb + df78659
commit bf124ef
Show file tree

Hide file tree

Showing 16 changed files with 380 additions and 69 deletions.
diff --git a/next.config.js b/next.config.js
@@ -7,6 +7,9 @@ const nextConfig = {
     // Enables the styled-components SWC transform
     styledComponents: true,
   },
+  images: {
+    domains: ['images.ctfassets.net'],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-icons": "4.3.1",
     "react-is": "17.0.2",
     "styled-components": "5.3.3",
     "swr": "1.1.2-beta.0"

diff --git a/src/api/contentful/fetchProjects.ts b/src/api/contentful/fetchProjects.ts
@@ -0,0 +1,45 @@
+import { gql } from 'graphql-request';
+import fetchGraphQLData from '../fetchGraphQLData';
+import { Project } from './generated/api.generated';
+import { ProjectsQuery } from './generated/fetchProjects.generated';
+import { isProject } from './typeguards';
+
+type Projects = Array<Project>;
+
+/**
+ * Grabs all projects to display
+ */
+const QUERY = gql`
+  query Projects {
+    projectCollection(order: creationDate_DESC) {
+      items {
+        title
+        creationDate
+        type
+        link {
+          url
+        }
+        layout
+        thumbnail {
+          url
+          width
+          height
+        }
+        description {
+          json
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * Fetches the section corresponding to the projects and finds the nodes within it
+ * to transform into Projects
+ */
+const fetchProjects = async (): Promise<Projects> => {
+  const data = await fetchGraphQLData<ProjectsQuery>('/api/content', QUERY);
+  return data?.projectCollection?.items.filter(isProject) ?? [];
+};
+
+export default fetchProjects;
diff --git a/src/api/contentful/generated/api.generated.ts b/src/api/contentful/generated/api.generated.ts
@@ -129,10 +129,18 @@ export type AssetFilter = {
 };
 
 export type AssetLinkingCollections = {
+  readonly bookCollection: Maybe<BookCollection>;
   readonly entryCollection: Maybe<EntryCollection>;
   readonly projectCollection: Maybe<ProjectCollection>;
 };
 
+export type AssetLinkingCollectionsBookCollectionArgs = {
+  limit?: InputMaybe<Scalars['Int']>;
+  locale: InputMaybe<Scalars['String']>;
+  preview: InputMaybe<Scalars['Boolean']>;
+  skip?: InputMaybe<Scalars['Int']>;
+};
+
 export type AssetLinkingCollectionsEntryCollectionArgs = {
   limit?: InputMaybe<Scalars['Int']>;
   locale: InputMaybe<Scalars['String']>;
@@ -173,9 +181,10 @@ export type AssetOrder =
 export type Book = Entry & {
   readonly author: Maybe<Scalars['String']>;
   readonly contentfulMetadata: ContentfulMetadata;
-  readonly coverImageUrl: Maybe<Scalars['String']>;
+  readonly coverImage: Maybe<Asset>;
   readonly description: Maybe<BookDescription>;
   readonly linkedFrom: Maybe<BookLinkingCollections>;
+  readonly readDate: Maybe<Scalars['DateTime']>;
   readonly sys: Sys;
   readonly title: Maybe<Scalars['String']>;
 };
@@ -186,8 +195,9 @@ export type BookAuthorArgs = {
 };
 
 /** All data describing a recent book I've read. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/book) */
-export type BookCoverImageUrlArgs = {
+export type BookCoverImageArgs = {
   locale: InputMaybe<Scalars['String']>;
+  preview: InputMaybe<Scalars['Boolean']>;
 };
 
 /** All data describing a recent book I've read. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/book) */
@@ -200,6 +210,11 @@ export type BookLinkedFromArgs = {
   allowedLocales: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
 };
 
+/** All data describing a recent book I've read. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/book) */
+export type BookReadDateArgs = {
+  locale: InputMaybe<Scalars['String']>;
+};
+
 /** All data describing a recent book I've read. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/book) */
 export type BookTitleArgs = {
   locale: InputMaybe<Scalars['String']>;
@@ -244,16 +259,19 @@ export type BookFilter = {
   readonly author_not_contains: InputMaybe<Scalars['String']>;
   readonly author_not_in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
   readonly contentfulMetadata: InputMaybe<ContentfulMetadataFilter>;
-  readonly coverImageUrl: InputMaybe<Scalars['String']>;
-  readonly coverImageUrl_contains: InputMaybe<Scalars['String']>;
-  readonly coverImageUrl_exists: InputMaybe<Scalars['Boolean']>;
-  readonly coverImageUrl_in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
-  readonly coverImageUrl_not: InputMaybe<Scalars['String']>;
-  readonly coverImageUrl_not_contains: InputMaybe<Scalars['String']>;
-  readonly coverImageUrl_not_in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
+  readonly coverImage_exists: InputMaybe<Scalars['Boolean']>;
   readonly description_contains: InputMaybe<Scalars['String']>;
   readonly description_exists: InputMaybe<Scalars['Boolean']>;
   readonly description_not_contains: InputMaybe<Scalars['String']>;
+  readonly readDate: InputMaybe<Scalars['DateTime']>;
+  readonly readDate_exists: InputMaybe<Scalars['Boolean']>;
+  readonly readDate_gt: InputMaybe<Scalars['DateTime']>;
+  readonly readDate_gte: InputMaybe<Scalars['DateTime']>;
+  readonly readDate_in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['DateTime']>>>;
+  readonly readDate_lt: InputMaybe<Scalars['DateTime']>;
+  readonly readDate_lte: InputMaybe<Scalars['DateTime']>;
+  readonly readDate_not: InputMaybe<Scalars['DateTime']>;
+  readonly readDate_not_in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['DateTime']>>>;
   readonly sys: InputMaybe<SysFilter>;
   readonly title: InputMaybe<Scalars['String']>;
   readonly title_contains: InputMaybe<Scalars['String']>;
@@ -286,8 +304,8 @@ export type BookLinkingCollectionsSectionCollectionArgs = {
 export type BookOrder =
   | 'author_ASC'
   | 'author_DESC'
-  | 'coverImageUrl_ASC'
-  | 'coverImageUrl_DESC'
+  | 'readDate_ASC'
+  | 'readDate_DESC'
   | 'sys_firstPublishedAt_ASC'
   | 'sys_firstPublishedAt_DESC'
   | 'sys_id_ASC'
@@ -555,6 +573,7 @@ export type Project = Entry & {
   readonly contentfulMetadata: ContentfulMetadata;
   readonly creationDate: Maybe<Scalars['DateTime']>;
   readonly description: Maybe<ProjectDescription>;
+  readonly layout: Maybe<Scalars['String']>;
   readonly link: Maybe<Link>;
   readonly linkedFrom: Maybe<ProjectLinkingCollections>;
   readonly sys: Sys;
@@ -573,6 +592,11 @@ export type ProjectDescriptionArgs = {
   locale: InputMaybe<Scalars['String']>;
 };
 
+/** Website, app, other code-based project, or graphics created for something. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/project) */
+export type ProjectLayoutArgs = {
+  locale: InputMaybe<Scalars['String']>;
+};
+
 /** Website, app, other code-based project, or graphics created for something. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/project) */
 export type ProjectLinkArgs = {
   locale: InputMaybe<Scalars['String']>;
@@ -644,6 +668,13 @@ export type ProjectFilter = {
   readonly description_contains: InputMaybe<Scalars['String']>;
   readonly description_exists: InputMaybe<Scalars['Boolean']>;
   readonly description_not_contains: InputMaybe<Scalars['String']>;
+  readonly layout: InputMaybe<Scalars['String']>;
+  readonly layout_contains: InputMaybe<Scalars['String']>;
+  readonly layout_exists: InputMaybe<Scalars['Boolean']>;
+  readonly layout_in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
+  readonly layout_not: InputMaybe<Scalars['String']>;
+  readonly layout_not_contains: InputMaybe<Scalars['String']>;
+  readonly layout_not_in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
   readonly link: InputMaybe<CfLinkNestedFilter>;
   readonly link_exists: InputMaybe<Scalars['Boolean']>;
   readonly sys: InputMaybe<SysFilter>;
@@ -683,6 +714,8 @@ export type ProjectLinkingCollectionsSectionCollectionArgs = {
 export type ProjectOrder =
   | 'creationDate_ASC'
   | 'creationDate_DESC'
+  | 'layout_ASC'
+  | 'layout_DESC'
   | 'sys_firstPublishedAt_ASC'
   | 'sys_firstPublishedAt_DESC'
   | 'sys_id_ASC'
@@ -792,7 +825,7 @@ export type QuerySectionCollectionArgs = {
   where: InputMaybe<SectionFilter>;
 };
 
-/** A section containing references to other blocks. Based on the content of the section, may appear differently on different pages. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/section) */
+/** A collection of references to other nodes [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/section) */
 export type Section = Entry & {
   readonly blocksCollection: Maybe<SectionBlocksCollection>;
   readonly contentfulMetadata: ContentfulMetadata;
@@ -801,20 +834,20 @@ export type Section = Entry & {
   readonly title: Maybe<Scalars['String']>;
 };
 
-/** A section containing references to other blocks. Based on the content of the section, may appear differently on different pages. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/section) */
+/** A collection of references to other nodes [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/section) */
 export type SectionBlocksCollectionArgs = {
   limit?: InputMaybe<Scalars['Int']>;
   locale: InputMaybe<Scalars['String']>;
   preview: InputMaybe<Scalars['Boolean']>;
   skip?: InputMaybe<Scalars['Int']>;
 };
 
-/** A section containing references to other blocks. Based on the content of the section, may appear differently on different pages. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/section) */
+/** A collection of references to other nodes [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/section) */
 export type SectionLinkedFromArgs = {
   allowedLocales: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
 };
 
-/** A section containing references to other blocks. Based on the content of the section, may appear differently on different pages. [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/section) */
+/** A collection of references to other nodes [See type definition](https://app.contentful.com/spaces/nb3rzo39eupw/content_types/section) */
 export type SectionTitleArgs = {
   locale: InputMaybe<Scalars['String']>;
 };
@@ -826,7 +859,7 @@ export type SectionBlocksCollection = {
   readonly total: Scalars['Int'];
 };
 
-export type SectionBlocksItem = Book | Link | Project | Section;
+export type SectionBlocksItem = Book | Link | Project;
 
 export type SectionCollection = {
   readonly items: ReadonlyArray<Maybe<Section>>;
@@ -852,7 +885,6 @@ export type SectionFilter = {
 
 export type SectionLinkingCollections = {
   readonly entryCollection: Maybe<EntryCollection>;
-  readonly sectionCollection: Maybe<SectionCollection>;
 };
 
 export type SectionLinkingCollectionsEntryCollectionArgs = {
@@ -862,13 +894,6 @@ export type SectionLinkingCollectionsEntryCollectionArgs = {
   skip?: InputMaybe<Scalars['Int']>;
 };
 
-export type SectionLinkingCollectionsSectionCollectionArgs = {
-  limit?: InputMaybe<Scalars['Int']>;
-  locale: InputMaybe<Scalars['String']>;
-  preview: InputMaybe<Scalars['Boolean']>;
-  skip?: InputMaybe<Scalars['Int']>;
-};
-
 export type SectionOrder =
   | 'sys_firstPublishedAt_ASC'
   | 'sys_firstPublishedAt_DESC'

diff --git a/src/api/contentful/generated/fetchProjects.generated.ts b/src/api/contentful/generated/fetchProjects.generated.ts
@@ -0,0 +1,28 @@
+import type * as Types from './api.generated';
+
+export type ProjectsQueryVariables = Types.Exact<{ [key: string]: never }>;
+
+export type ProjectsQuery = {
+  readonly projectCollection:
+    | {
+        readonly items: ReadonlyArray<
+          | {
+              readonly title: string | undefined;
+              readonly creationDate: any | undefined;
+              readonly type: ReadonlyArray<string | undefined> | undefined;
+              readonly layout: string | undefined;
+              readonly link: { readonly url: string | undefined } | undefined;
+              readonly thumbnail:
+                | {
+                    readonly url: string | undefined;
+                    readonly width: number | undefined;
+                    readonly height: number | undefined;
+                  }
+                | undefined;
+              readonly description: { readonly json: any } | undefined;
+            }
+          | undefined
+        >;
+      }
+    | undefined;
+};
diff --git a/src/api/contentful/generated/fetchSiteFooter.generated.ts b/src/api/contentful/generated/fetchSiteFooter.generated.ts
@@ -15,21 +15,6 @@ export type SiteFooterQuery = {
                           readonly url: string | undefined;
                           readonly icon: string | undefined;
                         }
-                      | {
-                          readonly blocksCollection:
-                            | {
-                                readonly items: ReadonlyArray<
-                                  | {
-                                      readonly title: string | undefined;
-                                      readonly url: string | undefined;
-                                      readonly icon: string | undefined;
-                                    }
-                                  | {}
-                                  | undefined
-                                >;
-                              }
-                            | undefined;
-                        }
                       | {}
                       | undefined
                     >;

diff --git a/src/api/contentful/typeguards.ts b/src/api/contentful/typeguards.ts
@@ -1,4 +1,4 @@
-import type { Link } from './generated/api.generated';
+import type { Link, Project } from './generated/api.generated';
 
 /**
  * Type guard to get a link out
@@ -7,6 +7,13 @@ export const isLink = (item: Link | undefined | Record<string, unknown>): item i
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   !!(item as Link)?.title;
 
+/**
+ * Type guard to get a project out
+ */
+export const isProject = (item: Project | undefined | Record<string, unknown>): item is Project =>
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  !!(item as Project)?.creationDate && !!(item as Project)?.thumbnail;
+
 /**
  * Type guard to filter out null or undefined items
  */

diff --git a/src/api/useData.ts b/src/api/useData.ts
@@ -1,4 +1,5 @@
 import useSWR from 'swr';
+import fetchProjects from './contentful/fetchProjects';
 import fetchSiteFooter from './contentful/fetchSiteFooter';
 import fetchSiteHeader from './contentful/fetchSiteHeader';
 import fetchRepoVersion from './github/fetchRepoVersion';
@@ -40,6 +41,11 @@ const fetchers = {
    * Text links for the full site header
    */
   siteHeader: fetchSiteHeader,
+
+  /**
+   * All projects to list on home page
+   */
+  projects: fetchProjects,
 } as const;
 
 /**