jekyll-theme-twenty 0.1.8 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2e026667745552d4d6decb894c1f72ec96da94e7ac5ecd1c5dedb6c1912c8a5
-  data.tar.gz: 489a058edd5ab20e5b3875d10f58124402cede1ba62f45211fff365ebb16c23a
+  metadata.gz: 6c13da77845cd2ec6ff57e1fde4ec6c1bca8f289eff86532c665f7e167874de7
+  data.tar.gz: 42f3f8761c2fb794fd9f483cb1080feb0a3145dd7ec33917c7217a9a80b34870
 SHA512:
-  metadata.gz: 677225b9bd4a6a83b0654eaf8d74c752c44ece3b2cc7fbfd662e99dfd886d0f44fcdd3210e84b73f08de2c7e537368024fb9e16ee5f1a0864acaf2b860bedb80
-  data.tar.gz: f83b2ccabaae921737cac48ce3421771bae74990a67766477439dd5f3457e80bacc572c65339814de48f4307ee5da466edb76d99183219229f1f28a026ec733d
+  metadata.gz: cb064195d6340cb710480d343105cac27f4156b184ce87635cc708c50861a0c11625227b8aa4e91dc51dcdb755f3235a6e19f92c4bff3f75ddc0496ea81baa27
+  data.tar.gz: 7bd7687ef8d16d01025632811d3e7021d7c90f29069823c84315e1abf2d0022f42e53cbd49525018a5fcbbc807007f4b79166a371ef87539ed24191013dac834

data/README.md

@@ -22,6 +22,10 @@ You can preview the theme [here](https://moodule.github.io/jekyll-theme-twenty).
 
 > **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,21 +54,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
@@ -194,3 +212,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' }}" 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>

data/_includes/header.html

@@ -10,5 +10,4 @@
         </a>
     </h1>
     {% include navigation.html menu=include.menu %}
-    {% include language.html %}
 </header>

data/_includes/language.html

@@ -1,11 +1,9 @@
 {%- assign posts=site.posts | where:"lang-ref", page.lang-ref | sort: 'lang' -%}
 {%- assign pages=site.pages | where:"lang-ref", page.lang-ref | sort: 'lang' | concat: posts -%}
-<ul class="language">
-	{%- for page in pages -%}
-	{%- if page.lang != "x-default" -%}
-	<li>
-	    <a href="{{ page.url | absolute_url }}" class="{{ page.lang }}">{{ page.lang }}</a>
-	</li>
-	{%- endif -%}
-	{%- endfor -%}
-</ul>
+{%- for page in pages -%}
+{%- if page.lang != "x-default" -%}
+<li>
+    <a href="{{ page.url | absolute_url }}" class="{{ page.lang }}">{{ page.lang }}</a>
+</li>
+{%- endif -%}
+{%- endfor -%}

data/_includes/navigation.html

@@ -17,5 +17,6 @@
         </li>
         {%- endif -%}
     {%- endfor -%}
+    {% include language.html %}
     </ul>
 </nav>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-twenty
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.1.9
 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