Initial commit

.gitignore

@@ -0,0 +1,5 @@
+.sass-cache
+.jekyll-metadata
+_site/
+node_modules/*
+results/*/*

CNAME

@@ -0,0 +1 @@
+demo.speedtracker.org

Gemfile

@@ -0,0 +1,24 @@
+source "https://rubygems.org"
+ruby RUBY_VERSION
+
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "3.2.1"
+
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+
+# If you have any plugins, put them here!
+# group :jekyll_plugins do
+#   gem "jekyll-github-metadata", "~> 1.0"
+# end

Gemfile.lock

@@ -0,0 +1,42 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    colorator (1.1.0)
+    ffi (1.9.14)
+    forwardable-extended (2.6.0)
+    jekyll (3.2.1)
+      colorator (~> 1.0)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (~> 1.7)
+      safe_yaml (~> 1.0)
+    jekyll-sass-converter (1.4.0)
+      sass (~> 3.4)
+    jekyll-watch (1.5.0)
+      listen (~> 3.0, < 3.1)
+    kramdown (1.12.0)
+    liquid (3.0.6)
+    listen (3.0.8)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    mercenary (0.3.6)
+    minima (1.0.1)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
+    rb-fsevent (0.9.7)
+    rb-inotify (0.9.7)
+      ffi (>= 0.5.0)
+    rouge (1.11.1)
+    safe_yaml (1.0.4)
+    sass (3.4.22)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (= 3.2.1)
+  minima

README.md

@@ -0,0 +1,3 @@
+![SpeedTracker logo](https://speedtracker.org/assets/images/logo-square-inverted-128.png)
+
+# SpeedTracker front-end

_config.yml

@@ -0,0 +1,25 @@
+detach:  false
+port:    4820
+host:    0.0.0.0
+
+exclude:
+  - app
+  - node_modules
+  - src/results
+  - public
+  - Gemfile*
+  - package.json
+  - speedtracker.yml
+  - webpack.config.js
+
+collections:
+  profiles:
+    output: true
+
+defaults:
+  - scope:
+      path: ""
+      type: "profiles"
+    values:
+      layout: data
+      permalink: /:path/

_includes/getCurrentProfile

@@ -0,0 +1 @@
+{% assign currentProfile = '' %}{% for profile in site.profiles %}{% if page.slug %}{% if page.slug == profile.slug %}{% assign currentProfile = profile.slug %}{% endif %}{% else %}{% if profile.default %}{% assign currentProfile = profile.slug %}{% endif %}{% endif %}{% endfor %}{{ currentProfile }}

_includes/listAllProfiles

@@ -0,0 +1 @@
+{% capture currentProfile %}{% include getCurrentProfile %}{% endcapture %}[{% for profile in site.profiles %}{slug:{{ profile.slug | jsonify }},name:{{ profile.name | jsonify }},budgets:{{ profile.budgets | jsonify }}{% if profile.slug == currentProfile %},active:true{% endif %}},{% endfor %}]

_includes/listProfileTests

@@ -0,0 +1 @@
+{% assign paths = '' | split: '/' %}{% for file in site.static_files %}{% assign filePath = file.path | split: '/' %}{% if filePath[2] == include.profile %}{% assign filename = filePath[4] | split: '.' %}{% assign date = filePath[3] | append: filename[0] | plus: 0 %}{% assign paths = paths | push: date %}{% endif %}{% endfor %}{{ paths | jsonify }}

_includes/meta.html

@@ -0,0 +1,37 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+{% assign currentProfile = '' %}{% for profile in site.profiles %}{% if page.slug %}{% if page.slug == profile.slug %}{% assign currentProfile = profile.name %}{% endif %}{% else %}{% if profile.default %}{% assign currentProfile = profile.name %}{% endif %}{% endif %}{% endfor %}
+
+{% assign pageTitle = 'SpeedTracker' %}
+
+{% if currentProfile != '' %}
+  {% assign pageTitle = pageTitle | append: ' - ' | append: currentProfile %}
+{% endif %}
+
+<title>{{ pageTitle }}</title>
+
+<meta property="og:image" content="https://speedtracker.org/assets/images/logo-full-wide.png"/>
+<meta property="og:image:width" content="1848"/>
+<meta property="og:image:height" content="866"/>
+<meta property="og:title" content="{{ pageTitle }}"/>
+<meta property="og:site_name" content="{{ pageTitle }}"/>
+<meta property="og:description" content="Website performance monitoring tool"/>
+
+<link rel="apple-touch-icon" sizes="57x57" href="/assets/icons/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/assets/icons/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/assets/icons/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/assets/icons/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/assets/icons/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/assets/icons/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/assets/icons/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/assets/icons/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/assets/icons/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/assets/icons/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/assets/icons/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">

_layouts/base.html

@@ -0,0 +1,20 @@
+---
+layout: null
+---
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% include meta.html %}
+
+  <link rel="stylesheet" type="text/css" href="/css/main.css">
+</head>
+<body>
+  <div id="root"></div>
+
+  {% capture currentProfile %}{% include getCurrentProfile %}{% endcapture %}
+
+  <script>window.PROFILES = {% include listAllProfiles %}</script>
+  <script>window.TESTS = {% include listProfileTests profile=currentProfile %}</script>
+  <script src="/bundle.js"></script>
+</body>
+</html>

