feat: updated Jekyll to v4, added new screenshot, moved screenshots to img folder, updated README, ran optipng on some files

Author: ErikBjare

.github/workflows/pages.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        ruby: ['2.6']
+        ruby: ['2.7']
         python: ['3.7']
     steps:
       - name: Checkout 🛎️

Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org/"
 
-gem 'jekyll', '~>3.1'
+gem 'jekyll', '~>4.0'
 
 group :jekyll_plugins do
   #gem 'jekyll-pug'

Gemfile.lock

@@ -4,62 +4,68 @@ GEM
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.5)
+    concurrent-ruby (1.1.6)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
-    ffi (1.11.3)
+    ffi (1.13.1)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
-    i18n (0.9.5)
+    i18n (1.8.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.8.6)
+    jekyll (4.1.1)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
-      i18n (~> 0.7)
-      jekyll-sass-converter (~> 1.0)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 1.14)
+      kramdown (~> 2.1)
+      kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.3.3)
+      mercenary (~> 0.4.0)
       pathutil (~> 0.9)
-      rouge (>= 1.7, < 4)
+      rouge (~> 3.0)
       safe_yaml (~> 1.0)
-    jekyll-last-modified-at (1.2.1)
+      terminal-table (~> 1.8)
+    jekyll-last-modified-at (1.3.0)
       jekyll (>= 3.7, < 5.0)
       posix-spawn (~> 0.3.9)
-    jekyll-sass-converter (1.5.2)
-      sass (~> 3.4)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (1.17.0)
+    kramdown (2.3.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
     liquid (4.0.3)
     listen (3.2.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
+    mercenary (0.4.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    posix-spawn (0.3.13)
-    public_suffix (4.0.1)
-    rb-fsevent (0.10.3)
-    rb-inotify (0.10.0)
+    posix-spawn (0.3.15)
+    public_suffix (4.0.5)
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rouge (3.14.0)
+    rexml (3.2.4)
+    rouge (3.21.0)
     safe_yaml (1.0.5)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.7.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  jekyll (~> 3.1)
+  jekyll (~> 4.0)
   jekyll-last-modified-at
 
 BUNDLED WITH

Makefile

@@ -7,7 +7,7 @@ build: assets
 dev: assets
 	bundle exec bliss serve
 
-assets: _includes/tables img/stats
+assets: _includes/tables img/stats img/*.png
 
 push-github:
 	./scripts/push-build.sh
@@ -20,8 +20,18 @@ install-deps:
 	bundle config set path 'vendor/bundle'
 	bundle install
 
+precommit:
+
+# Used to optimize png filesizes (which need to be <128K due to https://github.com/DougBeney/Jekyll-Bliss/issues/4)
+# If files are still >128K, then you might want reduce the number of colors and remove metadata to reduce size:
+#   convert $INPUT $OUTPUT -colors 256 -strip -define png:exclude-chunk=all
+#   optipng $INPUT $OUTPUT
+img/%.png:
+	optipng -o5 $@
+
 clean:
 	-rm -r _site
+	-rm -r _build
 	-rm -r _includes/tables
 	-make --directory=contributor-stats clean
 
@@ -36,14 +46,12 @@ stats:
 contributor-stats:
 	git clone --recurse-submodules https://github.com/ActivityWatch/contributor-stats.git || true
 
-_includes/tables: contributor-stats/tables
+_includes/tables: contributor-stats
+	make --directory=contributor-stats build-aw
 	cp -r contributor-stats/tables _includes/
 
 img/stats: stats
 	pip show poetry || pip install poetry
 	cd stats && poetry install
 	mkdir -p img/stats
 	cd stats && mkdir -p out && poetry run python analyze_stats.py --since 2017-07-01 --column downloads --save ../img/stats/downloads.png
-
-contributor-stats/tables: contributor-stats
-	make --directory=contributor-stats build-aw

README.md

@@ -5,3 +5,25 @@ activitywatch.github.io
 
 Official ActivityWatch site
 
+## Building
+
+Run `make install-deps` to install dependencies (like jekyll-bliss and jekyll).
+
+Run `make dev` to build assets and start development server.
+
+## Editing
+
+We use [jekyll-bliss](https://jekyll-pug.dougie.io/) to build the site. It uses Jekyll under the hood.
+
+Pages are written either as `.html` or `.pug` files.
+
+For example:
+
+```
+dest           | source
+----------------------------------
+/              | index.pug
+/ci/           | ci.pug
+/stats/        | stats.pug
+/contributors/ | contributors.html
+```

img/banner.png

@@ -30,7 +30,7 @@ article.wrapper.mt-4
 
 div.container
   div.row
-    .col-md-9
+    .col-md-8
       h2 Features
       ul
         li #[b Tracking:] Tracks active application and window title out of the box, more with #[a(href="https://docs.activitywatch.net/en/latest/watchers.html") watchers].
@@ -54,21 +54,22 @@ div.container
         li Gain "self-knowledge through numbers" (#[a(href="https://en.wikipedia.org/wiki/Quantified_self") Quantified Self])
         li Keep a log of your digital life (#[a(href="https://en.wikipedia.org/wiki/Lifelog") lifelogging]).
         li Research attention, productivity, and behavior (researchers: contact us!)
-        li Track who creates the things you use, so that you can give them incentive to continue (The mission of the #[a(href='#thankful') Thankful] project).
+        li Track who creates the things you use, so you can incentivize them to continue
+        ul
+          li The goal of the #[a(href='#thankful') Thankful] app
 
       p
         | Our users are diverse and we keep being surprised by what people use ActivityWatch for.
         | If you've built something cool that you've want to share with us, post about it on #[a(href="https://forum.activitywatch.net") the forum]!
 
-    .col-md-3
+    .col-md-4
       h4 Screenshots
-      div.mb-2 #[b Note:] These screenshots are old and missing many new features (like categorization), they will be updated soon.
-      a(href='/screenshot-v0.8.0b9-today.png')
+      a(href='/img/screenshot-v0.9.3-activity.png')
         figure(style='width: 100%; border: 1px #999 solid; border-radius: 2px')
-          img(style='width: 100%' src='/screenshot-v0.8.0b9-today.png')
-      a(href='/screenshot-v0.8.0b9-timeline.png')
+          img(style='width: 100%' src='/img/screenshot-v0.9.3-activity.png')
+      a(href='/img/screenshot-v0.8.0b9-timeline.png')
         figure(style='width: 100%; border: 1px #999 solid; border-radius: 2px')
-          img(style='width: 100%' src='/screenshot-v0.8.0b9-timeline.png')
+          img(style='width: 100%' src='/img/screenshot-v0.8.0b9-timeline.png')
 
   div.row.mt-4
     .col-md-6