fix: change post interface and pipeline

jandiralceu · Sep 14, 2024 · 6efaf57 · 6efaf57
1 parent 6d634b7
commit 6efaf57
Show file tree

Hide file tree

Showing 14 changed files with 128 additions and 173 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -14,13 +14,13 @@ jobs:
       - name: 🏃‍ Checkout
         uses: actions/checkout@v4
 
-      - name: 📌 Set up Node.js
+      - name: 📌 Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: "yarn"
 
-      - name: 📌 Install dependencies
+      - name: ⏳ Install dependencies
         run: yarn install
 
       - name: 🏗️ Build
@@ -32,11 +32,12 @@ jobs:
           ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
 
-      - name: 📦 Upload public directory as artifact
+      - name: 📦 Packing build as artifact
         uses: actions/upload-artifact@v3
         with:
           name: public
           path: public/
+          retention-days: 1
   deploy:
     needs: build
     runs-on: ubuntu-22.04
@@ -45,15 +46,12 @@ jobs:
       - name: 🏃‍ Checkout
         uses: actions/checkout@v4
 
-      - name: 📦 Download public directory artifact
+      - name: 💻 Download artifact
         uses: actions/download-artifact@v3
         with:
           name: public
           path: public
 
-      - name: 🔍 List downloaded files
-        run: ls -l
-
       - uses: kersvers/[email protected]
         name: 🚀 Deploy to S3 and invalidate CloudFront cache
         with:
@@ -65,24 +63,3 @@ jobs:
           DISTRIBUTION_ID: ${{ secrets.AWS_DISTRIBUTION_ID }}
           AWS_REGION: ${{ secrets.AWS_REGION }}
           SOURCE_DIR: "public"
-
-      # - uses: jakejarvis/s3-sync-action@master
-      #   name: 🚀 Deploy to S3
-      #   with:
-      #     args: --acl public-read --follow-symlinks --delete
-      #   env:
-      #     AWS_S3_BUCKET: ${{ secrets.AWS_BUCKET_NAME }}
-      #     AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
-      #     AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }}
-      #     AWS_REGION: ${{ secrets.AWS_REGION }}
-      #     SOURCE_DIR: "/home/runner/work/jandir.co/jandir.co/public"
-
-      # - uses: actions/checkout@v4
-      # - uses: awact/cloudfront-action@master
-      #   name: 👮🏿‍♂️ Invalidate CloudFront cache
-      #   env:
-      #     SOURCE_PATH: "/index.html"
-      #     AWS_REGION: ${{ secrets.AWS_REGION }}
-      #     AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
-      #     AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_ACCESS_KEY }}
-      #     DISTRIBUTION_ID: ${{ secrets.AWS_DISTRIBUTION_ID }}
diff --git a/.github/workflows/develop.yml → .github/workflows/pull_request.yml b/.github/workflows/develop.yml → .github/workflows/pull_request.yml
@@ -1,9 +1,10 @@
-name: Develop PR
+name: Pull Request
+run-name: ${{ github.actor }} on ${{ github.event_name }}
 
 on:
   pull_request:
     branches:
-      - develop
+      - main
     types:
       - opened
       - reopened
@@ -24,24 +25,19 @@ jobs:
           node-version-file: .nvmrc
           cache: "yarn"
 
-      - name: 📌 Install dependencies
+      - name: ⏳ Install dependencies
         run: yarn install
 
       - name: 🕵🏻 Run lint
         run: yarn run lint
 
-      - name: 🩺 Check code formatting
+      - name: 🔬 Check code formatting
         run: yarn run prettier:check
 
-  sonarcloud:
-    needs: lint-and-test
-    name: 🚀 Upload to SonarCloud
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: SonarCloud Scan
+      - name: 🧪 Run tests
+        run: yarn test:ci
+
+      - name: 🚀 Upload to SonarCloud
         uses: SonarSource/sonarcloud-github-action@master
         env:
           GITHUB_TOKEN: ${{ secrets.TOKEN_GITHUB }}

diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@ node_modules/
 public
 dist
 build
+coverage
 
 # environment files
 .env

diff --git a/algolia-queries.ts b/algolia-queries.ts
@@ -6,6 +6,7 @@ interface PageNode {
     cover: {
       publicURL: string;
     };
+    tags: string[];
   };
   readonly excerpt: string;
 }
