jekyll-theme-ethereal 0.4.4 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4829788dcf229f8607a851a59fef4b0ec3cf867b70a3f35e70e28e029e4b59cf
-  data.tar.gz: 4a6a05fae117d3f0bf8311dc2b6c79fa5d6761e6f2aa2cfb5f9f9b0c4e3040fb
+  metadata.gz: 7cac4ccb50a2c237176745f4d120dc2edf954560ba572867a71abf99b098abf6
+  data.tar.gz: 7ee252ea2eb109cf6fef4c338daa72a054a122a4356efe6639e1c319c516ff12
 SHA512:
-  metadata.gz: 84a8f7a6e7fc1cde37561390945f799ce909d665f0e87ff4491e88009c7ed958ead8c79a78d79968c94e78e96de4de52a57bbae4a3ac1fd9e62dd2cb626a4a4c
-  data.tar.gz: 7c16413fcb5637f37c7b7d0f508af66d4e24b2fc298cbac3d77ae9cefdd79039c4793be66022d797a70bdbaa3e526ee5f35ac221a36304de1f7e6a5306824c81
+  metadata.gz: feae88684c81c59aeec376fa0a32919e8f61906226fbc9cf34cc3a72451a2fee33170cb5c09ffe3dd5be2ea61906768507871d9f7e67a53d2c0329c4d24aac39
+  data.tar.gz: ecb7a2b8d62e3886276976ba2e7a520f7024509eb47436180d3c267ba56e428dc8b4a0658ba96f3a52fcc160beb83a0f3490d2dcfebfe5e7779f0f23b3ea367f

data/README.md

