Skip to content

Commit 82192f3

Browse files
rockgold0911rockgold0911
committed
feat(UI): add SEO
1 parent 94ca3f3 commit 82192f3

File tree

8 files changed

+98
-47
lines changed

8 files changed

+98
-47
lines changed

‎components/Header.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import Head from 'next/head'
2+
3+
export type HeaderProps = {
4+
title?: string
5+
description?: string
6+
ogDescription?: string
7+
image?: string
8+
twitter?: string
9+
}
10+
const Header: FC<HeaderProps> = (props) => {
11+
const title = props.title || 'NFT3 Pass | Your Decentralized Identity for Web 3.0'
12+
const description = props.description || 'NFT3 Pass is your decentralized identity (DID) for Web 3.0'
13+
const ogDescription = props.ogDescription || 'Connect everything in the first unified social identity network'
14+
const image = props.image || 'https://pass.nft3.com/logo.svg'
15+
const twitter = props.twitter || '@nft3com'
16+
return (
17+
<Head>
18+
<title>{title}</title>
19+
<meta name="description" content={description} />
20+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
21+
<link rel="icon" href="/favicon.ico" />
22+
23+
<meta property="og:type" content="website" />
24+
<meta key="og:site_name" property="og:site_name" content={title} />
25+
<meta key="og:image" property="og:image" content={image} />
26+
<meta key="og:description" property="og:description" content={ogDescription} />
27+
<meta key="og:title" property="og:title" content={title} />
28+
<meta key="og:url" property="og:url" content="https://pass.nft3.com/" />
29+
30+
<meta name="twitter:card" content="summary" />
31+
<meta name="twitter:title" content={title} />
32+
<meta name="twitter:site" content={twitter} />
33+
</Head>
34+
)
35+
}
36+
37+
export default Header

