API - first attempt (#128)

* First api attempt creation 🚀

* First api almost completed 🚀

* Authors api 🚀

* Added resource endpoint

* Added web endpoint (first iteration probably webview)

* Fix articles 🚀

* Refactoring projects 🚀

* Refactoring api images query: select all the ones needed in a single query 🚀

* Projects api completed 🚀

* Implemented art api 🚀

* Fix tests 🚀

Author: chicio

.idea/prettier.xml

@@ -1,4 +1,3 @@
-import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { trackWith } from "../src/logic/tracking";
 import { BlogThemePage } from "../src/components/design-system/templates/blog-theme-page";

__tests__/call-to-action-external-with-tracking.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { CallToActionInternalWithTracking } from "../src/components/call-to-action-internal-with-tracking";
 import { trackWith } from "../src/logic/tracking";

__tests__/call-to-action-internal-with-tracking.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { trackWith } from "../src/logic/tracking";
 import { BlogThemePage } from "../src/components/design-system/templates/blog-theme-page";

__tests__/resume.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { trackWith } from "../src/logic/tracking";
 import { BlogThemePage } from "../src/components/design-system/templates/blog-theme-page";

__tests__/standard-external-link-with-tracking.test.tsx

@@ -1,16 +1,24 @@
 import { GatsbyNode } from "gatsby";
 import readingTime from "reading-time";
 import * as path from "path";
+import * as fs from "fs";
 import { createFilePath } from "gatsby-source-filesystem";
 import { generatePostSlug, generateTagSlug, slugs } from "./src/logic/slug";
+import {
+  artApiAdapter,
+  blogAuthorsApiAdapter,
+  blogPostDetailsApiAdapter,
+  blogPostsApiAdapter,
+  projectsApiAdapter
+} from "./src/logic/api/api-adapters";
 
 export const createPages: GatsbyNode["createPages"] = async ({
   graphql,
   actions,
   reporter,
 }) => {
   const { createPage } = actions;
-  const result: any = await graphql(`
+  const result = await graphql<Queries.BlogPostsQuery>(`
     query BlogPosts {
       allMarkdownRemark(sort: { frontmatter: { date: DESC } }, limit: 1000) {
         edges {
@@ -34,7 +42,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
     return;
   }
 
-  const posts = result.data.allMarkdownRemark.edges;
+  const posts = result.data!.allMarkdownRemark.edges;
 
   //Create posts pages
   posts.forEach((post: any) => {
@@ -47,7 +55,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
     });
   });
 
-  // Create blog home pages
+  // Create blog home (paginated) pages
   const postsPerPage = 11;
   const numberOfPages = Math.ceil(posts.length / postsPerPage);
   Array.from({ length: numberOfPages }).forEach((_, i) => {
@@ -64,7 +72,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
   });
 
   //Create tag pages
-  const tags: any = result.data.tagsGroup.group;
+  const tags: any = result.data!.tagsGroup.group;
   tags.forEach((tag: any) => {
     createPage({
       path: generateTagSlug(tag.fieldValue),
@@ -92,3 +100,84 @@ export const onCreateNode: GatsbyNode["onCreateNode"] = ({
     });
   }
 };
+
+export const onPostBuild: GatsbyNode["onPostBuild"] = async ({ graphql }) => {
+  console.log("onPostBuild: generating API...");
+
+  const apiBasePath = "/api";
+  const apiFolder = `./public${apiBasePath}`;
+
+  if (!fs.existsSync(apiFolder)) {
+    fs.mkdirSync(apiFolder);
+  }
+
+  const blogPostsQuery = (
+    await graphql<Queries.BlogPostsApiQuery>(`
+      query BlogPostsApi {
+        allMarkdownRemark(sort: { frontmatter: { date: DESC } }, limit: 1000) {
+          edges {
+            node {
+              fields {
+                slug
+                readingTime {
+                  text
+                }
+              }
+              frontmatter {
+                title
+                description
+                authors
+                tags
+                math
+                date(formatString: "DD MMM YYYY")
+                image {
+                  publicURL
+                }
+              }
+              html
+            }
+          }
+        }
+      }
+    `)
+  ).data!;
+
+  const imagesApiQuery = (
+    await graphql<Queries.ImagesApiQuery>(`
+      query ImagesApi {
+        allFile(
+          filter: {
+            relativeDirectory: { in: ["projects", "authors", "art"] }
+            extension: { regex: "/(jpg)|(jpeg)|(png)/" }
+          }
+        ) {
+          edges {
+            node {
+              publicURL
+              name
+            }
+          }
+        }
+      }
+    `)
+  ).data!;
+
+  const blogPostsApi = blogPostsApiAdapter(apiBasePath, blogPostsQuery);
+  const authorsApi = blogAuthorsApiAdapter(imagesApiQuery);
+  const blogPostDetailApis = blogPostDetailsApiAdapter(blogPostsQuery);
+  const projectsApi = projectsApiAdapter(imagesApiQuery);
+  const artApi = artApiAdapter(imagesApiQuery);
+
+  fs.writeFileSync(`${apiFolder}/posts.json`, JSON.stringify(blogPostsApi));
+  fs.writeFileSync(`${apiFolder}/authors.json`, JSON.stringify(authorsApi));
+  Object.keys(blogPostDetailApis).forEach((key) => {
+    fs.writeFileSync(
+      `${apiFolder}/${key}.json`,
+      JSON.stringify(blogPostDetailApis[key]),
+    );
+  });
+  fs.writeFileSync(`${apiFolder}/projects.json`, JSON.stringify(projectsApi));
+  fs.writeFileSync(`${apiFolder}/art.json`, JSON.stringify(artApi));
+
+  console.log("onPostBuild: API generation completed.");
+};

__tests__/standard-internal-link-with-tracking.test.tsx

@@ -31,11 +31,12 @@
     "node": "^18.4.0"
   },
   "scripts": {
+    "prestart": "npm run clean",
     "start": "gatsby develop",
     "clean": "gatsby clean",
     "serve": "gatsby serve",
     "test": "jest",
-    "prebuild": "npm run test",
+    "prebuild": "npm run clean",
     "build": "gatsby build",
     "predeploy": "npm run clean && npm run build",
     "deploy": "gh-pages -d public -b main"

gatsby-node.ts

@@ -78,7 +78,7 @@ export const PostAuthors: FC<PostAuthorsProps> = ({
         const blogAuthor: BlogAuthor = blogAuthors[author!];
         const blogAuthorImage = blogAuthorsImages.allFile.edges.find(
           (blogAuthorImage) =>
-            blogAuthorImage.node.name === author!.replace("_", "-")
+            blogAuthorImage.node.name === author!.split("_").join("-"),
         )!.node!.childImageSharp!.gatsbyImageData!;
 
         return (

package.json

@@ -4,6 +4,10 @@ import styled from "styled-components";
 import { Container } from "../atoms/container";
 import { CallToActionExternalWithTracking } from "../../call-to-action-external-with-tracking";
 import { mediaQuery } from "../utils-css/media-query";
+import { ProjectCallToAction } from "../../../logic/projects";
+import { Paragraph } from "../atoms/paragraph";
+import { List } from "../atoms/list";
+import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image";
 
 interface ProjectContainerProps {
   reverse: boolean;
@@ -32,22 +36,15 @@ const ProjectImageContainer = styled(ProjectContentContainer)`
   align-items: center;
 `;
 
-interface ProjectCallToAction {
-  label: string;
-  link: string;
-  trackingAction: string;
-  trackingCategory: string;
-  trackingLabel: string;
-}
-
 const CallToActionContainer = styled.div`
   margin: ${(props) => props.theme.spacing[6]} 0;
 `;
 
 export type ProjectProps = ProjectContainerProps & {
   name: string;
-  image: React.ReactElement;
-  description: React.ReactElement;
+  image: IGatsbyImageData;
+  description: string;
+  features: string[];
   callToActions: ProjectCallToAction[];
 };
 
@@ -56,13 +53,28 @@ export const Project: FC<ProjectProps> = ({
   name,
   image,
   description,
+  features,
   callToActions,
 }) => (
   <ProjectContainer reverse={reverse}>
-    <ProjectImageContainer>{image}</ProjectImageContainer>
+    <ProjectImageContainer>
+      <GatsbyImage
+        style={{
+          width: 500,
+          height: 500,
+        }}
+        alt={name}
+        image={image}
+      />
+    </ProjectImageContainer>
     <ProjectContentContainer>
       <Heading3>{name}</Heading3>
-      {description}
+      <Paragraph>{description}</Paragraph>
+      <List className="project-features">
+        {features.map((feature) => (
+          <li key={`${name}${feature}`}>{feature}</li>
+        ))}
+      </List>
       <CallToActionContainer>
         {callToActions.map((callToAction) => (
           <CallToActionExternalWithTracking