Minor changes and fixes (#726)

README.md

@@ -3,8 +3,8 @@
 [![deploy](https://github.com/alshedivat/al-folio/actions/workflows/deploy.yml/badge.svg)](https://github.com/alshedivat/al-folio/actions/workflows/deploy.yml)
 [![demo](https://img.shields.io/badge/theme-demo-brightgreen.svg)](https://alshedivat.github.io/al-folio/)
 [![GitHub contributors](https://img.shields.io/github/contributors/alshedivat/al-folio.svg)](https://github.com/alshedivat/al-folio/graphs/contributors/)
-![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/alshedivat/al-folio)
+[![GitHub release](https://img.shields.io/github/v/release/alshedivat/al-folio)](https://github.com/alshedivat/al-folio/releases/latest)
-![GitHub](https://img.shields.io/github/license/alshedivat/al-folio?color=blue)
+[![GitHub license](https://img.shields.io/github/license/alshedivat/al-folio?color=blue)](https://github.com/alshedivat/al-folio/blob/master/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/alshedivat/al-folio)](https://github.com/alshedivat/al-folio)
 [![GitHub forks](https://img.shields.io/github/forks/alshedivat/al-folio)](https://github.com/alshedivat/al-folio/fork)
 [![support](https://img.shields.io/badge/support-Ko--fi-yellow.svg)](https://ko-fi.com/alshedivat)
@@ -26,13 +26,13 @@ Feel free to add your own page(s) by sending a PR.
 <tr>
 <td>Academics</td>
 <td>
-<a href="http://maruan.alshedivat.com" target="_blank">★</a>
+<a href="https://maruan.alshedivat.com" target="_blank">★</a>
 <a href="https://www.cs.columbia.edu/~chen1ru/" target="_blank">★</a>
 <a href="https://maithraraghu.com" target="_blank">★</a>
-<a href="http://platanois.org" target="_blank">★</a>
+<a href="https://platanios.org" target="_blank">★</a>
 <a href="https://otiliastr.github.io" target="_blank">★</a>
 <a href="https://www.maths.dur.ac.uk/~sxwc62/" target="_blank">★</a>
-<a href="http://jessachandler.com/" target="_blank">★</a>
+<a href="https://jessachandler.com/" target="_blank">★</a>
 <a href="https://mayankm96.github.io/" target="_blank">★</a>
 <a href="https://markdean.info/" target="_blank">★</a>
 <a href="https://kakodkar.github.io/" target="_blank">★</a>
@@ -218,7 +218,7 @@ If you installed **al-folio** as described above, you can upgrade to the latest
 # Assuming the current directory is <your-repo-name>
 $ git remote add upstream https://github.com/alshedivat/al-folio.git
 $ git fetch upstream
-$ git rebase upstream/v0.3.5
+$ git rebase v0.3.5
 ```
 
 If you have extensively customized a previous version, it might be trickier to upgrade.
@@ -351,7 +351,7 @@ For more details on how to create distill-styled posts using `<d-*>` tags, pleas
 
 #### Full support for math & code
 
-**al-folio** supports fast math typesetting through [KaTeX](https://katex.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes):
+**al-folio** supports fast math typesetting through [MathJax](https://www.mathjax.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes):
 
 <p align="center">
 <a href="https://alshedivat.github.io/al-folio/blog/2015/math/" target="_blank"><img src="https://raw.githubusercontent.com/alshedivat/al-folio/master/assets/img/math-screenshot.png" width=400></a>
@@ -403,7 +403,7 @@ For more complex issues/bugs or feature requests, please open an issue using the
 
 ## License
 
-The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The theme is available as open source under the terms of the [MIT License](https://github.com/alshedivat/al-folio/blob/master/LICENSE).
 
-Originally, **al-folio** was based on the [\*folio theme](https://github.com/bogoli/-folio) (published by [Lia Bogoev](http://liabogoev.com) and under the MIT license).
+Originally, **al-folio** was based on the [\*folio theme](https://github.com/bogoli/-folio) (published by [Lia Bogoev](https://liabogoev.com) and under the MIT license).
 Since then, it got a full re-write of the styles and many additional cool features.

_config.yml

@@ -75,10 +75,15 @@ stackoverflow_id: #your stackoverflow id
 contact_note: >
   You can even add a little note about which of these is the best way to reach you.
 
+# -----------------------------------------------------------------------------
+# Analytics and search engine verification
+# -----------------------------------------------------------------------------
+
 google_analytics:  # your google-analytics ID (format: UA-XXXXXXXXX)
+panelbear_analytics:  # panelbear analytics site ID (format: XXXXXXXXX)
+
 google_site_verification:  # your google-site-verification ID (Google Search Console)
 bing_site_verification:  # out your bing-site-verification ID (Bing Webmaster)
-panelbear_analytics:  # panelbear analytics site ID (format: XXXXXXXXX)
 
 # -----------------------------------------------------------------------------
 # Blog
@@ -232,8 +237,10 @@ filtered_bibtex_keywords: [abbr, abstract, arxiv, bibtex_show, html, pdf, select
 # Responsive WebP Images
 # -----------------------------------------------------------------------------
 
+enable_responsive_images: true # enables responsive images for your site (recomended, see https://github.com/alshedivat/al-folio/issues/537)
+
 imagemagick:
-  enabled: true
+  enabled: true # make it 'false' if not using responsive images
   widths:
     - 480
     - 800

_includes/figure.html

@@ -3,12 +3,25 @@
 <figure>
 
   <picture>
+    {% if site.enable_responsive_images %}
     {% for i in site.imagemagick.widths -%}
       <source media="(max-width: {{ i }}px)" srcset="{{ path | relative_url }}-{{ i }}.webp" />
     {% endfor -%}
+    {% endif %}
 
     <!-- Fallback to the original file -->
-    <img {% if include.class %}class="{{ include.class }}"{% endif %} src="{{ include.path | relative_url }}" {% if include.alt %}alt="{{ include.alt }}"{% endif %} {% if include.title %}title="{{ include.title }}"{% endif %} {% if include.zoomable %}data-zoomable{% endif %} />
+    <img 
+    {% if include.class %}class="{{ include.class }}"{% endif %} 
+    src="{{ include.path | relative_url }}" 
+    {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %} 
+    {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %} 
+    {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %} 
+    {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %} 
+    {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %} 
+    {% if include.max-height %}height="{{ include.max-height }}"{% endif %} 
+    {% if include.alt %}alt="{{ include.alt }}"{% endif %} 
+    {% if include.title %}title="{{ include.title }}"{% endif %} 
+    {% if include.zoomable %}data-zoomable{% endif %} />
 
   </picture>
 

_includes/header.html

@@ -85,12 +85,12 @@
               {%- if site.enable_darkmode %}
 
               <!-- Toogle theme mode -->
-              <div class = "toggle-container">
+              <li class="toggle-container">
-                <a id = "light-toggle">
+                <button id="light-toggle" title="Change theme">
                   <i class="fas fa-moon"></i>
                   <i class="fas fa-sun"></i>
-                </a>
+                </button>
-              </div>
+              </li>
               {%- endif %}
             </ul>
           </div>

_includes/scripts/bootstrap.html

@@ -1,4 +1,4 @@
 <!-- Bootsrap & MDB scripts -->
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@{{ site.popper.version }}/dist/umd/popper.min.js" integrity="{{ site.popper.integrity }}" crossorigin="anonymous"></script>
+  <script async src="https://cdn.jsdelivr.net/npm/@popperjs/core@{{ site.popper.version }}/dist/umd/popper.min.js" integrity="{{ site.popper.integrity }}" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@{{ site.bootstrap.version }}/dist/js/bootstrap.min.js" integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script>
+  <script async src="https://cdn.jsdelivr.net/npm/bootstrap@{{ site.bootstrap.version }}/dist/js/bootstrap.min.js" integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/mdbootstrap@{{ site.mdb.version }}/js/mdb.min.js" integrity="{{ site.mdb.integrity.js }}" crossorigin="anonymous"></script>
+  <script async src="https://cdn.jsdelivr.net/npm/mdbootstrap@{{ site.mdb.version }}/js/mdb.min.js" integrity="{{ site.mdb.integrity.js }}" crossorigin="anonymous"></script>

_includes/scripts/misc.html

@@ -6,9 +6,9 @@
 {%- endif %}
 {%- if site.enable_medium_zoom %}
   <!-- Medium Zoom JS -->
-  <script src="https://cdn.jsdelivr.net/npm/medium-zoom@{{ site.medium_zoom.version }}/dist/medium-zoom.min.js" integrity="{{ site.medium_zoom.integrity }}" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/medium-zoom@{{ site.medium_zoom.version }}/dist/medium-zoom.min.js" integrity="{{ site.medium_zoom.integrity }}" crossorigin="anonymous"></script>
-  <script src="{{ '/assets/js/zoom.js' | relative_url }}"></script>
+  <script defer src="{{ '/assets/js/zoom.js' | relative_url }}"></script>
 {%- endif -%}
 
   <!-- Load Common JS -->
-  <script src="{{ '/assets/js/common.js' | relative_url }}"></script>
+  <script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>

_layouts/distill.html

@@ -4,10 +4,12 @@
   <head>
     {%- include head.html %}
 
+    {% include scripts/jquery.html %}
     {% include scripts/mathjax.html %}
     <!-- Distill js -->
     <script src="{{ '/assets/js/distillpub/template.v2.js' | relative_url }}"></script>
     <script src="{{ '/assets/js/distillpub/transforms.v2.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/distillpub/overrides.js' | relative_url }}"></script>
     {% if page._styles %}
     <!-- Page/Post style -->
     <style type="text/css">
@@ -99,13 +101,9 @@
     <!-- Footer -->
     {%- include footer.html %}
 
+    <d-bibliography src="{{ page.bibliography | prepend: '/assets/bibliography/' | relative_url }}"></d-bibliography>
+    
+    {% include scripts/bootstrap.html %}
+    {% include scripts/analytics.html %}
   </body>
-
-  <d-bibliography src="{{ page.bibliography | prepend: '/assets/bibliography/' | relative_url }}">
-  </d-bibliography>
-
-  {% include scripts/jquery.html %}
-  {% include scripts/bootstrap.html %}
-  <script src="{{ '/assets/js/distillpub/overrides.js' | relative_url }}"></script>
-
 </html>

_sass/_base.scss

@@ -233,6 +233,16 @@ blockquote {
   }
 }
 
+#light-toggle {
+  padding: 0;
+  border: 0;
+  background-color: inherit;
+  color: var(--global-text-color);
+  &:hover {
+    color: var(--global-hover-color);
+  }
+}
+
 // Social (bottom)
 
 .social {