‎domains/data/nft3/hooks/useIpfs.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ const BaseUrl = 'https://t0.onebitdev.com/ipfs'
77
export default function useIpfs() {
88
const format = useCallback((link: string) => {
99
if (!link) return
10-
const url = new URL(link)
11-
const key = url.pathname.replace(/^\/\//, '')
10+
const key = link.replace(/^ipfs:\/\//, '')
1211
return `${BaseUrl}/${key}`
1312
}, [])
1413

‎domains/data/nft3/profile/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ const useProfileService = () => {
6565

6666
setDidname,
6767
setProfile,
68+
setProfileInternal,
6869
updateProfile,
6970
updateDidInfo,
7071

‎pages/[id].tsx

+39-20
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,56 @@
1-
import { useNFT3Profile } from 'domains/data'
2-
import type { GetStaticPaths, GetStaticProps } from 'next'
1+
import { NFT3Client } from '@nft3sdk/client'
2+
import type { ProfileModel, WithMeta } from '@nft3sdk/client'
3+
import { useNFT3, useNFT3Profile } from 'domains/data'
4+
import type { GetServerSideProps } from 'next'
35
import { useEffect, Fragment } from 'react'
46
import ProfileBoard from 'UI/profile-board'
5-
import Head from 'next/head'
7+
import { NFT3Endpoint } from './_app'
8+
import type { HeaderProps } from 'components/Header'
9+
import Header from 'components/Header'
610

7-
export const getStaticProps: GetStaticProps = (props) => {
8-
const { id } = props.params
9-
return {
10-
props: {
11-
id: typeof id === 'string' ? id : id[0],
12-
},
11+
export const getServerSideProps: GetServerSideProps = async (context) => {
12+
const { id } = context.params
13+
const didname = typeof id === 'string' ? id : id[0]
14+
const client = new NFT3Client(NFT3Endpoint)
15+
const did = client.did.convertName(didname)
16+
const promises = []
17+
const data: any = {
18+
profile: undefined,
1319
}
14-
}
20+
promises.push(client.profile.info(did).then((profile) => (data.profile = profile)))
21+
22+
await Promise.all(promises)
1523

16-
export const getStaticPaths: GetStaticPaths = () => {
1724
return {
18-
paths: [],
19-
fallback: 'blocking',
25+
props: {
26+
id: didname,
27+
...data,
28+
},
2029
}
2130
}
2231

23-
const IndexPage: FC<{ id: string }> = (props) => {
24-
const { setDidname } = useNFT3Profile()
32+
const IndexPage: FC<{ id: string; profile: WithMeta<ProfileModel> }> = (props) => {
33+
const { id, profile } = props
34+
const { format } = useNFT3()
35+
const { setDidname, setProfileInternal } = useNFT3Profile()
2536

2637
useEffect(() => {
27-
setDidname(props.id)
28-
}, [props.id, setDidname])
38+
setDidname(id)
39+
setProfileInternal(profile)
40+
}, [id, profile, setDidname, setProfileInternal])
41+
42+
const headerProps: HeaderProps = {}
43+
44+
if (profile) {
45+
headerProps.title = `${id}.isme | NFT3 Pass`
46+
headerProps.description = profile.bio
47+
headerProps.ogDescription = headerProps.description
48+
headerProps.image = format(profile.avatar)
49+
}
2950

3051
return (
3152
<Fragment>
32-
<Head>
33-
<title>{`${props.id}.isme | NFT3 Pass`}</title>
34-
</Head>
53+
<Header {...headerProps} />
3554
<ProfileBoard />
3655
</Fragment>
3756
)

‎pages/_app.tsx

+2-17
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,14 @@ import { NFT3Provider } from '@nft3sdk/did-manager'
99
import 'lib/toastify/styles.css'
1010
import 'simplebar-react/dist/simplebar.min.css'
1111

12-
const endpoint = 'https://t0.onebitdev.com/nft3-gateway/'
12+
export const NFT3Endpoint = 'https://t0.onebitdev.com/nft3-gateway/'
1313

1414
function MainApp(props: MyAppProps): JSX.Element {
1515
return (
16-
<NFT3Provider endpoint={endpoint} silent>
16+
<NFT3Provider endpoint={NFT3Endpoint} silent>
1717
<StoreProvider store={store}>
1818
<DomainsProvider>
1919
<Head>
20-
<title>NFT3 Pass | Your Decentralized Identity for Web 3.0</title>
21-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
22-
<link rel="icon" href="/favicon.ico" />
23-
<meta name="description" content="NFT3 Pass is your decentralized identity (DID) for Web 3.0" />
24-
25-
<meta property="og:type" content="website" />
26-
<meta key="og:site_name" property="og:site_name" content="NFT3 Pass | Your Decentralized Identity for Web 3.0" />
27-
<meta key="og:image" property="og:image" content="https://pass.nft3.com/logo.svg" />
28-
<meta key="og:description" property="og:description" content="Connect everything in the first unified social identity network" />
29-
<meta key="og:title" property="og:title" content="NFT3 Pass" />
30-
<meta key="og:url" property="og:url" content="https://pass.nft3.com/" />
31-
32-
<meta name="twitter:card" content="summary" />
33-
<meta name="twitter:title" content="NFT3 Pass | Your Decentralized Identity for Web 3.0" />
34-
<meta name="twitter:site" content="@nft3com" />
3520
</Head>
3621
<App {...props} />
3722
</DomainsProvider>

‎pages/app/edit-profile/index.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import { Fragment } from 'react'
22
import UI from 'UI/profile'
33
import Container from '@mui/material/Container'
4-
import Head from 'next/head'
4+
import Header from 'components/Header'
55

66
const IndexPage = (): JSX.Element => {
77
return (
88
<Fragment>
9-
<Head>
10-
<title>NFT3 Pass | Edit Profile</title>
11-
</Head>
9+
<Header title="NFT3 Pass | Edit Profile" />
1210
<Container sx={{ width: { sm: 1, md: 0.6 }, padding: 0 }}>
1311
<UI />
1412
</Container>

‎pages/app/explore.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
import React from 'react'
1+
import Header from 'components/Header'
2+
import React, { Fragment } from 'react'
23
import UI from 'UI/explore'
34

45
const Page = (): JSX.Element => {
5-
return <UI />
6+
return (
7+
<Fragment>
8+
<Header />
9+
<UI />
10+
</Fragment>
11+
)
612
}
713

814
export default Page

‎pages/index.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
import React from 'react'
1+
import Header from 'components/Header'
2+
import React, { Fragment } from 'react'
23
import Home from 'UI/home'
34

45
const IndexPage = (): JSX.Element => {
5-
return <Home />
6+
return (
7+
<Fragment>
8+
<Header />
9+
<Home />
10+
</Fragment>
11+
)
612
}
713

814
export default IndexPage

0 commit comments

Comments
 (0)