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

@@ -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]) => {

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>

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, '') : '';
+}