Change slides data for CMS (#43)

src/components/common/card/index.tsx

@@ -19,7 +19,7 @@ interface CardProps {
 
 const Card = ({ className, data, isNews = false }: CardProps) => {
   return (
-    <NextLink href={data.link}>
+    <NextLink href={isNews ? `/blog/${data?.slug}` : data?.link}>
       <div className={clsx(s['card'], className)}>
         <div className={s['card__header']}>
           {!isNews && (
@@ -28,7 +28,7 @@ const Card = ({ className, data, isNews = false }: CardProps) => {
           <div className={isNews ? s.is_news : ''}>
             {isNews && (
               <span className={s.author}>
-                BY <span className={s.separator}>—</span> {data?.author}
+                BY <span className={s.separator}>—</span> {data?.author.name}
               </span>
             )}
             <span className={s.date}>
@@ -44,14 +44,18 @@ const Card = ({ className, data, isNews = false }: CardProps) => {
           </div>
         </div>
         <div className={s['image__container']}>
-          <img alt={data?.title} loading="lazy" src={data?.imgSrc} />
+          <img
+            alt={data?.title}
+            loading="lazy"
+            src={isNews ? data?.image.url : data?.imgSrc}
+          />
         </div>
         <div className={s['content']}>
           <Heading as="h2" variant="sm" font="tthoves">
             {data?.title}
           </Heading>
-          <p>{data?.preview}</p>
-          <Link href={data?.link}>
+          <p>{isNews ? getDescription(data) : data?.preview}</p>
+          <Link href={isNews ? `/blog/${data?.slug}` : data?.link}>
             {isNews ? 'READ ARTICLE' : 'LEARN MORE'}
           </Link>
         </div>

src/components/sections/about/related/index.tsx

@@ -2,16 +2,22 @@ import 'keen-slider/keen-slider.min.css'
 
 import clsx from 'clsx'
 import { useKeenSlider } from 'keen-slider/react'
+import { Key } from 'react'
 
 import Card from '~/components/common/card'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
 
-import { related } from './related'
 import s from './related.module.scss'
 
-const Related = () => {
+// TODO
+export interface Props {
+  isInPost?: boolean
+  data: any
+}
+
+const Related = ({ data, isInPost }: Props) => {
   const [sliderRef] = useKeenSlider<HTMLDivElement>({
     initial: 0,
     loop: true,
@@ -32,14 +38,14 @@ const Related = () => {
 
   return (
     <Section className={s['section']}>
-      <Container className={s['heading']}>
+      <Container className={clsx(s['heading'], isInPost && s.altheader)}>
         <Heading as="h2" variant="lg">
-          Learn More
+          {isInPost ? 'Related articles' : 'Learn More'}
         </Heading>
       </Container>
       <div className={s['slider__container']}>
         <div className={clsx(s['events'], 'keen-slider')} ref={sliderRef}>
-          {related.map((item, i) => (
+          {data.map((item: any, i: Key) => (
             <Card key={i} data={item} className="keen-slider__slide" isNews />
           ))}
         </div>

src/components/sections/about/related/related.module.scss

@@ -35,6 +35,12 @@
     justify-content: space-between;
     margin-bottom: tovw(90px, 'default', 64px);
 
+    &.altheader {
+      @media screen and (min-width: 1141px) {
+        place-content: center;
+      }
+    }
+
     h2 {
       text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
     }

src/components/sections/homepage/latest-news/index.tsx

@@ -1,7 +1,7 @@
 import 'keen-slider/keen-slider.min.css'
 
 import { useKeenSlider } from 'keen-slider/react'
-import { useState } from 'react'
+import { Key, useState } from 'react'
 
 import Card from '~/components/common/card'
 import { ArrowSlider } from '~/components/icons/arrow'
@@ -10,9 +10,13 @@ import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
 
 import s from './latest-news.module.scss'
-import { latestNews } from './news'
 
-const LatestNews = () => {
+// TODO
+export interface Props {
+  data: any
+}
+
+const LatestNews = ({ data }: Props) => {
   const [loaded, setLoaded] = useState(false)
 
   const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
@@ -42,7 +46,7 @@ const LatestNews = () => {
       </Container>
       <div className={s['slider__container']}>
         <div className={`${s.events__container} keen-slider`} ref={sliderRef}>
-          {latestNews.map((item, i) => (
+          {data.map((item: any, i: Key) => (
             <Card key={i} data={item} className={`keen-slider__slide`} isNews />
           ))}
         </div>

src/components/sections/homepage/latest-news/news.ts

@@ -1,38 +0,0 @@
-export const latestNews = [
-  {
-    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: '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: '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'
-  },
-  {
-    author: 'STEPHAN WILLSON',
-    date: '08.25.22',
-    imgSrc: '/images/blog/post004.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'
-  }
-]

src/pages/about.tsx

@@ -1,18 +1,48 @@
+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 Hero from '~/components/sections/about/hero'
 import Related from '~/components/sections/about/related'
 import Team from '~/components/sections/about/team'
 
-import { Page } from './_app'
+export const getStaticProps = async () => {
+  const [allBlogPosts, categories] = await Promise.all([
+    serverGetBlogPosts({ page: 1 }),
+    serverGetBlogPostsCategories()
+  ])
 
-const About: 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 About = ({
+  initialBlogPosts
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
       <Meta />
       <Hero />
       <Team />
-      <Related />
+      <Related data={initialBlogPosts?.data} />
     </PageLayout>
   )
 }

src/pages/blog/[slug].tsx

@@ -12,15 +12,12 @@ import {
 } from 'next'
 import Error from 'next/error'
 import { useRouter } from 'next/router'
-import { Key } from 'react'
 
-import { BlogCard } from '~/components/common/card'
 import { Meta } from '~/components/common/meta'
+import Related from '~/components/sections/about/related'
 import Content from '~/components/sections/blog/post-content'
 import Hero from '~/components/sections/blog/post-hero'
-import PostsGrid from '~/components/sections/blog/posts-grid'
 import Shares from '~/components/sections/blog/shares'
-import { BlogPostFragment } from '~/lib/cms/generated'
 
 const BlogPost = ({
   latestPosts,
@@ -40,7 +37,7 @@ const BlogPost = ({
       <Hero data={post} />
       <Content data={post} />
       <Shares url={completeUrl} />
-      <PostsGrid title="Related articles">
+      {/* <PostsGrid title="Related articles">
         {latestPosts.map((relatedPost: BlogPostFragment, index: Key) => {
           return (
             <div key={index}>
@@ -48,7 +45,8 @@ const BlogPost = ({
             </div>
           )
         })}
-      </PostsGrid>
+      </PostsGrid> */}
+      <Related isInPost data={latestPosts} />
     </PageLayout>
   )
 }

src/pages/index.tsx

@@ -1,3 +1,9 @@
+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 Benefits from '~/components/sections/homepage/benefits'
@@ -5,15 +11,39 @@ import Hero from '~/components/sections/homepage/hero'
 import LatestNews from '~/components/sections/homepage/latest-news'
 import WhatOthersSay from '~/components/sections/homepage/what-others-say'
 
-import { Page } from './_app'
+export const getStaticProps = async () => {
+  const [allBlogPosts, categories] = await Promise.all([
+    serverGetBlogPosts({ page: 1 }),
+    serverGetBlogPostsCategories()
+  ])
 
-const HomePage: Page = () => {
+  const heroBlogPost = allBlogPosts.data[0]
+
+  return {
+    props: {
+      initialBlogPosts: {
+        pagination: allBlogPosts.pagination,
+        data: allBlogPosts.data.slice(0, 8)
+      },
+      categories,
+      page:
+        {
+          heroBlogPost
+        } ?? null
+    },
+    revalidate: 1
+  }
+}
+
+const HomePage = ({
+  initialBlogPosts
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
       <Meta />
       <Hero />
       <Benefits />
-      <LatestNews />
+      <LatestNews data={initialBlogPosts?.data} />
       <WhatOthersSay />
     </PageLayout>
   )