shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

seo

Browse Source
This commit is contained in:
Tejas Panchal
2026-02-15 06:56:22 +05:30
parent 93a3b36bd3
commit 83e768f5b7
10 changed files with 1747 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/pages/search/Search.jsx
View File

@@ -4,6 +4,13 @@ import PageSlider from '@/src/components/pageslider/PageSlider';
import getSearch from '@/src/utils/getSearch.utils';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
import {
generateSearchMeta,
generatePaginationLinks,
generateCanonicalUrl,
generateItemListSchema
} from '@/src/utils/seo.utils';
function Search() {
const [searchParams, setSearchParams] = useSearchParams();
@@ -15,10 +22,10 @@ function Search() {
const [error, setError] = useState(null);
useEffect(() => {
const fetchSearch = async () => {
const fetchSearch = async () => {
setLoading(true);
try {
const data = await getSearch(keyword,page);
const data = await getSearch(keyword, page);
setSearchData(data.data);
setTotalPages(data.totalPage);
setLoading(false);
@@ -38,60 +45,96 @@ function Search() {
const searchGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
const { title, description, keywords } = generateSearchMeta(keyword);
const canonicalUrl = generateCanonicalUrl(`/search?keyword=${keyword || ''}${page > 1 ? `&page=${page}` : ''}`);
const paginationLinks = generatePaginationLinks('/search', page, totalPages);
// Create an ItemList for search results for SEO
const itemListSchema = searchData && searchData.length > 0
? generateItemListSchema(searchData, `Search results for ${keyword}`)
: null;
return (
<div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="w-full flex flex-col gap-y-8 mt-6">
{loading ? (
<CategoryCardLoader className={"max-[478px]:mt-2"} gridClass={searchGridClass} />
) : page > totalPages ? (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px] max-[300px]:leading-6'>
You came a long way, go back <br className='max-[300px]:hidden' />nothing is here
</p>
</div>
) : searchData && searchData.length > 0 ? (
<div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results for: {keyword}
</h1>
<CategoryCard
data={searchData}
showViewMore={false}
className="mt-0"
gridClass={searchGridClass}
/>
<div className="flex justify-center w-full mt-8">
<PageSlider
page={page}
totalPages={totalPages}
handlePageChange={handlePageChange}
/>
</div>
</div>
) : error ? (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px]'>
Couldn't get search results, please try again
</p>
</div>
) : (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px]'>
No results found for: {keyword}
</p>
</div>
<>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<meta name="keywords" content={keywords} />
<link rel="canonical" href={canonicalUrl} />
{paginationLinks.map((link, index) => (
<link key={index} rel={link.rel} href={link.href} />
))}
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
{itemListSchema && (
<script type="application/ld+json">
{JSON.stringify(itemListSchema)}
</script>
)}
</Helmet>
<div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="w-full flex flex-col gap-y-8 mt-6">
{loading ? (
<CategoryCardLoader className={"max-[478px]:mt-2"} gridClass={searchGridClass} />
) : page > totalPages ? (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px] max-[300px]:leading-6'>
You came a long way, go back <br className='max-[300px]:hidden' />nothing is here
</p>
</div>
) : searchData && searchData.length > 0 ? (
<div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results for: {keyword}
</h1>
<CategoryCard
data={searchData}
showViewMore={false}
className="mt-0"
gridClass={searchGridClass}
/>
<div className="flex justify-center w-full mt-8">
<PageSlider
page={page}
totalPages={totalPages}
handlePageChange={handlePageChange}
/>
</div>
</div>
) : error ? (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px]'>
Couldn't get search results, please try again
</p>
</div>
) : (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px]'>
No results found for: {keyword}
</p>
</div>
)}
</div>
</div>
</div>
</>
);
}