jekyll-theme-consulting 0.6.11 → 0.6.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ad9a57cf26dfdd591a22ca898a8f36e4090384e88561e57e4908191b76462dfd
4
- data.tar.gz: 0ee47d7e3a0c5e4510c26b2477c018bfc5681de98ffb52370b346a6987f253c9
3
+ metadata.gz: '09d0fb48f34fb4e19de2e61aef83aa170248a9b96ab4b34343f7c4587a0d3f9a'
4
+ data.tar.gz: e5e29daf8d09cc0d557f36eb74ca8a16818d6510d2054ccb66c6b61e0135cb9f
5
5
  SHA512:
6
- metadata.gz: 368000555893de29863c21c134eddf3e0c964fc0c1b1bd33fc3dea71fa288eaf1a72e9fd50b44dcde1cb5ee1e42752b5dc56e375cca8ff0a62ec8ca106aa0521
7
- data.tar.gz: 04d25e658798aced4f31c29f17cb2c278bed598ee95418041b32c524eb0e82d39047bb1104819bfc09a5dd1580ed81330cdc348da2aba9e450e3919502e73183
6
+ metadata.gz: d5680e9f8154dd43c56fc32362bc7311e0e7043d246fb39601e4be2c7ea485d73797d066cf3c033dd3eed0537f6cd78ad849ad9f8830b446a3f95e0697a5da07
7
+ data.tar.gz: 3d9e19d9f64864c9c19e21e13e0f524d195ccc1db917c5bbe99b25eed78566719626ccb9dfc36ecb370d4fdfd0ec93fd6e55a363edb4d24333e0a9b951869d94
data/README.md CHANGED
@@ -22,6 +22,10 @@ You can preview the theme [here](https://moodule.github.io/jekyll-theme-consulti
22
22
 
23
23
  > **SEO ready**: sitemap, robots.txt and tags are automatically generated for the website
24
24
 
25
+ > **Light**: svg images, thumbs and lazy loading for raster images, few libraries
26
+
27
+ > **Hardened**: form validation, recaptcha, verified libraries
28
+
25
29
  # Installation
26
30
 
27
31
  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
50
54
  or read up on just the basics of [front matter](https://jekyllrb.com/docs/frontmatter/), [writing posts](https://jekyllrb.com/docs/posts/),
51
55
  and [creating pages](https://jekyllrb.com/docs/pages/).
52
56
 
57
+ ## Initialization
58
+
59
+ Copy the file `_config.yml` from the theme repository to the root of your website folder tree.
60
+ The following section explains what the settings impact and how to configure `_config.yml` properly.
61
+
53
62
  ## Configuration
54
63
 
55
64
  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.
65
74
  ### Contact
66
75
  Your contact information can be used in contact forms, the footer or anywhere else.
67
76
 
77
+ ### Recaptcha
78
+
79
+ The contact form is validated using [google's recaptcha plugin][recaptcha-documentation].
80
+ First, you need to [sign your website up] to enable the plugin.
81
+ Google will provide you with a **client-side integration key**: copy it to `_config.yml` under `recaptcha.sitekey`.
82
+
68
83
  ## Publication
69
84
 
70
85
  ### On Github Pages
@@ -151,4 +166,6 @@ The theme is available as open source under the terms of the [CC-BY-4.0](LICENSE
151
166
  [cookieconsent]: https://github.com/osano/cookieconsent
152
167
  [html5up]: https://html5up.net/
153
168
  [jekyll-logo]: https://github.com/jekyll/brand
169
+ [recaptcha-documentation]: https://developers.google.com/recaptcha/intro
170
+ [recaptcha-registering]: https://www.google.com/recaptcha/admin
154
171
  [simple-jekyll-search]: https://github.com/christian-fei/Simple-Jekyll-Search
@@ -1,31 +1,19 @@
1
+ {%- assign form_id="contact-form" -%}
2
+ {%- assign name_input_id="contact-name" -%}
3
+ {%- assign email_input_id="contact-email" -%}
4
+ {%- assign message_input_id="contact-message" -%}
5
+ {%- assign submit_input_id="contact-submit-button" -%}
6
+ {%- assign reset_input_id="contact-reset-button" -%}
7
+ {%- assign recaptcha_widget_id="recaptcha-checkbox" -%}
8
+ {%- assign onsubmit_callback="sendContactMessage" -%}
9
+ {%- assign onreset_callback="resetContactForm" -%}
1
10
  <section id="contact" class="inverted" style="{{ include.style | default: nil }}">
2
11
  <header class="major">
3
12
  <h2>Contact Me</h2>
4
13
  </header>
5
14
  <div class="row gtr-200">
6
15
  <div class="col-6 col-12-medium">
7
- <form method="post" action="#">
8
- <div class="row gtr-uniform">
9
- <div class="col-6 col-12-xsmall">
10
- <input type="text" name="cta-name" id="cta-name" value="" placeholder="Name" />
11
- </div>
12
- <div class="col-6 col-12-xsmall">
13
- <input type="email" name="cta-email" id="cta-email" value="" placeholder="Email" />
14
- </div>
15
- <!-- Break -->
16
- <div class="col-12">
17
- <textarea name="cta-message" id="cta-message" placeholder="Enter your message" rows="6">Please get back to me!</textarea>
18
- </div>
19
- <!-- Break -->
20
- <div class="col-12">
21
- <ul class="actions">
22
- <li><div id="recaptcha-checkbox" ></div></li>
23
- <li><input type="submit" value="Send Message" class="primary button solid fa-envelope" /></li>
24
- <li><input type="reset" value="Reset" class="icon button fa-undo" /></li>
25
- </ul>
26
- </div>
27
- </div>
28
- </form>
16
+ {% 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 %}
29
17
  </div>
30
18
  <div class="col-6 col-12-medium">
31
19
  <ul class="contact">
@@ -37,12 +25,5 @@
37
25
  </div>
38
26
  </div>
39
27
  </section>
40
- <script type="text/javascript">
41
- var onloadCallback = function() {
42
- grecaptcha.render('recaptcha-checkbox', {
43
- 'sitekey' : '{{ site.recaptcha.sitekey }}',
44
- 'theme' : 'dark'
45
- });
46
- };
47
- </script>
48
- <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
28
+
29
+ {% 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 %}
@@ -0,0 +1,22 @@
1
+ <form id="{{ include.form_id | 'contact-form' }}" method="post" action="#" onsubmit="{{ include.onsubmit_callback | 'sendContactMessage' }}()" onreset="{{ include.onreset_callback | 'resetContactForm' }}()" >
2
+ <div class="row gtr-uniform">
3
+ <div class="col-6 col-12-xsmall">
4
+ <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" />
5
+ </div>
6
+ <div class="col-6 col-12-xsmall">
7
+ <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" />
8
+ </div>
9
+ <!-- Break -->
10
+ <div class="col-12">
11
+ <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>
12
+ </div>
13
+ <!-- Break -->
14
+ <div class="col-12">
15
+ <ul class="actions">
16
+ <li><div id="{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}" ></div></li>
17
+ <li><input type="submit" id="{{ include.submit_input_id | 'contact-submit-button' }}" value="Send Message" class="primary button solid fa-envelope" disabled/></li>
18
+ <li><input type="reset" id="{{ include.reset_input_id | 'contact-reset-button' }}" value="Reset" class="icon button fa-undo" /></li>
19
+ </ul>
20
+ </div>
21
+ </div>
22
+ </form>
@@ -0,0 +1,51 @@
1
+ <script type="text/javascript">
2
+ const contactFormElement = document.getElementById("{{ include.form_id | default: 'contact-form' }}");
3
+ const nameInputElement = document.getElementById("{{ include.name_input_id | default: 'contact-name' }}");
4
+ const emailInputElement = document.getElementById("{{ include.email_input_id | default: 'contact-email' }}");
5
+ const messageInputElement = document.getElementById("{{ include.message_input_id | default: 'contact-message' }}");
6
+ const submitInputElement = document.getElementById("{{ include.submit_input_id | default: 'contact-submit-button' }}");
7
+ var recaptchaWidget;
8
+
9
+ const isInputValid = function() {
10
+ return (nameInputElement.checkValidity()
11
+ && emailInputElement.checkValidity()
12
+ && messageInputElement.checkValidity())
13
+ };
14
+
15
+ const isRecaptchaValid = function() {
16
+ var responseToken = grecaptcha.getResponse(recaptchaWidget);
17
+ return true;
18
+ };
19
+
20
+ const disableSubmitInputElement = function (disabled = true) {
21
+ submitInputElement.disabled = disabled;
22
+ }
23
+
24
+ const {{ include.onreset_callback | 'resetContactForm' }} = function() {
25
+ contactFormElement.reset();
26
+ disableSubmitInputElement();
27
+ };
28
+
29
+ const {{ include.onsubmit_callback | 'sendContactMessage()' }} = function() {
30
+ encodeURIComponent(nameInputElement.value);
31
+ encodeURIComponent(emailInputElement.value);
32
+ encodeURIComponent(messageInputElement.value);
33
+ };
34
+
35
+ var onloadCallback = function() {
36
+ var verifyForm = function(response) {
37
+ if (isInputValid() && isRecaptchaValid()) {
38
+ disableSubmitInputElement(false);
39
+ } else {
40
+ disableSubmitInputElement();
41
+ }
42
+ };
43
+ recaptchaWidget = grecaptcha.render('{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}', {
44
+ 'sitekey' : '{{ site.recaptcha.sitekey }}',
45
+ 'theme' : 'dark',
46
+ 'callback' : verifyForm,
47
+ 'expired-callback': disableSubmitInputElement
48
+ });
49
+ };
50
+ </script>
51
+ <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
@@ -1,11 +1,11 @@
1
1
  <!-- Scripts -->
2
- <script src="{{ 'assets/js/jquery.min.js' | absolute_url }}"></script>
3
- <script src="{{ 'assets/js/jquery.scrolly.min.js' | absolute_url }}"></script>
4
- <script src="{{ 'assets/js/browser.min.js' | absolute_url }}"></script>
5
- <script src="{{ 'assets/js/breakpoints.min.js' | absolute_url }}"></script>
6
- <script src="{{ 'assets/js/util.js' | absolute_url }}"></script>
7
- <script src="{{ 'assets/js/main.js' | absolute_url }}"></script>
8
- <script src="{{ 'assets/js/cookieconsent.min.js' | absolute_url }}" data-cfasync="false"></script>
2
+ <script src="{{ 'assets/js/jquery.min.js' | absolute_url }}" type="text/javascript" ></script>
3
+ <script src="{{ 'assets/js/jquery.scrolly.min.js' | absolute_url }}" type="text/javascript" ></script>
4
+ <script src="{{ 'assets/js/browser.min.js' | absolute_url }}" type="text/javascript" ></script>
5
+ <script src="{{ 'assets/js/breakpoints.min.js' | absolute_url }}" type="text/javascript" ></script>
6
+ <script src="{{ 'assets/js/util.js' | absolute_url }}" type="text/javascript" ></script>
7
+ <script src="{{ 'assets/js/main.js' | absolute_url }}" type="text/javascript" ></script>
8
+ <script src="{{ 'assets/js/cookieconsent.min.js' | absolute_url }}" type="text/javascript" data-cfasync="false" ></script>
9
9
  <script>
10
10
  window.cookieconsent.initialise({
11
11
  "palette": {
@@ -18,7 +18,7 @@ window.cookieconsent.initialise({
18
18
  }
19
19
  });
20
20
  </script>
21
- <script src="{{ 'assets/js/simple-jekyll-search.min.js' | absolute_url }}" type="text/javascript"></script>
21
+ <script src="{{ 'assets/js/simple-jekyll-search.min.js' | absolute_url }}" type="text/javascript" ></script>
22
22
  <script>
23
23
  SimpleJekyllSearch({
24
24
  searchInput: document.getElementById('search-input'),
@@ -28,6 +28,6 @@ SimpleJekyllSearch({
28
28
  </script>
29
29
  {%- if include.scripts -%}
30
30
  {%- for file in include.scripts -%}
31
- <script src="{{ file.url | absolute_url }}" /></script>
31
+ <script src="{{ file.url | absolute_url }}" type="text/javascript" /></script>
32
32
  {%- endfor -%}
33
33
  {%- endif -%}
Binary file
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-consulting
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.6.11
4
+ version: 0.6.12
5
5
  platform: ruby
6
6
  authors:
7
7
  - David Mougeolle
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-12-18 00:00:00.000000000 Z
11
+ date: 2019-12-23 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -77,6 +77,8 @@ files:
77
77
  - README.md
78
78
  - _includes/banner.html
79
79
  - _includes/contact.html
80
+ - _includes/contact_form.html
81
+ - _includes/contact_script.html
80
82
  - _includes/date.html
81
83
  - _includes/footer.html
82
84
  - _includes/head.html