diff --git a/public/images/blog/post001.jpg b/public/images/blog/post001.jpg deleted file mode 100644 index 5ddd4d8..0000000 Binary files a/public/images/blog/post001.jpg and /dev/null differ diff --git a/public/images/blog/post002.jpg b/public/images/blog/post002.jpg deleted file mode 100644 index 1fa5d69..0000000 Binary files a/public/images/blog/post002.jpg and /dev/null differ diff --git a/public/images/blog/post003.jpg b/public/images/blog/post003.jpg deleted file mode 100644 index 1a59c2b..0000000 Binary files a/public/images/blog/post003.jpg and /dev/null differ diff --git a/public/images/blog/post004.jpg b/public/images/blog/post004.jpg deleted file mode 100644 index f2b279d..0000000 Binary files a/public/images/blog/post004.jpg and /dev/null differ diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss index 6786f6e..76227be 100644 --- a/src/components/common/footer/footer.module.scss +++ b/src/components/common/footer/footer.module.scss @@ -178,10 +178,10 @@ } display: flex; - gap: tovw(160px, 'default', 55px); + gap: tovw(105px, 'default', 65px); @media screen and (max-width: 1180px) { - gap: tovw(65px, 'default', 65px); + gap: tovw(70px, 'default', 15px); } } } diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss index df2306d..73b2099 100644 --- a/src/components/sections/about/hero/hero.module.scss +++ b/src/components/sections/about/hero/hero.module.scss @@ -45,7 +45,7 @@ .body { display: flex; flex-direction: column; - margin-top: tovw(16px, 'default', 10px); + margin-top: tovw(26px, 'default', 26px); gap: tovw(89px, 'default', 56px); .header { diff --git a/src/components/sections/about/related/related.module.scss b/src/components/sections/about/related/related.module.scss index 77b9b76..42a40bf 100644 --- a/src/components/sections/about/related/related.module.scss +++ b/src/components/sections/about/related/related.module.scss @@ -1,11 +1,15 @@ @import '~/css/helpers'; .section { + @include respond-to('mobile') { + padding-bottom: tovw(80px, 'mobile', 140px); + } + display: flex; align-items: center; flex-direction: column; - margin-top: tovw(55px, 'default', 20px); - padding: tovw(170px, 'default', 140px) 0; + margin-top: tovw(35px, 'default', 20px); + padding: tovw(130px, 'default', 95px) 0; .slider__container { @include respond-to('mobile') { diff --git a/src/components/sections/about/related/related.ts b/src/components/sections/about/related/related.ts deleted file mode 100644 index 10cc4b3..0000000 --- a/src/components/sections/about/related/related.ts +++ /dev/null @@ -1,29 +0,0 @@ -export const related = [ - { - author: 'STEPHAN WILLSON', - date: '04.25.22', - imgSrc: '/images/blog/post002.jpg', - title: 'State of Verifiable Data', - preview: - 'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.', - link: '/blog/article' - }, - { - author: 'BRIAN MILLER', - date: '01.31.22', - imgSrc: '/images/blog/post001.jpg', - title: '7 Trends Transforming DeFi 2022', - preview: - 'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.', - link: '/blog/article' - }, - { - author: 'BRIAN MILLER', - date: '06.25.22', - imgSrc: '/images/blog/post003.jpg', - title: '7 Trends Transforming DeFi 2022', - preview: - 'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.', - link: '/blog/article' - } -] diff --git a/src/components/sections/about/team/team.module.scss b/src/components/sections/about/team/team.module.scss index fe643a8..f8ba5c2 100644 --- a/src/components/sections/about/team/team.module.scss +++ b/src/components/sections/about/team/team.module.scss @@ -7,7 +7,7 @@ position: relative; margin-top: tovw(24px, 'default', 16px); - padding: tovw(124px, 'default', 100px) 0; + padding: tovw(124px, 'default', 120px) 0 tovw(124px, 'default', 80px) 0; .container { @include respond-to('mobile') { @@ -107,7 +107,8 @@ overflow: unset !important; scroll-behavior: smooth; } - @media screen and (min-width: 1400px) { + + @media screen and (min-width: 901px) { display: flex; justify-content: flex-start; gap: tovw(100px, 'default', 40px); @@ -166,7 +167,7 @@ } .darker { - @media screen and (max-width: 1400px) { + @media screen and (max-width: 600px) { transition: filter var(--normal-transition); filter: opacity(40%); } diff --git a/src/components/sections/about/team/team.tsx b/src/components/sections/about/team/team.tsx index 55b53dd..9d73fc7 100644 --- a/src/components/sections/about/team/team.tsx +++ b/src/components/sections/about/team/team.tsx @@ -75,13 +75,13 @@ function Team({ members, teamName, teamNumber, teamDept }: Teams) { setCurrentSlide(slider.track.details.rel) }, breakpoints: { - '(min-width: 600px)': { - slides: { perView: 2.25, spacing: 40, origin: 'center' } + '(max-width: 900px)': { + slides: { perView: 2.45, spacing: 25, origin: 'center' } }, - '(min-width: 800px)': { - slides: { perView: 2.65, spacing: 25, origin: 'center' } + '(max-width: 600px)': { + slides: { perView: 1.65, spacing: 40, origin: 'center' } }, - '(min-width: 1400px)': { + '(min-width: 901px)': { disabled: true } }, diff --git a/src/lib/utils/blog.ts b/src/lib/utils/blog.ts index 17dab07..d5d1524 100644 --- a/src/lib/utils/blog.ts +++ b/src/lib/utils/blog.ts @@ -2,12 +2,25 @@ import { render } from 'datocms-structured-text-to-plain-text' import { BlogPostFragment } from 'lib/cms/generated' export const getPlainTextContent = (post: BlogPostFragment) => { - const text = render(post.content) + const children = post?.content?.value.document.children + + const filtered = children.filter((block: any) => block.type === 'paragraph') + + const textBlocks = [] + + for (const block of filtered) { + const paragraph = render(block) + textBlocks.push(paragraph) + } + + const text = textBlocks.join(' ') + return text ?? '' } export const getDescription = (post: BlogPostFragment) => { let text = getPlainTextContent(post) + const charLimit = 200 text = text.substring(0, charLimit) let words = text.trim().split(/\s+/) diff --git a/src/pages/products.tsx b/src/pages/products.tsx index 61fee39..b2e50ad 100644 --- a/src/pages/products.tsx +++ b/src/pages/products.tsx @@ -1,5 +1,12 @@ +import { + getBlogPosts as serverGetBlogPosts, + getBlogPostsCategories as serverGetBlogPostsCategories +} from 'lib/blog' +import { InferGetStaticPropsType } from 'next' + import { Meta } from '~/components/common/meta' import { PageLayout } from '~/components/layout/page' +import Related from '~/components/sections/about/related' import AppSection from '~/components/sections/products/app' import Hero from '~/components/sections/products/hero' import Network from '~/components/sections/products/network' @@ -7,9 +14,33 @@ import Network from '~/components/sections/products/network' import Stack from '~/components/sections/products/stack' import Token from '~/components/sections/products/token' -import { Page } from './_app' +export const getStaticProps = async () => { + const [allBlogPosts, categories] = await Promise.all([ + serverGetBlogPosts({ page: 1 }), + serverGetBlogPostsCategories() + ]) -const Products: Page = () => { + const heroBlogPost = allBlogPosts.data[0] + + return { + props: { + initialBlogPosts: { + pagination: allBlogPosts.pagination, + data: allBlogPosts.data.slice(0, 3) + }, + categories, + page: + { + heroBlogPost + } ?? null + }, + revalidate: 1 + } +} + +const Products = ({ + initialBlogPosts +}: InferGetStaticPropsType) => { return ( @@ -18,6 +49,7 @@ const Products: Page = () => { + {/* */} )