Refactored dangerouslySetInnerHTML

webpage/scripts/parse_readme.js

@@ -12,14 +12,27 @@ const tokens = marked.lexer(text, {
 const table = tokens.filter(x => x.type == "table")[0];
 const { header, cells } = table;
 
+const linkPattern = /\s?\[([^\]]+)\]\(([^\)]+)\)\s?/gi;
+const parseLinks = linkText => {
+  let result = [],
+    match;
+  do {
+    match = linkPattern.exec(linkText);
+    if (match) {
+      result.push({ text: match[1], href: match[2] });
+    }
+  } while (match);
+  return result;
+};
+
 const rows = cells
   .map(x => {
     const result = {};
     header.forEach((key, i) => (result[key] = x[i]));
     return result;
   })
   .map(x => {
-    x.Package = marked.inlineLexer(x.Package, []);
+    x.Package = parseLinks(x.Package);
     return x;
   });
 

webpage/src/components/Table.js

@@ -1,9 +1,23 @@
 import React from "react";
 
+const join = (array, separator) =>
+  array.reduce((result, child, index) => {
+    if (index < array.length - 1) {
+      return result.concat(child, separator);
+    } else {
+      return result.concat(child);
+    }
+  }, []);
+
 const CellTd = options => {
   const { header, value } = options;
   if (header === "Package") {
-    return <td dangerouslySetInnerHTML={{ __html: value }} />;
+    const links = value.map(link => (
+      <a href={link.href} key={link.text}>
+        {link.text}
+      </a>
+    ));
+    return <td>{join(links, " + ")}</td>;
   } else {
     return <td>{value}</td>;
   }