Skip to content

Commit

Permalink
Refactor package.json to add next-seo dependency
Browse files Browse the repository at this point in the history
  • Loading branch information
hasanshahriar32 committed Oct 18, 2024
1 parent 0262e25 commit 7bbdaba
Show file tree
Hide file tree
Showing 9 changed files with 362 additions and 30 deletions.
31 changes: 9 additions & 22 deletions app/(personal)/projects/[slug]/gallery/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@ import type { NextPage } from "next";
import Head from "next/head";
import Image from 'next/image';

import CustomNextSeo from '@/components/global/CustomNextSeo';
import Gallery from "@/components/pages/project/Gallery";
import { loadProject } from "@/sanity/loader/loadQuery";
import { SeoType } from '@/types';

import Bridge from "../../../../../components/Icons/Bridge"


type Props = {
params: { slug: string }
params: { slug: string },
SeoData: SeoType
}

const Home: NextPage = async ({ params }: Props,) => {
const GalleryPage: NextPage = async ({ params , SeoData}: Props,) => {
console.log(params)
const initial = await loadProject(params.slug)
const currentURL = `https://ece21.vercel.app/projects/${params.slug}/gallery`
const handleSocialShare = (socialPlatform: any) => {
Expand All @@ -25,24 +29,7 @@ const Home: NextPage = async ({ params }: Props,) => {
}

return (
<>
<Head>
<title>ঋণাত্মক - ২১: Images</title>
<meta
property="og:image"
content={
`${initial?.data?.cloudinaryList[0]?.secure_url}` ||
'/image/screenshot.png'
}
/>
<meta
name="twitter:image"
content={
`${initial?.data?.cloudinaryList[0]?.secure_url}` ||
'/image/screenshot.png'
}
/>
</Head>
<CustomNextSeo seo={SeoData} slug={params?.slug}>
<main className="mx-auto max-w-[1960px] p-4">
<div className="columns-1 gap-4 sm:columns-2 xl:columns-3 2xl:columns-4">
<div className="after:content border-spacing-2 border relative mb-5 flex h-[540px] md:[h-600px] lg:h-[650px] flex-col items-center justify-end gap-4 overflow-hidden rounded-lg bg-white/90 px-6 pb-16 pt-64 text-center shadow-highlight after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:shadow-highlight lg:pt-0">
Expand Down Expand Up @@ -124,9 +111,9 @@ const Home: NextPage = async ({ params }: Props,) => {
</a>{' '}
for the pictures.
</footer>
</>
</CustomNextSeo>
)
}

export default Home;
export default GalleryPage;

134 changes: 134 additions & 0 deletions components/global/CustomNextSeo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import { NextSeo } from 'next-seo'
import {
MetaTag as NextSeoMetaTag,
OpenGraph as NextSeoOpenGraph,
} from 'next-seo/lib/types'
import type { PropsWithChildren } from 'react'
import React, { useMemo } from 'react'

import {
CustomImageType,
MetaAttributeType,
MetaTagType,
OpenGraphType,
SeoType,
} from '../../types/index'

export const getOpenGraph = (args: OpenGraphType) => {
const { description, image, title, _type, siteName, url } = args
const getImage = image ? resolveImage(image) : null
const values = {
_type,
description,
siteName,
url,
title,
images: [{ url: getImage ?? '' }],
}
return values as NextSeoOpenGraph
}

export const getMetaObjects = (
tags: MetaTagType[],
allowIndexing?: boolean,
) => {
const tagArray: NextSeoMetaTag[] = []
tags.map((tag) => {
const excludeTag =
!allowIndexing &&
!!tag.metaAttributes?.find(
(i) =>
i?.attributeValueString?.includes('noindex') ||
i?.attributeValueString?.includes('nofollow'),
)
if (!excludeTag) {
const metaTag = getMetaAttribute(tag?.metaAttributes)
if (metaTag) {
tagArray.push(metaTag)
}
}
})
return tagArray
}

export const resolveImage = (image?: CustomImageType) => {
return image?.asset?.url ?? ''
}

export const getMetaAttribute = (attrs: MetaAttributeType[] | undefined) => {
if (!attrs) {
return null
}
const obj: Record<string, string> = {}
attrs.map((i) => {
Object.assign(obj, {
[i?.attributeKey as string]:
i.attributeType == 'image'
? resolveImage(i?.attributeValueImage)
: i.attributeValueString,
})
})
return obj as unknown as NextSeoMetaTag
}

interface CustomNextSeoProps {
seo: SeoType | null
slug: string
}

const CustomNextSeo: React.FC<PropsWithChildren<CustomNextSeoProps>> = ({
seo,
children,
slug,
}) => {
const {
additionalMetaTags,
metaDescription,
metaTitle,
twitter,
nofollowAttributes,
seoKeywords,
} = seo || {}

const tags = useMemo(
() => (additionalMetaTags ? getMetaObjects(additionalMetaTags) : []),
[additionalMetaTags],
)
const openGraph = useMemo(
() => (seo?.openGraph ? getOpenGraph(seo?.openGraph) : undefined),
[seo],
)
const url =
(process.env.NEXT_PUBLIC_APP_URL ?? 'https://ece21.vercel.app') +
(slug?.startsWith('/') ? slug : `/${slug}`)

return (
<>
<NextSeo
themeColor=""
twitter={{
handle: twitter?.creator,
site: twitter?.site,
cardType: twitter?.cardType,
}}
nofollow={nofollowAttributes}
noindex={nofollowAttributes}
openGraph={openGraph}
canonical={url || ''}
additionalMetaTags={(
(seoKeywords && seoKeywords?.length > 0
? [{ name: 'keywords', content: seoKeywords?.join(', ') }]
: []) as NextSeoMetaTag[]
).concat(tags ?? [])}
title={metaTitle ?? 'ঋণাত্মক - ২১'}
description={
metaDescription ??
'A documentary application of HSTU: ECE21 batch! Bought to you by ঋণাত্মক - ২১.'
}
/>
{children}
</>
)
}

export default CustomNextSeo
12 changes: 12 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"lucide-react": "^0.452.0",
"next": "14.2.13",
"next-sanity": "9.5.0",
"next-seo": "^6.6.0",
"next-themes": "^0.3.0",
"react": "18.3.1",
"react-dom": "18.3.1",
Expand Down
78 changes: 78 additions & 0 deletions sanity/lib/queries.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,84 @@
import { groq } from 'next-sanity'


export const imageFields = /* groq */ `
_type,
crop{
_type,
right,
top,
left,
bottom
},
hotspot{
_type,
x,
y,
height,
width,
},
asset->{...}
`


export const twitterQuery = /* groq */ `
_type,
site,
creator,
cardType,
handle
`

export const openGraphQuery = /* groq */ `
_type,
siteName,
url,
description,
title,
image{
${imageFields}
}
`

export const metaAttributesQuery = /* groq */ `
_type,
attributeValueString,
attributeType,
attributeKey,
attributeValueImage{
${imageFields}
}
`

export const seofields = /* groq */ `
_type,
metaTitle,
nofollowAttributes,
seoKeywords,
metaDescription,
openGraph{
${openGraphQuery}
},
twitter{
${twitterQuery}
},
additionalMetaTags[]{
_type,
metaAttributes[]{
${metaAttributesQuery}
}
}
`
export const seo = /* groq */ `seo{
${seofields}
}`



export const homePageQuery = groq`
*[_type == "home"][0]{
_id,
${seo},
overview,
showcaseProjects[]->{
_type,
Expand Down Expand Up @@ -37,6 +113,7 @@ export const ladderQuery = groq`
export const pagesBySlugQuery = groq`
*[_type == "page" && slug.current == $slug][0] {
_id,
${seo},
body,
overview,
title,
Expand All @@ -47,6 +124,7 @@ export const pagesBySlugQuery = groq`
export const projectBySlugQuery = groq`
*[_type == "project" && slug.current == $slug][0] {
_id,
${seo},
client,
coverImage,
description,
Expand Down
16 changes: 16 additions & 0 deletions sanity/schemas/documents/page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,22 @@ export default defineType({
}),
],
}),
defineField({
title: 'Seo',
name: 'seo',
type: 'seoMetaFields',
preview: {
select: {
metaTitle: 'seo',
},
prepare(selection) {
const { metaTitle } = selection?.metaTitle || ''
return {
title: metaTitle || 'seo',
}
},
},
}),
],
preview: {
select: {
Expand Down
29 changes: 21 additions & 8 deletions sanity/schemas/documents/project.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,11 @@ export default defineType({
validation: (rule) => rule.required(),
}),
defineField({

type: "array",
name: "cloudinaryList",
description: "Select images to add to the gallery. (not mandetory)",
of: [{ type: "cloudinary.asset" }],
title: "Gallery",


type: 'array',
name: 'cloudinaryList',
description: 'Select images to add to the gallery. (not mandetory)',
of: [{ type: 'cloudinary.asset' }],
title: 'Gallery',
}),
defineField({
name: 'overview',
Expand Down Expand Up @@ -166,5 +163,21 @@ export default defineType({
}),
],
}),
defineField({
title: 'Seo',
name: 'seo',
type: 'seoMetaFields',
preview: {
select: {
metaTitle: 'seo',
},
prepare(selection) {
const { metaTitle } = selection?.metaTitle || ''
return {
title: metaTitle || 'seo',
}
},
},
}),
],
})
Loading

0 comments on commit 7bbdaba

Please sign in to comment.