jekyll-theme-ethereal 0.3.1 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7ea0c7bad0e38f4e1c0dc644d44dd064e08be3b2984ecde5043a14de93cd64f9
-  data.tar.gz: 11b7586d57173aba6137af819e6b07f506ebde3729b7fe458700cbfadfbd1be8
+  metadata.gz: eb966ca5c76cc867d1a4e8fa61a47b08d26badb8e375abf2e20531ba5f3d6e2c
+  data.tar.gz: 32bb6cd722c17766a20e5d1d29a00490bd1cc13417ed21c0682607bfb6579ab2
 SHA512:
-  metadata.gz: 9b518b7993dfef5130fd6350332bdf678c6b141929b3c799e3088cfc5dcb5e9120b0ca927d77a316a4d689fbb947faa357de77d55292ca01bb11777267e86062
-  data.tar.gz: 3c5e6934170e96d7627e1f87802ddb0ee5dd6788e81a870e54b56f1485168b8caf0be577538bf93137cb81947ec0ae28fe99073026395962f324531cff4a8fbe
+  metadata.gz: e600781b4072caa118b7ba7e26f7b5b5bf6a388f4dd823aad1eadb4357e5d2dceff9db13c2e9f1cc9168ddac267d3850461f28fb8ec00dcb812b26a20f1ffe46
+  data.tar.gz: b53647d65a397c0151f3871c12dda3e09b3b60bac5b246f1dfc8de6a80fbfc690a29784e629cdbd75e95deefd2b13906227cfafdcec16aafe94071be50d0d576

data/README.md

