feat: add open graph for some pages

1. / 2. /mining 3. /ckbpage 4. /journey 5. /community 6. /developers 7. /foundation 8. /knowledge-base 9. /learn 10. /media-kit 11. /wallets Ref: #384
Magickbase · Jan 4, 2024 · 3e151e3 · 3e151e3
1 parent c9c655e
commit 3e151e3
Show file tree

Hide file tree

Showing 23 changed files with 209 additions and 31 deletions.
diff --git a/public/images/topics/CKB.png b/public/images/topics/CKB.png
diff --git a/public/images/topics/Community.png b/public/images/topics/Community.png
diff --git a/public/images/topics/Develpoers.png b/public/images/topics/Develpoers.png
diff --git a/public/images/topics/Foundation.png b/public/images/topics/Foundation.png
diff --git a/public/images/topics/Homepage.png b/public/images/topics/Homepage.png
diff --git a/public/images/topics/Journey.png b/public/images/topics/Journey.png
diff --git a/public/images/topics/Knowledge_Base.png b/public/images/topics/Knowledge_Base.png
diff --git a/public/images/topics/Learn.png b/public/images/topics/Learn.png
diff --git a/public/images/topics/Media_Kit.png b/public/images/topics/Media_Kit.png
diff --git a/public/images/topics/Mining.png b/public/images/topics/Mining.png
diff --git a/public/images/topics/Wallets.png b/public/images/topics/Wallets.png
diff --git a/src/components/BaseSeparatePage/index.tsx b/src/components/BaseSeparatePage/index.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { FC, ReactNode, useState } from 'react'
+import type { OGProperties } from '../OpenGraph'
 import type { Author } from '../../utils/github'
 import { Description, DescriptionType } from './Description'
 import { Functions, FunctionsType } from './Functions'
@@ -43,6 +44,7 @@ export type BaseSeparatePageType = HeaderType &
     }[]
     contributors: Array<Author>
     author: Author | null
