Update title and urls for vulnerability info pages using js (#956)

Signed-off-by: Jamon Camisso <jamonation+git@gmail.com>

assets/js/rumble/vulnerability.js

@@ -6,7 +6,7 @@ const id = getVulnID();
 
 const data = await getData(`https://storage.googleapis.com/chainguard-academy/vulnerability-info/${id}.json`);
 
-showTitle();
+updateTitleAndURLs();
 showVuln();
 
 function getVulnID() {
@@ -29,11 +29,26 @@ async function getData(url) {
   }
 }
 
-function showTitle() {
+function updateTitleAndURLs() {
   let vuln = data;
   const title = document.querySelector("#rumble-vuln h2#id");
   title.innerHTML = `${id} <span style="color: ${severityColours[vuln.severity]}; vertical-align: text-bottom; font-size: 0.75rem; padding: 0.5rem; ">⬤</span><span style="vertical-align: text-bottom; font-size: 1rem;">${vuln.severity}</span>`;
   title.hidden = false;
+
+  const headTitle = document.querySelector("head title");
+  headTitle.innerText = `Vulnerability Information - ${id}`;
+
+  const link = document.querySelector("head link[rel=canonical]");
+  link.href += id;
+
+  const ogTitle = document.querySelector('head meta[property="og:title"]');
+  ogTitle.content = `${ogTitle.content} - ${id}`;
+
+  const ogURL = document.querySelector('head meta[property="og:url"]');
+  ogURL.content += id;
+
+  const twitterTitle = document.querySelector('head meta[name="twitter:title"]');
+  twitterTitle.content = `${twitterTitle.content} - ${id}`;
 }
 
 function showVuln() {