Separated data from presentation

README.md

@@ -7,9 +7,10 @@ Hand-picked registry of Node.js frameworks.
 
 1. Fork it!
 2. Create your feature branch: `git checkout -b my-new-feature`
-3. Commit your changes: `git commit -am 'Add some feature'`
-4. Push to the branch: `git push origin my-new-feature`
-5. Submit a pull request :D
+3. If you're adding a framework, add it to `./projects.js`
+4. Commit your changes: `git commit -am 'Add some feature'`
+5. Push to the branch: `git push origin my-new-feature`
+6. Submit a pull request :D
 
 ## License
 [MIT License](https://github.com/azat-co/nodeframework/blob/master/LICENSE) © Azat Mardan

assets/js/main.js

@@ -1,4 +1,42 @@
 $(document).ready(function() {
+  // Check if `projects.js` was loaded before this file.
+  // `projects` is defined in `projects.js`.
+  if (typeof projects !== 'undefined') {
+    // Loop over each project
+    projects.forEach(function (project) {
+      if (project.hasOwnProperty('tags')) {
+        // Project has tag(s), so add to every list that matches the tag.
+        project.tags.forEach(function (tag) {
+          addProjectToProjectList(tag, project);
+        });
+      } else {
+        // The project doesn't have any tags, so add it to the "other" section.
+        addProjectToProjectList('other', project);
+      }
+    });
+  } else {
+    // `projects.js` needs to be loaded before this file
+    console.error('Please load `projects.js` before `main.js`!');
+  }
+
+  function addProjectToProjectList(tag, project) {
+    var element = '';
+
+    element += '<li>';
+    element +=   '<i class="icon-check"></i> <a href="' + project.homepage + '">' + project.name + '</a> ';
+    if (project.annotation) { element += '(' + project.annotation + ') '; }
+    element +=   '<iframe src="http://ghbtns.com/github-btn.html?user=' + project.github.user + '&repo=' + project.github.repo + '&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>';
+    element +=   '<a data-toggle="collapse" data-parent="#mvc" href="#project-link-container_' + project.github.user + '__' + project.github.repo + '">';
+    element +=     '<i class="icon-info icon-stack-1x icon-inverse"></i>';
+    element +=   '</a>';
+    element +=   '<div id="project-link-container_' + project.github.user + '__' + project.github.repo + '" class="panel-collapse collapse">';
+    project.links.forEach(function (link) { element += '[<a href="' + link.url + '">' + link.title + '</a>]&nbsp;'; });
+    element +=   '</div>';
+    element += '</li>';
+
+    return $('#project-list-' + tag).append(element);
+  }
+
   $('[rel=tooltip]').tooltip();
 
 // Add spin.js to lazy load container