Merge pull request #634 from ePages-de/develop

Release v0.16.0

_includes/cookie_notice.html

@@ -0,0 +1,23 @@
+<div class="cookie-notice__backdrop">
+
+  <div class="cookie-notice">
+
+    <h3 class="cookie-notice__title">Cookie settings</h3>
+
+    <div class="cookie-notice__info">
+      Our website uses cookies to improve your user experience. Some cookies are
+      required for the basic functionality of the website while other cookies help
+      us to improve our content and layout. You can agree to all cookies by selecting
+      "Accept all" or you can select "Accept required" to confirm only the required ones.
+      Further information can be found in our
+      <a target="_blank" href="https://epages.com/es/proteccion-datos/">Data protection declaration</a>.
+    </div>
+
+    <div class="cookie-notice__actions">
+      <a class="cta cta--secondary cookie-notice__actions--reject">Accept required</a>
+      <a class="cta cta--primary cookie-notice__actions--accept">Accept all</a>
+    </div>
+
+  </div>
+
+</div>

_includes/cookie_notice_scripts.html

@@ -0,0 +1,21 @@
+{% assign ga_paths = "['/', 'blog', 'devjobs']" %}
+
+{% if ga_paths contains base_url %}
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  {% case base_url %}
+  {%- when '/' -%}
+    ga('create', 'UA-71308214-1', 'auto');
+  {%- when 'blog' -%}
+    ga('create', 'UA-71308214-2', 'auto');
+  {%- when 'devjobs' -%}
+    ga('create', 'UA-71308214-3', 'auto');
+  {% endcase %}
+
+  ga('require', 'linkid');
+  ga('send', 'pageview');
+
+{% endif %}

_includes/head.html

@@ -42,4 +42,18 @@
   <script src="/assets/js/lightbox.min.js"></script>
   <link rel="stylesheet" href="/assets/css/lightbox.css" />
 
+  <script src="{{ '/assets/js/cookie-notice.js' | relative_url }}"></script>
+
+  <script>
+    if (!readCookie('cookie-notice-dismissed')) {
+      /* Show the cookie notice if no option has been selected yet */
+      $(document).ready(function() {
+        $('.cookie-notice__backdrop').css('display', 'flex');
+      });
+    } else if (readCookie('cookie-notice-dismissed') == 'true') {
+      /* Load user's custom scripts if cookie notice has been accepted */
+      {% include cookie_notice_scripts.html %}
+    }
+  </script>
+
 </head>

_includes/sections/footer.html

@@ -1,3 +1,4 @@
+{% include cookie_notice.html %}
 <footer class="footer">
   <div class="footer-wrapper">
 

_plugins/custom_blockquote.rb

@@ -0,0 +1,7 @@
+class Kramdown::Converter::Html
+  # You can override any function from this page:
+  # https://kramdown.gettalong.org/rdoc/Kramdown/Converter/Html.html
+  def convert_blockquote(el, indent)
+    Jekyll::Quote.render_with_quotes(inner(el, indent))
+  end
+end

_plugins/quote.rb

@@ -1,20 +1,14 @@
 module Jekyll
-  class Quote < Liquid::Tag
+  class Quote < Liquid::Block
 
-    ALLOWED_ATTRIBUTES = %w(
-      text
-    ).freeze
-
-    def initialize(_, args, _)
-      super
-      @args = OptionParser.parse(args, ALLOWED_ATTRIBUTES)
-      raise 'Quote: "text" attribute must be provided' if @args[:attributes][:text].nil?
+    def render(context)
+      Jekyll::Quote.render_with_quotes(Kramdown::Document.new(super).to_html)
     end
 
-    def render(context)
+    def self.render_with_quotes(html_element)
       %{<div class="quote">
           <div class="quote__text">
-            #{@args[:attributes][:text].tr('_', ' ')}
+            #{html_element}
             <i class="quote__icon quote__icon--left fas fa-quote-left"></i>
             <i class="quote__icon quote__icon--right fas fa-quote-right"></i>
           </div>

_sass/2-components/_all-components.sass

@@ -21,3 +21,4 @@
 @import 'sidebars'
 @import 'newsletter'
 @import 'quotes'
+@import 'cookie_notice'

_sass/2-components/_cookie_notice.sass

@@ -0,0 +1,41 @@
+.cookie-notice
+  background-color: white
+  max-width: 70rem
+  padding: 2rem
+  color: #3e3e3e
+  margin: 2rem
+
+  &__backdrop
+    +position(fixed, 0 0 0 0)
+    background-color: rgba(0,0,0,.3)
+    z-index: 9999
+    display: none
+    justify-content: center
+    align-items: center
+
+  &__title
+    padding-bottom: 1.5rem
+    font-family: $base-font-family
+    font-size: 1.6rem
+
+
+  &__actions
+    display: grid
+    justify-content: space-between
+    padding-top: 2rem
+    text-align: center
+
+    +grid-media($grid-medium)
+      display: flex
+
+    &--accept
+      background-color: $beyond-green
+
+    &--reject
+      background-color: $gray-light
+      margin-bottom: 1rem
+      width: 29rem
+
+      +grid-media($grid-medium)
+        margin-bottom: 0
+        width: auto

_sass/2-components/_quotes.sass

@@ -42,3 +42,6 @@
       +padding(.3em 0 0 .3em)
       bottom: -11px
       right: -1px
+
+  p
+    margin: 0

assets/js/cookie-notice.js

@@ -0,0 +1,37 @@
+function createCookie(name,value,days) {
+  var expires = '';
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    expires = '; expires=' + date.toUTCString();
+  }
+  document.cookie = name + '=' + value + expires + '; path=/';
+}
+
+function readCookie(name) {
+  var nameEQ = name + '=';
+  var ca = document.cookie.split(';');
+
+  for (var i=0; i < ca.length; i++) {
+    var c = ca[i];
+    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+  }
+  return null;
+}
+
+function eraseCookie(name) {
+  createCookie(name, '', -1);
+}
+
+$(document).on('click', '.cookie-notice__actions--accept', function() {
+  createCookie('cookie-notice-dismissed', 'true', 365);
+  $('.cookie-notice__backdrop').hide();
+  location.reload();
+});
+
+$(document).on('click', '.cookie-notice__actions--reject', function() {
+  createCookie('cookie-notice-dismissed', 'false', 365);
+  $('.cookie-notice__backdrop').hide();
+  location.reload();
+});