Webpage to display a set of benchmarks from RustPython

_config.yml

@@ -36,6 +36,8 @@ navigation:
     url: /blog
   - title: Docs
     url: /docs
+  - title: Benchmarks
+    url: /benchmarks
   - title: GitHub
     url: https://github.com/RustPython/RustPython/
   - title: Gitter

_includes/head.html

@@ -7,6 +7,7 @@
   <!-- google fonts -->
   <link defer async href="https://fonts.googleapis.com/css?family=Fira+Sans|Sen:800&display=swap" rel="stylesheet">
   <!-- stylesheet -->
+  <link defer async rel="stylesheet" href="{{ "/assets/tabs.css" | relative_url }}">
   <link defer async rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
   <link defer async rel="stylesheet" href="{{ "/assets/media.css" | relative_url }}">
   <link defer async rel="stylesheet" href="{{ "/assets/github.css" | relative_url }}">

_layouts/benchmarks.html

@@ -0,0 +1,78 @@
+---
+layout: default
+---
+
+<section>
+    <div class="w-80 m-auto mt-2">
+        <div class="d-md-flex">
+            <div class="d-sm-none">
+                <img class="logo" src="{{site.baseurl}}/assets/img/rust-python-logo.svg" alt="RustPython Logo">
+            </div>
+            <div class="pl-md-2">
+                <div class="section-title">RustPython</div>
+                <div class="title">{{ page.title | escape }}</div>
+                <small>{{ site.benchmarks-intro }}</small>
+            </div>
+        </div>
+    </div>
+</section>
+
+<div class="w-80 m-auto mt-2">
+    <div class="benchmarks-intro">
+        {{ content }}
+    </div>
+
+    {% assign folders = "" | split: ", " %}
+    {% for image in site.static_files %}
+        {% if image.path contains 'criterion/' %}
+            {% assign imagepath = image.path | split: "/" %}
+            {% for subpath in imagepath %}
+                {% if forloop.index0 == 3 %}
+                    {% assign folders = folders | append: pathName %}
+                {% endif %}
+            {% endfor %}
+        {% endif %}
+    {% endfor %}
+    {% assign folders = folders | uniq %}
+
+    <!-- The code block below does exactly the same as the one above, which one is cleaner? -->
+    <!-- {% assign folders = "" | split: ", " %}
+    {% for folder in site.static_files %}
+    {% if folder.path contains 'criterion/' %}
+    {% assign temp = folder.path | split: 'criterion/' %}
+    {% assign pathName = temp[1] | split: '/' | first %}
+    {% assign pathName = pathName | split: ", " %}
+    {% assign folders = folders | concat: pathName %}
+    {% endif %}
+    {% endfor%}
+    {% assign folders = folders | uniq %} -->
+
+    {% if folders.size == 0 %}
+    <p style="color: red;">There are no benchmarks to be displayed.</p>
+    <p>This shouldn't be happening, please contact one of the maintainers
+        through <a href="https://gitter.im/rustpython/Lobby">Gitter</a> to report this problem.</p>
+    {% else %}
+    <ul class="tab" data-tab="benchmarks">
+        {% for folder in folders %}
+        <li {% if forloop.index==1 %} class="active" {% endif %}>
+            <a href="">{{ folder }}</a>
+        </li>
+        {% endfor%}
+    </ul>
+    <ul class="tab-content" id="benchmarks">
+        {% for folder in folders %}
+        <li {% if forloop.index==1 %} class="active" {% endif %}>
+            <br>
+            {% for image in site.static_files %}
+                {% if image.path contains folder %}
+                <figure>
+                    <img src="{{ site.baseurl }}{{ image.path }}" alt="image" />
+                    <figcaption>{{ image.name }}</figcaption>
+                </figure>
+                {% endif %}
+            {% endfor%}
+        </li>
+        {% endfor%}
+    </ul>
+    {% endif %}
+</div>

_layouts/default.html

@@ -15,6 +15,7 @@
 
     {%- include footer.html -%}
 
+  <script src="{{ "/assets/js/tabs.js" | relative_url }}"></script>
   </body>
 
 </html>

assets/js/tabs.js

@@ -0,0 +1,43 @@
+const removeActiveClasses = function (ulElement) {
+    const lis = ulElement.querySelectorAll('li');
+    Array.prototype.forEach.call(lis, function(li) {
+        li.classList.remove('active');
+    });
+  }
+
+  const getChildPosition = function (element) {
+        var parent = element.parentNode;
+        var i = 0;
+        for (var i = 0; i < parent.children.length; i++) {
+            if (parent.children[i] === element) {
+                return i;
+            }
+        }
+
+        throw new Error('No parent found');
+    }
+
+window.addEventListener('load', function () {
+    const tabLinks = document.querySelectorAll('ul.tab li a');
+
+    Array.prototype.forEach.call(tabLinks, function(link) {
+      link.addEventListener('click', function (event) {
+        event.preventDefault();
+
+        liTab = link.parentNode;
+        ulTab = liTab.parentNode;
+        position = getChildPosition(liTab);
+        if (liTab.className.includes('active')) {
+          return;
+        }
+
+        removeActiveClasses(ulTab);
+        tabContentId = ulTab.getAttribute('data-tab');
+        tabContentElement = document.getElementById(tabContentId);
+        removeActiveClasses(tabContentElement);
+
+        tabContentElement.querySelectorAll('li')[position].classList.add('active');
+        liTab.classList.add('active');
+      }, false);
+    });
+});

assets/tabs.css

@@ -0,0 +1,48 @@
+.tab {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -20px;
+    padding: 0;
+    list-style: none;
+    position: relative;
+}
+
+.tab > * {
+    flex: none;
+    padding-left: 20px;
+    position: relative;
+}
+
+.tab > * > a {
+    display: block;
+    text-align: center;
+    padding: 9px 20px;
+    color: #999;
+    border-bottom: 2px solid transparent;
+    border-bottom-color: transparent;
+    font-size: 12px;
+    text-transform: uppercase;
+    transition: color .1s ease-in-out;
+    line-height: 20px;
+}
+
+.tab > .active > a {
+    color:#222;
+    border-color: #1e87f0;
+}
+
+.tab li a {
+    text-decoration: none;
+        cursor: pointer;
+}
+
+.tab-content{
+    padding: 0;
+}
+
+.tab-content li {
+    display: none;
+}
+.tab-content li.active {
+    display: initial;
+}

benchmarks.markdown

@@ -0,0 +1,10 @@
+---
+layout: benchmarks
+title: Benchmarks
+---
+
+This page displays some benchmarks that determine the performance of RustPython.
+
+Most of these benchmarks compare RustPython to CPython.
+
+More information about the benchmarks can be found on [the RustPython GitHub repo](https://github.com/RustPython/RustPython/tree/master/benches).