Refactor remote-projects.js

_includes/projects/index.html

@@ -28,7 +28,7 @@
 
     {% include projects/project-card.html %}
 
-    <script>get_tools("{{ project_id }}")</script>
+    <script>get_tools("{{ site.github.owner_name }}/{{ remote_project }}")</script>
 
   {% endfor %}
 

_includes/projects/project-card.html

@@ -12,9 +12,9 @@ <h5 id="{{ project_id }}-name" class="card-title">
       </h5>
       <p id="{{ project_id }}-desc" class="card-text">{{ project_desc }}</p>
       <p id="{{ project_id }}-tools" class="card-text">
-        {% for tool in project_tools %}
-        <span class="badge badge-pill text-primary border border-primary">{{ tool }}</span>
-        {% endfor %}
+        {%- for tool in project_tools -%}
+        <span class="badge badge-pill text-primary border border-primary ml-1">{{ tool }}</span>
+        {%- endfor -%}
       </p>
     </div>
   </a>

assets/js/remote-projects.js

@@ -1,26 +1,24 @@
----
----
-
-function get_tools(repo_name) {
-  fetch(`https://api.github.com/repos/{{ site.github.owner_name }}/${repo_name}/topics`, {
+function get_tools(repo) {
+  fetch(`https://api.github.com/repos/${repo}/topics`, {
     headers: {
       Accept: "application/vnd.github.mercy-preview+json"
     }
   })
     .then(response => response.json())
-    .then(data => data.names.forEach(tool => {
-
-      var toolSpan = document.createElement("span");
-      toolSpan.innerHTML = tool;
-      toolSpan.classList.add("badge");
-      toolSpan.classList.add("badge-pill");
-      toolSpan.classList.add("text-primary");
-      toolSpan.classList.add("border");
-      toolSpan.classList.add("border-primary");
-
-      var parent = document.getElementById((`${repo_name}-tools`));
-      parent.appendChild(toolSpan);
-      parent.appendChild(document.createTextNode(" "));
+    .then(data => {
+      var name = repo.split("/")[1];
+      var parent = document.getElementById(`${name}-tools`);
+      parse_tools(data.names).forEach(t => parent.appendChild(t));
+    });
+}
 
-    }))
-}
+function parse_tools(tools) {
+  var classes = "badge badge-pill text-primary border border-primary ml-1";
+  var classesArr = classes.split(" ");
+  return tools.map(tool => {
+    var span = document.createElement("span");
+    span.classList.add(...classesArr);
+    span.innerHTML = tool;
+    return span;
+  });
+}