@@ -28,6 +29,7 @@ interface AlgoliaRecord {
   readonly cover: {
     publicURL: string;
   };
+  readonly tags: string[];
 }
 
 interface AlgoliaQuery {
@@ -50,6 +52,7 @@ const pageQuery = `{
           cover {
             publicURL
           }
+          tags
         }
         excerpt(pruneLength: 120)
       }

diff --git a/gatsby-node.ts b/gatsby-node.ts
@@ -1,30 +1,5 @@
 import path from "path";
 import { GatsbyNode } from "gatsby";
-import { IGatsbyImageData } from "gatsby-plugin-image";
-
-interface BlogPost {
-  readonly node: {
-    id: string;
-    frontmatter: {
-      title: string;
-      slug: string;
-      cover: {
-        childImageSharp?: {
-          gatsbyImageData: IGatsbyImageData;
-        };
-        publicURL: string;
-      };
-    };
-  };
-}
-
-interface GraphQLResult {
-  readonly data: {
-    allMdx: {
-      edges: BlogPost[];
-    };
-  };
-}
 
 export const createPages: GatsbyNode["createPages"] = async ({
   actions,
@@ -34,9 +9,9 @@ export const createPages: GatsbyNode["createPages"] = async ({
   const { createPage } = actions;
   const blogPostTemplate = path.resolve(`src/templates/BlogPostTemplate.tsx`);
 
-  const result = await graphql<GraphQLResult>(`
+  const result = await graphql<IPageData<IPost>>(`
     {
-      allMdx(sort: { fields: frontmatter___date, order: DESC }) {
+      allMdx(sort: { frontmatter: { date: DESC } }) {
         edges {
           node {
             id
@@ -49,6 +24,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
                 }
                 publicURL
               }
+              tags
             }
           }
         }
@@ -61,8 +37,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
     return;
   }
 
-  // @ts-expect-error - TS is complaining about the type of `allMdx` here
-  result.data.allMdx.edges.forEach(({ node }: BlogPost) => {
+  result.data.allMdx.edges.forEach(({ node }) => {
     createPage({
       path: `/blog${node.frontmatter.slug}`,
       component: blogPostTemplate,

diff --git a/package.json b/package.json
@@ -23,8 +23,10 @@
     "lint": "npx eslint .",
     "prettier:format": "prettier --write .",
     "prettier:check": "prettier . --check",
+    "cy:open": "cypress open",
     "test": "jest",
-    "cy:open": "cypress open"
+    "test:ci": "yarn test --ci --bail --coverage",
+    "test:watch": "yarn test --watch"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.6.0",
@@ -90,7 +92,8 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix",
-      "prettier --write"
+      "prettier --write",
+      "jest --bail --passWithNoTests --findRelatedTests"
     ],
     "*": [
       "prettier --write"

diff --git a/src/app.d.ts b/src/app.d.ts
@@ -0,0 +1,22 @@
+interface INodeValues<T> {
+  readonly id: string;
+  readonly frontmatter: T;
+}
+
+interface IPageData<T> {
+  readonly allMdx: {
+    readonly edges: { readonly node: INodeValues<T> }[];
+  };
+}
+
+interface IPost {
+  readonly title: string;
+  readonly slug: string;
+  readonly date: string;
+  readonly tags: string[];
+  readonly cover: {
+    childImageSharp?: {
+      gatsbyImageData: IGatsbyImageData;
+    };
+  };
+}
diff --git a/src/components/ArticleCard/index.tsx b/src/components/ArticleCard/index.tsx
@@ -11,11 +11,16 @@ type ArticleCardProps = {
     childImageSharp?: {
       gatsbyImageData: IGatsbyImageData;
     };
-    publicURL: string;
   };
+  readonly tags: string[];
 };
 
-export default function ArticleCard({ title, slug, cover }: ArticleCardProps) {
+export default function ArticleCard({
+  title,
+  slug,
+  cover,
+  tags,
+}: ArticleCardProps) {
   const image = getImage(cover.childImageSharp ?? null);
 
   return (
@@ -29,24 +34,25 @@ export default function ArticleCard({ title, slug, cover }: ArticleCardProps) {
             className="w-full h-full rounded-t-xl"
           />
         )}
-
-        {!image && cover.publicURL && (
-          <img
-            src={cover.publicURL}
-            alt={title}
-            className="w-full h-full"
-            title={title}
-          />
-        )}
       </Link>
 
       <div className="p-6">
-        <div className="flex justify-between items-center">
-          <div className="bg-slate-950/80 text-white px-4 py-2 rounded-full text-sm shadow-md">
-            Category
+        <div className="flex justify-between gap-4">
+          <div className="flex items-center gap-2">
+            <strong>Tags: </strong>
+            <div className="flex flex-wrap gap-2">
+              {tags.map((tag) => (
+                <span key={tag} className=" text-sm text-slate-500 lowercase">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+          <div>
+            <p className="text-md text-slate-500">August 24th, 2020</p>
           </div>
-          <p className="text-lg text-slate-500">August 24th, 2020</p>
         </div>
+
         <Link to={buildPostUrl(slug)} className="text-2xl mt-4 block">
           <h4>{title}</h4>
         </Link>

diff --git a/src/components/LatestPosts/index.tsx b/src/components/LatestPosts/index.tsx
@@ -1,32 +1,9 @@
 import * as React from "react";
 import ArticleCard from "../ArticleCard";
 import { graphql, useStaticQuery } from "gatsby";
-import { IGatsbyImageData } from "gatsby-plugin-image";
-
-interface Post {
-  readonly node: {
-    frontmatter: {
-      title: string;
-      slug: string;
-      date: string;
-      cover: {
-        childImageSharp?: {
-          gatsbyImageData: IGatsbyImageData;
-        };
-        publicURL: string;
-      };
-    };
-  };
-}
-
-interface RecentPostsData {
-  readonly allMdx: {
-    edges: Post[];
-  };
-}
 
 export default function LatestPosts() {
-  const data = useStaticQuery<RecentPostsData>(graphql`
+  const data = useStaticQuery<IPageData<IPost>>(graphql`
     query {
       allMdx(sort: { frontmatter: { date: DESC } }, limit: 3) {
         edges {
@@ -39,8 +16,8 @@ export default function LatestPosts() {
                 childImageSharp {
                   gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
                 }
-                publicURL
               }
+              tags
             }
           }
         }
@@ -63,6 +40,7 @@ export default function LatestPosts() {
             title={node.frontmatter.title}
             slug={node.frontmatter.slug}
             cover={node.frontmatter.cover}
+            tags={node.frontmatter.tags}
           />
         ))}
       </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ node_modules/ @@
     public
     dist
     build
+    coverage
     # environment files
     .env
@@ Expand Down @@