+    openGraph?: OGProperties | ((props: OGProperties) => OGProperties)
   }
 
 export const BaseSeparatePage: FC<BaseSeparatePageType> = props => {

diff --git a/src/pages/ckbpage/index.page.tsx b/src/pages/ckbpage/index.page.tsx
@@ -1,9 +1,10 @@
 import type { GetStaticProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
 import Head from 'next/head'
 import { Trans, useTranslation } from 'next-i18next'
 import { BaseSeparatePage } from 'src/components/BaseSeparatePage'
 import { StyledLink } from 'src/components/StyledLink'
-import { REPO, fetchContributors, lastContributor, Author, LastAuthor } from 'src/utils'
+import { REPO, fetchContributors, lastContributor, Author, LastAuthor, BASE_URL } from 'src/utils'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Embellished from './embellished.svg'
 import { useIsMobile } from '../../hooks'
@@ -21,7 +22,8 @@ interface PageProps {
 }
 
 const CkbPage: NextPage<PageProps> = ({ contributors, author }) => {
-  const { t } = useTranslation(['ckbpage', 'common'])
+  const [t, { language }] = useTranslation(['ckbpage', 'common'])
+  const { pathname } = useRouter()
   const isMobile = useIsMobile()
 
   const floatIcons = (
@@ -92,10 +94,12 @@ const CkbPage: NextPage<PageProps> = ({ contributors, author }) => {
     },
   ]
 
+  const pageTitle = 'Nervos Network | CKB'
+
   return (
     <>
       <Head>
-        <title>Nervos Network | CKB</title>
+        <title>{pageTitle}</title>
       </Head>
       <BaseSeparatePage
         embellishedElements={
@@ -125,6 +129,18 @@ const CkbPage: NextPage<PageProps> = ({ contributors, author }) => {
         contributors={contributors}
         author={author}
         functions={functions}
+        openGraph={props => ({
+          ...props,
+          type: 'website',
+          title: t('title'),
+          description: t('slogan'),
+          site_name: pageTitle,
+          url: `${BASE_URL}/${language}${pathname}`,
+          image: {
+            alt: 'coverImage',
+            url: `${BASE_URL}/images/topics/CKB.png`,
+          },
+        })}
       />
     </>
   )

diff --git a/src/pages/community/index.page.tsx b/src/pages/community/index.page.tsx
@@ -1,9 +1,10 @@
 import type { GetStaticProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
 import { Trans, useTranslation } from 'next-i18next'
 import Head from 'next/head'
 import { BaseSeparatePage } from 'src/components/BaseSeparatePage'
 import { StyledLink } from 'src/components/StyledLink'
-import { REPO, fetchContributors, lastContributor, Author, LastAuthor } from 'src/utils'
+import { REPO, fetchContributors, lastContributor, Author, LastAuthor, BASE_URL } from 'src/utils'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import EmbellishedLeft from './embellished_left.svg'
 import EmbellishedRight from './embellished_right.svg'
@@ -38,7 +39,8 @@ interface PageProps {
 }
 
 const Community: NextPage<PageProps> = ({ contributors, author }) => {
-  const [t] = useTranslation(['community', 'common'])
+  const [t, { language }] = useTranslation(['community', 'common'])
+  const { pathname } = useRouter()
   const isMobile = useIsMobile()
 
   useBodyClass([presets.themeDark ?? ''])
@@ -120,10 +122,12 @@ const Community: NextPage<PageProps> = ({ contributors, author }) => {
     </div>
   )
 
+  const pageTitle = 'Nervos Network | Community'
+
   return (
     <>
       <Head>
-        <title>Nervos Network | Community</title>
+        <title>{pageTitle}</title>
       </Head>
       <BaseSeparatePage
         embellishedElements={
@@ -153,6 +157,18 @@ const Community: NextPage<PageProps> = ({ contributors, author }) => {
         author={author}
         contributors={contributors}
         functions={functions}
+        openGraph={props => ({
+          ...props,
+          type: 'website',
+          title: t('title'),
+          description: t('slogan'),
+          site_name: pageTitle,
+          url: `${BASE_URL}/${language}${pathname}`,
+          image: {
+            alt: 'coverImage',
+            url: `${BASE_URL}/images/topics/Community.png`,
+          },
+        })}
       />
     </>
   )

diff --git a/src/pages/developers/index.page.tsx b/src/pages/developers/index.page.tsx
@@ -1,7 +1,8 @@
 import { GetStaticProps, type NextPage } from 'next'
+import { useRouter } from 'next/router'
 import Head from 'next/head'
 import { BaseSeparatePage } from 'src/components/BaseSeparatePage'
-import { REPO, Author, fetchContributors, LastAuthor, lastContributor } from 'src/utils'
+import { REPO, Author, fetchContributors, LastAuthor, lastContributor, BASE_URL } from 'src/utils'
 import presets from 'src/styles/presets.module.scss'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
@@ -22,7 +23,8 @@ interface PageProps {
 }
 
 const Developers: NextPage<PageProps> = ({ contributors, author }) => {
-  const [t] = useTranslation(['developers', 'common'])
+  const [t, { language }] = useTranslation(['developers', 'common'])
+  const { pathname } = useRouter()
   const isMobile = useIsMobile()
 
   useBodyClass([presets.themeDark ?? ''])
@@ -91,10 +93,12 @@ const Developers: NextPage<PageProps> = ({ contributors, author }) => {
     ],
   }
 
+  const pageTitle = 'Nervos Network | Developers'
+
   return (
     <>
       <Head>
-        <title>Nervos Network | Developers</title>
+        <title>{pageTitle}</title>
       </Head>
       <BaseSeparatePage
         embellishedElements={
@@ -133,6 +137,18 @@ const Developers: NextPage<PageProps> = ({ contributors, author }) => {
         contributors={contributors}
         functions={functions}
         resourceData={resourceData}
+        openGraph={props => ({
+          ...props,
+          type: 'website',
+          title: t('title'),
+          description: t('slogan'),
+          site_name: pageTitle,
+          url: `${BASE_URL}/${language}${pathname}`,
+          image: {
+            alt: 'coverImage',
+            url: `${BASE_URL}/images/topics/Developers.png`,
+          },
+        })}
       />
     </>
   )

diff --git a/src/pages/foundation/index.page.tsx b/src/pages/foundation/index.page.tsx
@@ -1,10 +1,11 @@
 import type { GetStaticProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
 import Head from 'next/head'
 import { Trans, useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useIsMobile } from 'src/hooks'
 import { BaseSeparatePage } from 'src/components/BaseSeparatePage'
-import { REPO, Author, fetchContributors, LastAuthor, lastContributor } from 'src/utils'
+import { REPO, Author, fetchContributors, LastAuthor, lastContributor, BASE_URL } from 'src/utils'
 import { StyledLink } from 'src/components/StyledLink'
 import EmbellishedLeft from './embellished_left.svg'
 import EmbellishedRight from './embellished_right.svg'
@@ -22,7 +23,8 @@ interface PageProps {
 }
 
 const Foundation: NextPage<PageProps> = ({ contributors, author }) => {
-  const [t] = useTranslation(['foundation', 'common'])
+  const [t, { language }] = useTranslation(['foundation', 'common'])
+  const { pathname } = useRouter()
   const isMobile = useIsMobile()
 
   const floatIcons = (
@@ -97,10 +99,12 @@ const Foundation: NextPage<PageProps> = ({ contributors, author }) => {
     },
   ]
 
+  const pageTitle = 'Nervos Network | Foundation'
+
   return (
     <>
       <Head>
-        <title>Nervos Network | Foundation</title>
+        <title>{pageTitle}</title>
       </Head>
       <BaseSeparatePage
         embellishedElements={
@@ -150,6 +154,18 @@ const Foundation: NextPage<PageProps> = ({ contributors, author }) => {
         functionsClassName={styles.functionsClassName}
         isProgressBar={false}
         isNeedSupports
+        openGraph={props => ({
+          ...props,
+          type: 'website',
+          title: t('title'),
+          description: t('slogan'),
+          site_name: pageTitle,
+          url: `${BASE_URL}/${language}${pathname}`,
+          image: {
+            alt: 'coverImage',
+            url: `${BASE_URL}/images/topics/Foundation.png`,
+          },
+        })}
       />
     </>
   )

diff --git a/src/pages/home/index.page.tsx b/src/pages/home/index.page.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { Portal, Transition } from '@headlessui/react'
 import Link from 'next/link'
+import { BASE_URL } from 'src/utils'
 import { useElementIntersecting, useElementSize, useIsMobile, useMouse } from '../../hooks'
 import {
   ConwayGameOfLife,
@@ -33,7 +34,7 @@ export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
 }
 
 const Home: NextPage = () => {
-  const { t } = useTranslation('home')
+  const [t, { language }] = useTranslation('home')
   const isMobile = useIsMobile()
 
   const ref = useRef<HTMLDivElement>(null)
@@ -62,6 +63,15 @@ const Home: NextPage = () => {
       tabIndex={0}
       onKeyDown={onKeyDown}
       className={clsx({ [styles.isOnOperableArea ?? '']: isOnOperableArea })}
+      openGraph={props => ({
+        ...props,
+        type: 'website',
+        url: `${BASE_URL}/${language}`,
+        image: {
+          alt: 'coverImage',
+          url: `${BASE_URL}/images/topics/Homepage.png`,
+        },
+      })}
     >
       {({ renderHeader, renderFooter }) => (
         <>

diff --git a/src/pages/journey/index.page.tsx b/src/pages/journey/index.page.tsx
@@ -1,8 +1,11 @@
 import type { GetStaticProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
 import { Page } from 'src/components/Page'
 import clsx from 'clsx'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { BASE_URL } from 'src/utils'
 import { StyledLink } from '../../components/StyledLink'
 import { useBodyClass, useIsMobile } from '../../hooks'
 import styles from './index.module.scss'
@@ -13,7 +16,8 @@ import { Journey } from './Journey'
 
 const Roadmap: NextPage = () => {
   useBodyClass([presets.themeDark ?? ''])
-  const [t] = useTranslation(['journey', 'common'])
+  const [t, { language }] = useTranslation(['journey', 'common'])
+  const { pathname } = useRouter()
   const isMobile = useIsMobile()
   const isDesktop = !isMobile
   const sections = [
@@ -138,9 +142,28 @@ const Roadmap: NextPage = () => {
     joinLinkText: t('journey.link_text'),
   }
 
+  const pageTitle = 'Nervos Network | Journey'
+
   return (
     <>
-      <Page className={styles.baseSeparatePage}>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      <Page
+        className={styles.baseSeparatePage}
+        openGraph={props => ({
+          ...props,
+          type: 'website',
+          title: t('title'),
+          description: `${t('subtitle.never_finished')}, ${t('subtitle.always_building')}`,
+          url: `${BASE_URL}/${language}${pathname}`,
+          site_name: pageTitle,
+          image: {
+            alt: 'coverImage',
+            url: `${BASE_URL}/images/topics/Journey.png`,
+          },
+        })}
+      >
         <div className={styles.content}>
           {isDesktop && (
             <>

diff --git a/src/pages/knowledge-base/index.page.tsx b/src/pages/knowledge-base/index.page.tsx
@@ -9,7 +9,7 @@ import ExpandedAuthors from 'src/components/KnowledgeBase/ExpandedAuthorList'
 import { SyntheticEvent, useState } from 'react'
 import Category from '../../components/Category'
 import { Page } from '../../components/Page'
-import { getTimeFormatter } from '../../utils'
+import { BASE_URL, getTimeFormatter } from '../../utils'
 import { Blog, getAllBlogs, getCategoriesFromBlogs } from '../../utils/blogs'
 import styles from './index.module.scss'
 import EmbellishedLeft from './embellished_left.svg'
@@ -62,7 +62,7 @@ const Index = ({ posts, populars, categories, pageCount }: Props) => {
   const getBlogKey = (post: Blog, type: BlogType) => `${type}-${post.slug}`
   const shouldExpandAuthorList = (post: Blog, type: BlogType) =>
     postsToExpandAuthorList.findIndex(item => item === getBlogKey(post, type)) !== -1
-  const [t] = useTranslation(['knowledge-base'])
+  const [t, { language }] = useTranslation(['knowledge-base'])
   /* eslint-disable-next-line @typescript-eslint/unbound-method */
   const formatTime = (date: Date) => {
     try {
@@ -74,6 +74,7 @@ const Index = ({ posts, populars, categories, pageCount }: Props) => {
   }
 
   const {
+    pathname,
     query: { sort_by = 'all' },
     push,
   } = useRouter()
@@ -129,12 +130,26 @@ const Index = ({ posts, populars, categories, pageCount }: Props) => {
     )
   }
 
+  const pageTitle = `Nervos Network | ${t('knowledge_base')}`
+
   return (
     <>
       <Head>
-        <title>{`Nervos Network | ${t('knowledge_base')}`}</title>
+        <title>{pageTitle}</title>
       </Head>
-      <Page>
+      <Page
+        openGraph={props => ({
+          ...props,
+          type: 'website',
+          title: t('knowledge_base'),
+          site_name: pageTitle,
+          url: `${BASE_URL}/${language}${pathname}`,
+          image: {
+            alt: 'coverImage',
+            url: `${BASE_URL}/images/topics/Knowledge_Base.png`,
+          },
+        })}
+      >
         <div className={styles.banner}>
           <EmbellishedLeft width={906} height={527} className={styles.left} />
           <EmbellishedRight width={906} height={521} className={styles.right} />