Skip to content

Commit 133c0d9

Browse files
devsayogdevsayog
committed
feat: add basic seo
1 parent aaabc65 commit 133c0d9

21 files changed

+95
-10
lines changed

‎public/fashion.png

7.06 KB
Loading

‎src/components/common/Error404.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import Link from 'next/link'
22

33
import { UserLayout } from './layout/UserLayout'
4+
import { Meta } from './Meta'
45

56
export function Error() {
67
return (
78
<UserLayout>
9+
<Meta pageTitle="404 Error" />
810
<div className="flex h-full w-full flex-col items-center justify-center space-y-16 space-x-8 pt-20 lg:flex-row lg:space-y-0 2xl:space-x-0">
911
<div className="flex w-full flex-col items-center justify-center text-center lg:w-1/2 lg:px-2 xl:px-0">
1012
<p className="text-7xl font-bold tracking-wider text-gray-300 md:text-8xl lg:text-9xl">

‎src/components/common/Meta.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Head from 'next/head'
2+
import { useRouter } from 'next/router'
3+
4+
import { env } from '@/env/client.mjs'
5+
6+
interface IMetaTypes {
7+
pageTitle?: string
8+
description?: string
9+
}
10+
11+
const Meta = ({
12+
pageTitle,
13+
description = 'Search and find perfect dresses and shoes for you',
14+
}: IMetaTypes) => {
15+
const router = useRouter()
16+
const url = env.NEXT_PUBLIC_CLIENT_URL
17+
const ogUrl = `${url}${router.asPath}`
18+
const ogImage = `${url}/fashion.png`
19+
const title = pageTitle
20+
? `${pageTitle.charAt(0).toUpperCase() + pageTitle.slice(1)} - Fashion`
21+
: 'Fashion'
22+
return (
23+
<Head>
24+
<meta name="viewport" content="width=device-width, initial-scale=1" />
25+
<meta charSet="utf-8" />
26+
<title>{title}</title>
27+
28+
<meta name="description" content={description} />
29+
<meta property="og:url" content={ogUrl} />
30+
<meta property="og:type" content="website" />
31+
<meta property="og:title" content={title} />
32+
<meta property="og:description" content={description} />
33+
<meta property="og:image" content={ogImage} />
34+
35+
<meta name="twitter:card" content="summary_large_image" />
36+
<meta property="twitter:domain" content="recipe-hunt.vercel.app" />
37+
<meta property="twitter:url" content={ogUrl} />
38+
<meta name="twitter:title" content={title} />
39+
<meta name="twitter:description" content={description} />
40+
<meta name="twitter:image" content={ogImage} />
41+
</Head>
42+
)
43+
}
44+
export { Meta }

‎src/env/schema.mjs

+2
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,11 @@ export const clientSchema = z.object({
2525
NEXT_PUBLIC_CLOUDINARY_KEY: z.string(),
2626
NEXT_PUBLIC_CLOUD_NAME: z.string(),
2727
NEXT_PUBLIC_PRESET: z.string(),
28+
NEXT_PUBLIC_CLIENT_URL: z.string(),
2829
})
2930
export const clientEnv = {
3031
NEXT_PUBLIC_CLOUDINARY_KEY: process.env.NEXT_PUBLIC_CLOUDINARY_KEY,
3132
NEXT_PUBLIC_CLOUD_NAME: process.env.NEXT_PUBLIC_CLOUD_NAME,
3233
NEXT_PUBLIC_PRESET: process.env.NEXT_PUBLIC_PRESET,
34+
NEXT_PUBLIC_CLIENT_URL: process.env.NEXT_PUBLIC_CLIENT_URL,
3335
}

‎src/pages/[category]/index.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import superjson from 'superjson'
77

88
import type { Category } from '@/appdata/navdata'
99
import { kidsCategory, menCategory, womenCategory } from '@/appdata/navdata'
10+
import { Meta } from '@/components/common/Meta'
1011
import { ProductCategory } from '@/components/product/ProductCategory'
1112
import { createContext } from '@/server/context'
1213
import { appRouter } from '@/server/router/_app'
@@ -19,10 +20,13 @@ export default function CategoryPage({
1920
return null
2021
}
2122
return (
22-
<ProductCategory
23-
category={category as Category}
24-
categoryList={categoryList}
25-
/>
23+
<>
24+
<Meta pageTitle={category} />
25+
<ProductCategory
26+
category={category as Category}
27+
categoryList={categoryList}
28+
/>
29+
</>
2630
)
2731
}
2832

‎src/pages/[category]/most-sold-products.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import superjson from 'superjson'
77

88
import type { Category } from '@/appdata/navdata'
99
import { kidsCategory, menCategory, womenCategory } from '@/appdata/navdata'
10+
import { Meta } from '@/components/common/Meta'
1011
import { ProductCategory } from '@/components/product/ProductCategory'
1112
import { createContext } from '@/server/context'
1213
import { appRouter } from '@/server/router/_app'
@@ -19,11 +20,14 @@ export default function Index({
1920
return null
2021
}
2122
return (
22-
<ProductCategory
23-
mostSold
24-
category={category as Category}
25-
categoryList={categoryList}
26-
/>
23+
<>
24+
<Meta pageTitle={`${category} - Most sold products`} />
25+
<ProductCategory
26+
mostSold
27+
category={category as Category}
28+
categoryList={categoryList}
29+
/>
30+
</>
2731
)
2832
}
2933

‎src/pages/[category]/new-arrivals.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import superjson from 'superjson'
77

88
import { CATEGORY_NEW_ARRIVAL_LIMIT } from '@/appdata/constants'
99
import { UserLayout } from '@/components/common/layout/UserLayout'
10+
import { Meta } from '@/components/common/Meta'
1011
import { BasicProduct } from '@/components/product/BasicProduct'
1112
import { createContext } from '@/server/context'
1213
import { appRouter } from '@/server/router/_app'
@@ -22,6 +23,7 @@ export default function NewArrivals({
2223
})
2324
return (
2425
<UserLayout>
26+
<Meta pageTitle={`${category} - New Arrivals`} />
2527
<section aria-labelledby="page-title" className="section pt-24">
2628
<h2
2729
id="page-title"

‎src/pages/dashboard/customer/[id].tsx

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { toast } from 'react-hot-toast'
55

66
import { ROLES } from '@/appdata/list'
77
import { AdminLayout } from '@/components/common/layout/AdminLayout'
8+
import { Meta } from '@/components/common/Meta'
89
import { SelectInput } from '@/components/common/Select'
910
import type { GetUser } from '@/types/user'
1011
import { getUser } from '@/types/user'
@@ -46,6 +47,7 @@ export default function Example() {
4647
}
4748
return (
4849
<AdminLayout>
50+
<Meta pageTitle="User description" />
4951
<section className="section" aria-labelledby="page-title">
5052
<h1 id="page-title" className="heading1">
5153
User: {router.query.id}

‎src/pages/dashboard/customer/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useMemo } from 'react'
55
import { AiFillEdit } from 'react-icons/ai'
66

77
import { AdminLayout } from '@/components/common/layout/AdminLayout'
8+
import { Meta } from '@/components/common/Meta'
89
import { Table } from '@/components/dashboard/common/Table'
910
import { trpc } from '@/utils/trpc'
1011

@@ -88,6 +89,7 @@ export default function Example() {
8889
)
8990
return (
9091
<AdminLayout>
92+
<Meta pageTitle="User list" />
9193
<section className="section" aria-labelledby="page-title">
9294
<h1 id="page-title" className="heading1">
9395
User list

‎src/pages/dashboard/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { AdminLayout } from '@/components/common/layout/AdminLayout'
2+
import { Meta } from '@/components/common/Meta'
23

34
export default function Dashboard() {
45
return (
56
<AdminLayout>
7+
<Meta pageTitle="Dashboard overview" />
68
<h1 className="text-3xl">
79
This is dashboard page can only be viewed by admin
810
</h1>

‎src/pages/dashboard/order/[id].tsx

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { z } from 'zod'
88

99
import { STATUSES } from '@/appdata/list'
1010
import { AdminLayout } from '@/components/common/layout/AdminLayout'
11+
import { Meta } from '@/components/common/Meta'
1112
import { SelectInput } from '@/components/common/Select'
1213
import { SubmitButton } from '@/components/dashboard/common/Buttons'
1314
import { trpc } from '@/utils/trpc'
@@ -60,6 +61,7 @@ export default function Example() {
6061
}
6162
return (
6263
<AdminLayout>
64+
<Meta pageTitle="Order description" />
6365
<section className="section" aria-labelledby="page-title">
6466
<h1 id="page-title" className="heading1">
6567
Order: {router.query.id}

‎src/pages/dashboard/order/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useMemo } from 'react'
44
import { AiFillEdit } from 'react-icons/ai'
55

66
import { AdminLayout } from '@/components/common/layout/AdminLayout'
7+
import { Meta } from '@/components/common/Meta'
78
import { Table } from '@/components/dashboard/common/Table'
89
import type { Order } from '@/types/order'
910
import { trpc } from '@/utils/trpc'
@@ -103,6 +104,7 @@ export default function Example() {
103104
)
104105
return (
105106
<AdminLayout>
107+
<Meta pageTitle="Order" />
106108
<section className="section" aria-labelledby="page-title">
107109
<h1 id="page-title" className="heading1">
108110
Order list

‎src/pages/dashboard/product/[id].tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useRouter } from 'next/router'
22
import type { ParsedUrlQuery } from 'querystring'
33

44
import { AdminLayout } from '@/components/common/layout/AdminLayout'
5+
import { Meta } from '@/components/common/Meta'
56
import { Productform } from '@/components/dashboard/product/Productform'
67
import { trpc } from '@/utils/trpc'
78

@@ -14,6 +15,7 @@ export default function Id() {
1415
const product = trpc.product.getById.useQuery({ id: id || '' })
1516
return (
1617
<AdminLayout>
18+
<Meta pageTitle={product.data?.title} />
1719
<section className="section" aria-labelledby="page-title">
1820
<h1 className="heading1">Product Description</h1>
1921
{product.isLoading && <p>LOADING...</p>}

‎src/pages/dashboard/product/create.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { AdminLayout } from '@/components/common/layout/AdminLayout'
2+
import { Meta } from '@/components/common/Meta'
23
import { Productform } from '@/components/dashboard/product/Productform'
34

45
export default function Create() {
56
return (
67
<AdminLayout>
8+
<Meta pageTitle="Add new product" />
79
<section className="section" aria-labelledby="page-title">
810
<h1 className="heading1">Add new product</h1>
911
<Productform />

‎src/pages/dashboard/product/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { toast } from 'react-hot-toast'
77
import { BsThreeDotsVertical } from 'react-icons/bs'
88

99
import { AdminLayout } from '@/components/common/layout/AdminLayout'
10+
import { Meta } from '@/components/common/Meta'
1011
import { Table } from '@/components/dashboard/common/Table'
1112
import { classNames } from '@/utils/classNames'
1213
import { trpc } from '@/utils/trpc'
@@ -173,6 +174,7 @@ export default function Index() {
173174
)
174175
return (
175176
<AdminLayout>
177+
<Meta pageTitle="Product List" />
176178
<section className="section" aria-labelledby="page-title">
177179
<h1 id="page-title" className="heading1">
178180
Product list

‎src/pages/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import Image from 'next/image'
22
import Link from 'next/link'
33

44
import { UserLayout } from '@/components/common/layout/UserLayout'
5+
import { Meta } from '@/components/common/Meta'
56

67
export default function Example() {
78
return (
89
<UserLayout>
10+
<Meta />
911
{/* Hero section */}
1012
<div className="relative h-screen bg-gray-900">
1113
{/* Decorative image and overlay */}

‎src/pages/order/[id].tsx

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useState } from 'react'
99
import superjson from 'superjson'
1010

1111
import { UserLayout } from '@/components/common/layout/UserLayout'
12+
import { Meta } from '@/components/common/Meta'
1213
import { Ratingdialog } from '@/components/rating/Ratingdialog'
1314
import { Ratingform } from '@/components/rating/Ratingform'
1415
import { createContext } from '@/server/context'
@@ -34,6 +35,7 @@ export default function OrderDetails(
3435
})
3536
return (
3637
<UserLayout>
38+
<Meta pageTitle="Order Details" />
3739
<div className="mx-auto max-w-7xl">
3840
<section aria-labelledby="page-title" className="section pt-24">
3941
<h2

‎src/pages/order/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useState } from 'react'
77
import superjson from 'superjson'
88

99
import { UserLayout } from '@/components/common/layout/UserLayout'
10+
import { Meta } from '@/components/common/Meta'
1011
import { Ratingdialog } from '@/components/rating/Ratingdialog'
1112
import { Ratingform } from '@/components/rating/Ratingform'
1213
import { createContext } from '@/server/context'
@@ -35,6 +36,7 @@ export default function Order() {
3536
const { data, error, isError, isLoading } = trpc.order.getOrders.useQuery()
3637
return (
3738
<UserLayout>
39+
<Meta pageTitle="Order" />
3840
<div className="section mx-auto max-w-7xl pt-20">
3941
<section aria-labelledby="page-title" className="mt-8 sm:px-2 lg:px-8">
4042
<h2

‎src/pages/products/[slug].tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { MdStar } from 'react-icons/md'
99
import superjson from 'superjson'
1010

1111
import { UserLayout } from '@/components/common/layout/UserLayout'
12+
import { Meta } from '@/components/common/Meta'
1213
import { useCartContext } from '@/context/CartContext'
1314
import { createContext } from '@/server/context'
1415
import { appRouter } from '@/server/router/_app'
@@ -27,7 +28,6 @@ export default function Example(
2728
if (!data) {
2829
return
2930
}
30-
console.log(data)
3131
function handleCartItemAdd() {
3232
if (!data) return
3333
addCartItem({
@@ -41,6 +41,7 @@ export default function Example(
4141
}
4242
return (
4343
<UserLayout>
44+
<Meta description={data.metaDescription} pageTitle={data.title} />
4445
<section className="mx-auto mt-24 max-w-7xl sm:px-6 sm:pt-16 lg:px-8">
4546
{isLoading ? <p>Loading...</p> : null}
4647
{isError ? <p className="text-red-500">{error.message}</p> : null}

‎src/pages/products/new-arrivals.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import superjson from 'superjson'
44

55
import { PRODUCTS_NEW_ARRIVAL_LIMIT } from '@/appdata/constants'
66
import { UserLayout } from '@/components/common/layout/UserLayout'
7+
import { Meta } from '@/components/common/Meta'
78
import { BasicProduct } from '@/components/product/BasicProduct'
89
import { createContext } from '@/server/context'
910
import { appRouter } from '@/server/router/_app'
@@ -16,6 +17,7 @@ export default function NewArrivals() {
1617
})
1718
return (
1819
<UserLayout>
20+
<Meta pageTitle="New arrivals" />
1921
<section aria-labelledby="page-title" className="section pt-24">
2022
<h2
2123
id="page-title"

‎src/pages/success.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Link from 'next/link'
22
import { useEffect } from 'react'
33

44
import { UserLayout } from '@/components/common/layout/UserLayout'
5+
import { Meta } from '@/components/common/Meta'
56
import { useCartContext } from '@/context/CartContext'
67

78
export default function Success() {
@@ -11,6 +12,7 @@ export default function Success() {
1112
}, [clearCart])
1213
return (
1314
<UserLayout>
15+
<Meta />
1416
<section className="grid h-screen w-full place-content-center">
1517
<h2 className="mb-4 text-xl md:text-2xl">
1618
Your order have been placed successfully.

0 commit comments

Comments
 (0)