_layouts/data.html

@@ -0,0 +1,3 @@
+---
+layout: base
+---

_profiles/css-tricks-cable.html

@@ -0,0 +1,21 @@
+---
+default: true
+interval: 12
+budgets:
+  -
+    metric: TTFB
+    max: 2
+    alerts: ['mainAlert', 'slackAlert']
+  -
+    metric: firstPaint
+    max: 2
+    alerts: ['mainAlert', 'slackAlert']
+name: 'CSS Tricks (Cable)'
+parameters:
+  connectivity: 'Cable'
+  location: 'Dulles:Chrome'
+  firstViewOnly: true
+  runs: 1
+  url: "https://css-tricks.com"
+  video: true
+---

_sass/_config.scss

@@ -0,0 +1,177 @@
+/*
+ ____    ______  ____    ______     
+/\  _`\ /\  _  \/\  _`\ /\__  _\    
+\ \ \/\ \ \ \L\ \ \ \/\ \/_/\ \/    
+ \ \ \ \ \ \  __ \ \ \ \ \ \ \ \    
+  \ \ \_\ \ \ \/\ \ \ \_\ \ \_\ \__ 
+   \ \____/\ \_\ \_\ \____/ /\_____\
+    \/___/  \/_/\/_/\/___/  \/_____/
+                                    
+                                    
+ ____    ______  ____    ______  ____       
+/\  _`\ /\  _  \/\  _`\ /\__  _\/\  _`\     
+\ \ \L\ \ \ \L\ \ \ \L\ \/_/\ \/\ \,\L\_\   
+ \ \ ,__/\ \  __ \ \ ,  /  \ \ \ \/_\__ \   
+  \ \ \/  \ \ \/\ \ \ \\ \  \ \ \  /\ \L\ \ 
+   \ \_\   \ \_\ \_\ \_\ \_\ \ \_\ \ `\____\
+    \/_/    \/_/\/_/\/_/\/ /  \/_/  \/_____/
+    
+          
+          https://github.com/dadi/parts
+*/
+
+// -----------------------------------------------------------------------------
+// Global sizes
+//
+// -> Size units are relative to the base size. For example, if the base size is
+//    set to 16px, then:
+//
+//    $dp-size-units: (
+//      'small': 0.5,
+//      'normal': 1,
+//      'large': 2
+//    );
+//
+//    Will mean that `small` is 8px and `large` is 32px.
+//
+//    You *always* need to include a unit called `normal` (typically set to 1).
+// -----------------------------------------------------------------------------
+
+$dp-base-size: 18px;
+
+$dp-base-line-height: 1.375;
+
+$dp-size-units:(
+  'tiny': 0.25,
+  'small': 0.5,
+  'normal': 1,
+  'large': 1.5,
+  'larger': 2.25,
+  'huge': 3,
+  'massive': 4
+);
+
+// -----------------------------------------------------------------------------
+// Spacing
+//
+// -> `$dp-room` is the equivalent of `$dp-base-size` for spacing. It's used with
+//    margin/padding. Utility classes will be created automatically for every
+//    unit defined in `$dp-size-units`, always relative to `$dp-room`.
+//
+//    Example:
+//
+//    .u-padding {}
+//    .u-padding-large {}
+//    .u-margin-small {}
+//
+//    See utilities/_utilities.size.scss for more information.
+//
+// -----------------------------------------------------------------------------
+
+$dp-room: 15px;
+
+// -----------------------------------------------------------------------------
+// Roundness
+//
+// -> Uses globally in `border-radius`. Optional.
+//
+// -----------------------------------------------------------------------------
+
+$dp-roundness: 5px;
+
+// -----------------------------------------------------------------------------
+// Global maximum width
+//
+// -> The default value to be used by utilities/_utilities.wrapper to create
+//    a wrapper container.
+//
+// -----------------------------------------------------------------------------
+
+$dp-max-width: 900px;
+
+// -----------------------------------------------------------------------------
+// Global font smoothing
+//
+// -> Whether to enable font smoothing globally. If set to `false` (default),
+//    font smoothing can still be enabled individually on any element by using
+//    tools/_tools.font-smoothing.
+//
+// -----------------------------------------------------------------------------
+
+$dp-global-font-smoothing: true;
+
+// -----------------------------------------------------------------------------
+// Responsive breakpoints
+//
+// -> Used by include-media (http://include-media.com). Allows the definition of
+//    media queries using any of the breakpoints defined using a syntax like:
+//
+//    @include media('>=medium') {}
+//    @include media('>medium', '<large') {}
+//    @include media('>large', '<2300px') {}
+//    @include media('retina2x', '<medium') {}
+//
+// -----------------------------------------------------------------------------
+
+$breakpoints: (
+  'medium': 640px,
+  'large': 1000px
+);
+
+// -----------------------------------------------------------------------------
+// Colours
+//
+// -> To be used with the dp-color() function.
+//
+//    body {
+//      background-color: dp-color('background');
+//    }
+//
+// -----------------------------------------------------------------------------
+
+$dp-colors: (
+  'background': #FAFAFA,
+  'primary': #000000,
+  'accent': #EA8C55
+);
+
+// -----------------------------------------------------------------------------
+// Global typography settings
+// -----------------------------------------------------------------------------
+
+$dp-fonts: (
+  'primary': ('Roboto Condensed', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif),
+  'secondary': (Helvetica, Arial, sans-serif)
+);
+
+// -----------------------------------------------------------------------------
+// Custom font declarations
+// -----------------------------------------------------------------------------
+
+@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed';
+
+// -----------------------------------------------------------------------------
+// Grid classes
+//
+// -> Used by include-media to generate column classes. It uses the breakpoints
+//    defined in `$breakpoints` and the number of subdivisions below to create
+//    classes like .col--{part}-{total} and .col--{part}-{total}@{breakpoint}
+//
+// -> Example: Build an element that takes full width on small screens, 1/2 of
+//             the width on `medium` and 1/3 of the width on `large`
+//
+//    <div class="col col--1-1 col--1-2@medium col--1-3@large"></div>
+//
+// -----------------------------------------------------------------------------
+
+$im-columns-subdivisions: 1, 2, 3, 4, 5, 6;
+$im-columns-class: '.u-col';
+
+// -----------------------------------------------------------------------------
+// Grid mode
+//
+// -> Whether to define grid classes as `float` (default) or `inline-block`
+//
+// -----------------------------------------------------------------------------
+
+$dp-grid-mode: 'flex';