add blog to nav and add app cta to posts

blockworks-foundation · Jan 23, 2024 · 32992c5 · 32992c5 · vercel · Jan 23, 2024
1 parent d6cc257
commit 32992c5
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 23 deletions.
diff --git a/app/(pages)/blog/[slug]/page.tsx b/app/(pages)/blog/[slug]/page.tsx
@@ -5,6 +5,7 @@ import { fetchBlogPost, fetchBlogPosts } from '../../../../contentful/blogPost'
 import RichText from '../../../components/rich-text/RichText'
 import PostDetails from '../../../components/blog/PostDetails'
 import PageHeader from '../../../components/explore/PageHeader'
+import AppCallToAction from '../../../components/shared/AppCallToAction'
 
 interface BlogPostPageParams {
   slug: string
@@ -58,14 +59,22 @@ async function BlogPostPage({ params }: BlogPostPageProps) {
     return notFound()
   }
 
-  const { category, postTitle, postContent } = blogPost
+  const { category, postTitle, postContent, ctaTitle, ctaDescription, ctaUrl } =
+    blogPost
+
+  const ctaData = { ctaTitle, ctaDescription, ctaUrl }
 
   return (
     <>
       <PageHeader title={postTitle} tag={category} showBack />
       <div className="px-6 lg:px-20 pb-10 md:pb-16 max-w-3xl mx-auto">
         <PostDetails post={blogPost} />
         <RichText document={postContent} />
+        {ctaData?.ctaUrl ? (
+          <div className="pt-6">
+            <AppCallToAction data={ctaData} />
+          </div>
+        ) : null}
       </div>
     </>
   )

diff --git a/app/(pages)/learn/[slug]/page.tsx b/app/(pages)/learn/[slug]/page.tsx
@@ -8,6 +8,7 @@ import {
 import RichText from '../../../components/rich-text/RichText'
 import PostDetails from '../../../components/blog/PostDetails'
 import PageHeader from '../../../components/explore/PageHeader'
+import AppCallToAction from '../../../components/shared/AppCallToAction'
 
 interface LearnPostPageParams {
   slug: string
@@ -61,14 +62,22 @@ async function LearnPostPage({ params }: LearnPostPageProps) {
     return notFound()
   }
 
-  const { category, postTitle, postContent } = learnPost
+  const { category, postTitle, postContent, ctaTitle, ctaDescription, ctaUrl } =
+    learnPost
+
+  const ctaData = { ctaTitle, ctaDescription, ctaUrl }
 
   return (
     <>
       <PageHeader title={postTitle} tag={category} showBack />
       <div className="px-6 lg:px-20 pb-10 md:pb-16 max-w-3xl mx-auto">
         <PostDetails post={learnPost} />
         <RichText document={postContent} />
+        {ctaData?.ctaUrl ? (
+          <div className="pt-6">
+            <AppCallToAction data={ctaData} />
+          </div>
+        ) : null}
       </div>
     </>
   )

diff --git a/app/components/navigation/DesktopNavigation.tsx b/app/components/navigation/DesktopNavigation.tsx
@@ -11,6 +11,8 @@ import NavigationItemLink from './NavigationItemLink'
 import ButtonLink from '../shared/ButtonLink'
 import Twitter from '../icons/Twitter'
 import Discord from '../icons/Discord'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
 
 const DesktopNavigation = () => {
   return (
@@ -24,6 +26,7 @@ const DesktopNavigation = () => {
           />
         </NavigationItemPanel>
       </NavigationItem>
+      <NavigationLink path="/blog" text="Blog" />
       {/* <NavigationLink path="/learn" text="Learn" /> */}
       <NavigationItem title="Developers">
         <NavigationItemPanel>
@@ -184,19 +187,19 @@ const NavigationItemPanel = ({ children }: { children: ReactNode }) => {
   return <div className="bg-th-bkg-2 py-4 rounded-lg">{children}</div>
 }
 
-// const NavigationLink = ({ path, text }: { path: string; text: string }) => {
-//   const pathname = usePathname()
-//   return (
-//     <Link href={path} shallow>
-//       <span
-//         className={`font-display ${
-//           pathname?.includes(path)
-//             ? 'text-th-active md:hover:text-th-active'
-//             : 'text-th-fgd-2 md:hover:text-th-fgd-1'
-//         } default-transition text-base`}
-//       >
-//         {text}
-//       </span>
-//     </Link>
-//   )
-// }
+const NavigationLink = ({ path, text }: { path: string; text: string }) => {
+  const pathname = usePathname()
+  return (
+    <Link href={path} shallow>
+      <span
+        className={`font-display ${
+          pathname?.includes(path)
+            ? 'text-th-active md:hover:text-th-active'
+            : 'text-th-fgd-2 md:hover:text-th-fgd-1'
+        } default-transition text-base`}
+      >
+        {text}
+      </span>
+    </Link>
+  )
+}
diff --git a/app/components/shared/AppCallToAction.tsx b/app/components/shared/AppCallToAction.tsx
@@ -0,0 +1,55 @@
+import Image from 'next/image'
+import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
+import ButtonLink from './ButtonLink'
+
+type CtaData = {
+  ctaDescription: string | undefined
+  ctaTitle: string | undefined
+  ctaUrl: string | undefined
+}
+
+const AppCallToAction = ({ data }: { data: CtaData }) => {
+  const { ctaDescription, ctaTitle, ctaUrl } = data
+  const logoUrl = `/icons/tokens/mngo.svg`
+  return (
+    <span className="bg-th-bkg-1 border border-th-bkg-4 p-4 md:px-6 rounded-lg flex flex-col md:flex-row md:items-center md:justify-between my-4">
+      <span className="flex items-center space-x-3">
+        {logoUrl ? (
+          <Image
+            className="flex-shrink-0"
+            src={logoUrl}
+            alt={`Mango Logo`}
+            height={40}
+            width={40}
+          />
+        ) : (
+          <QuestionMarkCircleIcon className="h-10 w-10 text-th-fgd-4 flex-shrink-0" />
+        )}
+        <span>
+          {ctaTitle ? (
+            <span className="text-th-fgd-2 text-base block font-display">
+              {ctaTitle}
+            </span>
+          ) : null}
+          {ctaDescription ? (
+            <span className="text-sm block text-th-fgd-2">
+              {ctaDescription}
+            </span>
+          ) : null}
+        </span>
+      </span>
+      {ctaUrl ? (
+        <span className="flex space-x-2 md:pl-4 pt-4 md:pt-0">
+          <ButtonLink
+            linkText="Let's Go!"
+            path={ctaUrl}
+            size="small"
+            target="_blank"
+          />
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+export default AppCallToAction
diff --git a/contentful/blogPost.ts b/contentful/blogPost.ts
@@ -20,6 +20,9 @@ export interface BlogPost {
   category: string
   seoTitle: string | undefined
   seoDescription: string | undefined
+  ctaTitle: string | undefined
+  ctaDescription: string | undefined
+  ctaUrl: string | undefined
 }
 
 // A function to transform a Contentful blog post
@@ -47,6 +50,9 @@ export function parseContentfulBlogPost(
     category: blogPostEntry.fields.category,
     seoTitle: blogPostEntry.fields.seoTitle,
     seoDescription: blogPostEntry.fields.seoDescription,
+    ctaTitle: blogPostEntry.fields.ctaTitle,
+    ctaDescription: blogPostEntry.fields.ctaDescription,
+    ctaUrl: blogPostEntry.fields.ctaUrl,
   }
 }
 

diff --git a/contentful/learnPost.ts b/contentful/learnPost.ts
@@ -20,6 +20,9 @@ export interface LearnPost {
   category: string
   seoTitle: string | undefined
   seoDescription: string | undefined
+  ctaTitle: string | undefined
+  ctaDescription: string | undefined
+  ctaUrl: string | undefined
 }
 
 // A function to transform a Contentful blog post
@@ -47,6 +50,9 @@ export function parseContentfulLearnPost(
     category: learnPostEntry.fields.category,
     seoTitle: learnPostEntry.fields.seoTitle,
     seoDescription: learnPostEntry.fields.seoDescription,
+    ctaTitle: learnPostEntry.fields.ctaTitle,
+    ctaDescription: learnPostEntry.fields.ctaDescription,
+    ctaUrl: learnPostEntry.fields.ctaUrl,
   }
 }
 

diff --git a/contentful/types/TypeBlogPost.ts b/contentful/types/TypeBlogPost.ts
@@ -10,13 +10,16 @@ export interface TypeBlogPostFields {
   postTitle: EntryFieldTypes.Symbol
   slug: EntryFieldTypes.Symbol
   author?: EntryFieldTypes.Symbol
-  category: EntryFieldTypes.Symbol<'Repost'>
+  category: EntryFieldTypes.Symbol<'Meme Coins' | 'Repost'>
   authorProfileImage?: EntryFieldTypes.AssetLink
   postDescription: EntryFieldTypes.Text
   postContent: EntryFieldTypes.RichText
   postHeroImage?: EntryFieldTypes.AssetLink
   seoTitle?: EntryFieldTypes.Symbol
   seoDescription?: EntryFieldTypes.Text
+  ctaTitle?: EntryFieldTypes.Symbol
+  ctaDescription?: EntryFieldTypes.Symbol
+  ctaUrl?: EntryFieldTypes.Symbol
 }
 
 export type TypeBlogPostSkeleton = EntrySkeletonType<

diff --git a/contentful/types/TypeLearnPost.ts b/contentful/types/TypeLearnPost.ts
@@ -17,6 +17,9 @@ export interface TypeLearnPostFields {
   postHeroImage?: EntryFieldTypes.AssetLink
   seoTitle?: EntryFieldTypes.Symbol
   seoDescription?: EntryFieldTypes.Text
+  ctaTitle?: EntryFieldTypes.Symbol
+  ctaDescription?: EntryFieldTypes.Symbol
+  ctaUrl?: EntryFieldTypes.Symbol
 }
 
 export type TypeLearnPostSkeleton = EntrySkeletonType<

diff --git a/contentful/types/TypeNewsArticle.ts b/contentful/types/TypeNewsArticle.ts
@@ -23,6 +23,7 @@ export interface TypeNewsArticleFields {
       | 'CORN'
       | 'CROWN'
       | 'Communication'
+      | 'DAI'
       | 'DUAL'
       | 'DeFi'
       | 'DePIN'
@@ -35,13 +36,13 @@ export interface TypeNewsArticleFields {
       | 'Gaming'
       | 'Governance'
       | 'HNT'
-      | 'Infrastructure'
       | 'JLP'
       | 'JTO'
       | 'JitoSOL'
       | 'KIN'
       | 'LDO'
       | 'Layer 1'
+      | 'Layer 2'
       | 'Liquid Staking'
       | 'MNGO'
       | 'Meme'

diff --git a/contentful/types/TypeToken.ts b/contentful/types/TypeToken.ts
@@ -16,9 +16,7 @@ export interface TypeTokenFields {
     EntryFieldTypes.Symbol<
       | 'AI'
       | 'AMM'
-      | 'Blue Chip'
       | 'Bridged (Portal)'
-      | 'Communication'
       | 'DeFi'
       | 'DePIN'
       | 'Dog Coin'
@@ -29,6 +27,7 @@ export interface TypeTokenFields {
       | 'Governance'
       | 'Infrastructure'
       | 'Layer 1'
+      | 'Layer 2'
       | 'Liquid Staking'
       | 'Meme'
       | 'Options'

diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo