Experimental Jekyll/Github Pages implementation with tags (#12)

* Set theme jekyll-theme-midnight

* Experiment with jeckyll collections and layouts

* Add top-matter to pattern files so they show up in a collection

* Introduce a patterns index page; remove the patterns index from the home page

* Fix the link to the patterns page from home page; add boilerplate html

* Actually render the content in the default layout

* Add indexes for antipatterns and metapatterns

* Add home page to the navigation

* Move navigation.html into the includes folder

* Update nav to use absolute paths

* Update index layout to use absolute paths

* Apply the default layout explicitly to the Mob Without Teamwork antipattern

* Remove double slash from paths in index links

* Apply the default layout to all the other pages

* Add an experimental tags feature

* Show tags on the patterns index page

* Add instructions for running the Jekyll version of the site locally

* Update links to use 'relative_url' to avoid hardcoding the base url everywhere

That also means the readme can be simpler -- no need to add notes about the baseurl argument

The base url is set by Github Pages to be the repo name, so now the repo name can be changed without breaking the site

* Adjust the relative links to work with the new url scheme

The folder used to be called 'Patterns' but now it's '_patterns' which corresponds to the url 'patterns'

* Update tag section to print list of tags with duplicates

* Remove duplicates from the tag list

* Update tag list to link to the corresponding tag page

* Remove cruft from tags page

* Replace index files with a single sidebar navigation

* Add titles to the pattern/metapattern/antipattern template

* Add tags page to display links to pages matching the selected tag

* Rename tags layout to 'without-navigation' to better communicate intent

It's only incidental that that layout is used for the tags.html page

* Display tags for each page

Although they should really be links to the tag page in my opinion

* Add site title 'Mobbing Pattern Language'

* Remove redundant 'without-navigation' layout in place of a parameter

* Move tag list to navigation menu; improve tag list styles

* Update tags behaviour to highlight nav instead of linking to tags page

* Add Jekyll frontmatter to Treasure Map and Code First

* Update stylesheet link to use relative url

* Update 'Laptops? Yes!' filename *without* changing the title

See #7 for a
discussion of why it's important to keep the name as-is

Since the filename is used in a url, the question mark doesn't work.
This change aims to strike a ballance - the title is punctuated even
though the file name isn't.

* Cleanup styles.scss: extract variables; remove dead code

* Add rudimentary mobile view

* Put back the opacity on the tag background colors.

I wish there was a CSS background-opacity property, or a CSS function to change the opacity of a color.

I could convert the CSS variables into SCSS variables and then use the SCSS function 'opacify' to do the

trick, but I prefer CSS variables. Anyway it's open to improvement

* Split transparent colors from nontransparent colors because it was causing trouble

The background on the nav toggle ought not to be transparent, so the last commit where I just made everything transparent was no good.

* Update the nav highlight to use the transperent version of the theme color

.gitignore

@@ -258,4 +258,7 @@ paket-files/
 
 # Python Tools for Visual Studio (PTVS)
 __pycache__/
-*.pyc
+*.pyc_site
+
+# Jekyll (Github Pages)
+_site

GITHUB_PAGES_README.md

@@ -0,0 +1,12 @@
+# Readme for the Github Pages version of the site
+
+## Running locally
+
+If you've got a recent version of Ruby installed, try:
+
+    bundle install
+    bundle exec jekyll serve
+
+Otherwise see the [full instructions provided by
+Github](https://help.github.com/en/enterprise/2.14/user/articles/setting-up-your-github-pages-site-locally-with-jekyll)
+

Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem 'github-pages', group: :jekyll_plugins

Gemfile.lock

@@ -0,0 +1,248 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (6.0.2.1)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+      zeitwerk (~> 2.2)
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.11.1)
+    colorator (1.1.0)
+    commonmarker (0.17.13)
+      ruby-enum (~> 0.5)
+    concurrent-ruby (1.1.5)
+    dnsruby (1.61.3)
+      addressable (~> 2.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.12.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.7)
+    execjs (2.7.0)
+    faraday (1.0.0)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.12.2)
+    forwardable-extended (2.6.0)
+    gemoji (3.0.1)
+    github-pages (204)
+      github-pages-health-check (= 1.16.1)
+      jekyll (= 3.8.5)
+      jekyll-avatar (= 0.7.0)
+      jekyll-coffeescript (= 1.1.1)
+      jekyll-commonmark-ghpages (= 0.1.6)
+      jekyll-default-layout (= 0.1.4)
+      jekyll-feed (= 0.13.0)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.13.0)
+      jekyll-mentions (= 1.5.1)
+      jekyll-optional-front-matter (= 0.3.2)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.3.0)
+      jekyll-redirect-from (= 0.15.0)
+      jekyll-relative-links (= 0.6.1)
+      jekyll-remote-theme (= 0.4.1)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.6.1)
+      jekyll-sitemap (= 1.4.0)
+      jekyll-swiss (= 1.0.0)
+      jekyll-theme-architect (= 0.1.1)
+      jekyll-theme-cayman (= 0.1.1)
+      jekyll-theme-dinky (= 0.1.1)
+      jekyll-theme-hacker (= 0.1.1)
+      jekyll-theme-leap-day (= 0.1.1)
+      jekyll-theme-merlot (= 0.1.1)
+      jekyll-theme-midnight (= 0.1.1)
+      jekyll-theme-minimal (= 0.1.1)
+      jekyll-theme-modernist (= 0.1.1)
+      jekyll-theme-primer (= 0.5.4)
+      jekyll-theme-slate (= 0.1.1)
+      jekyll-theme-tactile (= 0.1.1)
+      jekyll-theme-time-machine (= 0.1.1)
+      jekyll-titles-from-headings (= 0.5.3)
+      jemoji (= 0.11.1)
+      kramdown (= 1.17.0)
+      liquid (= 4.0.3)
+      mercenary (~> 0.3)
+      minima (= 2.5.1)
+      nokogiri (>= 1.10.4, < 2.0)
+      rouge (= 3.13.0)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.16.1)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (~> 4.0)
+      public_suffix (~> 3.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.12.3)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.5)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.7.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-coffeescript (1.1.1)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.11.1)
+    jekyll-commonmark (1.3.1)
+      commonmarker (~> 0.14)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-commonmark-ghpages (0.1.6)
+      commonmarker (~> 0.17.6)
+      jekyll-commonmark (~> 1.2)
+      rouge (>= 2.0, < 4.0)
+    jekyll-default-layout (0.1.4)
+      jekyll (~> 3.0)
+    jekyll-feed (0.13.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.13.0)
+      jekyll (>= 3.4, < 5.0)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.5.1)
+      html-pipeline (~> 2.3)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-optional-front-matter (0.3.2)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.3.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-redirect-from (0.15.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-relative-links (0.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-remote-theme (0.4.1)
+      addressable (~> 2.0)
+      jekyll (>= 3.5, < 5.0)
+      rubyzip (>= 1.3.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-swiss (1.0.0)
+    jekyll-theme-architect (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.5.4)
+      jekyll (> 3.5, < 5.0)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.3)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    jemoji (0.11.1)
+      gemoji (~> 3.0)
+      html-pipeline (~> 2.2)
+      jekyll (>= 3.0, < 5.0)
+    kramdown (1.17.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)
+    mini_portile2 (2.4.0)
+    minima (2.5.1)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.14.0)
+    multipart-post (2.1.1)
+    nokogiri (1.10.7)
+      mini_portile2 (~> 2.4.0)
+    octokit (4.16.0)
+      faraday (>= 0.9)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.1.1)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rouge (3.13.0)
+    ruby-enum (0.7.2)
+      i18n
+    rubyzip (2.2.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)
+    sawyer (0.8.2)
+      addressable (>= 2.3.5)
+      faraday (> 0.8, < 2.0)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.3.1)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.6)
+      thread_safe (~> 0.1)
+    unicode-display_width (1.6.1)
+    zeitwerk (2.2.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  github-pages
+
+BUNDLED WITH
+   2.0.1

Antipatterns/Code First Ask Questions Later.md → _antipatterns/Code First Ask Questions Later.md

@@ -1,3 +1,7 @@
+---
+layout: default
+---
+
 # Also Known As
 
 # Context

Antipatterns/Mob Without Teamwork.md → _antipatterns/Mob Without Teamwork.md

@@ -1,3 +1,6 @@
+---
+layout: default
+---
 # Also Known As
  - Low-trust mobbing
  - Mechanics before attitude
@@ -17,9 +20,9 @@ Begin with the mechanics of mobbing: one computer, rotate drivers periodically.
 
 - Probably don't do Strong Style (nothing goes into the computer unless it goes
   through somebody else's hands)
-- Probably don't do the [Role Playing Game](../Patterns/Role%20Playing%20Game.md)
-- Probably don't do [Take Five](../Patterns/Take%20Five.md)
-- Definitely don't do [Mobodoro](../Patterns/Mobodoro.md)
+- Probably don't do the [Role Playing Game](../patterns/Role%20Playing%20Game.html)
+- Probably don't do [Take Five](../patterns/Take%20Five.html)
+- Definitely don't do [Mobodoro](../patterns/Mobodoro.html)
 
 # Resulting Context
 - when you're at the keyboard, you can't think -- you get stuck on very simple
@@ -40,7 +43,7 @@ that help with that:
  - Use [Strong Style
    driver/navigator](http://llewellynfalco.blogspot.com/2014/06/llewellyns-strong-style-pairing.html)
    -- "For an idea to go from your head into the computer it MUST go through someone else's hands"
- - Use the [Role Playing Game](../Patterns/Role%20Playing%20Game.md) with an emphasis on the
+ - Use the [Role Playing Game](../patterns/Role%20Playing%20Game.html) with an emphasis on the
    Sponsor and the Traffic Cop role
  - Pursue any other avenue you have for improving collaboration and teamwork and
    increasing trust between your group members

_config.yml

@@ -0,0 +1,13 @@
+collections:
+  patterns:
+    output: true
+  antipatterns:
+    output: true
+  metapatterns:
+    output: true
+sass:
+  style: compact
+markdown: kramdown
+kramdown:
+  # Start Markdown headers at h3
+  header_offset: 2

_includes/_header.html

@@ -0,0 +1,5 @@
+<div class='header'>
+  <h1>
+    <a href='{{ '/' | relative_url }}'>Mobbing Pattern Language</a>
+  </h1>
+</div>

_includes/_navigation-for-collection.html

@@ -0,0 +1,8 @@
+<div>{{include.collection | capitalize}}</div>
+<ul>
+  {% for item in site[include.collection] %}
+  <li data-tags='{{item.tags | join:' '}}'>
+    <a href='{{ item.url | relative_url }}'>{{ item.title }}</a>
+  </li>
+  {% endfor %}
+</ul>

_includes/_navigation-toggle.html

@@ -0,0 +1,17 @@
+<button class='button--reset navigation__toggle' onclick='toggleNavigation()'>
+  <script>
+    function toggleNavigation() {
+      document.querySelector('.main').classList.toggle('main--with-navigation');
+      deselectButton(document.querySelector('.navigation__toggle'));
+    }
+
+    function deselectButton(button) {
+      button.disabled = true;
+      button.disabled = false;
+    }
+  </script>
+  <svg viewbox="0 0 100 100">
+    <circle cx="50" cy="50" r="45" stroke-width="5" stroke="var(--svg-line, #000)" fill="var(--svg-background)" />
+    <path d="M40 20 L80 50 L40 80" stroke-width="10" stroke="var(--svg-line, #000)" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+</button>

_includes/_navigation.html

@@ -0,0 +1,13 @@
+<script>
+  {% include js/navigation-tag-augmenter.js %}
+</script>
+<div class='navigation'>
+  {% include _navigation-toggle.html %}
+  {% include _tags.html %}
+
+  <ul>
+    <li class='navigation__collection'>{% include _navigation-for-collection.html collection='patterns' %}</li>
+    <li class='navigation__collection'>{% include _navigation-for-collection.html collection='metapatterns' %}</li>
+    <li class='navigation__collection'>{% include _navigation-for-collection.html collection='antipatterns' %}</li>
+  </ul>
+</div>

_includes/_tag-list.html

@@ -0,0 +1,9 @@
+<div class='tag-list'>
+  {% for tag in include.tags %}
+    {% if tag != '' %}
+      <div class='tag-list__tag'>
+        <a href='{{ '#' | append:tag }}'>{{ tag }}</a>
+      </div>
+    {% endif %}
+  {% endfor %}
+</div>

_includes/_tags.html

@@ -0,0 +1,8 @@
+{% assign rawtags = "" %}
+{% for item in site.patterns %}
+  {% assign ttags = item.tags | join:'|' | append:'|' %}
+  {% assign rawtags = rawtags | append:ttags %}
+{% endfor %}
+
+{% assign tags = rawtags | split:'|' | sort | uniq %}
+{% include _tag-list.html tags=tags %}