feat: add dates to Goodreads Last PR and GitHub Last Update (#274)

This PR updates the Goodreads Last Pull Request and GitHub Last Update cards to include the update date, matching the content provided for the GitHub Pinned Items cards. This PR closes #152. ## Screenshots ### Goodreads Last Update | Before | After | |--------|-------| | ![before](https://github.com/user-attachments/assets/c1996546-acb7-4dce-a841-b1c72232b275) | ![after](https://github.com/user-attachments/assets/3e00dbdb-011d-4767-b296-4982ae2b9d6c) | ### GitHub Pull Request | Before | After | |--------|-------| | Unavailable | ![gh-after-optimized](https://github.com/user-attachments/assets/a9190010-a175-4658-a70a-8173ba626963) | > [!NOTE] > I'm on an airplane and having trouble uploading the before photo so I'm skipping that altogether.
chrisvogt · Dec 22, 2024 · 4d4608f · 4d4608f
1 parent 40a094e
commit 4d4608f
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 26 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": "150px",
               }
             }
           />

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": "150px",
             }
           }
         />
@@ -66,21 +66,18 @@ exports[`Widget/GitHub/LastPullRequest snapshots matches the repository variant
     >
       <span>
         Add fake information to the fake project's repository
-         (
-        <span
-          className="css-7f3d9a"
-        >
-          #
-          42
-        </span>
-        ) – in 
+         – in 
         <em>
           Fake Project
         </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, repository: { name: repositoryName } = {}, title, url } = pullRequest
 
   return (
     <Box>
@@ -41,17 +42,18 @@ const LastPullRequest = ({ isLoading, pullRequest = {} }) => {
             showLoadingAnimation
           >
             <span>
-              {title} (<span sx={{ fontWeight: 600 }}>#{number}</span>) – in <em>{repositoryName}</em>
+              {title} – in <em>{repositoryName}</em>
             </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: '150px', height: '15px' }} />}
               ready={!isLoading}
               showLoadingAnimation
             >
+              <span>Merged {ago(new Date(closedAt))}</span>
               <ViewExternal platform='GitHub' />
             </Placeholder>
           </CardFooter>

diff --git a/theme/src/components/widgets/goodreads/__snapshots__/goodreads-widget.spec.js.snap b/theme/src/components/widgets/goodreads/__snapshots__/goodreads-widget.spec.js.snap
@@ -360,17 +360,17 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="css-5cryjx"
+          className="css-b5lvlf"
         >
           <div
             className="text-row show-loading-animation"
             style={
               {
-                "backgroundColor": undefined,
-                "height": "1em",
+                "backgroundColor": "#efefef",
+                "height": "15px",
                 "marginTop": 0,
                 "maxHeight": undefined,
-                "width": "140px",
+                "width": "150px",
               }
             }
           />

diff --git a/theme/src/components/widgets/goodreads/user-status.js b/theme/src/components/widgets/goodreads/user-status.js
@@ -23,7 +23,7 @@ const mapStatusToTemplate = {
 }
 
 const UserStatus = ({ isLoading, status, actorName }) => {
-  const { link, type, updated } = status
+  const { created, link, type } = status
 
   const statusText = mapStatusToTemplate[type] ? mapStatusToTemplate[type](status) : 'Loading...'
 
@@ -56,16 +56,18 @@ const UserStatus = ({ isLoading, status, actorName }) => {
             showLoadingAnimation
           >
             <span>
-              {actorName} {statusText} <em>– {ago(new Date(updated))}</em>
+              {actorName} {statusText}
             </span>
           </Placeholder>
-          <CardFooter customStyles={{ justifyContent: 'flex-end' }}>
+
+          <CardFooter>
             <Placeholder
               color='#efefef'
-              customPlaceholder={<TextRow style={{ marginTop: 0, width: '140px' }} />}
+              customPlaceholder={<TextRow color='#efefef' style={{ marginTop: 0, width: '150px', height: '15px' }} />}
               ready={!isLoading}
               showLoadingAnimation
             >
+              <span>Posted {ago(new Date(created))}</span>
               <ViewExternal platform='Goodreads' />
             </Placeholder>
           </CardFooter>