refactor(blog): move to evm app

sushi-labs · Jun 20, 2024 · 467af93 · 467af93
1 parent 4e94128
commit 467af93
Show file tree

Hide file tree

Showing 306 changed files with 6,928 additions and 2,451 deletions.
diff --git a/apps/blog/components/ArticleListItem.tsx b/apps/blog/components/ArticleListItem.tsx
@@ -1,7 +1,7 @@
 import { Chip } from '@sushiswap/ui'
 import format from 'date-fns/format'
+import { Article } from 'lib/strapi/article'
 import type { FC } from 'react'
-import type { Article } from 'types'
 import { Image } from './Image'
 
 interface ArticleListItem {
@@ -12,36 +12,36 @@ export const ArticleListItem: FC<ArticleListItem> = ({ article }) => {
   return (
     <a
       className="grid grid-cols-[200px_auto] md:grid-cols-[300px_auto] py-8 gap-x-8 cursor-pointer border-slate-200/5"
-      href={`/blog/${article.attributes.slug}`}
+      href={`/blog/${article.slug}`}
     >
-      {article.attributes.cover.data ? (
+      {article.cover ? (
         <div className="relative rounded-2xl overflow-hidden h-[120px] md:h-[160px]">
           {}
           <Image
             className="group-hover:scale-105 transition duration-[400ms]"
-            image={article.attributes.cover.data}
+            image={article.cover}
             quality={5}
           />
         </div>
       ) : null}
       <div className="flex flex-col gap-2 md:gap-3">
-        {(article.attributes.categories.data || []).length > 0 && (
+        {article.categories.length > 0 && (
           <div className="flex gap-1 md:pt-3">
-            {article.attributes.categories.data.map((category) => (
+            {article.categories.map((category) => (
               <Chip key={category.id} variant="ghost">
-                {category.attributes.name}
+                {category.name}
               </Chip>
             ))}
           </div>
         )}
         <div className="flex flex-col gap-2 lg:gap-3">
           <div className="text-base font-medium md:text-2xl text-slate-200">
-            {article.attributes.title}
+            {article.title}
           </div>
           {/*<p className="text-slate-400 line-clamp-2">{article?.attributes.description}</p>*/}
           <p className="text-sm font-medium text-slate-400">
-            {article.attributes.publishedAt
-              ? format(new Date(article.attributes.publishedAt), 'dd MMM, yyyy')
+            {article.publishedAt
+              ? format(new Date(article.publishedAt), 'dd MMM, yyyy')
               : null}
           </p>
         </div>

diff --git a/apps/blog/components/Categories.tsx b/apps/blog/components/Categories.tsx
@@ -1,7 +1,7 @@
 import { Toggle } from '@sushiswap/ui'
+import { Category } from 'lib/strapi/categories'
 import type { Dispatch, FC, SetStateAction } from 'react'
 import { useCallback } from 'react'
-import type { Category } from 'types'
 
 interface Categories {
   selected: string[]
@@ -28,17 +28,17 @@ export const Categories: FC<Categories> = ({
   return (
     <>
       {categories.map((category) => {
-        if (!category.id) return <></>
+        if (!category) return <></>
 
         return (
           <Toggle
             key={category.id}
             onPressedChange={() => {
-              handleSelect(category.id)
+              handleSelect(category.id.toString())
             }}
-            pressed={Boolean(selected.includes(category.id))}
+            pressed={Boolean(selected.includes(category.id.toString()))}
           >
-            {category.attributes.name}
+            {category.name}
           </Toggle>
         )
       })}

diff --git a/apps/blog/components/Hero.tsx b/apps/blog/components/Hero.tsx
@@ -1,10 +1,10 @@
 import { Button, Container, LinkInternal } from '@sushiswap/ui'
-import type { GhostArticle } from 'lib/ghost'
+import { Article } from 'lib/strapi/article'
 import type { FC } from 'react'
 import { ArticleAuthors, ArticleHeader } from './article'
 
 interface Hero {
-  article: GhostArticle
+  article: Article
 }
 
 export const Hero: FC<Hero> = ({ article }) => {
@@ -16,7 +16,7 @@ export const Hero: FC<Hero> = ({ article }) => {
           <ArticleAuthors article={article} />
           <div className="mt-8">
             <Button asChild>
-              <LinkInternal href={`/${article.attributes.slug}`}>
+              <LinkInternal href={`/${article.slug}`}>
                 Read Article
               </LinkInternal>
             </Button>

diff --git a/apps/blog/components/Image.tsx b/apps/blog/components/Image.tsx
@@ -1,7 +1,8 @@
 import { classNames } from '@sushiswap/ui'
+import { imageSchema } from 'lib/strapi/image'
 import NextImage from 'next/legacy/image'
 import type { FC } from 'react'
-import type { Image as ImageType } from 'types'
+import { z } from 'zod'
 import { getOptimizedMedia, isMediaVideo } from '../lib/media'
 
 interface ImageProps {
@@ -11,12 +12,7 @@ interface ImageProps {
   layout?: 'fill' | 'responsive'
   objectFit?: 'cover' | 'contain'
   className?: string
-  image: {
-    attributes: Pick<
-      ImageType['attributes'],
-      'provider_metadata' | 'url' | 'width' | 'height' | 'alternativeText'
-    >
-  }
+  image: z.infer<typeof imageSchema>
 }
 
 export const Image: FC<ImageProps> = ({
@@ -28,11 +24,11 @@ export const Image: FC<ImageProps> = ({
   layout = 'fill',
   objectFit = 'cover',
 }) => {
-  if (!image.attributes.url) {
+  if (!image.url) {
     return <></>
   }
 
-  if (isMediaVideo(image.attributes.provider_metadata)) {
+  if (isMediaVideo(image.provider_metadata)) {
     return (
       <video
         autoPlay
@@ -44,14 +40,14 @@ export const Image: FC<ImageProps> = ({
       >
         <source
           src={getOptimizedMedia({
-            metadata: image.attributes.provider_metadata,
+            metadata: image.provider_metadata,
           })}
         />
       </video>
     )
   }
 
-  const { width: _width, height: _height, alternativeText } = image.attributes
+  const { width: _width, height: _height, alternativeText } = image
 
   return (
     <NextImage
@@ -62,7 +58,7 @@ export const Image: FC<ImageProps> = ({
       objectFit={objectFit}
       quality={quality}
       src={getOptimizedMedia({
-        metadata: image.attributes.provider_metadata,
+        metadata: image.provider_metadata,
         width,
         height,
       })}

diff --git a/apps/blog/components/MediaBlock.tsx b/apps/blog/components/MediaBlock.tsx
diff --git a/apps/blog/components/PreviewBanner.tsx b/apps/blog/components/PreviewBanner.tsx
diff --git a/apps/blog/components/article-list.tsx b/apps/blog/components/article-list.tsx
@@ -1,5 +1,5 @@
+import { Article } from 'lib/strapi/article'
 import type { FC, ReactNode } from 'react'
-import type { Article } from '../types'
 import { CardSkeleton } from './card/card-skeleton'
 
 interface ArticleListProps {

diff --git a/apps/blog/components/article/ArticleAuthors.tsx b/apps/blog/components/article/ArticleAuthors.tsx
@@ -1,42 +1,36 @@
-import type { GhostArticle } from 'lib/ghost'
+import { Article } from 'lib/strapi/article'
 import type { FC } from 'react'
 import { Image } from '../Image'
 
 interface ArticleAuthors {
-  article?: GhostArticle
+  article: Article
 }
 
 export const ArticleAuthors: FC<ArticleAuthors> = ({ article }) => {
   return (
     <div className="mt-6">
       <ul className="flex flex-wrap -mx-5 -mt-6 text-sm leading-6">
-        {article?.attributes.authors.data.map((author) => (
+        {article.authors.map((author) => (
           <li
             className="flex items-center px-5 mt-6 font-medium whitespace-nowrap"
-            key={author.attributes.email}
+            key={author.email}
           >
             <div className="relative mr-3 overflow-hidden rounded-full w-9 h-9 bg-slate-800">
-              {author.attributes.avatar.data ? (
-                <Image
-                  height={64}
-                  image={author.attributes.avatar.data}
-                  width={64}
-                />
+              {author.avatar ? (
+                <Image height={64} image={author.avatar} width={64} />
               ) : null}
             </div>
             <div className="text-sm leading-4">
-              <div className="font-medium text-slate-200">
-                {author.attributes.name}
-              </div>
-              {author.attributes.handle ? (
+              <div className="font-medium text-slate-200">{author.name}</div>
+              {author.handle ? (
                 <div className="mt-1">
                   <a
                     className="font-medium text-sky-400"
-                    href={`https://twitter.com/${author.attributes.handle}`}
+                    href={`https://twitter.com/${author.handle}`}
                     rel="noreferrer"
                     target="_blank"
                   >
-                    @{author.attributes.handle}
+                    @{author.handle}
                   </a>
                 </div>
               ) : null}

diff --git a/apps/blog/components/article/ArticleFooter.tsx b/apps/blog/components/article/ArticleFooter.tsx
@@ -1,11 +1,11 @@
 import { LinkInternal } from '@sushiswap/ui'
 import { Button } from '@sushiswap/ui'
 import format from 'date-fns/format'
+import { Article } from 'lib/strapi/article'
 import type { FC } from 'react'
-import type { Article } from 'types'
 
 interface ArticleFooter {
-  articles?: Article[]
+  articles: Article[]
 }
 
 export const ArticleFooter: FC<ArticleFooter> = ({ articles }) => {
@@ -18,17 +18,14 @@ export const ArticleFooter: FC<ArticleFooter> = ({ articles }) => {
         {articles?.map((article) => (
           <article className="flex flex-col items-start" key={article.id}>
             <h3 className="order-1 text-lg font-semibold text-slate-200">
-              {article.attributes.title}
+              {article.title}
             </h3>
-            {article.attributes.publishedAt ? (
+            {article.publishedAt ? (
               <time
                 className="text-sm leading-7 text-slate-400"
-                dateTime={article.attributes.publishedAt}
+                dateTime={article.publishedAt}
               >
-                {format(
-                  new Date(article.attributes.publishedAt),
-                  'dd MMM yyyy',
-                )}
+                {format(new Date(article.publishedAt), 'dd MMM yyyy')}
               </time>
             ) : null}
             <Button
@@ -37,9 +34,7 @@ export const ArticleFooter: FC<ArticleFooter> = ({ articles }) => {
               size="sm"
               variant="secondary"
             >
-              <LinkInternal href={`/${article.attributes.slug}`}>
-                Read more
-              </LinkInternal>
+              <LinkInternal href={`/${article.slug}`}>Read more</LinkInternal>
             </Button>
           </article>
         ))}

diff --git a/apps/blog/components/article/ArticleHeader.tsx b/apps/blog/components/article/ArticleHeader.tsx
@@ -1,29 +1,26 @@
 import format from 'date-fns/format'
+import { Article } from 'lib/strapi/article'
 import type { FC } from 'react'
-import type { Article } from 'types'
 
 interface ArticleHeader {
-  article?: Article
+  article: Article
 }
 
 export const ArticleHeader: FC<ArticleHeader> = ({ article }) => {
   return (
     <>
       <h1 className="text-2xl font-medium tracking-tight text-slate-200 md:text-3xl">
-        {article?.attributes.title}
+        {article.title}
       </h1>
       <h3 className="mt-1 text-lg tracking-tight text-slate-500">
-        {article?.attributes.description}
+        {article.description}
       </h3>
       <dl>
         <dt className="sr-only">Date</dt>
         <dd className="absolute inset-x-0 top-0 text-slate-400">
-          {article?.attributes.publishedAt ? (
-            <time dateTime={article.attributes.publishedAt}>
-              {format(
-                new Date(article.attributes.publishedAt),
-                'EEEE, dd MMM yyyy',
-              )}
+          {article.publishedAt ? (
+            <time dateTime={article.publishedAt}>
+              {format(new Date(article.publishedAt), 'EEEE, dd MMM yyyy')}
             </time>
           ) : null}
         </dd>