@@ -4,7 +4,7 @@
 
 You can preview the theme [here](https://moodule.github.io/jekyll-theme-ethereal)
 
-![Ethereal Theme](assets/images/screenshot.jpg "Ethereal Theme")
+![Ethereal Theme](assets/images/screenshot.webp "Ethereal Theme")
 
 # Features
 
@@ -24,6 +24,8 @@ You can preview the theme [here](https://moodule.github.io/jekyll-theme-ethereal
 
 > **Light**: svg images, thumbs and lazy loading for raster images, few libraries
 
+> **Performant**: parallel loading & execution of assets, support lazy-loading, minified assets, compressed critical path
+
 > **Hardened**: form validation, recaptcha, verified libraries
 
 # Installation
@@ -80,6 +82,57 @@ The contact form is validated using [google's recaptcha plugin][recaptcha-docume
 First, you need to [sign your website up] to enable the plugin.
 Google will provide you with a **client-side integration key**: copy it to `_config.yml` under `recaptcha.sitekey`.
 
+## Images
+
+### Lazy-Loading
+
+Images downloading & rendering can be defered until they enter the viewport.
+This shortens the loading of the webpage, with no consequence on the displayed content since the images are off-screen.
+
+There are 2 possibilities:
+1) using the scripts bundled with the gem
+2) depending on the browser
+
+Browser support for lazy-loading is varying, so it is recommanded to opt for the first solution.
+
+#### Using the gem functionality
+
+- add `class="lazy-loading"`
+- fill the attribute `src` with the path to the placeholder file
+- fill the attribute `data-src` with the path to the content file
+
+Before:
+```html
+<img src="{{ 'assets/images/content.jpg' | absolute_url }}" />
+```
+
+After:
+```html
+<img class="lazy-loading" src="{{ 'assets/images/placeholder.jpg' | absolute_url }}" data-src="{{ 'assets/images/content.jpg' | absolute_url }}" />
+```
+
+#### Using the browser functionality
+
+- add `loading="lazy"`
+
+Before:
+```html
+<img src="{{ 'assets/images/content.jpg' | absolute_url }}" />
+```
+
+After:
+```html
+<img loading="lazy" src="{{ 'assets/images/content.jpg' | absolute_url }}" />
+```
+
+> This functionality is not supported by all the browsers!
+
+### Compression and file formats
+
+It is recommanded to use the `webp` format.
+
+At a given dimension and compression level (quality) the webp files are at least half the size with a smoother feel.
+
 ## Publication
 
 ### On Github Pages

data/_includes/contact_form.html

@@ -1,21 +1,25 @@
-<form method="post" id="{{ include.form_id | 'contact-form' }}" action="#" onsubmit="{{ include.onsubmit_callback | 'sendContactMessage' }}()" onreset="{{ include.onreset_callback | 'resetContactForm' }}()" >
+<form method="post" id="{{ include.form_id | default: 'contact-form' }}" action="javascript:void(0);" onsubmit="{{ include.onsubmit_callback | default: 'processContactRequest' }}()" onreset="{{ include.onreset_callback | default: 'resetContactForm' }}()" >
     <div class="fields">
         <div class="field half">
             <label for="name">Name</label>
-            <input type="text" name="{{ include.name_input_id | 'contact-name' }}" id="{{ include.name_input_id | 'contact-name' }}" required minlength="4" maxlength="64" />
+            <input type="text" name="{{ include.name_input_id | default: 'contact-name' }}" id="{{ include.name_input_id | default: 'contact-name' }}" placeholder="John Doe" required minlength="4" maxlength="64" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" />
         </div>
         <div class="field half">
             <label for="email">Email</label>
-            <input type="email" name="{{ include.email_input_id | 'contact-email' }}" id="{{ include.email_input_id | 'contact-email' }}" required minlength="8" maxlength="64" />
+            <input type="email" name="{{ include.email_input_id | default: 'contact-email' }}" id="{{ include.email_input_id | default: 'contact-email' }}" placeholder="john.doe@example.com" required minlength="8" maxlength="64" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" />
         </div>
         <div class="field">
             <label for="message">Message</label>
-            <textarea name="{{ include.message_input_id | 'contact-message' }}" id="{{ include.message_input_id | 'contact-message' }}" rows="4"vrequired minlength="16" maxlength="256" ></textarea>
+            <textarea name="{{ include.message_input_id | default: 'contact-message' }}" id="{{ include.message_input_id | default: 'contact-message' }}" placeholder="Please reach out!" rows="4" required minlength="16" maxlength="256" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" ></textarea>
         </div>
     </div>
     <ul class="actions">
-        <li><div id="{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}" ></div></li>
-        <li><input type="submit" id="{{ include.submit_input_id | 'contact-submit-button' }}" value="Send Message" class="button primary fa-envelope" disabled /></li>
-        <li><input type="reset" id="{{ include.reset_input_id | 'contact-reset-button' }}" value="Reset" class="icon button fa-undo" /></li>
+        <li><input type="submit" id="{{ include.submit_input_id | default: 'contact-submit-button' }}" value="Send Message" class="button primary fa-envelope" disabled /></li>
+        <li><input type="reset" id="{{ include.reset_input_id | default: 'contact-reset-button' }}" value="Reset" class="icon button fa-undo" /></li>
     </ul>
+    <div id="modal-recaptcha-window" class="modal" tabIndex="-1">
+        <div class="inner">
+            <div id="{{ include.recaptcha_widget_id | default: 'recaptcha-checkbox' }}" ></div>
+        </div>
+    </div>
 </form>

data/_includes/contact_script.html

@@ -1,9 +1,10 @@
-<script type="text/javascript">
+<script type="text/javascript" >
     const contactFormElement = document.getElementById("{{ include.form_id | default: 'contact-form' }}");
     const nameInputElement = document.getElementById("{{ include.name_input_id | default: 'contact-name' }}");
     const emailInputElement = document.getElementById("{{ include.email_input_id | default: 'contact-email' }}");
     const messageInputElement = document.getElementById("{{ include.message_input_id | default: 'contact-message' }}");
     const submitInputElement = document.getElementById("{{ include.submit_input_id | default: 'contact-submit-button' }}");
+    const modalWindowElement = document.getElementById("{{ include.modal_window_id | default: 'modal-recaptcha-window' }}");
     var recaptchaWidget;
 
     const isInputValid = function() {
@@ -11,42 +12,79 @@
             && emailInputElement.checkValidity()
             && messageInputElement.checkValidity())
     };
