Made Pagination feature more accessible and optimized

ArsenTech · ArsenTech · commit a200ae06b7fc · 2025-11-26T21:36:04.000+04:00
diff --git a/src/app/tags/[tag]/page.tsx b/src/app/tags/[tag]/page.tsx
@@ -79,16 +79,15 @@ export default async function TagsPage({params, searchParams}: PageProps){
      const currentPage = page ? parseInt(page) : 1;
      const postsPerPage = pageSize ? parseInt(pageSize) : POSTS_IN_SEARCH;
      const tagDecoded = decodeURIComponent(tag)
-     const results = await getPostsByTag(tagDecoded)
-     const totalPages = Math.ceil(results.length / postsPerPage)
+     const results = await getPostsByTag(tagDecoded);
      return (
           <PageLayout>
                <Search
                     mode="tag"
                     pageSize={postsPerPage}
                     tag={tagDecoded}
                     results={results}
-                    totalPages={totalPages}
+                    totalPages={results.length}
                     currentPage={currentPage}
                />
           </PageLayout>
diff --git a/src/components/pages/landing.tsx b/src/components/pages/landing.tsx
@@ -18,6 +18,8 @@ import { PaginationWithLinks } from "@/components/pagination-with-links"
 import CollapsibleFilters from "../blog/widget/filters"
 import NoSearchResults from "../shrug"
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
+import usePaginatedData from "@/hooks/use-pagination";
+import { getRangeAsText } from "@/lib/helpers/seo";
 
 interface LandingPageProps{
      posts: IBlogPostBase[],
@@ -39,7 +41,7 @@ function BlogPosts(props: BlogPostsProps) {
      return <Inner {...props} />
 }
 
-export default function LandingPage({posts, totalPages, currentPage, categories,pageSize, query}: LandingPageProps){
+export default function LandingPage({posts, totalPages, currentPage, categories, pageSize, query}: LandingPageProps){
      const [search, setSearch] = useState(query)
      const [selected, setSelected] = useState<string[]>([])
      const filteredPosts = useMemo(()=>{
@@ -56,10 +58,7 @@ export default function LandingPage({posts, totalPages, currentPage, categories,
                ): currPosts;
           return flairFilters;
      },[search,posts,selected])
-     const entries = filteredPosts.slice(
-          (currentPage - 1) * pageSize,
-          currentPage * pageSize
-     )
+     const entries = usePaginatedData(filteredPosts,currentPage,pageSize);
      const featured = posts.filter(post=>post.featured).slice(0,MAX_FEATURED_POSTS);
      const toggleCategory = (category: string) => setSelected(prev=>prev?.includes(category) ? prev.filter(val=>val!==category) : [...(prev||[]),category])
      return (
@@ -79,7 +78,17 @@ export default function LandingPage({posts, totalPages, currentPage, categories,
                {posts.length!==0 ? (
                     <SiteSection id="blog" innerWidthClass="space-y-4 grid grid-cols-1 lg:grid-cols-[3fr_1fr] gap-4">
                          <div className="space-y-5">
-                              <h3 className="scroll-m-20 text-xl md:text-2xl lg:text-3xl font-semibold tracking-tight border-b border-primary pb-2">{search==="" ? "Latest Posts" : "Search Results"}</h3>
+                              <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-2.5">
+                                   <h3 className="scroll-m-20 text-xl md:text-2xl lg:text-3xl font-semibold tracking-tight border-b border-primary pb-2">{search==="" ? "Latest Posts" : "Search Results"}</h3>
+                                   <p className="text-sm text-muted-foreground">
+                                        {getRangeAsText(
+                                             currentPage,
+                                             pageSize,
+                                             search==="" ? totalPages : entries.length,
+                                             "post"
+                                        )}
+                                   </p>
+                              </div>
                               {entries.length<=0 ? (
                                    <div className="flex !mt-0 flex-col items-center justify-center gap-3 h-full w-full">
                                         <NoSearchResults tag={search}/>
diff --git a/src/components/pages/search.tsx b/src/components/pages/search.tsx
@@ -16,6 +16,8 @@ import NoSearchResults from "../shrug"
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
 import { BlogPostsProps } from "../blog-posts"
 import PostsLoader from "../loaders/posts"
+import { getRangeAsText } from "@/lib/helpers/seo"
+import usePaginatedData from "@/hooks/use-pagination"
  
 export const searchSchema = z.object({
      query: z.string().trim()
@@ -52,11 +54,8 @@ export default function Search(props: SearchProps){
                )
                : results.filter(val=>val.categories.some(c=>c.toLowerCase().includes(keyword.toLowerCase())))
      ,[results, keyword, mode])
-     const router = useRouter()
-     const entries = filteredPosts.slice(
-          (currentPage - 1) * pageSize,
-          currentPage + pageSize
-     )
+     const router = useRouter();
+     const entries = usePaginatedData(filteredPosts,currentPage,pageSize);
      const form = useForm<z.infer<typeof searchSchema>>({
           resolver: zodResolver(searchSchema),
           defaultValues: { query: keyword }
@@ -90,7 +89,13 @@ export default function Search(props: SearchProps){
                                                        <InputGroupAddon>
                                                             <SearchIcon/>
                                                        </InputGroupAddon>
-                                                       <InputGroupAddon align="inline-end">{entries.length} {entries.length<=1 ? "result" : "results"}</InputGroupAddon>
+                                                       <InputGroupAddon align="inline-end">
+                                                            {getRangeAsText(
+                                                                 currentPage,
+                                                                 pageSize,
+                                                                 totalPages
+                                                            )}
+                                                       </InputGroupAddon>
                                                   </InputGroup>
                                              </FormItem>
                                         )}
diff --git a/src/hooks/use-pagination.ts b/src/hooks/use-pagination.ts
@@ -0,0 +1,5 @@
+export default function usePaginatedData<T>(items: T[], page: number, pageSize: number){
+     const endIndex = page * pageSize;
+     const startIndex = endIndex - pageSize;
+     return items.slice(startIndex,endIndex)
+}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -18,7 +18,7 @@ export const SOCIAL_MEDIA_LINKS = [
 export const POSTS_PER_PAGE = 8
 export const POSTS_IN_SEARCH = 5
 export const MAX_RELATED_POSTS = 3
-export const MAX_FEATURED_POSTS = 5
+export const MAX_FEATURED_POSTS = 6
 export const SITE_URL = process.env.NODE_ENV==="production" ? "https://arsentech-blog.vercel.app" : "http://localhost:3000"
 
 export const KEYWORDS = ["arsentech", "arsentech youtube", "arsentech github", "malware", "malware testing", "windows", "windows experiments", "tech tutorials", "technology", "tech", "arsen tech", "coding", "programming", "coding with arsentech", "arsentech shorts", "remove memz", "remove 000.exe", "avast vs noescape", "antivirus", "linux", "virus testing", "antimalware", "ransomware", "trojan", "trojan malware", "techonologies", "html", "css", "js", "coding languages", "computer", "computer virus", "computer malware", "software", "more arsentech", "chrome", "tech tips", "tech youtuber", "programmer", "coder", "coding tips", "freeware", "software engineer", "software coding", "ms dos", "operating system", "normal people vs coder", "normal people vs programmer", "coding tutorials", "pc", "blog", "arsentech blog", "tech blog", "coding blog"]
diff --git a/src/lib/helpers/index.ts b/src/lib/helpers/index.ts
@@ -93,7 +93,7 @@ export const getAllTags = cache(async(limit?: number) => {
 
 export const getPostsByTag = cache(async(tag: string) => {
      const posts = await getAllPosts();
-     return posts.filter(post =>post.tags.some(t => t.toLowerCase() === tag.toLowerCase()));
+     return posts.filter(post =>post.tags.some(t => t.toLowerCase().includes(tag.toLowerCase())));
 });
 
 export const getAllSlugs = cache(async(limit?: number) => {
diff --git a/src/lib/helpers/seo.ts b/src/lib/helpers/seo.ts
@@ -4,4 +4,17 @@ export function getValueFromKey(searchParams: URLSearchParams, key: string, fall
      const hasKey = searchParams.has(key);
      return hasKey ? searchParams.get(key)?.slice(0,100) ?? fallbackValue : fallbackValue
 }
-export const absoluteURL = (path: string) => `${SITE_URL}${path}`
+export const absoluteURL = (path: string) => `${SITE_URL}${path}`
+
+export function getRangeAsText(page: number, pageSize: number, totalResults: number, itemName = 'result'): string {
+  if (totalResults === 0)
+    return `Showing 0 ${itemName}s on this page`;
+
+  const start = (page - 1) * pageSize + 1;
+  const end = Math.min(page * pageSize, totalResults);
+
+  if (start >= totalResults) 
+    return `Showing ${totalResults} of ${totalResults} ${itemName}s`;
+
+  return `Showing ${start} - ${end} of ${totalResults} ${totalResults <= 1 ? itemName : `${itemName}s`}`;
+}
diff --git a/src/posts/remove-000-exe.mdx b/src/posts/remove-000-exe.mdx
@@ -2,7 +2,7 @@
 title: "How to Remove The 000.exe Virus"
 description: "This guide will help you remove the 000.exe virus without any antivirus software or any help on your infected Windows PC. You'll learn to fix MBR corruptions after reading the post"
 date: "2025-11-26"
-tags: ["000.exe", "malware", "remove 000.exe", "delete 000.exe", "computer virus", "000.exe removal", "000.exe malware", "how to remove the 000.exe", "how to delete the 000.exe"]
+tags: ["000.exe", "malware", "remove 000.exe", "delete 000.exe", "computer virus", "000.exe removal", "000.exe malware", "how to remove 000.exe", "troubleshooting", "windows"]
 published: true
 featured: false
 categories: ["Malware Removal", "Windows", "Cybersecurity", "Troubleshooting", "Bootable USB"]
diff --git a/src/posts/remove-ios-calendar-virus.mdx b/src/posts/remove-ios-calendar-virus.mdx
@@ -2,7 +2,7 @@
 title: "How to Remove the Dangerous Calendar Spam from Your iPhone"
 description: "This guide will help you remove the dangerous calendar virus (that keeps poping up) on your iOS device"
 date: "2025-11-25"
-tags: ["iphone", "ios", "calendar", "iphone spam", "calendar spam", "calendar virus", "calendar spam ios", "calendar virus ios", "ios calendar virus", "iphone calendar spam", "iphone calendar virus"]
+tags: ["iphone", "ios", "calendar", "iphone spam", "calendar spam", "calendar virus", "calendar spam ios", "calendar virus ios", "ios calendar virus", "iphone calendar spam", "iphone calendar virus", "troubleshooting"]
 published: true
 featured: false
 categories: ["Malware Removal", "iOS", "Cybersecurity", "Troubleshooting"]
diff --git a/src/posts/remove-memz.mdx b/src/posts/remove-memz.mdx
@@ -2,7 +2,7 @@
 title: "How to Remove The MEMZ Trojan"
 description: "This guide will help you remove the MEMZ trojan without any antivirus software or any help on your infected Windows PC. You'll learn to fix MBR corruptions after reading the post"
 date: "2025-11-26"
-tags: ["memz trojan", "malware", "memz", "remove memz trojan", "delete memz trojan", "memz trojan removal", "memz trojan malware", "remove memz", "delete memz", "memz removal", "computer virus", "how to remove the memz trojan", "how to delete the memz trojan"]
+tags: ["memz trojan", "malware", "memz", "remove memz trojan", "delete memz trojan", "memz trojan removal", "memz trojan malware", "remove memz", "delete memz", "memz removal", "computer virus", "how to remove memz", "troubleshooting", "windows"]
 published: true
 featured: false
 categories: ["Malware Removal", "Windows", "Cybersecurity", "Troubleshooting", "Bootable USB"]
diff --git a/src/posts/remove-noescape.mdx b/src/posts/remove-noescape.mdx
@@ -2,7 +2,7 @@
 title: "How to Remove NoEscape.exe"
 description: "This guide will help you remove the trojan malware \"NoEscape.exe\" without any antivirus software or any help on your infected Windows PC."
 date: "2025-11-26"
-tags: ["noescape", "malware", "noescape.exe", "remove noescape", "delete noescape", "noescape removal", "noescape malware", "remove noescape.exe", "delete noescape.exe", "noescape.exe removal", "computer virus", "how to remove noescape", "how to delete noescape", "how to get rid of noescape"]
+tags: ["noescape", "malware", "noescape.exe", "remove noescape", "delete noescape", "noescape removal", "noescape malware", "remove noescape.exe", "delete noescape.exe", "noescape.exe removal", "computer virus", "how to remove noescape.exe", "troubleshooting", "windows"]
 published: true
 featured: false
 categories: ["Malware Removal", "Windows", "Cybersecurity", "Troubleshooting", "Bootable USB"]
diff --git a/src/posts/remove-petya-ransomware.mdx b/src/posts/remove-petya-ransomware.mdx
@@ -2,7 +2,7 @@
 title: "How to Remove The Petya Ransomware"
 description: "This guide will help you remove the Petya ransomware and decrypt files without any antivirus software or any help on your infected Windows PC"
 date: "2025-11-26"
-tags: ["ransomware", "petya", "remove ransomware", "delete ransomware", "ransomware removal", "remove petya", "delete petya", "petya removal", "computer virus", "how to remove the ransomware", "how to delete the ransomware", "malware"]
+tags: ["ransomware", "petya", "remove ransomware", "delete ransomware", "ransomware removal", "remove petya", "delete petya", "petya removal", "computer virus", "how to remove petya", "how to remove ransomware", "malware", "troubleshooting", "windows"]
 published: true
 featured: false
 categories: ["Malware Removal", "Windows", "Cybersecurity", "Troubleshooting", "Bootable USB"]
diff --git a/src/posts/samsung-tab2-fix.mdx b/src/posts/samsung-tab2-fix.mdx
@@ -2,7 +2,7 @@
 title: "How to Fix a Broken Samsung Galaxy Tab 2 after a failed LineageOS upgrade"
 description: "This guide shows you how to repair your Samsung Galaxy Tab 2 after a failed LineageOS upgrade, and restore the deleted OS into an Android."
 date: "2025-11-25"
-tags: ["samsung", "tab 2", "samsung tab 2", "samsung galaxy", "samsung galaxy tab 2", "tab 2 fix", "tab 2 firmware", "samsung tab 2 firmware fix", "odin", "odin app", "flash firmware", "samsung odin"]
+tags: ["samsung", "tab 2", "samsung tab 2", "samsung galaxy", "samsung galaxy tab 2", "tab 2 fix", "tab 2 firmware", "samsung tab 2 firmware fix", "odin", "odin app", "flash firmware", "samsung odin", "troubleshooting", "odin windows"]
 published: true
 featured: false
 categories: ["Tutorial","Samsung","Firmware","Troubleshooting"]
