fix(frontend): encode pronoun links

frontend/src/lib/components/PronounLink.svelte

@@ -11,18 +11,28 @@
       return pronouns.display_text;
     } else {
       const split = pronouns.pronouns.split("/");
-      if (split.length < 2) return split.join("/");
+      if (split.length === 5) return split.splice(0, 2).join("/");
-      else return split.slice(0, 2).join("/");
+      return pronouns.pronouns;
     }
   };
 
   let link: string;
   let shouldLink: boolean;
 
-  $: link = pronouns.display_text
+  $: link = linkPronouns(pronouns);
-    ? `${pronouns.pronouns},${pronouns.display_text}`
-    : pronouns.pronouns;
   $: shouldLink = pronouns.pronouns.split("/").length === 5;
+
+  const linkPronouns = (pronouns: Pronoun) => {
+    const linkBase = pronouns.pronouns
+      .split("/")
+      .map((snippet) => encodeURIComponent(snippet))
+      .join("/");
+
+    if (pronouns.display_text) {
+      return `${linkBase},${encodeURIComponent(pronouns.display_text)}`;
+    }
+    return linkBase;
+  };
 </script>
 
 {#if shouldLink}

frontend/src/routes/pronouns/[...pronouns]/+page.ts

@@ -6,7 +6,7 @@ import pronounsRaw from "$lib/pronouns.json";
 const pronouns = pronounsRaw as PronounsJson;
 
 export const load = (async ({ params }) => {
-  const [param, displayText] = params.pronouns.split(",");
+  const [param, displayText] = decodeURIComponent(params.pronouns).split(",");
 
   const arr = param.split("/");
   if (arr.length === 0 || params.pronouns === "") {