reformat strings and added tags to solution webpages

src/pages/questions/[...path].astro

@@ -53,7 +53,8 @@ const title = formatString(path);
 const tags = await getCollection("tags");
 const tagMap: { [key: string]: string } = tags.reduce(
   (map, tag) => {
-    map[tag.data.tag] = tag.data.title;
+    map[tag.data.tag] =
+      tag.data.title + (tag.data.section ? " (" + tag.data.section + ")" : "");
     return map;
   },
   {} as { [key: string]: string },

src/pages/questions/solution/[...path].astro

@@ -3,6 +3,7 @@ import Back from "@components/Back/Back.astro";
 import Button from "@components/Button/Button.astro";
 import MultipleChoiceQuestion from "@components/MultipleChoiceQuestion/MultipleChoiceQuestion.astro";
 import MathJax from "@components/MathJax.svelte";
+import Tag from "@components/Tag/Tag.astro";
 import { dynamicImport } from "@utilities/index";
 import { getCollection } from "astro:content";
 import { default as Layout } from "src/layouts/Content/Content.astro";
@@ -41,6 +42,16 @@ const loadQuestion = async () => {
 
 const question = await loadQuestion();
 
+const tags = await getCollection("tags");
+const tagMap: { [key: string]: string } = tags.reduce(
+  (map, tag) => {
+    map[tag.data.tag] =
+      tag.data.title + (tag.data.section ? " (" + tag.data.section + ")" : "");
+    return map;
+  },
+  {} as { [key: string]: string },
+);
+
 // TODO: should not be generating the title of the path
 function formatString(input: string) {
   let [_course, mainPart, numberPart] = input.split("/");
@@ -75,6 +86,9 @@ const title = formatString(path);
       displaySolution={true}
     />
   </div>
+  <div class="Question__tags">
+    {page.data.tags.map((tag: string) => <Tag id={tag} label={tagMap[tag]} />)}
+  </div>
   <div style="margin-top:2.5rem"></div>
   <h2>Solution</h2>
   <div class="Solution">