feat: add merge date to Last Pull Request card

chrisvogt · Dec 22, 2024 · 15ab83f · 15ab83f
1 parent 40a094e
commit 15ab83f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/theme/package.json b/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-theme-chrisvogt",
   "description": "My personal blog and website.",
-  "version": "0.33.1",
+  "version": "0.33.2",
   "author": "Chris Vogt <[email protected]> (https://www.chrisvogt.me)",
   "main": "index.js",
   "license": "MIT",

diff --git a/theme/src/components/widgets/github/__snapshots__/github-widget.spec.js.snap b/theme/src/components/widgets/github/__snapshots__/github-widget.spec.js.snap
@@ -437,7 +437,7 @@ exports[`GitHub Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="css-5cryjx"
+          className="css-b5lvlf"
         >
           <div
             className="text-row show-loading-animation"
@@ -447,7 +447,7 @@ exports[`GitHub Widget matches the loading state snapshot 1`] = `
                 "height": "15px",
                 "marginTop": 0,
                 "maxHeight": undefined,
-                "width": "15px",
+                "width": "250px",
               }
             }
           />

diff --git a/theme/src/components/widgets/github/__snapshots__/last-pull-request.spec.js.snap b/theme/src/components/widgets/github/__snapshots__/last-pull-request.spec.js.snap
@@ -28,7 +28,7 @@ exports[`Widget/GitHub/LastPullRequest snapshots matches the loading state snaps
         }
       />
       <div
-        className="css-1x5vc5t"
+        className="css-1c6hy0j"
       >
         <div
           className="text-row show-loading-animation"
@@ -38,7 +38,7 @@ exports[`Widget/GitHub/LastPullRequest snapshots matches the loading state snaps
               "height": "15px",
               "marginTop": 0,
               "maxHeight": undefined,
-              "width": "15px",
+              "width": "250px",
             }
           }
         />
@@ -79,8 +79,12 @@ exports[`Widget/GitHub/LastPullRequest snapshots matches the repository variant
         </em>
       </span>
       <div
-        className="css-1x5vc5t"
+        className="css-1c6hy0j"
       >
+        <span>
+          Merged 
+          NaN years ago
+        </span>
         <span>
           <svg
             aria-hidden="true"

diff --git a/theme/src/components/widgets/github/last-pull-request.js b/theme/src/components/widgets/github/last-pull-request.js
@@ -4,12 +4,13 @@ import { Themed } from '@theme-ui/mdx'
 import { Box, Card, Heading } from '@theme-ui/components'
 import Placeholder from 'react-placeholder'
 import { TextRow } from 'react-placeholder/lib/placeholders'
+import ago from 's-ago'
 
 import CardFooter from '../card-footer'
 import ViewExternal from '../view-external'
 
 const LastPullRequest = ({ isLoading, pullRequest = {} }) => {
-  const { number, repository: { name: repositoryName } = {}, title, url } = pullRequest
+  const { closedAt, number, repository: { name: repositoryName } = {}, title, url } = pullRequest
 
   return (
     <Box>
@@ -45,13 +46,14 @@ const LastPullRequest = ({ isLoading, pullRequest = {} }) => {
             </span>
           </Placeholder>
 
-          <CardFooter customStyles={{ justifyContent: 'flex-end' }}>
+          <CardFooter>
             <Placeholder
               color='#efefef'
-              customPlaceholder={<TextRow color='#efefef' style={{ marginTop: 0, width: '15px', height: '15px' }} />}
+              customPlaceholder={<TextRow color='#efefef' style={{ marginTop: 0, width: '250px', height: '15px' }} />}
               ready={!isLoading}
               showLoadingAnimation
             >
+              <span>Merged {ago(new Date(closedAt))}</span>
               <ViewExternal platform='GitHub' />
             </Placeholder>
           </CardFooter>