Adds support for GitHub pages (#27)

* moves readme to docs folder * Set theme jekyll-theme-cayman * adjusts some colors * adjusts image margin * adds some styling and a navigation menu
2021-11-11 21:11:07 +01:00 · 2021-11-11 21:11:07 +01:00 · 68f4313518
parent 4196009237
commit 68f4313518
7 changed files with 207 additions and 8 deletions
--- a/app/engine/Timer.js
+++ b/app/engine/Timer.js
@ -2,7 +2,7 @@
 /*
  Open Rowing Monitor, https://github.com/laberning/openrowingmonitor

-  Stopwatch used to measure multiple time intevals
+  Stopwatch used to measure multiple time intervals
 */
 function createTimer () {
  const timerMap = new Map()
--- a/docs/.gitignore
+++ b/docs/.gitignore
@ -0,0 +1,5 @@
+_site
+.sass-cache
+.jekyll-metadata
+Gemfile
+Gemfile.lock
--- a/docs/README.md
+++ b/docs/README.md
@ -1,7 +1,7 @@
 # Open Rowing Monitor

 <!-- markdownlint-disable-next-line no-inline-html -->
-<img width="200" height="200" align="left" src="docs/img/openrowingmonitor_icon.png">
+<img width="200" height="200" align="left" src="./img/openrowingmonitor_icon.png" class="dropcap">

 An open source rowing monitor for rowing exercise machines. It upgrades a rowing machine into a real smart trainer that can be used with training applications and games.

@ -12,7 +12,7 @@ We suspect it works well with DIY rowing machines like the [Openergo](https://op

 ## Features

-The following items describe most of the current features, more functionality will be added in the future, check the [Development Roadmap](docs/backlog.md) if you are curious.
+The following items describe most of the current features, more functionality will be added in the future, check the [Development Roadmap](./backlog.md) if you are curious.

 ### Rowing Metrics

@ -33,7 +33,7 @@ The web interface visualizes the rowing metrics on any device that can run a web
 If you connect a screen to the Raspberry Pi, then this interface can also be directly shown on the device. The installation script can set up a web browser in kiosk mode that runs on the Raspberry Pi.

 <!-- markdownlint-disable-next-line no-inline-html -->
-<img src="docs/img/openrowingmonitor_frontend.png" width="700"><br clear="left">
+<img src="./img/openrowingmonitor_frontend.png" width="700"><br clear="left">

 ### Bluetooth Low Energy (BLE)

@ -63,7 +63,7 @@ You will need a Raspberry Pi Zero W, Raspberry Pi Zero 2 W, Raspberry Pi 3 or a
 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/laberning/openrowingmonitor/HEAD/install/install.sh)"
 ```

-Also have a look at the [Detailed Installation Instructions](docs/installation.md) for more information on the software installation and for instructions on how to connect the rowing machine.
+Also have a look at the [Detailed Installation Instructions](./installation.md) for more information on the software installation and for instructions on how to connect the rowing machine.

 ## How it all started

@ -77,8 +77,8 @@ This project is already in a very usable stage, but some things are still a bit

 Feel free to leave a message in the [GitHub Discussions](https://github.com/laberning/openrowingmonitor/discussions) if you have any questions or ideas related to this project.

-Check the advanced information on the [Physics behind Open Rowing Monitor](docs/physics_openrowingmonitor.md).
+Check the advanced information on the [Physics behind Open Rowing Monitor](./physics_openrowingmonitor.md).

-We plan to add more features, here is the [Development Roadmap](docs/backlog.md).
+We plan to add more features, here is the [Development Roadmap](./backlog.md).

-This project uses some great work by others, see the [Attribution here](docs/attribution.md).
+This project uses some great work by others, see the [Attribution here](./attribution.md).
--- a/docs/_config.yml
+++ b/docs/_config.yml
@ -0,0 +1,50 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+title: Open Rowing Monitor
+description: >- # this means to ignore newlines until "baseurl:"
+  A free performance monitor for rowing machines
+# baseurl: "" # the subpath of your site, e.g. /blog
+# url: "" # the base hostname & protocol for your site, e.g. http://example.com
+twitter_username: laberning
+github_username:  laberning
+
+# Build settings
+markdown: kramdown
+theme: jekyll-theme-cayman
+plugins:
+  - jekyll-feed
+
+navigation:
+  - title: About
+    url: /
+  - title: Installation
+    url: /installation.html
+  - title: Physics
+    url: /physics_openrowingmonitor.html
+  - title: Backlog
+    url: /backlog.html
+
+# Exclude from processing.
+# The following items will not be processed, by default. Create a custom list
+# to override the default setting.
+# exclude:
+#   - Gemfile
+#   - Gemfile.lock
+#   - node_modules
+#   - vendor/bundle/
+#   - vendor/cache/
+#   - vendor/gems/
+#   - vendor/ruby/
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset="UTF-8">
+
+{% seo %}
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" as="style" type="text/css" crossorigin>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#002b57">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+    <!-- Setup Google Analytics -->
+    {% include head-custom-google-analytics.html %}
+    <link rel="shortcut icon" type="image/x-icon" href="{{ '/img/favicon.ico' | relative_url }}">
+  </head>
+  <body>
+    <header class="page-header" role="banner">
+      <svg fill="#FFFFFF"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 309.054 193.716"
+        xml:space="preserve"
+        class="rower-image">
+        <g>
+            <path d="M90.791,123.444c0-14.708-11.924-26.63-26.629-26.63c-14.708,0-26.63,11.922-26.63,26.63   c0,11.885,7.785,21.945,18.531,25.372c2.554,0.815,5.274,1.258,8.099,1.258c3.608,0,7.048-0.722,10.187-2.022   C83.999,144.052,90.791,134.544,90.791,123.444z M64.162,136.464c-7.191,0-13.02-5.832-13.02-13.021   c0-7.19,5.828-13.02,13.02-13.02c7.189,0,13.019,5.829,13.019,13.02C77.18,130.632,71.351,136.464,64.162,136.464z"></path>
+            <path d="M294.054,163.716c-0.95,0-1.876,0.099-2.777,0.268l-8.627-8.627l18.044-0.755c4.413-0.185,7.843-3.913,7.659-8.326   c-0.185-4.415-3.913-7.843-8.326-7.658l-183.459,7.669c-4.869-4-7.919-9.115-9.814-13.734c0.625-2.938,0.961-5.983,0.961-9.108   c0-20.321-13.919-37.392-32.744-42.199l139.737,4.609c0.382,4.75,3.296,8.65,7.409,9.353c0.55,0.094,1.097,0.116,1.64,0.092   c-4.75-2.695-6.465-8.742-3.814-13.534c1.764-3.184,5.119-5.159,8.759-5.159c1.051,0,2.091,0.188,3.089,0.513   c-1.315-2.247-3.361-3.848-5.851-4.272c-4.319-0.74-8.557,2.294-10.363,7.038L66.181,74.954c1.348-1.233,2.678-2.412,3.976-3.524   c4.922-4.233,9.364-7.567,12.544-9.822c1.346-0.955,2.447-1.704,3.281-2.258l3.33,6.697c0.994,1.973,3.4,2.766,5.372,1.772   l5.358-2.701c1.972-0.994,2.766-3.399,1.771-5.372L81.36,18.61c-0.994-1.972-3.4-2.766-5.373-1.771l-5.358,2.7   c-1.973,0.994-2.766,3.399-1.771,5.372l9.953,20.018c-2.705,1.721-16.404,10.669-30.345,24.904   c-7.689,7.869-15.471,17.364-21.444,28.32c-5.96,10.941-10.126,23.446-10.128,37.032c-0.004,8.045,1.501,16.426,4.829,24.851   l-3.946,3.946c-0.901-0.168-1.826-0.267-2.776-0.267c-8.284,0-15,6.715-15,15c0,8.283,6.716,15,15,15c8.284,0,15-6.717,15-15   c0-2.61-0.669-5.063-1.841-7.201l5.759-5.76l17.272-0.722c4.097,1.276,8.454,1.965,12.972,1.965c5.791,0,11.313-1.14,16.367-3.191   l184.928-7.731l15.439,15.439c-1.172,2.138-1.841,4.591-1.841,7.201c0,8.283,6.715,15,15,15c8.283,0,15-6.717,15-15   C309.054,170.431,302.337,163.716,294.054,163.716z M64.162,153.96c-6.045,0-11.674-1.765-16.415-4.797   c-7.841-5.015-13.232-13.512-13.998-23.313c-0.062-0.795-0.103-1.596-0.103-2.406c0-9.314,4.179-17.649,10.759-23.247   c5.324-4.529,12.218-7.268,19.756-7.268c16.853,0,30.515,13.664,30.515,30.515c0,9.893-4.712,18.684-12.011,24.26   C77.532,151.626,71.121,153.96,64.162,153.96z"></path>
+            <ellipse transform="matrix(0.2117 -0.9773 0.9773 0.2117 182.3453 271.0676)" cx="259.205" cy="22.5" rx="22.495" ry="22.495"></ellipse>
+            <path d="M260.665,108.8h-0.007h-0.003c-4.516-0.026-9.354-1.073-15.691-3.398c-3.895-1.442-8.154-3.327-12.869-5.688   c-1.083,2.82-2.275,5.585-3.587,8.254c-11-3.376-26.917-6.958-45.146-7.003c-19.674-0.02-42.335,4.346-63.276,18.415   c-5.73,3.849-7.258,11.615-3.41,17.346c2.413,3.593,6.365,5.533,10.391,5.534c2.396,0,4.818-0.688,6.957-2.124   c15.927-10.688,33.209-14.154,49.339-14.171c13.87-0.009,26.689,2.653,35.91,5.342c4.608,1.34,8.317,2.675,10.814,3.654   c1.249,0.485,2.196,0.884,2.803,1.147c0.303,0.132,0.521,0.229,0.649,0.287c0.063,0.028,0.104,0.048,0.123,0.056l0.001-0.001   c1.934,0.911,3.984,1.28,5.98,1.174c5.898,0.655,12.22-1.26,18.18-9.364c4.854-7.776,8.424-14.464,11.137-21.105   c-0.384,0.172-0.77,0.335-1.162,0.471C265.639,108.41,263.297,108.8,260.665,108.8z"></path>
+            <path d="M258.181,88.508c-0.115-0.488-0.254-1.023-0.429-1.589c-0.528-1.764-1.335-3.86-2.335-6.08   c-1.973-4.366-4.125-7.91-4.215-8.059c-0.026-0.04-0.046-0.079-0.066-0.112l0.01,0.022c-2.89-4.696-1.426-10.869,3.264-13.763   c1.579-0.978,3.393-1.492,5.242-1.492c3.497,0,6.681,1.776,8.518,4.749l0.02,0.029l0.033,0.06l0.132,0.225   c3.208,5.369,5.903,11.016,7.71,16.119c0.128-0.978,0.256-1.957,0.375-2.973c1.715-15.388-7.487-24.872-16.114-26.601   c-8.626-1.729-17.115,7.433-18.778,17.655c-1.038,4.087-2.141,8.739-3.416,13.633c5.243,2.747,9.867,4.87,13.772,6.314   C254.69,87.689,256.758,88.228,258.181,88.508z"></path>
+            <path d="M221.692,82.731c-2.139,3.865-0.739,8.737,3.126,10.876c0.633,0.35,1.241,0.678,1.857,1.012   c2.137,1.16,4.179,2.23,6.125,3.207c4.801,2.411,9.056,4.293,12.853,5.7c5.796,2.126,10.535,3.251,15.011,3.274   c2.202,0,4.374-0.297,6.477-1.064c1.029-0.357,2.021-0.873,2.948-1.486c1.924-1.271,3.558-3.005,4.555-4.91   c1.521-2.818,1.911-5.647,1.921-8.183c-0.013-2.804-0.487-5.42-1.157-7.931c-0.188-0.704-0.389-1.401-0.602-2.091   c-2.961-9.301-8.186-17.6-8.338-17.899c-2.32-3.76-7.249-4.928-11.009-2.607c-3.763,2.32-4.928,7.248-2.608,11.011v-0.003   c0,0,0.008,0.017,0.061,0.103c0.387,0.634,2.456,4.132,4.327,8.278c0.938,2.069,1.822,4.297,2.426,6.317   c0.55,1.791,0.845,3.434,0.894,4.467c-1.554-0.003-4.76-0.563-9.35-2.282c-3.639-1.344-8.166-3.376-13.604-6.206   c-1.495-0.778-3.058-1.615-4.692-2.518c-0.117-0.064-0.227-0.122-0.344-0.188C228.703,77.469,223.835,78.865,221.692,82.731z"></path>
+        </g>
+      </svg>
+      <h1 class="project-name">{{ site.title }}</h1>
+      <h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
+      <ul class="navbar">
+        {% for item in site.navigation %}
+          <li class="{% if item.url == page.url %}active{% endif %}">
+            <a href="{{ site.baseurl }}{{ item.url }}">{{ item.title }}</a>
+          </li>
+        {% endfor %}
+        <li class="menu-right">
+          <a href="{{ site.github.repository_url }}">View on GitHub</a>
+        </li>
+      </ul>
+    </header>
+
+    <main id="content" class="main-content" role="main">
+      {{ content }}
+
+      <footer class="site-footer">
+        {% if site.github.is_project_page %}
+          <span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.title }}</a> is maintained with &#9825; by <a href="{{ site.github.owner_url }}">{{ site.github.owner.name }}</a>.</span>
+        {% endif %}
+        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
+      </footer>
+    </main>
+  </body>
+</html>
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@ -0,0 +1,86 @@
+---
+---
+
+// Headers
+$header-heading-color: #fff !default;
+$header-bg-color: #002b57 !default;
+$header-bg-color-secondary: #002b57 !default;
+
+// Text
+$section-headings-color: #3F5889 !default;
+$body-text-color: #303638 !default;
+$body-link-color: #0BB387 !default;
+$blockquote-text-color: #819198 !default;
+
+// Code
+$code-bg-color: #f3f6fa !default;
+$code-text-color: #303638 !default;
+
+// Borders
+$border-color: #dce6f0 !default;
+$table-border-color: #e9ebec !default;
+$hr-border-color: #eff0f1 !default;
+@import "{{ site.theme }}";
+.main-content img[align=left] {
+  margin-right: 20px;
+}
+.dropcap {
+  display: none;
+}
+.page-header {
+  padding-top: 2rem;
+  padding-bottom: 1rem;
+  background-color: #002B57;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='482' height='401.7' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
+}
+.project-name {
+  font-size: 2.25rem;
+}
+ul.navbar {
+  max-width: 64rem;
+  list-style-type: none;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  background-color: #00091c91;
+
+  li{
+    float: left;
+
+    &.menu-right{
+      float: right;
+    }
+
+    a {
+      display: block;
+      color: white;
+      text-align: center;
+      padding: 12px 16px;
+      text-decoration: none;
+
+      &:hover {
+        background-color: #0bb3879e;
+      }
+    }
+
+    &.active {
+      background-color: #0BB387; // #1b4168
+    }
+  }
+}
+
+.rower-image {
+  height: 150px;
+}
+
+@media screen and (max-width: 600px) {
+  .project-name {
+    font-size: 1.7rem;
+  }
+  ul.navbar li {
+    float: none !important;
+  }
+  .rowerimage {
+    height: 100px;
+  }
+}
--- a/docs/img/favicon.ico
+++ b/docs/img/favicon.ico