jekyll-theme-drop 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 551aa3cf3e9ea7b098248c27b208696c9f91ef552cfcd2adb22b44d2a4a31586
-  data.tar.gz: 4c6d77366886d676893448b08a03f50c7362f2c102a62a2655cf22210bc4d2d1
+  metadata.gz: dd919f622c27d31afe93bd00ebd3b0785d9cf5ec9f8e6bee001a2680608cc0b3
+  data.tar.gz: 8167c84d8dca273313d03dcfbb12650f945a7fd01ad6752b2af26508a9245503
 SHA512:
-  metadata.gz: ecbbe58085eb397ada9785ebc3349071a5077fb1e8c154ab45b9c18080f52b539532e1d5cd621a81071a9699218596d7227f4ac68c32d8ff51f7fa5eadb58c0c
-  data.tar.gz: 98963313465fb06261a454183fc845261f57f352b74e25edb2d595ef72c3392ab87185b7431dc255e1a0a31843ea5d1724197db3e5965277d8806fe8713a9a61
+  metadata.gz: 1d7f8ef8922663fd3815c0312b28a84c710b2fc2a9555e145778a2ba6a038d77575350a88b7c461b2ac6f1ffdf83cc17bbbe9da33e97602fa23698287dd070b0
+  data.tar.gz: 8c2579863de9a0c48f3bf1a84c67a4be1b5d8a9ed56daf70439f1875c42a9ead8ef59b73276fd6c5a86c22f6c632a5817a63ca9d9eec7a0de6c129fbb11c3528

data/README.md

@@ -22,6 +22,10 @@ You can preview the theme [here](https://moodule.github.io/jekyll-theme-drop)
 
 > **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`:
@@ -50,6 +54,11 @@ 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`.
@@ -65,6 +74,12 @@ 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
@@ -147,3 +162,5 @@ The theme is available as open source under the terms of the [CC-BY-4.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,36 @@
+<section>
+    <header>
+        <h3>Form</h3>
+    </header>
+    <form id="{{ include.form_id | 'contact-form' }}" method="post" action="#" onsubmit="{{ include.onsubmit_callback | 'sendContactMessage' }}()" onreset="{{ include.onreset_callback | 'resetContactForm' }}()" >
+        <div class="row">
+            <div class="col-6 col-12-mobile">
+                <input class="text" type="text" name="{{ include.name_input_id | 'contact-name' }}" id="{{ include.name_input_id | 'contact-name' }}" value="" placeholder="John Doe" required minlength="4" maxlength="64" />
+            </div>
+            <div class="col-6 col-12-mobile">
+                <input class="text" type="email" name="{{ include.email_input_id | 'contact-email' }}" id="{{ include.email_input_id | 'contact-email' }}" value="" placeholder="johndoe@domain.tld" required minlength="8" maxlength="64" />
+            </div>
+            <div class="col-12">
+                <select name="contact-department" id="contact-department">
+                    <option value="">Choose a department</option>
+                    <option value="1">Manufacturing</option>
+                    <option value="2">Administration</option>
+                    <option value="3">Support</option>
+                </select>
+            </div>
+            <div class="col-12">
+                <input class="text" type="text" name="contact-subject" id="contact-subject" value="" placeholder="Enter your subject" />
+            </div>
+            <div class="col-12">
+                <textarea name="{{ include.message_input_id | 'contact-message' }}" id="{{ include.message_input_id | 'contact-message' }}" placeholder="Enter your message" required minlength="16" maxlength="256" ></textarea>
+            </div>
+            <div class="col-12">
+                <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="Submit" disabled /></li>
+                    <li><input type="reset" id="{{ include.reset_input_id | 'contact-reset-button' }}" class="style3" value="Reset" /></li>
+                </ul>
+            </div>
+        </div>
+    </form>
+</section>

data/_includes/contact_script.html

@@ -0,0 +1,52 @@
+<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,
+            'size' : 'compact'
+        });
+    };
+</script>
+<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

data/_layouts/default.html

@@ -17,8 +17,6 @@
 
     <body class="is-preload">
 
-        {% include header.html %}
-
         {{ content }}
 
         {% include footer.html %}

data/_layouts/home.html

@@ -1,6 +1,8 @@
 ---
 layout: default
 ---
+{% include header.html %}
+
 {% include banner.html %}
 
 {{ content }}

data/_layouts/page.html

@@ -1,4 +1,4 @@
 ---
-layout: defaut
+layout: default
 ---
 {{ content }}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-drop
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
 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
@@ -63,6 +63,9 @@ files:
 - README.md
 - _includes/banner.html
 - _includes/bouncing.svg
+- _includes/contact.html
+- _includes/contact_form.html
+- _includes/contact_script.html
 - _includes/date.html
 - _includes/footer.html
 - _includes/head.html