From 7e39b650c7886ba053db84c4a5b17f03f7aff95d Mon Sep 17 00:00:00 2001
From: infinia-yzl <dev@infinia.space>
Date: Sat, 20 Jul 2024 14:02:44 +0800
Subject: [PATCH] opentierboy-49 General SEO Improvements - Replace `tag` paths
 with hyphens replacing underscores; old underscore links are optimistically
 redirected to the new paths

---
 app/rank/[[...slug]]/page.tsx | 6 +-----
 components/PackageCard.tsx    | 4 ++--
 lib/utils.ts                  | 4 ++++
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/rank/[[...slug]]/page.tsx b/app/rank/[[...slug]]/page.tsx
index 414a800..61ee71c 100644
--- a/app/rank/[[...slug]]/page.tsx
+++ b/app/rank/[[...slug]]/page.tsx
@@ -3,7 +3,7 @@ import {ItemSet} from "@/models/ItemSet";
 import ImageSetConfig from "@/models/ImageSet";
 import dynamic from "next/dynamic";
 import {Metadata, ResolvingMetadata} from "next";
-import {slugify} from "@/lib/utils";
+import {createSEOFriendlyTagSlug, slugify} from "@/lib/utils";
 import {redirect} from "next/navigation";
 
 const typedImageSetConfig = imagesetConfig as ImageSetConfig;
@@ -12,10 +12,6 @@ const TierListManager = dynamic(
   {ssr: false}
 );
 
-function createSEOFriendlyTagSlug(tag: string): string {
-  return tag ? tag.toLowerCase().replace(/_+/g, '-').replace(/^-|-$/g, '') : '';
-}
-
 export async function generateStaticParams() {
   const params: { slug: string[] }[] = [];
   Object.entries(typedImageSetConfig.packages).forEach(([packageName, packageData]) => {
diff --git a/components/PackageCard.tsx b/components/PackageCard.tsx
index 8034b0e..a325cfb 100644
--- a/components/PackageCard.tsx
+++ b/components/PackageCard.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import {Button} from "@/components/ui/button";
 import {Card, CardHeader, CardTitle, CardContent} from "@/components/ui/card";
 import {Separator} from "@/components/ui/separator";
-import {slugify, cn} from "@/lib/utils";
+import {slugify, cn, createSEOFriendlyTagSlug} from "@/lib/utils";
 import {getFont, FontName} from '@/lib/fonts';
 
 interface PackageCardProps {
@@ -60,7 +60,7 @@ const PackageCard: React.FC<PackageCardProps> = ({packageData, tags}) => {
                 "group-hover:hover:bg-white/30"  // Additional hover effect when card is hovered
               )}
             >
-              <Link href={`/rank/${slugify(packageData.displayName)}/${tagName}`}>
+              <Link href={`/rank/${slugify(packageData.displayName)}/${createSEOFriendlyTagSlug(tagName)}`}>
                 {tagName === 'all' ? 'All Items' : packageData.tags[tagName]?.title || tagName}
               </Link>
             </Button>
diff --git a/lib/utils.ts b/lib/utils.ts
index 11404eb..8d01c54 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -29,3 +29,7 @@ export const getTierGradient = (index: number, tiersLength: number): string => {
       return `var(--tier-gradient-${tierGradientIndexMap[index % 7]})`;
   }
 };
+
+export function createSEOFriendlyTagSlug(tag: string): string {
+  return tag ? tag.toLowerCase().replace(/_+/g, '-').replace(/^-|-$/g, '') : '';
+}