Merge pull request #43 from theangryhobbit/master

Webpage to display a set of benchmarks from RustPython

Author: coolreader18

Diff for: _config.yml

@@ -30,6 +30,7 @@ gitter: https://gitter.im/rustpython/Lobby
 show_excerpts: true
 contributor_excerpt: "" # TODO: write something here, goes right under "Contributors" heading
 blog-intro: Create an issue if you see something wrong. Edit posts or create new ones via PR on <a target="_blank" href="https://github.com/RustPython/rustpython.github.io">github.com/RustPython/rustpython.github.io</a>
+benchmarks-intro: More information about the benchmarks can be found on <a target="_blank" href="https://github.com/RustPython/RustPython">github.com/RustPython/RustPython</a>
 
 permalink: /blog/:year/:month/:day/:title:output_ext
 

Diff for: _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 }}">

Diff for: _layouts/benchmarks.html

@@ -0,0 +1,64 @@
+---
+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 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 %} style="font-weight: bold;">
+            <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>

Diff for: _layouts/default.html

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

Diff for: assets/js/tabs.js

@@ -0,0 +1,45 @@
+function removeActiveClasses(ulElement) {
+
+    const lis = ulElement.querySelectorAll('li');
+    Array.prototype.forEach.call(lis, function(li) {
+        li.classList.remove('active');
+    });
+}
+
+function getChildPosition(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();
+
+            const liTab = link.parentNode;
+            const ulTab = liTab.parentNode;
+            const position = getChildPosition(liTab);
+            if (liTab.className.includes('active')) {
+                return;
+            }
+
+            removeActiveClasses(ulTab);
+            const tabContentId = ulTab.getAttribute('data-tab');
+            const tabContentElement = document.getElementById(tabContentId);
+
+            removeActiveClasses(tabContentElement);
+
+            tabContentElement.querySelectorAll('li')[position].classList.add('active');
+            liTab.classList.add('active');
+        }, false);
+    });
+});

Diff for: assets/style.css

@@ -283,7 +283,7 @@ ul.list-inline {
   line-height: 1.5em;
 }
 
-.blog-intro {
+.blog-intro, .benchmarks-intro {
   background-color: #f6f8fa;
   padding-left: 2em;
   padding-right: 2em;

Diff for: 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;
+}

Diff for: benchmarks.markdown

@@ -0,0 +1,8 @@
+---
+layout: benchmarks
+title: Benchmarks
+---
+
+This page displays some benchmarks that determine the performance of RustPython.
+
+Most of these benchmarks compare RustPython to CPython.