@@ -22,6 +22,10 @@ You can preview the theme [here](https://moodule.github.io/jekyll-theme-ethereal
 
 > **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
@@ -536,3 +551,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_form.html

@@ -0,0 +1,21 @@
+<form method="post" id="{{ include.form_id | 'contact-form' }}" action="#" onsubmit="{{ include.onsubmit_callback | 'sendContactMessage' }}()" onreset="{{ include.onreset_callback | 'resetContactForm' }}()" >
+    <div class="fields">
+        <div class="field half">
+            <label for="name">Name</label>
+            <input type="text" name="{{ include.name_input_id | 'contact-name' }}" id="{{ include.name_input_id | 'contact-name' }}" required minlength="4" maxlength="64" />
+        </div>
+        <div class="field half">
+            <label for="email">Email</label>
+            <input type="email" name="{{ include.email_input_id | 'contact-email' }}" id="{{ include.email_input_id | 'contact-email' }}" required minlength="8" maxlength="64" />
+        </div>
+        <div class="field">
+            <label for="message">Message</label>
+            <textarea name="{{ include.message_input_id | 'contact-message' }}" id="{{ include.message_input_id | 'contact-message' }}" rows="4"vrequired minlength="16" maxlength="256" ></textarea>
+        </div>
+    </div>
+    <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="Send Message" class="button primary 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>
+</form>

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/_includes/date.html

@@ -1,13 +1,14 @@
-{% assign day = include.date | date: "%-d" %}
-{% assign month = include.date | date: "%-m" %}
-{% if page.lang == "en" %}
+{%- assign day = include.date | date: "%-d" -%}
+{%- assign month = include.date | date: "%-m" -%}
+{%- if page.lang == "en" -%}
     {{ include.date | date: "%B" }} {{ day }}, {{ include.date | date: "%Y" }}
-{% elsif page.lang == "fr" %}
-    {% if day == "1" %}
+{%- elsif page.lang == "fr" -%}
+    {%- if day == "1" -%}
         {{ day }}<sup>er</sup>
-    {% else %} {{ day }}
-    {% endif %}
-    {% case month %}
+    {%- else -%}
+        {{ day }}
+    {%- endif -%}
+    {%- case month -%}
             {% when  '1' %}janvier
             {% when  '2' %}février
             {% when  '3' %}mars
@@ -20,5 +21,6 @@
             {% when '10' %}octobre
             {% when '11' %}novembre
             {% when '12' %}décembre
-    {% endcase %} {{ include.date | date: "%Y" }}
-{% endif %}
+    {%- endcase -%}
+    {{ include.date | date: "%Y" }}
+{%- endif -%}

data/_includes/footer.html

@@ -4,11 +4,11 @@
         <li>&copy; {{ site.copyright.holder }} - {{ site.copyright.license }}</li>
         <li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
         <li>Jekyll integration: <a href="http://github.com/moodule" target="_blank">Moodule</a></li>
-        {% if site.legal_terms.url %}
+        {%- if site.legal_terms.url -%}
         <li><a href="{{ site.legal_terms.url | absolute_url }}" target="_blank">Legal Terms</a></li>
-        {% endif %}
-        {% if site.privacy_policy.url %}
+        {%- endif -%}
+        {%- if site.privacy_policy.url -%}
         <li><a href="{{ site.privacy_policy.url | absolute_url }}" target="_blank">Privacy Policy</a></li>
-        {% endif %}
+        {%- endif -%}
     </ul>
 </footer>

data/_includes/head.html

@@ -1,13 +1,21 @@
-{%- 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 %}
+{%- 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 -%}
 <head>
     <title>{{ include.title }} - {{ include.subtitle }}</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="stylesheet" href="{{ 'assets/css/main.css' | absolute_url }}" />
-    {%- for page in pages %}
+    {%- if include.stylesheets -%}
+    {%- for file in include.stylesheets -%}
+    <link rel="stylesheet" href="{{ file.url | absolute_url }}" />
+    {%- endfor -%}
+    {%- endif -%}
+    {%- for page in pages -%}
     <link rel="alternate" hreflang="{{ page.lang }}" href="{{ page.url }}" />
-    {%- endfor %}
+    {%- endfor -%}
+    {%- if site.favicon -%}
+    <link rel="icon" href="{{ site.favicon | absolute_url }}" />
+    {%- endif -%}
     <noscript><link rel="stylesheet" href="{{ 'assets/css/noscript.css' | absolute_url }}" /></noscript>
-    {% if site.favicon %}<link rel="icon" href="{{ site.favicon | absolute_url }}" />{% endif %}
+    {% seo %}
 </head>

data/_includes/language.html

@@ -1,14 +1,13 @@
-{% 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 %}
-
+{%- 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 -%}
 <div id="language-selector">
 	<ul class="language">
-		{% for page in pages %}
-		{% if page.lang != "x-default" %}
+		{%- 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 %}
+		{%- endif -%}
+		{%- endfor -%}
 	</ul>
 </div>

data/_includes/panel.html

@@ -1,13 +1,15 @@
 <section
 class="panel {{ include.type }} {{ include.style.size }} {{ include.style.text.position | default: 'right' }} {{ include.style.background.color }}"
 id="{{ include.id | default: include.type }}">
-{% if include.type=="banner" %}
-	{% include panel_banner.html header=include.header content=include.content style=include.style %}
-{% elsif include.type=="contact" %}
-	{% include panel_contact.html header=include.header content=include.content style=include.style %}
-{% elsif include.type=="spotlight" %}
-	{% include panel_spotlight.html header=include.header content=include.content style=include.style %}
-{% else %}
-	{% include panel_generic.html header=include.header content=include.content style=include.style %}
-{% endif %}
+{%- if include.type=="banner" -%}
+	{% include panel_banner.html header=include.header content=include.content style=include.style data=include.data %}
+{%- elsif include.type=="contact" -%}
+	{% include panel_contact.html header=include.header content=include.content style=include.style data=include.data %}
+{%- elsif include.type=="spotlight" -%}
+	{% include panel_spotlight.html header=include.header content=include.content style=include.style data=include.data %}
+{%- elsif include.type=="map" -%}
+	{% include panel_map.html header=include.header content=include.content style=include.style data=include.data %}
+{%- else -%}
+	{% include panel_generic.html header=include.header content=include.content style=include.style data=include.data %}
+{%- endif -%}
 </section>

data/_includes/panel_contact.html

@@ -1,30 +1,23 @@
+{%- 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" -%}
+
 <div class="intro {{ include.style.header.color | default: 'color4' }}">
     <h2 class="major">{{ include.header.title | default: 'Contact'}}</h2>
     <p>{{ include.header.description }}</p>
 </div>
 <div class="inner columns divided">
     <div class="span-3-25">
-        <form method="post" action="#">
-            <div class="fields">
-                <div class="field half">
-                    <label for="name">Name</label>
-                    <input type="text" name="name" id="name" />
-                </div>
-                <div class="field half">
-                    <label for="email">Email</label>
-                    <input type="email" name="email" id="email" />
-                </div>
-                <div class="field">
-                    <label for="message">Message</label>
-                    <textarea name="message" id="message" rows="4"></textarea>
-                </div>
-            </div>
-            <ul class="actions">
-                <li><input type="submit" value="Send Message" class="button primary" /></li>
-            </ul>
-        </form>
+        {% 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 %}
     </div>
     <div class="span-1-5">
         {% include social.html color=include.style.icons.color %}
     </div>
 </div>
+{% 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/panel_map.html

@@ -0,0 +1,57 @@
+<style>
+body { margin: 0; padding: 0; }
+#map-container { position: relative; top: 0; bottom: 0; width: 100%; };
+ 
+#marker {
+    background-image: url('..images/rocket.png');
+    background-size: cover;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+ 
+.mapboxgl-popup {
+    max-width: 200px;
+}
+</style>
+<div class="intro {{ include.style.header.joined }} {{ include.style.header.color }}">
+    <h2 class="major">{{ include.header.title }}</h2>
+    <p>{{ include.header.description }}</p>
+</div>
+<div id='map-container'></div>
+<script src="{{ 'assets/js/mapbox-gl.js' | absolute_url }}" /></script>
+<script defer>
+mapboxgl.accessToken = "{{ include.data.token }}";
+var map = new mapboxgl.Map({
+    container: "map-container",
+    style: "{{ include.data.style }}",
+    center: [{{ include.data.center.longitude | default: 0.0 }}, {{ include.data.center.latitude | default: 0.0 }}],
+    zoom: {{ include.data.zoom | default: 1 }}
+});
+
+var data_points = {{ include.content | strip_html }}
+
+map.on('load', function () {
+
+    map.addLayer({
+        "id": "points",
+        "type": "symbol",
+        "source": {
+            "type": "geojson",
+            "data": data_points
+        },
+        "layout": {
+            // get the icon name from the source's "icon" property
+            // concatenate the name to get an icon from the style's sprite sheet
+            "icon-image": ["concat", ["get", "icon"], "-15"],
+            // get the title name from the source's "title" property
+            "text-field": ["get", "name"],
+            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+            "text-offset": [0, 0.6],
+            "text-anchor": "top"
+        }
+    });
+
+});
+</script>

data/_includes/scripts.html

@@ -1,18 +1,31 @@
 <!-- Scripts -->
-<script src="{{ 'assets/js/jquery.min.js' | absolute_url }}"></script>
-<script src="{{ 'assets/js/browser.min.js' | absolute_url }}"></script>
-<script src="{{ 'assets/js/breakpoints.min.js' | absolute_url }}"></script>
-<script src="{{ 'assets/js/main.js' | absolute_url }}"></script>
-<script src="{{ 'assets/js/cookieconsent.min.js' | absolute_url }}" data-cfasync="false"></script>
+<script src="{{ 'assets/js/jquery.min.js' | absolute_url }}" type="text/javascript"  type="text/javascript" ></script>
+<script src="{{ 'assets/js/browser.min.js' | absolute_url }}" type="text/javascript" ></script>
+<script src="{{ 'assets/js/breakpoints.min.js' | absolute_url }}" type="text/javascript" ></script>
+<script src="{{ 'assets/js/main.js' | absolute_url }}" type="text/javascript" ></script>
+<script src="{{ 'assets/js/cookieconsent.min.js' | absolute_url }}" data-cfasync="false" type="text/javascript" ></script>
 <script>
 window.cookieconsent.initialise({
-	"palette": {
-		"popup": {
-			"background": "#252e39"
-		},
-		"button": {
-			"background": "#14a7d0"
-		}
-	}
+    "palette": {
+        "popup": {
+            "background": "#252e39"
+        },
+        "button": {
+            "background": "#14a7d0"
+        }
+    }
 });
 </script>
+<script src="{{ 'assets/js/simple-jekyll-search.min.js' | absolute_url }}" type="text/javascript" ></script>
+<script>
+SimpleJekyllSearch({
+  searchInput: document.getElementById('search-input'),
+  resultsContainer: document.getElementById('search-results'),
+  json: "{{ '/index.json' | absolute_url }}"
+})
+</script>
+{%- if include.scripts -%}
+{%- for file in include.scripts -%}
+<script src="{{ file.url | absolute_url }}" type="text/javascript" ></script>
+{%- endfor -%}
+{%- endif -%}

data/_includes/social.html

@@ -1,36 +1,36 @@
 <!-- Social Icons -->
 <ul class="contact-icons {{ include.color | default: 'color1' }}">
-    {% if site.twitter.url %}
+    {%- if site.twitter.url -%}
     <li class="icon brands fa-twitter"><a href="{{ site.twitter.url }}" target="_blank"><span class="label">{{ site.twitter.label }}</span></a></li>
-    {% endif %}
-    {% if site.facebook.url %}
+    {%- endif -%}
+    {%- if site.facebook.url -%}
     <li class="icon brands fa-facebook-f"><a href="{{ site.facebook.url }}" target="_blank"><span class="label">{{ site.facebook.label }}</span></a></li>
-    {% endif %}
-    {% if site.snapchat.url %}
+    {%- endif -%}
+    {%- if site.snapchat.url -%}
     <li class="icon brands fa-snapchat-ghost"><a href="{{ site.snapchat.url }}" target="_blank"><span class="label">{{ site.snapchat.label }}</span></a></li>
-    {% endif %}
-    {% if site.medium.url %}
+    {%- endif -%}
+    {%- if site.medium.url -%}
     <li class="icon brands fa-medium-m"><a href="{{ site.medium.url }}" target="_blank"><span class="label">{{ site.medium.label }}</span></a></li>
-    {% endif %}
-    {% if site.instagram.url %}
+    {%- endif -%}
+    {%- if site.instagram.url -%}
     <li class="icon brands fa-instagram"><a href="{{ site.instagram.url }}" target="_blank"><span class="label">{{ site.instagram.label }}</span></a></li>
-    {% endif %}
-    {% if site.pinterest.url %}
+    {%- endif -%}
+    {%- if site.pinterest.url -%}
     <li class="icon brands fa-pinterest"><a href="{{ site.pinterest.url }}" target="_blank"><span class="label">{{ site.pinterest.label }}</span></a></li>
-    {% endif %}
-    {% if site.500px.url %}
+    {%- endif -%}
+    {%- if site.500px.url -%}
     <li class="icon brands fa-500px"><a href="{{ site.500px.url }}" target="_blank"><span class="label">{{ site.500px.label }}</span></a></li>
-    {% endif %}
-    {% if site.gitlab.url %}
+    {%- endif -%}
+    {%- if site.gitlab.url -%}
     <li class="icon brands fa-gitlab"><a href="{{ site.gitlab.url }}" target="_blank"><span class="label">{{ site.gitlab.label }}</span></a></li>
-    {% endif %}
-    {% if site.github.url %}
+    {%- endif -%}
+    {%- if site.github.url -%}
     <li class="icon brands fa-github"><a href="{{ site.github.url }}" target="_blank"><span class="label">{{ site.github.label }}</span></a></li>
-    {% endif %}
-    {% if site.slack.url %}
+    {%- endif -%}
+    {%- if site.slack.url -%}
     <li class="icon brands fa-slack"><a href="{{ site.slack.url }}" target="_blank"><span class="label">{{ site.slack.label }}</span></a></li>
-    {% endif %}
-    {% if site.linkedin.url %}
+    {%- endif -%}
+    {%- if site.linkedin.url -%}
     <li class="icon brands fa-linkedin"><a href="{{ site.linkedin.url }}" target="_blank"><span class="label">{{ site.linkedin.label }}</span></a></li>
-    {% endif %}
+    {%- endif -%}
 </ul>