Update the blog date information

src/style.less

@@ -161,16 +161,16 @@ h6 {
     font-size: var(--fontSize-1);
 }
 
-h1>a {
+h1 > a {
     color: inherit;
     text-decoration: none;
 }
 
-h2>a,
-h3>a,
-h4>a,
-h5>a,
-h6>a {
+h2 > a,
+h3 > a,
+h4 > a,
+h5 > a,
+h6 > a {
     text-decoration: none;
     color: inherit;
 }
@@ -202,15 +202,15 @@ ol li {
     margin-bottom: calc(var(--spacing-6) / 2);
 }
 
-li>p {
+li > p {
     margin-bottom: calc(var(--spacing-6) / 2);
 }
 
 li *:last-child {
     margin-bottom: var(--spacing-0);
 }
 
-li>ul {
+li > ul {
     margin-left: var(--spacing-8);
     margin-top: calc(var(--spacing-8) / 2);
 }
@@ -231,12 +231,12 @@ blockquote {
     margin-bottom: var(--spacing-8);
 }
 
-blockquote> :last-child {
+blockquote > :last-child {
     margin-bottom: var(--spacing-0);
 }
 
-blockquote>ul,
-blockquote>ol {
+blockquote > ul,
+blockquote > ol {
     list-style-position: inside;
 }
 
@@ -464,7 +464,8 @@ input {
     }
 }
 
-.global-header-title-light {}
+.global-header-title-light {
+}
 
 .global-header-wrapper {
     display: flex;
@@ -903,7 +904,7 @@ input {
     display: flex;
     align-items: center;
 
-    &>a {
+    & > a {
         color: #5072eb;
         font-weight: 500;
 
@@ -1093,7 +1094,6 @@ input {
 }
 
 .blog-post {
-
     // The auto-detection isn't great so until we start tagging languages let's just hide this
     .language-tag {
         display: none;
@@ -1150,11 +1150,11 @@ nav.blog-post-nav {
             text-decoration: underline;
         }
 
-        &> :first-child {
+        & > :first-child {
             margin-right: 5px;
         }
 
-        &> :last-child {
+        & > :last-child {
             margin-left: 5px;
         }
     }
@@ -1211,6 +1211,11 @@ table th {
     font-weight: 200;
     text-align: left;
     margin: var(--spacing-4) 0;
+
+    span {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 .blog-post header p {
@@ -1901,7 +1906,7 @@ table th {
         color: #04192b;
     }
 
-    &>span {
+    & > span {
         font-weight: 400;
         font-size: 18px;
         line-height: 30px;
@@ -1957,7 +1962,7 @@ table th {
     background-color: #04192b;
     min-height: 400px;
 
-    >div:first-of-type {
+    > div:first-of-type {
         width: 100% !important;
     }
 }
@@ -2036,7 +2041,7 @@ table th {
     display: flex;
     margin: auto;
 
-    &>svg {
+    & > svg {
         width: 100%;
     }
 }
@@ -2382,7 +2387,7 @@ table th {
     background-size: 35%;
     background-position-y: 60%;
 
-    &>div:last-child {
+    & > div:last-child {
         width: 100%;
         max-width: 50rem;
     }
@@ -2515,7 +2520,7 @@ table th {
         box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
     }
 
-    &>p {
+    & > p {
         font-weight: 400;
         font-size: 17px;
         line-height: 30px;
@@ -2524,7 +2529,7 @@ table th {
         margin-top: 0;
     }
 
-    &>p {
+    & > p {
         font-weight: 400;
         font-size: 17px;
         line-height: 30px;
@@ -2751,7 +2756,7 @@ table th {
         transform: none;
         gap: 0;
 
-        >div {
+        > div {
             padding: 0px 32px;
 
             .content {
@@ -2763,7 +2768,7 @@ table th {
             }
         }
 
-        >div:first-of-type {
+        > div:first-of-type {
             .content {
                 padding: 0;
             }
@@ -2805,8 +2810,7 @@ table th {
             gap: 0;
             width: 100%;
 
-            @media (max-width: 350px),
-            (max-height: 350px) {
+            @media (max-width: 350px), (max-height: 350px) {
                 padding: 0;
             }
 
@@ -2944,7 +2948,7 @@ table th {
     .section-one-right-image {
         margin-left: 0px;
 
-        &> :first-child {
+        & > :first-child {
             overflow: visible;
             max-height: 55vw;
             min-height: 14rem;
@@ -2957,7 +2961,7 @@ table th {
             }
         }
 
-        &> :not(:first-child) {
+        & > :not(:first-child) {
             display: none;
         }
     }
@@ -2989,7 +2993,8 @@ table th {
         font-size: 1.75rem;
     }
 
-    .section-two-header-vectors {}
+    .section-two-header-vectors {
+    }
 
     .section-two-first-graphic-wrapper {
         margin-left: 20px;
@@ -3043,7 +3048,8 @@ table th {
         font-size: 0.625rem;
     }
 
-    .react-player {}
+    .react-player {
+    }
 
     .section-three-try-it-button,
     .section-four-try-it-button,
@@ -3406,7 +3412,8 @@ table th {
         font-size: var(--fontSize-0);
     }
 
-    .arrow {}
+    .arrow {
+    }
 
     .global-footer-input-email::placeholder {
         font-size: var(--fontSize-0);
@@ -3596,7 +3603,8 @@ table th {
 
 @media (max-width: 42rem) {
     blockquote {
-        padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-4);
+        padding: var(--spacing-0) var(--spacing-0) var(--spacing-0)
+            var(--spacing-4);
         margin-left: var(--spacing-0);
     }
 
@@ -3622,7 +3630,8 @@ table th {
         background: url(./images/lp-podcast/img-bg.png) no-repeat center / cover;
 
         @media (max-width: 991px) {
-            background: url(./images/lp-podcast/img-bg.png) no-repeat center right / cover;
+            background: url(./images/lp-podcast/img-bg.png) no-repeat center
+                right / cover;
         }
 
         .hero-container {
@@ -3999,12 +4008,14 @@ table th {
     .signup-bg {
         .section-top-bottom-padding();
 
-        background: #04192b url(./images/lp-podcast/signup-bg.png) no-repeat center / cover;
+        background: #04192b url(./images/lp-podcast/signup-bg.png) no-repeat
+            center / cover;
         width: 100%;
         height: auto;
 
         @media (max-width: 767px) {
-            background: #04192b url(./images/lp-podcast/signup-bg.png) no-repeat center / contain;
+            background: #04192b url(./images/lp-podcast/signup-bg.png) no-repeat
+                center / contain;
         }
     }
 
@@ -4399,7 +4410,6 @@ table th {
             }
 
             &:last-child {
-
                 .estuary-value,
                 .competitor-value,
                 .matters-value {
@@ -4477,7 +4487,6 @@ table th {
             }
 
             a {
-
                 svg,
                 img {
                     height: 50px;
@@ -4935,7 +4944,8 @@ table th {
     }
 
     .main-content-wrap {
-        background: url(./images/product-demo-background.png) no-repeat top center / cover;
+        background: url(./images/product-demo-background.png) no-repeat top
+            center / cover;
         width: 100%;
         padding: 132px calc((100% - 1180px - 340px) / 2);
         height: 100vh;
@@ -5887,7 +5897,7 @@ table th {
                     margin: 0;
                 }
 
-                &>table {
+                & > table {
                     width: 100%;
                     min-width: 400px;
                     margin-top: 0;
@@ -6001,7 +6011,6 @@ table th {
 
         ul,
         ol {
-
             li span,
             li a,
             li {
@@ -6682,7 +6691,8 @@ table th {
         }
 
         .banner {
-            background: #04192b url('./images/pattern-sidebar-cta.svg') no-repeat bottom left / contain;
+            background: #04192b url('./images/pattern-sidebar-cta.svg')
+                no-repeat bottom left / contain;
             text-align: center;
             border-radius: 16px;
             padding-top: 16px;
@@ -6705,7 +6715,8 @@ table th {
             display: block;
             width: 224px;
             height: 128px;
-            background: url('./images/build-pipeline.svg') no-repeat bottom / contain;
+            background: url('./images/build-pipeline.svg') no-repeat bottom /
+                contain;
         }
 
         h3 {
@@ -6859,4 +6870,4 @@ table th {
         --banner-font-size-lg: 18px;
         --banner-font-size: 14px;
     }
-}
+}

src/templates/blog-post/index.tsx

@@ -31,6 +31,10 @@ const BlogPostTemplate = ({ data: { post } }) => {
 
     const authorSocialLink = post?.authors[0]?.link */
 
+    const hasBeenUpdated = post?.updatedAt
+        ? post?.publishedAt !== post?.updatedAt
+        : false;
+
     return (
         <Layout>
             <div className="blog-post-breadcrumbs-wrapper">
@@ -73,7 +77,16 @@ const BlogPostTemplate = ({ data: { post } }) => {
                                     <div className="icon-info-wrapper">
                                         <CalendarTodayOutlined className="icon" />
                                         <span className="blog-post-date">
-                                            {post.publishedAt}
+                                            <span>
+                                                {hasBeenUpdated
+                                                    ? `Published ${post.publishedAt}`
+                                                    : post.publishedAt}
+                                            </span>
+                                            {hasBeenUpdated ? (
+                                                <span>
+                                                    Updated {post.updatedAt}
+                                                </span>
+                                            ) : null}
                                         </span>
                                     </div>
 
@@ -340,6 +353,7 @@ export const Head = ({
                         },
                     },
                     'datePublished': post.machineReadablePublishDate,
+                    'dateModified': post.machineReadableUpdateDate,
                 })}
             </script>
         </>
@@ -358,7 +372,9 @@ export const pageQuery = graphql`
         post: strapiBlogPost(id: { eq: $id }) {
             title: Title
             publishedAt(formatString: "MMMM D, YYYY")
+            updatedAt(formatString: "MMMM D, YYYY")
             machineReadablePublishDate: publishedAt(formatString: "YYYY-MM-DD")
+            machineReadableUpdateDate: updatedAt(formatString: "YYYY-MM-DD")
             description: Description
             slug: Slug
             body: Body {