use jekyll to render the website

pietroalbini · pietroalbini · commit db4d97357bc7 · 2019-04-26T18:14:08.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/_site
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+# Use Jekyll
diff --git a/_layouts/graphs.html b/_layouts/graphs.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+
+        <title>{{ page.title }} PR tracking</title>
+
+        <link rel="stylesheet" href="web/style.css">
+        <link rel="shortcut icon" href="web/favicon.ico">
+    </head>
+    <body>
+        <header>
+            <div class="top-nav">
+                <div class="nav-wrapper">
+                    <h1>PR tracking</h1>
+                    <nav>
+                        {% for navpage in site.pages %}
+                            <a href="{{ navpage.url }}" {% if page.repo == navpage.repo %}class="active"{% endif %}>{{ navpage.title }}</a>
+                        {% endfor %}
+                    </nav>
+                </div>
+            </div>
+            <div class="bottom-nav">
+                <div class="nav-wrapper">
+                    <nav>
+                        {% for item in page.graphs %}
+                            <a href="#{{ item[0] }}">{{ item[1] }}</a>
+                        {% endfor %}
+                    </nav>
+                </div>
+            </div>
+        </header>
+
+        {% for item in page.graphs %}
+            <div class="graph" id="{{ item[0] }}">
+                <h2>{{ item[1] }}</h2>
+                <canvas></canvas>
+            </div>
+        {% endfor %}
+
+        <footer>
+            Number of days:
+            <input id="days-count" type="text" value="30" maxlength="3">
+            <br/>
+            Show percentages instead of absolute numbers:
+            <input id="relative" type="checkbox" value="false">
+        </footer>
+        <footer>
+            <a class="button" href="https://github.com/rust-lang-nursery/rustc-pr-tracking/tree/master/data">
+                Explore the raw data
+            </a>
+        </footer>
+
+        <script type="text/javascript" src="web/chart.min.js"></script>
+        <script type="text/javascript" src="web/main.js"></script>
+    </body>
+</html>
+
diff --git a/index.html b/index.html
diff --git a/index.md b/index.md
@@ -0,0 +1,10 @@
+---
+title: rustc
+repo: rust-lang/rust
+graphs:
+  pr-status: Pull requests status
+  pr-activity: Last activity on pull requests
+  pr-age: Pull requests creation dates
+  pr-merged: Pull requests merged
+layout: graphs
+---
diff --git a/web/main.js b/web/main.js
@@ -179,23 +179,6 @@ function process_data(graph) {
 }
 
 
-function populate_toc() {
-    var toc = document.getElementById("toc");
-
-    var graphs = document.querySelectorAll(".graph");
-    for (var i = 0; i < graphs.length; i++) {
-        var li = document.createElement("li");
-        var a = document.createElement("a");
-        a.classList.add("button");
-        a.href = "#" + graphs[i].id;
-        a.innerHTML = graphs[i].querySelector("h2").innerHTML;
-        li.appendChild(a);
-        toc.appendChild(li);
-    }
-}
-
-
-populate_toc();
 fetch_graphs();
 
 
diff --git a/web/style.css b/web/style.css
@@ -19,39 +19,62 @@
  *  SOFTWARE.
  */
 
+* {
+    box-sizing: border-box;
+}
 
 body {
     font-family: sans-serif;
     margin: 0;
     padding: 0.5em;
-
     background: #eee;
 }
 
 header {
-    text-align: center;
-    padding: 2em 0.2em 1em 0.2em;
+    background: #fff;
+    margin: -0.5em;
+    box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.1);
+}
 
-    background: #eee;
+header nav {
+    display: flex;
 }
 
-header h1 {
-    margin: 0 0 0.3em 0;
+header nav a {
+    padding: 1em;
+    color: inherit;
+    text-decoration: none;
 }
 
-header p {
-    margin: 0;
+header .nav-wrapper {
+    max-width: 82em;
+    margin: auto;
+    display: flex;
+    align-items: center;
 }
 
-ul#toc {
-    padding: 0;
-    margin: 0;
-    text-align: center;
+header .top-nav {
+    background: #398277;
+    color: #fff;
 }
 
-ul#toc li {
-    display: inline-block;
-    margin: 0.25em;
+header .top-nav h1 {
+    font-weight: 400;
+    font-size: 1.5em;
+    margin: 0 0.5em;
+    flex: 1;
+}
+
+header .top-nav nav a:hover, header .top-nav nav a.active {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+header .bottom-nav nav a:hover, header .bottom-nav nav a.active {
+    color: #398277;
+}
+
+header p {
+    margin: 0;
 }
 
 .graph {
@@ -82,7 +105,7 @@ footer {
 
 
 .button {
-    background: #bf4d28;
+    background: #398277;
     color: #fff;
     text-decoration: none;
 
@@ -91,7 +114,7 @@ footer {
     border-radius: 0.3em;
 
     transition: opacity 0.2s ease-out;
-    box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
 }
 
 .button:hover {