-    
-    const isRecaptchaValid = function() {
-        var responseToken = grecaptcha.getResponse(recaptchaWidget);
-        return true;
-    };
 
     const disableSubmitInputElement = function (disabled = true) {
         submitInputElement.disabled = disabled;
     }
 
-    const {{ include.onreset_callback | 'resetContactForm' }} = function() {
+    const {{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }} = function() {
+        if (isInputValid()) {
+            disableSubmitInputElement(false);
+        } else {
+            disableSubmitInputElement();
+        }
+    };
+
+    const showModalWindow = function() {
+        modalWindowElement.classList.add('visible');
+        modalWindowElement.classList.add('loaded');
+        modalWindowElement.focus();
+    }
+
+    const hideModalWindow = function() {
+        modalWindowElement.classList.remove('loaded');
+        modalWindowElement.classList.remove('visible');
+        contactFormElement.focus();
+    }
+
+    const {{ include.onsubmit_callback | default: 'processContactRequest' }} = function() {
+        if (grecaptcha.getResponse(recaptchaWidget).length > 0) {
+            sendContactMessage();
+            hideModalWindow();
+            resetContactForm();
+            grecaptcha.reset();
+        } else {
+            showModalWindow();
+        }
+    };
+
+    const {{ include.onreset_callback | default: 'resetContactForm' }} = function() {
         contactFormElement.reset();
         disableSubmitInputElement();
     };
     
-    const {{ include.onsubmit_callback | 'sendContactMessage()' }} = function() {
-        encodeURIComponent(nameInputElement.value);
-        encodeURIComponent(emailInputElement.value);
-        encodeURIComponent(messageInputElement.value);
+    const sendContactMessage = function() {
+        const data = {
+            name: encodeURIComponent(nameInputElement.value),
+            email: encodeURIComponent(emailInputElement.value),
+            message: encodeURIComponent(messageInputElement),
+            token: grecaptcha.getResponse(recaptchaWidget)
+        };
+        
+        fetch("{{ '/contact' | absolute_url }}", {
+            method: 'POST',
+            mode: 'same-origin',
+            headers: {'Content-Type': 'application/json',},
+            body: JSON.stringify(data),
+        })
+        .then((response) => {
+            alert('Message sent!');
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        });
     };
     
     var onloadCallback = function() {
-        var verifyForm = function(response) {
-            if (isInputValid() && isRecaptchaValid()) {
-                disableSubmitInputElement(false);
-            } else {
-                disableSubmitInputElement();
-            }
-        };
-        recaptchaWidget = grecaptcha.render('{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}', {
+        recaptchaWidget = grecaptcha.render('{{ include.recaptcha_widget_id | default: 'recaptcha-checkbox' }}', {
             'sitekey' : '{{ site.recaptcha.sitekey }}',
             'theme' : 'dark',
-            'callback' : verifyForm,
-            'expired-callback': disableSubmitInputElement,
-            'size' : 'compact'
+            'size' : 'compact',
+            'callback' : processContactRequest
         });
     };
+
+    modalWindowElement.addEventListener('click', hideModalWindow);
+    modalWindowElement.addEventListener('keyup', hideModalWindow);
 </script>
 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

data/_includes/head.html

@@ -4,7 +4,14 @@
     <title>{{ include.title }} - {{ include.subtitle }}</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-    <link rel="stylesheet" href="{{ 'assets/css/main.css' | absolute_url }}" />
+    <link rel="stylesheet" href="{{ 'assets/css/main.css' | absolute_url }}" media="all" />
+    <link rel="stylesheet" href="{{ 'assets/css/large.css' | absolute_url }}" media="screen and (min-width: 981px)" />
+    <link rel="stylesheet" href="{{ 'assets/css/medium.css' | absolute_url }}" media="screen and (min-width: 737px) and (max-width:980px)" />
+    <link rel="stylesheet" href="{{ 'assets/css/small.css' | absolute_url }}" media="screen and (max-width:736px)" />
+    <link rel="stylesheet" href="{{ 'assets/css/short.css' | absolute_url }}" media="screen and (min-aspect-ratio:16/7)" />
+    <link rel="preload" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
+    <link rel="preload" href="{{ 'assets/css/fontawesome-all.min.css' | absolute_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
+    <link rel="preload" href="{{ 'assets/css/cookieconsent.min.css' | absolute_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
     {%- if include.stylesheets -%}
     {%- for file in include.stylesheets -%}
     <link rel="stylesheet" href="{{ file.url | absolute_url }}" />
@@ -17,5 +24,8 @@
     <link rel="icon" href="{{ site.favicon | absolute_url }}" />
     {%- endif -%}
     <noscript><link rel="stylesheet" href="{{ 'assets/css/noscript.css' | absolute_url }}" /></noscript>
+    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i&display=swap" /></noscript>
+    <noscript><link rel="stylesheet" href="{{ 'assets/css/fontawesome-all.min.css' | absolute_url }}" /></noscript>
+    <noscript><link rel="stylesheet" href="{{ 'assets/css/cookieconsent.min.css' | absolute_url }}" /></noscript>
     {% seo %}
 </head>

data/_includes/panel_contact.html

@@ -5,19 +5,19 @@
 {%- assign submit_input_id="contact-submit-button" -%}
 {%- assign reset_input_id="contact-reset-button" -%}
 {%- assign recaptcha_widget_id="recaptcha-checkbox" -%}
-{%- assign onsubmit_callback="sendContactMessage" -%}
+{%- assign onsubmit_callback="processContactRequest" -%}
 {%- assign onreset_callback="resetContactForm" -%}
-
+{%- assign onfocusout_callback="toggleSubmitInputElement" -%}
 <div class="intro {{ include.style.header.color | default: 'color4' }}">
     <h2 class="major">{{ include.header.title | default: 'Contact'}}</h2>
     <p>{{ include.header.description }}</p>
 </div>
 <div class="inner columns divided">
     <div class="span-3-25">
-        {% include contact_form.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback %}
+        {% include contact_form.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback onfocusout_callback=onfocusout_callback %}
     </div>
     <div class="span-1-5">
         {% include social.html color=include.style.icons.color %}
     </div>
 </div>
-{% include contact_script.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback %}
+{% include contact_script.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback onfocusout_callback=onfocusout_callback %}

data/_includes/panel_map.html

@@ -1,111 +1,85 @@
-<link rel="stylesheet" href="{{ 'assets/css/mapbox-gl.css' | absolute_url }}" />
-<style>
-body { margin: 0; padding: 0; }
-#map-container { position: relative; top: 0; bottom: 0; width: 100%; };
- 
-#marker {
-    background-size: cover;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    cursor: pointer;
-}
- 
-.mapboxgl-popup {
-    max-width: 240px;
-}
-
-.mapboxgl-popup-close-button {
-  display: none;
-}
-
-.mapboxgl-popup-content {
-  color: #000000;
-  max-width: 220px;
-}
-
-.mapboxgl-popup-content-wrapper {
-  padding: 1%;
-}
-</style>
+<link rel="stylesheet" href="{{ 'assets/css/mapbox-gl.min.css' | absolute_url }}" media="all">
+<link rel="stylesheet" href="{{ 'assets/css/mapbox-gl.panel.min.css' | absolute_url }}" media="all">
 <div class="intro {{ include.style.header.joined }} {{ include.style.header.color }}">
     <h2 class="major">{{ include.header.title }}</h2>
     <p>{{ include.header.description }}</p>
 </div>
 <div id='map-container'></div>
-<script src="{{ 'assets/js/mapbox-gl.js' | absolute_url }}" /></script>
-<script defer>
-mapboxgl.accessToken = "{{ include.data.token }}";
-var map = new mapboxgl.Map({
-    container: "map-container",
-    style: "{{ include.data.style }}",
-    center: [{{ include.data.center.longitude | default: 0.0 }}, {{ include.data.center.latitude | default: 0.0 }}],
-    zoom: {{ include.data.zoom | default: 1 }},
-    dragPan: true
-});
-
+<script>
 var data_points;
-fetch("{{ include.data.file | absolute_url }}")
-  .then(response => data_points = response.json())
-  .then(json => data_points = json);
 
-map.on('load', function () {
-
-    map.addLayer({
-        "id": "points",
-        "type": "symbol",
-        "source": {
-            "type": "geojson",
-            "data": data_points
-        },
-        "layout": {
-            // get the icon name from the source's "icon" property
-            // concatenate the name to get an icon from the style's sprite sheet
-            "icon-image": ["concat", ["get", "icon"], "-15"],
-            "icon-size": 1,
-            "icon-allow-overlap": true,
-            // get the title name from the source's "title" property
-            "text-field": ["get", "{{ include.data.markers.title | default: 'name' }}"],
-            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
-            "text-offset": [0, 0.6],
-            "text-anchor": "top"
-        },
-        "paint": {
-            "icon-color": "#ffcc00",
-            "icon-halo-color": "#2266AA",
-            "text-color": "#ffffff"
-        }
+function fillMapContainer() {
+    fetch("{{ include.data.file | absolute_url }}")
+        .then(response => response.json())
+        .then(json => data_points = json);
+    
+    mapboxgl.accessToken = "{{ include.data.token }}";
+    var map = new mapboxgl.Map({
+        container: "map-container",
+        style: "{{ include.data.style }}",
+        center: [{{ include.data.center.longitude | default: 0.0 }}, {{ include.data.center.latitude | default: 0.0 }}],
+        zoom: {{ include.data.zoom | default: 1 }},
+        dragPan: true
     });
 
-});
+    map.on('load', function () {
 
+        map.addLayer({
+            "id": "points",
+            "type": "symbol",
+            "source": {
+                "type": "geojson",
+                "data": data_points
+            },
+            "layout": {
+                // get the icon name from the source's "icon" property
+                // concatenate the name to get an icon from the style's sprite sheet
+                "icon-image": ["concat", ["get", "icon"], "-15"],
+                "icon-size": 1,
+                "icon-allow-overlap": true,
+                // get the title name from the source's "title" property
+                "text-field": ["get", "{{ include.data.markers.title | default: 'name' }}"],
+                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+                "text-offset": [0, 0.6],
+                "text-anchor": "top"
+            },
+            "paint": {
+                "icon-color": "#ffcc00",
+                "icon-halo-color": "#2266AA",
+                "text-color": "#ffffff"
+            }
+        });
 
-// When a click event occurs on a feature in the places layer, open a popup at the
-// location of the feature, with description HTML from its properties.
-map.on('click', 'points', function(e) {
-    var coordinates = e.features[0].geometry.coordinates.slice();
-    var description = e.features[0].properties.{{ include.data.markers.popup.text }};
-     
-    // Ensure that if the map is zoomed out such that multiple
-    // copies of the feature are visible, the popup appears
-    // over the copy being pointed to.
-    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
-        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
-    }
-     
-    new mapboxgl.Popup()
-        .setLngLat(coordinates)
-        .setHTML(description)
-        .addTo(map);
-});
-     
+    });
+
+    // When a click event occurs on a feature in the places layer, open a popup at the
+    // location of the feature, with description HTML from its properties.
+    map.on('click', 'points', function(e) {
+        var coordinates = e.features[0].geometry.coordinates.slice();
+        var description = e.features[0].properties.{{ include.data.markers.popup.text }};
+         
+        // Ensure that if the map is zoomed out such that multiple
+        // copies of the feature are visible, the popup appears
+        // over the copy being pointed to.
+        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+        }
+         
+        new mapboxgl.Popup()
+            .setLngLat(coordinates)
+            .setHTML(description)
+            .addTo(map);
+    });
+         
     // Change the cursor to a pointer when the mouse is over the places layer.
-map.on('mouseenter', 'points', function() {
-    map.getCanvas().style.cursor = 'pointer';
-});
-     
+    map.on('mouseenter', 'points', function() {
+        map.getCanvas().style.cursor = 'pointer';
+    });
+         
     // Change it back to a pointer when it leaves.
-map.on('mouseleave', 'points', function() {
-    map.getCanvas().style.cursor = '';
-});
+    map.on('mouseleave', 'points', function() {
+        map.getCanvas().style.cursor = '';
+    });
+}
 </script>
+<script src="{{ 'assets/js/mapbox-gl.min.js' | absolute_url }}" onload="fillMapContainer()" defer ></script>