jekyll-theme-consulting 0.8.1 → 0.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 511a81cb11cf2afb43e0198dd231a54c93689a5f9319b0d5114bb920baef7171
-  data.tar.gz: f3d3accc2b74fc873257a41765744478865773446b881e3d5559c5cdbfece89c
+  metadata.gz: 1303e48e96de64a397286ba1e967c908766059f74f63441b9558de6cad51e640
+  data.tar.gz: faea6567ccf1c4c9296b879be97cb3571896c0beef9e013b6585f0928e3827da
 SHA512:
-  metadata.gz: bd06f485e3b390c43dcfa987c32adb4172bb274efefdc21f1d367477b49d9c977ed8fe2386ec16687865386fea0253af187579f9cda91a66f0509a47a4ec3515
-  data.tar.gz: e30cef7142288c4bfa4d56921a8e23e754bc8d3d888cae1e5d4de3d62baeb2050e496e21ec10934c88ccc66caf6cd7832553f5320785f8fea5c21d4251553ad4
+  metadata.gz: 47a0d039df89f13940c29499c8490a5eb68586c29d38923a06e376ee44b4c2c5b551455ea2e031a0faf81c1458f884ceabad8ac12abf9f89163447ed7e51711a
+  data.tar.gz: daec8ff000a41334f72e321615945b1375007062e107f58cd01eeec71df8e8d78bf76636fce3b08e8a4b6491b4e588102267f96cca990210ac05b5d963274ac7

data/README.md

