fix: use a safer encoding method

Author: arianrhodsandlot

src/pages/library/components/game-entry.tsx

@@ -1,6 +1,7 @@
 'use client'
 import clsx from 'clsx'
 import { Link } from 'waku/router/client'
+import { encodeRFC3986URIComponent } from '@/utils/misc.ts'
 import { getRomTitle } from '@/utils/rom.ts'
 import { useRomCover } from '../hooks/use-rom-cover.ts'
 
@@ -13,7 +14,7 @@ export function GameEntry({ rom, width }) {
       <Link
         className='block'
         style={{ width: width || 'auto' }}
-        to={`/library/platform/${encodeURIComponent(rom.platform)}/rom/${encodeURIComponent(rom.file_name)}`}
+        to={`/library/platform/${encodeRFC3986URIComponent(rom.platform)}/rom/${encodeRFC3986URIComponent(rom.file_name)}`}
         unstable_pending={
           <div className='z-1 absolute inset-0'>
             <div className='grid h-4/5 w-full place-items-center'>

src/utils/cdn.ts

@@ -1,3 +1,5 @@
+import { encodeRFC3986URIComponent } from './misc.ts'
+
 const repositoryVersions = {
   'batocera-linux/batocera-themes': 'cc0de2f',
   'HerbFargus/es-theme-tronkyfran': 'a270311',
@@ -15,10 +17,6 @@ const repositoryVersions = {
   'RetroPie/es-theme-carbon': 'b09973e',
 } as const
 
-function encodeRFC3986URIComponent(str: string) {
-  return encodeURIComponent(str).replaceAll(/[!'()*]/g, (c) => `%${c.codePointAt(0)?.toString(16).toUpperCase()}`)
-}
-
 export function getCDNUrl(repo: keyof typeof repositoryVersions, filePpath: string) {
   const [ghUser, ghRepoName] = repo.split('/')
   const version = repositoryVersions[repo]

src/utils/misc.ts

@@ -25,3 +25,7 @@ export function humanizeDate(date: Date) {
   }
   return lightFormat(date, 'yyyy-MM-dd HH:mm')
 }
+
+export function encodeRFC3986URIComponent(str: string) {
+  return encodeURIComponent(str).replaceAll(/[!'()*]/g, (c) => `%${c.codePointAt(0)?.toString(16).toUpperCase()}`)
+}