Skip to content

Commit

Permalink
Update the blog date information (#390)
Browse files Browse the repository at this point in the history 
* feat: add product page section one

* feat: add section one cards

* feat: add links and chevron icon to section one cards

* feat: adapt carousel dots style

* feat: add hover states to second slide from section two

* feat: add hover states to slide 4 from section 2 carousel

* feat: add hover states to connectors groups

* feat: add tablet and mobile slides to section two carousel

* feat: add hover and active effects to section one buttons

* feat: make section one responsive for tablet and mobile screens

* feat: add section three

* feat: add section four

* feat: add section five

* feat: add section six

* fix: tweaks for video and tabs

* feat: add section seven

* feat: add button to advantages component

* feat: add section eight

* feat: add section nine

* feat: add section ten

* feat: add section eleven

* feat: add section twelve

* feat: add section thirteen

* feat: add section fourteen

* feat: replace Power with Scale in all tables and replace docs links

* fix: use image size x1 instead os x4 from figma

* feat: replace product page first sentence from section one

* fix: reduce section one and two vertical margins so the section one fits laptop 1280x720px

* fix: avoid form submission with empty field

* fix: add underline to links from the footer and fix Github and Docs links colors

* fix: External link https://docs.estuary.dev/ was detected in a Link component - we should replace Gatsby Link with OutboundLink

* fix: solve ssr hydration issue with the FlowDemoVideo

* fix: more tweaks - avoid ssr hydration issue for outbound links due to condition and make section one icons load eager

* refactor: move product folder from layouts to components such as we did with the homepage

* fix: add adjustments to the section two slides

* feat: make slide 4 become slide 1 in section two carousel and reduce the slides height

* feat: replace timescale and rockset connectors with mongodb and dynamodb

* feat: add tooltip and accordion texts to the key features section

* fix: add some tweaks

* fix: add review fixes related to the comments

* fix: declare variable outside the component to avoid redeclaring on rerendering

* fix: remove unnecessary loading prop as default value is already lazy

* fix: optimize css removing repeated code

* feat: remove unused images from old product page

* Adding in the updated date for blog posts
Adding in updated to the schema data as well

---------

Co-authored-by: Brenosalv <brenosalvadordefreitas@gmail.com>
Co-authored-by: Breno Salvador <60396753+Brenosalv@users.noreply.github.com>
  • Loading branch information
@travjenkins @Brenosalv
3 people authored Jul 10, 2024
1 parent 7e85562 commit 2fd16a8
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 44 deletions.
97 changes: 54 additions & 43 deletions src/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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;
}

Expand Down Expand Up @@ -464,7 +464,8 @@ input {
}
}

.global-header-title-light {}
.global-header-title-light {
}

.global-header-wrapper {
display: flex;
Expand Down Expand Up @@ -903,7 +904,7 @@ input {
display: flex;
align-items: center;

&>a {
& > a {
color: #5072eb;
font-weight: 500;

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -1901,7 +1906,7 @@ table th {
color: #04192b;
}

&>span {
& > span {
font-weight: 400;
font-size: 18px;
line-height: 30px;
Expand Down Expand Up @@ -1957,7 +1962,7 @@ table th {
background-color: #04192b;
min-height: 400px;

>div:first-of-type {
> div:first-of-type {
width: 100% !important;
}
}
Expand Down Expand Up @@ -2036,7 +2041,7 @@ table th {
display: flex;
margin: auto;

&>svg {
& > svg {
width: 100%;
}
}
Expand Down Expand Up @@ -2382,7 +2387,7 @@ table th {
background-size: 35%;
background-position-y: 60%;

&>div:last-child {
& > div:last-child {
width: 100%;
max-width: 50rem;
}
Expand Down Expand Up @@ -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;
Expand All @@ -2524,7 +2529,7 @@ table th {
margin-top: 0;
}

&>p {
& > p {
font-weight: 400;
font-size: 17px;
line-height: 30px;
Expand Down Expand Up @@ -2751,7 +2756,7 @@ table th {
transform: none;
gap: 0;

>div {
> div {
padding: 0px 32px;

.content {
Expand All @@ -2763,7 +2768,7 @@ table th {
}
}

>div:first-of-type {
> div:first-of-type {
.content {
padding: 0;
}
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -2957,7 +2961,7 @@ table th {
}
}

&> :not(:first-child) {
& > :not(:first-child) {
display: none;
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -3043,7 +3048,8 @@ table th {
font-size: 0.625rem;
}

.react-player {}
.react-player {
}

.section-three-try-it-button,
.section-four-try-it-button,
Expand Down Expand Up @@ -3406,7 +3412,8 @@ table th {
font-size: var(--fontSize-0);
}

.arrow {}
.arrow {
}

.global-footer-input-email::placeholder {
font-size: var(--fontSize-0);
Expand Down Expand Up @@ -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);
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -4399,7 +4410,6 @@ table th {
}

&:last-child {

.estuary-value,
.competitor-value,
.matters-value {
Expand Down Expand Up @@ -4477,7 +4487,6 @@ table th {
}

a {

svg,
img {
height: 50px;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -5887,7 +5897,7 @@ table th {
margin: 0;
}

&>table {
& > table {
width: 100%;
min-width: 400px;
margin-top: 0;
Expand Down Expand Up @@ -6001,7 +6011,6 @@ table th {

ul,
ol {

li span,
li a,
li {
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -6859,4 +6870,4 @@ table th {
--banner-font-size-lg: 18px;
--banner-font-size: 14px;
}
}
}
18 changes: 17 additions & 1 deletion src/templates/blog-post/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -340,6 +353,7 @@ export const Head = ({
},
},
'datePublished': post.machineReadablePublishDate,
'dateModified': post.machineReadableUpdateDate,
})}
</script>
</>
Expand All @@ -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 {
Expand Down

0 comments on commit 2fd16a8

Please sign in to comment.