@@ -24,6 +24,8 @@ You can preview the theme [here](https://moodule.github.io/jekyll-theme-consulti
 
 > **Light**: svg images, thumbs and lazy loading for raster images, few libraries
 
+> **Performant**: parallel loading & execution of assets, support lazy-loading, use webp image format, optimal 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.html

@@ -5,15 +5,16 @@
 {%- 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" -%}
 <section id="contact" class="inverted" style="{{ include.style | default: nil }}">
     <header class="major">
         <h2>Contact Me</h2>
     </header>
     <div class="row gtr-200">
         <div class="col-6 col-12-medium col-12-small col-12-xsmall">
-            {% 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="col-6 col-12-medium col-12-small col-12-xsmall">
             <ul class="contact">
@@ -26,4 +27,4 @@
     </div>
 </section>
 
-{% 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/contact_form.html

@@ -1,24 +1,26 @@
-<form id="{{ include.form_id | 'contact-form' }}" method="post" action="#" onsubmit="{{ include.onsubmit_callback | 'sendContactMessage' }}()" onreset="{{ include.onreset_callback | 'resetContactForm' }}()" >
+<form id="{{ include.form_id | default: 'contact-form' }}" method="post" action="javascript:void(0);" onsubmit="{{ include.onsubmit_callback | default: 'processContactRequest' }}()" onreset="{{ include.onreset_callback | default: 'resetContactForm' }}()" >
     <div class="row gtr-uniform">
         <div class="col-6 col-12-small col-12-xsmall">
-            <input type="text" name="{{ include.name_input_id | 'contact-name' }}" id="{{ include.name_input_id | 'contact-name' }}" value="" placeholder="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' }}" value="" placeholder="Name" required minlength="4" maxlength="64" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" />
         </div>
         <div class="col-6 col-12-small col-12-xsmall">
-            <input type="email" name="{{ include.email_input_id | 'contact-email' }}" id="{{ include.email_input_id | 'contact-email' }}" value="" placeholder="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' }}" value="" placeholder="Email" required minlength="8" maxlength="64" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" />
         </div>
         <!-- Break -->
         <div class="col-12">
-            <textarea name="{{ include.message_input_id | 'contact-message' }}" id="{{ include.message_input_id | 'contact-message' }}" placeholder="Enter your message" rows="6" required minlength="16" maxlength="256" >Please get back to me!</textarea>
+            <textarea name="{{ include.message_input_id | default: 'contact-message' }}" id="{{ include.message_input_id | default: 'contact-message' }}" placeholder="Enter your message" rows="6" required minlength="16" maxlength="256" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" >Please get back to me!</textarea>
         </div>
         <!-- Break -->
         <div class="col-12">
             <ul class="actions">
-                <li><input type="submit" id="{{ include.submit_input_id | 'contact-submit-button' }}" value="Send Message" class="primary button solid fa-envelope" disabled/></li>
-                <li><input type="reset" id="{{ include.reset_input_id | 'contact-reset-button' }}" value="Reset" class="icon button fa-undo" /></li>
-            </ul>
-            <ul class="actions">
-                <li><div id="{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}" ></div></li>
+                <li><input type="submit" id="{{ include.submit_input_id | default: 'contact-submit-button' }}" value="Send Message" class="primary button solid 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>
     </div>
+    <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

@@ -4,6 +4,7 @@
     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,82 @@
             && 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();
+        } 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 recaptchaToken = grecaptcha.getResponse(recaptchaWidget);
+
+        const data = {
+            name: encodeURIComponent(nameInputElement.value),
+            email: encodeURIComponent(emailInputElement.value),
+            message: encodeURIComponent(messageInputElement),
+            token: recaptchaToken
+        };
+
+        hideModalWindow();
+
+        if (recaptchaToken.length > 0) {
+            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' }}', {
+    var onRecaptchaLoadCallback = function() {
+        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' : sendContactMessage
         });
     };
+
+    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>
+<script src="https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoadCallback&render=explicit" async defer></script>

data/_sass/libs/_vars.scss

@@ -1,54 +1,56 @@
 // Misc.
-	$misc: (
-		z-index-base:		10000
-	);
+$misc: (
+    z-index-base:       10000,
+    lightbox-opacity:   0.875
+);
 
 // Duration.
-	$duration: (
-		nav:				0.5s,
-		transition:			0.2s
-	);
+$duration: (
+    nav:                0.5s,
+    transition:         0.2s,
+    lightbox-fadein:    0.5s
+);
 
 // Size.
-	$size: (
-		border-radius:		0.375em,
-		element-height:		2.75em,
-		element-margin:		2em,
-		sidebar-width:		26em,
-		sidebar-width-alt:	24em,
-		gutter:				3em
-	);
+$size: (
+    border-radius:      0.375em,
+    element-height:     2.75em,
+    element-margin:     2em,
+    sidebar-width:      26em,
+    sidebar-width-alt:  24em,
+    gutter:             3em
+);
 
 // Font.
-	$font: (
-		family:				('Open Sans', sans-serif),
-		family-heading:		('Roboto Slab', serif),
-		family-fixed:		('Courier New', monospace),
-		weight:				400,
-		weight-bold:		600,
-		weight-heading:		700,
-		weight-heading-alt:	400,
-		kerning-heading:	0.075em
-	);
+$font: (
+    family:             ('Open Sans', sans-serif),
+    family-heading:     ('Roboto Slab', serif),
+    family-fixed:       ('Courier New', monospace),
+    weight:             400,
+    weight-bold:        600,
+    weight-heading:     700,
+    weight-heading-alt: 400,
+    kerning-heading:    0.075em
+);
 
 // Palette.
-	$palette: (
-		bg:					#ffffff,
-		bg-alt:				#f5f6f7,
-		bg-inverted:		#6666ff,
-		bg-alt-inverted:	#223344,
-		fg:					#000000,
-		fg-bold:			#3d4449,
-		fg-light:			#9fa3a6,
-		fg-inverted:		#ffffff,
-		fg-bold-inverted:	#ffffff,
-		fg-light-inverted:	#ffffff,
-		border:				rgba(210,215,217,0.75),
-		border-bg:			transparentize(#e6ebed, 0.75),
-		border-inverted:	#ffffff,
-		border-bg-inverted:	#ffffff,
-		accent:				#6666ff,
-		accent-cp:			#ffdd44,
-		accent-inverted:	#ffffff,
-		accent-cp-inverted:	#6666ff,
-	);
+$palette: (
+    bg:                 #ffffff,
+    bg-alt:             #f5f6f7,
+    bg-inverted:        #6666ff,
+    bg-alt-inverted:    #223344,
+    fg:                 #000000,
+    fg-bold:            #3d4449,
+    fg-light:           #9fa3a6,
+    fg-inverted:        #ffffff,
+    fg-bold-inverted:   #ffffff,
+    fg-light-inverted:  #ffffff,
+    border:             rgba(210,215,217,0.75),
+    border-bg:          transparentize(#e6ebed, 0.75),
+    border-inverted:    #ffffff,
+    border-bg-inverted: #ffffff,
+    accent:             #6666ff,
+    accent-cp:          #ffdd44,
+    accent-inverted:    #ffffff,
+    accent-cp-inverted: #6666ff,
+);

data/_sass/main.scss

@@ -16,6 +16,7 @@
 @import 'main/components/row';
 @import 'main/components/section';
 @import 'main/components/form';
+@import 'main/components/modal';
 @import 'main/components/box';
 @import 'main/components/icon';
 @import 'main/components/image';

data/_sass/main/components/_modal.css

@@ -0,0 +1,50 @@
+.modal {
+    @include vendor('display', 'flex');
+    @include vendor('align-items', 'center');
+    @include vendor('justify-content', 'center');
+    @include vendor('pointer-events', 'none');
+    @include vendor('user-select', 'none');
+    @include vendor('transition', (
+        'opacity #{_duration(lightbox-fadein)} ease',
+        'visibility #{_duration(lightbox-fadein)}',
+        'z-index #{_duration(lightbox-fadein)}'
+    ));
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    outline: 0;
+    visibility: none;
+    z-index: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    background-color: transparentize(_palette(bg), 1 - _misc(lightbox-opacity));
+
+    .inner {
+        @include vendor('transform', 'translateY(0.75rem)');
+        @include vendor('transition', (
+            'opacity #{_duration(lightbox-fadein) * 0.5} ease',
+            'transform #{_duration(lightbox-fadein) * 0.5} ease'
+        ));
+        opacity: 0;
+    }
+
+    &.visible {
+        @include vendor('pointer-events', 'auto');
+        opacity: 1;
+        visibility: visible;
+        z-index: _misc(z-index-base) + 1000;
+    }
+
+    &.loaded {
+        .inner {
+            @include vendor('transform', 'translateY(0)');
+            @include vendor('transition', (
+                'opacity #{_duration(lightbox-fadein)} ease',
+                'transform #{_duration(lightbox-fadein)} ease'
+            ));
+            opacity: 1;
+        }
+    }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-consulting
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.8.2
 platform: ruby
 authors:
 - David Mougeolle
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-01-19 00:00:00.000000000 Z
+date: 2020-01-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -153,6 +153,7 @@ files:
 - _sass/main/components/_image.scss
 - _sass/main/components/_list.scss
 - _sass/main/components/_mini-posts.scss
+- _sass/main/components/_modal.css
 - _sass/main/components/_pagination.scss
 - _sass/main/components/_posts.scss
 - _sass/main/components/_row.scss