jekyll-theme-parallelism 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fc26032a32351effd706cd10bfebf2b2510da8fe8937ccb35c94aa3051754117
-  data.tar.gz: 22c9f447d3f21c235b816a4a1d7e00a5e11ca900f6c1dd7dd39a893c1108eedf
+  metadata.gz: c69e6fed0e29bab85dd26690df92e08711db7ddac1f227e63b442da9676d8cad
+  data.tar.gz: 43e9c51ac9348b61a9b0312b236abf2f102642ede55085b8d4427db27c8fb6e7
 SHA512:
-  metadata.gz: 4f774e1a0303a11e55e97bb9e75b81581dc1504b912f7e723e665c97adf6557c6a4cc8efd0d218acabffed333623cd36a67888681692db3e25a1d136c66a0586
-  data.tar.gz: 770e4efd310766ed1687bd73d939797cf2234b99db176c1583b9fd1fe3a4e773037b7b6077dd8878a6acfd56a8e16101a636407355cbbca8d85d0e10008eec39
+  metadata.gz: 3d057c4265ef03e2b89fbdaa579f013b7210df54abf4a7ae16d03a08e04f1701965b40f8b5969bd80491edc15c8ad339652a1408972bef1b94c62bfd15b1fc41
+  data.tar.gz: 4951e5b7cfbe2ada0e05846e69ee440bea24ffd8c4a11bbbca93281c248379e984e4f90591f54ad902a964b12730b49acc18c2e18bbcd99eb4fd04c2c3b84c1c

data/README.md

@@ -20,6 +20,10 @@ You can preview the theme [here](https://moodule.github.io/jekyll-theme-parallel
 
 > **SEO ready**: sitemap, robots.txt and tags are automatically generated for the website
 
+> **Light**: svg images, thumbs and lazy loading for raster images, few libraries
+
+> **Hardened**: form validation, recaptcha, verified libraries
+
 # Installation
 
 Add this line to your Jekyll site's `Gemfile`:
@@ -48,21 +52,35 @@ For those unfamiliar with how Jekyll works, check out [jekyllrb.com](https://jek
 or read up on just the basics of [front matter](https://jekyllrb.com/docs/frontmatter/), [writing posts](https://jekyllrb.com/docs/posts/), 
 and [creating pages](https://jekyllrb.com/docs/pages/).
 
+## Initialization
+
+Copy the file `_config.yml` from the theme repository to the root of your website folder tree.
+The following section explains what the settings impact and how to configure `_config.yml` properly.
+
 ## Configuration
 
 You can use the following custom parameters in `_config.yml`.
 
 ### Site
+
 Both `title` and `subtitle` are displayed side by side :
 - in the tab name
 - at the top of the page, in the header
 
 ### Social
+
 Social icons will appear for each url your fill in, among `facebook_url` etc.
 
 ### Contact
+
 Your contact information can be used in contact forms, the footer or anywhere else.
 
+### Recaptcha
+
+The contact form is validated using [google's recaptcha plugin][recaptcha-documentation].
+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`.
+
 ## Publication
 
 ### On Github Pages
@@ -196,3 +214,5 @@ The theme is available as open source under the terms of the [CC-BY-3.0](LICENSE
 [cookieconsent]: https://github.com/osano/cookieconsent
 [html5up]: https://html5up.net/
 [jekyll-logo]: https://github.com/jekyll/brand
+[recaptcha-documentation]: https://developers.google.com/recaptcha/intro
+[recaptcha-registering]: https://www.google.com/recaptcha/admin

data/_includes/contact.html

@@ -0,0 +1,13 @@
+{%- assign form_id="contact-form" -%}
+{%- assign name_input_id="contact-name" -%}
+{%- assign email_input_id="contact-email" -%}
+{%- assign message_input_id="contact-message" -%}
+{%- 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 onreset_callback="resetContactForm" -%}
+
+{% 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_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 %}

data/_includes/contact_form.html

@@ -0,0 +1,25 @@
+<form id="{{ include.form_id | 'contact-form' }}" method="post" action="#" onsubmit="{{ include.onsubmit_callback | 'sendContactMessage' }}()" onreset="{{ include.onreset_callback | 'resetContactForm' }}()" >
+  <div class="row gtr-50">
+    <div class="col-6 col-12-mobile required">
+      <input type="text" name="{{ include.name_input_id | 'contact-name' }}" id="{{ include.name_input_id | 'contact-name' }}" placeholder="Name" required minlength="4" maxlength="64" />
+    </div>
+    <div class="col-6 col-12-mobile required">
+      <input type="email" name="{{ include.email_input_id | 'contact-email' }}" id="{{ include.email_input_id | 'contact-email' }}" placeholder="Email" required minlength="8" maxlength="64" />
+    </div>
+    <div class="col-12 required">
+      <select name="contact-subject" id="contact-subject" >
+        <option value="0">Choose a subject</option>
+      </select>
+    </div>
+    <div class="col-12 required">
+      <textarea name="{{ include.message_input_id | 'contact-message' }}" id="{{ include.message_input_id | 'contact-message' }}" placeholder="Message" rows="7" required minlength="16" maxlength="256" ></textarea>
+    </div>
+    <div class="col-12">
+      <ul class="buttons">
+        <li><div id="{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}" ></div></li>
+        <li><input type="submit" id="{{ include.submit_input_id | 'contact-submit-button' }}" class="special" value="Send Message" disabled /></li>
+        <li><input type="reset" id="{{ include.reset_input_id | 'contact-reset-button' }}" class="special" value="Reset" /></li>
+      </ul>
+    </div>
+  </div>
+</form>

data/_includes/contact_script.html

@@ -0,0 +1,51 @@
+<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' }}");
+    var recaptchaWidget;
+
+    const isInputValid = function() {
+        return (nameInputElement.checkValidity()
+            && 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() {
+        contactFormElement.reset();
+        disableSubmitInputElement();
+    };
+    
+    const {{ include.onsubmit_callback | 'sendContactMessage()' }} = function() {
+        encodeURIComponent(nameInputElement.value);
+        encodeURIComponent(emailInputElement.value);
+        encodeURIComponent(messageInputElement.value);
+    };
+    
+    var onloadCallback = function() {
+        var verifyForm = function(response) {
+            if (isInputValid() && isRecaptchaValid()) {
+                disableSubmitInputElement(false);
+            } else {
+                disableSubmitInputElement();
+            }
+        };
+        recaptchaWidget = grecaptcha.render('{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}', {
+            'sitekey' : '{{ site.recaptcha.sitekey }}',
+            'theme' : 'dark',
+            'callback' : verifyForm,
+            'expired-callback': disableSubmitInputElement
+        });
+    };
+</script>
+<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-parallelism
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.7
 platform: ruby
 authors:
 - David Mougeolle
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-12-02 00:00:00.000000000 Z
+date: 2019-12-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -62,6 +62,9 @@ files:
 - LICENSE
 - README.md
 - _includes/banner.html
+- _includes/contact.html
+- _includes/contact_form.html
+- _includes/contact_script.html
 - _includes/cta.html
 - _includes/date.html
 - _includes/footer.html