Added support to PurgeCSS

.github/workflows/deploy.yml

@@ -30,8 +30,10 @@ jobs:
       run: |
         pip3 install --upgrade jupyter
         npm install -g mermaid.cli
+        npm install -g purgecss
         export JEKYLL_ENV=production
-        bundle exec jekyll build
+        bundle exec jekyll build --lsi
+        purgecss -c purgecss.config.js
     - name: Deploy 🚀
       if: github.event_name != 'pull_request'
       uses: JamesIves/github-pages-deploy-action@v4

README.md

@@ -167,10 +167,10 @@ Beyond Vision: Physics meets AI (ICIAP: <a href="https://physicsmeetsai.github.i
 
 ## Table Of Contents
 
-  * [User community](#user-community)
-  * [Lighthouse PageSpeed Insights](#lighthouse-pagespeed-insights)
-  * [Table Of Contents](#table-of-contents)
-  * [Getting started](#getting-started)
+  - [User community](#user-community)
+  - [Lighthouse PageSpeed Insights](#lighthouse-pagespeed-insights)
+  - [Table Of Contents](#table-of-contents)
+  - [Getting started](#getting-started)
     - [Installation](#installation)
       - [Local setup using Docker (Recommended)](#local-setup-using-docker-recommended)
       - [Local Setup (Legacy)](#local-setup-legacy)
@@ -312,6 +312,14 @@ $ bundle exec jekyll build --lsi
 which will (re-)generate the static webpage in the `_site/` folder.
 Then simply copy the contents of the `_site/` directory to your hosting server.
 
+If you also want to remove unused css classes from your file, run:
+
+```bash
+$ purgecss -c purgecss.config.js
+```
+
+which will replace the css files in the `_site/assets/css/` folder with the purged css files.
+
 **Note:** Make sure to correctly set the `url` and `baseurl` fields in `_config.yml` before building the webpage. If you are deploying your webpage to `your-domain.com/your-project/`, you must set `url: your-domain.com` and `baseurl: /your-project/`. If you are deploying directly to `your-domain.com`, leave `baseurl` blank.
 
 </details>

_config.yml

@@ -27,10 +27,6 @@ impressum_path:  # set to path to include impressum link in the footer, use the
 # Theme
 # -----------------------------------------------------------------------------
 
-# code highlighter theme
-highlight_theme_light: github   # https://github.com/jwarby/jekyll-pygments-themes
-highlight_theme_dark: native    # https://github.com/jwarby/jekyll-pygments-themes
-
 # repo color theme
 repo_theme_light: default       # https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md
 repo_theme_dark: dark           # https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md
@@ -242,6 +238,9 @@ defaults:
     values:
       sitemap: false
 
+sass:
+  style: compressed
+
 # -----------------------------------------------------------------------------
 # Jekyll Minifier
 # -----------------------------------------------------------------------------
@@ -377,19 +376,8 @@ enable_progressbar:         true   # enables a horizontal progress bar linked to
 # Library versions
 # -----------------------------------------------------------------------------
 
-academicons:
-  version: "1.9.1"
-  integrity: "sha256-i1+4qU2G2860dGGIOJscdC30s9beBXjFfzjWLjBRsBg="
-bootstrap:
-  version: "4.6.1"
-  integrity:
-    css: "sha256-DF7Zhf293AJxJNTmh5zhoYYIMs2oXitRfBjY+9L//AY="
-    js: "sha256-fgLAgv7fyCGopR/gBNq2iW3ZKIdqIcyshnUULC4vex8="
 bootstrap-table:
-  version: "1.21.4"
-fontawesome:
-  version: "6.4.0"
-  integrity: "sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8="
+  version: "1.22.1"
 jquery:
   version: "3.6.0"
   integrity: "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
@@ -398,11 +386,6 @@ mathjax:
 masonry:
   version: "4.2.2"
   integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI="
-mdb:
-  version: "4.20.0"
-  integrity:
-    css: "sha256-jpjYvU3G3N6nrrBwXJoVEYI/0zw8htfFnhT9ljN3JJw="
-    js: "sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA="
 medium_zoom:
   version: "1.0.8"
   integrity: "sha256-7PhEpEWEW0XXQ0k6kQrPKwuoIomz8R8IYyuU1Qew4P8="

_includes/head.html

@@ -2,37 +2,36 @@
     {% include metadata.html %}
 
     <!-- Bootstrap & MDB -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@{{ site.bootstrap.version }}/dist/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.bootstrap.integrity.css }}" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdbootstrap@{{ site.mdb.version }}/css/mdb.min.css" integrity="{{ site.mdb.integrity.css }}" crossorigin="anonymous" />
+    <link rel="stylesheet" href="{{ '/assets/css/bootstrap.min.css' | relative_url | bust_file_cache }}">
+    <link rel="stylesheet" href="{{ '/assets/css/mdb.min.css' | relative_url | bust_file_cache }}">
 
     <!-- Bootstrap Table -->
     <link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.bootstrap-table.version }}/dist/bootstrap-table.min.css">
 
     <!-- Fonts & Icons -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@{{ site.fontawesome.version }}/css/all.min.css" integrity="{{ site.fontawesome.integrity }}" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/academicons@{{ site.academicons.version }}/css/academicons.min.css" integrity="{{ site.academicons.integrity }}" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ '/assets/css/academicons.min.css' | relative_url | bust_file_cache }}">
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">
 
     <!-- Code Syntax Highlighting -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jwarby/jekyll-pygments-themes@master/{{ site.highlight_theme_light | append: '.css' }}" media="" id="highlight_theme_light" />
+    <link rel="stylesheet" href="{{ '/assets/css/jekyll-pygments-themes-github.css' | relative_url | bust_file_cache }}" media="" id="highlight_theme_light" />
 
     {% if page.toc and page.toc.sidebar %}
     <!-- Sidebar Table of Contents -->
-    <link href="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.css" rel="stylesheet" />
+    <link href="{{ '/assets/css/bootstrap-toc.min.css' | relative_url | bust_file_cache }}" rel="stylesheet" />
     {% endif %}
 
     <!-- Styles -->
     {% if site.icon.size <= 4 %}
     <link rel="shortcut icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.icon }}</text></svg>">
     {% elsif site.icon != blank %}
-    <link rel="shortcut icon" href="{{ site.icon | prepend: '/assets/img/' | relative_url}}"/>
+    <link rel="shortcut icon" href="{{ site.icon | prepend: '/assets/img/' | relative_url | bust_file_cache}}"/>
     {% endif %}
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url | bust_css_cache }}">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
 
     <!-- Dark Mode -->
     {% if site.enable_darkmode %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jwarby/jekyll-pygments-themes@master/{{ site.highlight_theme_dark | append: '.css' }}" media="none" id="highlight_theme_dark" />
+    <link rel="stylesheet" href="{{ '/assets/css/jekyll-pygments-themes-native.css' | relative_url | bust_file_cache }}" media="none" id="highlight_theme_dark" />
     <script src="{{ '/assets/js/theme.js' | relative_url | bust_file_cache }}"></script>
     <script src="{{ '/assets/js/dark_mode.js' | relative_url | bust_file_cache }}"></script>
     {% endif %}

_includes/scripts/bootstrap.html

@@ -1,3 +1,3 @@
 <!-- Bootsrap & MDB scripts -->
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@{{ site.bootstrap.version }}/dist/js/bootstrap.bundle.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 src="{{ '/assets/js/bootstrap.bundle.min.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/mdb.min.js' | relative_url }}"></script>

_includes/scripts/misc.html

@@ -8,12 +8,12 @@
 {%- if site.enable_medium_zoom %}
   <!-- Medium Zoom JS -->
   <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 defer src="{{ '/assets/js/zoom.js' | relative_url }}"></script>
+  <script defer src="{{ '/assets/js/zoom.js' | relative_url | bust_file_cache }}"></script>
 {%- endif -%}
 
 {% if page.toc and page.toc.sidebar %}
   <!-- Sidebar Table of Contents -->
-  <script defer src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script>
+  <script defer src="{{ '/assets/js/bootstrap-toc.min.js' | relative_url | bust_file_cache }}"></script>
 {% endif %}
 
   <!-- Bootstrap Table -->

_sass/_variables.scss

@@ -3,7 +3,6 @@
  * To adjust anything, simply edit the variables below and rebuild the theme.
  ******************************************************************************/
 
-
 // Colors
 $red-color:           #FF3636 !default;
 $red-color-dark:      #B71C1C !default;
@@ -31,8 +30,10 @@ $grey-900:            #212529;
 $white-color: #ffffff !default;
 $black-color: #000000 !default;
 
-
 // Theme colors
 
 $code-bg-color-light:     rgba($purple-color, 0.05);
 $code-bg-color-dark:      #2c3237 !default;
+
+// Font awesome location
+$fa-font-path: "../webfonts";

_sass/font-awesome/_animated.scss

@@ -0,0 +1,153 @@
+// animating icons
+// --------------------------
+
+.#{$fa-css-prefix}-beat {
+  animation-name: #{$fa-css-prefix}-beat;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
+}
+
+.#{$fa-css-prefix}-bounce {
+  animation-name: #{$fa-css-prefix}-bounce;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
+}
+
+.#{$fa-css-prefix}-fade {
+  animation-name: #{$fa-css-prefix}-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
+}
+
+.#{$fa-css-prefix}-beat-fade {
+  animation-name: #{$fa-css-prefix}-beat-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
+}
+
+.#{$fa-css-prefix}-flip {
+  animation-name: #{$fa-css-prefix}-flip;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
+}
+
+.#{$fa-css-prefix}-shake {
+  animation-name: #{$fa-css-prefix}-shake;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
+.#{$fa-css-prefix}-spin {
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
+.#{$fa-css-prefix}-spin-reverse {
+  --#{$fa-css-prefix}-animation-direction: reverse;
+}
+
+.#{$fa-css-prefix}-pulse,
+.#{$fa-css-prefix}-spin-pulse {
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
+}
+
+// if agent or operating system prefers reduced motion, disable animations
+// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
+// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+@media (prefers-reduced-motion: reduce) {
+  .#{$fa-css-prefix}-beat,
+  .#{$fa-css-prefix}-bounce,
+  .#{$fa-css-prefix}-fade,
+  .#{$fa-css-prefix}-beat-fade,
+  .#{$fa-css-prefix}-flip,
+  .#{$fa-css-prefix}-pulse,
+  .#{$fa-css-prefix}-shake,
+  .#{$fa-css-prefix}-spin,
+  .#{$fa-css-prefix}-spin-pulse {
+    animation-delay: -1ms;
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}
+
+@keyframes #{$fa-css-prefix}-beat {
+  0%, 90% { transform: scale(1); }
+  45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
+}
+
+@keyframes #{$fa-css-prefix}-bounce {
+  0%   { transform: scale(1,1) translateY(0); }
+  10%  { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
+  30%  { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
+  50%  { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
+  57%  { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
+  64%  { transform: scale(1,1) translateY(0); }
+  100% { transform: scale(1,1) translateY(0); }
+}
+
+@keyframes #{$fa-css-prefix}-fade {
+  50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
+}
+
+@keyframes #{$fa-css-prefix}-beat-fade {
+  0%, 100% {
+    opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-flip {
+  50% {
+    transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-shake {
+  0% { transform: rotate(-15deg); }
+  4% { transform: rotate(15deg); }
+  8%, 24% { transform: rotate(-18deg); }
+  12%, 28% { transform: rotate(18deg); }
+  16% { transform: rotate(-22deg); }
+  20% { transform: rotate(22deg); }
+  32% { transform: rotate(-12deg); }
+  36% { transform: rotate(12deg); }
+  40%, 100% { transform: rotate(0deg); }
+}
+
+@keyframes #{$fa-css-prefix}-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

_sass/font-awesome/_bordered-pulled.scss

@@ -0,0 +1,20 @@
+// bordered + pulled icons
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
+  border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
+  border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
+  border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
+  padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
+}
+
+.#{$fa-css-prefix}-pull-left { 
+  float: left;
+  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+}
+
+.#{$fa-css-prefix}-pull-right { 
+  float: right;
+  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+}