Hack up a page to show language colors

2025-10-29 01:30:22 +00:00 · 2015-03-08 11:33:10 -07:00
commit d265c67479
3 changed files with 54 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <title>Linguist Colors</title>
+    <script src="scripts/js-yaml.min.js"></script>
+    <script src="scripts/jquery.min.js"></script>
+    <style>
+      body {
+        font-family: "Heletica Neue", Helvetica, sans-serif;
+        font-size: 13px;
+      }
+
+      #languages {
+        list-style: none;
+      }
+
+      #languages li {
+        width: 180px;
+        float: left;
+        text-align: center;
+        padding: 0.5em 0;
+        margin: 0.25em;
+        font-weight: bold;
+        border-bottom: 12px solid #ccc;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    </style>
+  </head>
+  <body>
+    <ul id="languages"></ul>
+
+    <script type="text/javascript">
+      var $list = $("#languages");
+
+      $.get("https://rawgit.com/github/linguist/master/lib/linguist/languages.yml", function(data) {
+        var languages = jsyaml.safeLoad(data);
+
+        for(var language in languages) {
+          attrs = languages[language];
+          $list.append('<li style="border-bottom-color:' + attrs.color + '">' + language + '</li>');
+        }
+      });
+
+    </script>
+  </body>
+</html>
--- a/scripts/jquery.min.js
+++ b/scripts/jquery.min.js
--- a/scripts/js-yaml.min.js
+++ b/scripts/js-yaml.min.js