Theme toggle (#21)

* very basic theme toggle working

* only show theme toggle if available.

see https://caniuse.com/?search=color-scheme
currently chrome and firefox beta
should be available for firefox stable in 11/01/2022
https://wiki.mozilla.org/Release_Management/Release_owners

* override colors from jenkyll-dark-midnight in light theme

* add font-awesome, basic toggle icon working

* switch to adjust icon rather than toggling from sun/moon

* basic theme toggle spec

* finish theme tests

* rubocop offenses

* remove .rspec-local.bak

* update rubocop to match gist

https://gist.github.com/ConorSheehan1/ed75920ca8722a09b527b37f006cf8e3

.gitignore

@@ -2,4 +2,5 @@ _site
 .sass-cache
 .byebug_history
 .rspec-local
-TODO.md
+TODO.md
+*.bak

.rubocop.yml

@@ -8,3 +8,61 @@ AllCops:
 Metrics/BlockLength:
   Exclude:
     - "spec/**/*.rb"
+
+# add indent after access modifier e.g. private
+Layout/IndentationConsistency:
+  EnforcedStyle: indented_internal_methods # previously rails style
+
+# Use double quotes by default, common in large projects including rails
+# https://anti-pattern.com/always-use-double-quoted-strings-in-ruby
+Style/StringLiterals:
+  Enabled: true
+  EnforcedStyle: double_quotes
+
+Style/ColonMethodCall:
+  Enabled: false
+
+# use %r for long expressions e.g shared_constants acronym_regex
+Style/RegexpLiteral:
+  Enabled: false
+
+# prefer parens for method calls with args
+# exceptions for Gmefile, spec, require, etc. type methods
+Style/MethodCallWithArgsParentheses:
+  Enabled: true
+  IgnoredMethods:
+    - expect
+    - gem
+    - include
+    - load
+    - require
+    - require_relative
+    - raise
+    - ruby
+    - source
+    - to
+    - to_not
+    - not_to
+    - be
+    - eq
+    - have_title
+    - have_css
+    - have_xpath
+    - match
+
+
+# don't like .zero? instead of == 0
+Style/NumericPredicate:
+  Enabled: false
+
+# preferred method aliases
+Style/CollectionMethods:
+  Enabled: true
+  PreferredMethods:
+    collect:   map
+    collect!:  map!
+    inject:    reduce
+    detect:    find
+    find_all:  select
+    # TODO: prefer length / size to count when no args ar present for performance (count O(n), length o(1))
+    # https://stackoverflow.com/questions/53480273/are-there-performance-reasons-to-prefer-size-over-length-or-count-in-ruby

Gemfile

@@ -1,27 +1,27 @@
 # frozen_string_literal: true
 
-ruby '>= 2.7.0'
+ruby ">= 2.7.0"
 
-source 'https://rubygems.org'
+source "https://rubygems.org"
 
 # https://pages.github.com/versions/
 group :development, :test do
-  gem 'byebug', '~> 10.0'
-  gem 'ffi', '~> 1.12.0' # 1.13.0 has issues https://github.com/ffi/ffi/issues/773
-  gem 'jekyll', '~> 3.9.0'
-  gem 'kramdown', '>= 2.3.1' # sec
-  gem 'rubocop', '~> 0.90.0'
-  gem 'webdrivers', '~> 4.4'
+  gem "byebug", "~> 10.0"
+  gem "ffi", "~> 1.12.0" # 1.13.0 has issues https://github.com/ffi/ffi/issues/773
+  gem "jekyll", "~> 3.9.0"
+  gem "kramdown", ">= 2.3.1" # sec
+  gem "rubocop", "~> 0.90.0"
+  gem "webdrivers", "~> 4.4"
 end
 
 group :test do
-  gem 'capybara', '~> 3.32.0'
-  gem 'faraday', '~> 1.0.1'
-  gem 'rspec', '~> 3.7.0'
-  gem 'selenium-webdriver', '~> 3.8'
+  gem "capybara", "~> 3.32.0"
+  gem "faraday", "~> 1.0.1"
+  gem "rspec", "~> 3.7.0"
+  gem "selenium-webdriver", "~> 3.8"
 end
 
 group :jekyll_plugins do
-  gem 'github-pages'
-  gem 'jekyll-paginate', '~> 1.1'
+  gem "github-pages"
+  gem "jekyll-paginate", "~> 1.1"
 end

README.md

@@ -42,7 +42,7 @@ https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-
 bundle exec rubocop
 
 # update sourcecode if possible
-bundle exec rubocop --autocorrect
+bundle exec rubocop --auto-correct
 ```
 
 ## Configuration

_config.yml

@@ -1,23 +1,21 @@
 theme: jekyll-theme-midnight
 title: Conor Sheehan
 
-plugins: 
+plugins:
   - jekyll-paginate
 
 paginate: 3
 paginate_path: "/projects/page:num/"
 
-exclude: 
+exclude:
   - README.md
   - LICENSE.md
-  - Gemfile 
+  - Gemfile
   - Gemfile.lock
   - scripts/*
   - spec/*
   - vendor/*
 
-jstree_theme: "default-dark"
-
 sass:
   sass_dir: _scss
 

_includes/header.html

@@ -26,6 +26,22 @@
           <span>Stack Overflow</span>
         </a>
       </div>
+
+      <div class="col" id="theme-toggle-container">
+        <!-- <button>Toggle Theme</button> -->
+        <!-- <input type="checkbox" class="checkbox" id="checkbox">
+        <label for="checkbox" class="label">
+          <i class="fas fa-moon"></i>
+          <i class='fas fa-sun'></i>
+          <div class='ball'>
+        </label> -->
+
+        <div id="theme-toggle-background">
+          <a id="theme-toggle" title="Switch Theme">
+            <i class="fa-solid fa-adjust icon-size" aria-hidden="true" size="32px"></i>
+          </a>
+        </div>
+      </div>
   </div>
   <div class="container-sm">
     {% include projects_menu.html %}

_includes/projects_menu.html

@@ -1,12 +1,12 @@
 <div class="header-center">
-  <input type="text" class="form-control header-left" placeholder="Search projects .." id="projects-search">
+  <input id="projects-search-input" type="text" class="form-control header-left" placeholder="Search projects ..">
   {% comment %}
     <!-- <span class="input-group-btn">
     <button class="btn btn-default" type="button" id="btn-search">Go!</button>
     </span> -->
   {% endcomment %}
 
-  <div id="projects_tree" class="header-right">
+  <div id="projects-tree" class="header-right">
     <ul>
       <li data-jstree='{ "opened" : false }'><a class='clickable-tree-node' href="/projects">Projects</a>
         <ul>

_layouts/default.html

@@ -7,17 +7,22 @@
 
     {% seo %}
 
-    <link rel="stylesheet" href="
-      {{ '/assets/dist/jstree/themes/' | append: site.jstree_theme | append: '/style.min.css' | relative_url }}
-    " />
+    <link rel="stylesheet" href="{{ '/assets/dist/jstree/themes/default' | append: '/style.min.css' | relative_url }}" />
+    <link rel="stylesheet" href="{{ '/assets/dist/jstree/themes/default-dark' | append: '/style.min.css' | relative_url }}" />
     <link href="{{ '/assets/dist/lightbox/css/lightbox.min.css' | relative_url }}" rel="stylesheet">
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
+
+    <link rel="stylesheet" href="{{ '/assets/dist/fontawesome/css' | append: '/all.min.css' | relative_url }}" />
     <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
     <link rel="shortcut icon" type="image/x-ico" href="{{ '/assets/images/icons/favicon.ico' | prepend: site.baseurl }}" >
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
     <script src="{{ '/assets/dist/lightbox/js/lightbox.min.js' | relative_url }}"></script>
-    <script src="{{ '/assets/js/custom.js' | relative_url }}"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <!-- order matters here. e.g. jstree depends on theme being loaded to provied getSavedTheme -->
+    <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/lightbox_custom.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/jstree_custom.js' | relative_url }}"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
   </head>
   <body>
@@ -33,50 +38,6 @@ <h1><a href="/">{{ site.title | default: site.github.repository_name }}</a></h1>
     </div>
     {% include footer.html %}
 
-    {% if site.google_analytics %}
-      <script type="text/javascript">
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-        ga('create', '{{ site.google_analytics }}', 'auto');
-        ga('send', 'pageview');
-      </script>
-    {% endif %}
-
-
     <script src="{{ '/assets/dist/jstree/jstree.min.js' | relative_url }}"></script>
-    <script type="text/javascript">
-            // js tree config and activation
-      $('#projects_tree').jstree({
-        'core' : {
-           "themes": {
-              "name": "{{site.jstree_theme}}",
-              "dots": true,
-              "icons": true
-          },
-        },
-        "plugins": ['theme', "html_data", "types", "search"],
-        "search": {
-          "case_insensitive": true,
-          "show_only_matches" : true
-        },
-      });
-
-      $('#projects_tree').bind("select_node.jstree", function (e, data) {
-        $('#jstree').jstree('save_state');
-       }) ;
-
-      $('#projects_tree').on("activate_node.jstree", function(e,data){
-         window.location.href = data.node.a_attr.href;
-       })
-
-      // $('#btn-search').click(function(){
-      //   $('#projects_tree').jstree('search', $('#search').val());
-      // })
-      $('#projects-search').keyup(function(){
-        $('#projects_tree').jstree('search', $(this).val());
-      });
-    </script>
   </body>
 </html>

_scss/_header.scss

@@ -27,6 +27,11 @@
     text-align: center;
   }
 
+  #theme-toggle-container {
+    // override col width
+    width: 5%;
+  }
+
   .header-left {
     float: left;
   }

_scss/_mixins.scss

@@ -4,21 +4,6 @@
   }
 }
 
-@mixin jstreeSearch {
-  .jstree-search {
-    color: $brand_primary
-  }
-}
-
-@mixin jstreeClickable {
-  .jstree-anchor {
-    color: $brand_primary;
-    .clickable-tree-node {
-      color: $brand_primary;
-    }
-  }
-}
-
 @mixin containerish {
   display: flex;
   justify-content: space-between;

_scss/_mobile.scss

@@ -1,13 +1,13 @@
 @media (max-width: $wide_screen) {
-  #header{
-    // hide the text under icons 
+  #header {
+    // hide the text under icons
     span {
       display: none;
     }
-  } 
+  }
 }
 
-/* 
+/*
   fix issue with header rendering over content
   now that header is taller, to account for icons
 */

_scss/_vars.scss

@@ -1,7 +1,13 @@
-// colors
+// colors (dark/default)
 $brand_primary: #ffcc00;
 $brand_background: #373737;
 $brand_header_footer_background: #353535;
+$text_dark: #f0e7d5;
+
+// colors (light)
+$brand_primary_light: #6cc644;
+$brand_background_light: #f2f2f2;
+$text_light: #071601;
 
 // head height vars
 $header_height: 90px;