j1-template 2021.3.2 → 2022.0.0

data/lib/starter_web/pages/_test_pages/google-translate-tester.4.adoc

@@ -0,0 +1,239 @@
+---
+title:                                  Tester
+tagline:                                google translate
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Template to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Testpages ]
+tags:                                   [ Example ]
+
+comments:                               false
+fab_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/gtrans-4/
+regenerate:                             false
+
+resources:                              [
+                                          clipboard, rouge, carousel, lightbox,
+                                          justifiedGallery, lightGallery
+                                        ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+++++
+<div class="ct-topbar">
+  <div class="container">
+    <ul class="list-unstyled list-inline ct-topbar__list">
+      <li class="ct-language">Language <i class="fa fa-arrow-down"></i>
+        <ul class="list-unstyled ct-language__dropdown">
+          <li><a href="#void" class="lang-select" src-lang="en" dest-lang="en"><i class="flag-icon flag-icon-us rectangle size-md" alt="USA"></i></a> American English</li>
+          <li><a href="#void" class="lang-select" src-lang="en" dest-lang="de"><i class="flag-icon flag-icon-de rectangle size-md" alt="GERMANY"></i></a> German</li>
+          <li><a href="#void" class="lang-select" src-lang="en" dest-lang="es"><i class="flag-icon flag-icon-es rectangle size-md" alt="SPAIN"></i></a> Spanish</li>
+          <li><a href="#void" class="lang-select" src-lang="en" dest-lang="fr"><i class="flag-icon flag-icon-fr rectangle size-md" alt="FRANCE"></i></a> French</li>
+          <li><a href="#void" class="lang-select" src-lang="remove"> Stop translation </a> </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</div>
+++++
+
+Machine translation (MT) transfers information from one language to another
+by a computer without human intervention. NMT is the most advanced method
+of computer-generated translations. Thanks to autonomous learning based on
+artificial intelligence.
+
+== Neural Machine Translation
+
+Neural Machine Translation (NMT) works on a completely different principle
+than previous statistics-based or rule-based machine translation methods.
+The NMT uses a large neural network based on the human brain model with
+the help of artificial intelligence.
+
+The NMT is the most advanced method of computer-generated translations.
+Thanks to autonomous learning based on artificial intelligence, Big Data,
+and Deep Learning, this method has made enormous progress in the last recent
+years. Nowadays, neural machine translation programs can be used as a basis
+for professional translations.
+
+Neural algorithms can generate accurate translations as well as *learn* a
+language. This technology improves the quality of the translated data
+continuously. For the NMT to work well, it must be trained to be used.
+Training means that a large amount of data feeds the algorithms to
+improve the reliability of the final results.
+
+== Translation with Deepl
+
+_Deepl_ offers one of the best NMT engines worldwide. The translater can be
+used online or by an application (app) installed on a computer locally.
+The third option to translate is the cloud-based service offered
+by the *Deepl API* to be integrated into custom apps or websites, for example.
+
+J1 integrates the cloud-based translator service for the *Free* service and
+professional translations using the *Pro* system. The current API *version V2*
+supports the translation of more than 25 languages vice versa.
+
+Try the translator with _Jekyll One_ and _Deepl_ on your own!
+
+
+++++
+<style>
+
+/* hide the suggestion box */
+#goog-gt-tt, .goog-te-balloon-frame {
+  display: none !important;
+}
+.goog-text-highlight {
+  background: none !important;
+  box-shadow: none !important;
+}
+
+/* hide the powered by */
+.goog-logo-link {display: none !important;}
+.goog-te-gadget {height: 28px !important;  overflow: hidden;}
+
+/* remove the top frame */
+/* body{ top: 0 !important;}
+.goog-te-banner-frame{display: none !important;} */
+
+</style>
+++++
+
+++++
+<script>
+
+  var gtranslate = true;
+  var srcLang    = 'en';
+
+  function googleTranslateElementInit() {
+    new google.translate.TranslateElement({
+      pageLanguage: 'en',
+      layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT
+    },
+    'google_translate_element'
+    );
+  }
+
+  // Set a Cookie
+  function setCookie(options) {
+    var defaults = {
+        name: '',
+        path: '/',
+        expires: 0,
+        domain: 'localhost'
+    };
+    var settings = $.extend(defaults, options);
+
+    let date = new Date();
+    date.setTime(date.getTime() + (settings.expires * 24 * 60 * 60 * 1000));
+    const expires = "expires=" + date.toUTCString();
+    // document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    document.cookie = settings.name + "=" + settings.data + "; " + expires + "; path=/";
+    // document.cookie = settings.name + '=' + settings.data + '; ' + expires + '; path=' + settings.path + '"';
+    // document.cookie = settings.name + '=' + settings.data + '; path=' + settings.path + '"';
+  }
+
+  // ---------------------------------------------------------------------------
+  // Manage events
+  // ---------------------------------------------------------------------------
+  window.onload = function (event) {
+    var cookie_names  = j1.getCookieNames();
+    var date          = new Date();
+    var timestamp_now = date.toISOString();
+    var user_state    = j1.readCookie(cookie_names.user_state);
+    var user_consent  = j1.readCookie(cookie_names.user_consent);
+    var head          = document.getElementsByTagName('head')[0];
+    var script        = document.createElement('script');
+    var thisURI       = window.location.href
+
+    // set script details for google-translate
+    script.id  = 'google-translate';
+    script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+
+    // set current TS to cookie
+    user_state.last_session_ts = timestamp_now;
+
+    // enable|disable google-translate
+    if (!user_consent.personalization || !gtranslate) {
+      user_state.gtranslate = 'disabled';
+      cookie_written = j1.writeCookie({
+        name:     cookie_names.user_state,
+        data:     user_state,
+        samesite: 'Strict',
+        expires:  0
+      });
+      j1.removeCookie({name: 'googtrans'});
+    } else {
+      user_state.gtranslate = 'enabled';
+      cookie_written = j1.writeCookie({
+        name:     cookie_names.user_state,
+        data:     user_state,
+        samesite: 'Strict',
+        expires:  365
+      });
+      head.appendChild(script);
+    }
+  }; // END onload
+
+  $('.lang-select').click(function() {
+    var cookie_names  = j1.getCookieNames();
+    var srcLang       = $(this).attr('src-lang');
+    var destLang      = $(this).attr('dest-lang');
+//  var thisURI       = decodeURIComponent($(this).attr('href'));
+    var transCode     = '/' + srcLang + '/' + destLang;
+
+    // location.reload();
+    // j1.writeCookie({
+    //   name: 'googtrans',
+    //   data: transCode
+    // });
+
+    setCookie({
+      name: 'googtrans',
+      data: transCode
+    });
+    // window.location = thisURI;
+    window.location = window.location.pathname;
+    location.reload();
+  });
+
+</script>
+++++

data/lib/starter_web/pages/_test_pages/infinite-scroll-tester-2.adoc

@@ -0,0 +1,183 @@
+---
+title:                                  Tester
+tagline:                                infinite scroll
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Template to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Testpages ]
+tags:                                   [ Example ]
+
+pagination:
+  enabled:                              true
+  per_page:                             2
+  permalink:                            /page:num/
+
+comments:                               false
+fab_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/scroller-2/
+regenerate:                             false
+
+resources:                              [ j1Scroller ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+{% comment %} language detection|i18n
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if site.language == "en" %}
+  {% assign language = "en" %}
+{% elsif site.language == "de"%}
+  {% assign language = "de" %}
+{% else %}
+  {% assign language = "en" %}
+{% endif %}
+
+{% if language == "en" %}
+  {% assign readmore_text = "read" %}
+  {% assign infinite_scroll_last = "More articles can be found with the" %}
+{% endif %}
+
+{% if language == "de" %}
+  {% assign readmore_text = "lesen" %}
+  {% assign infinite_scroll_last = "Weitere Artikel finden Sie im" %}
+{% endif %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+== Infinite scroll example 2
+
+lorem:sentences[5]
+
+++++
+<div class="card--group" id="card-wrapper">
+  {% for post in site.posts %}
+    <a href="{{ post.url | relative_url }}">
+      <div class="card">
+        <div class="card__header">
+          <h3 class="card__header__title">{{ post.title | escape }}</h3>
+        </div>
+        <div class="card__body">
+          {{ post.excerpt }}
+        </div>
+      </div>
+    </a>
+  {% endfor %}
+</div>
+++++
+
+++++
+<script>
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var j1Scroller = function () {
+    function j1Scroller(path, wrapperId) {
+        _classCallCheck(this, j1Scroller);
+
+        if (path === undefined || wrapperId === undefined) throw Error('no parameter.');
+        this.path = path;
+        this.pNum = 2;
+        this.wNode = document.getElementById(wrapperId);
+        this.wrapperId = wrapperId;
+        this.enable = true;
+
+        this.detectScroll();
+    }
+
+    _createClass(j1Scroller, [{
+        key: 'detectScroll',
+        value: function detectScroll() {
+            var _this = this;
+
+            window.onscroll = function (ev) {
+                if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) _this.getNewPost();
+            };
+        }
+    }, {
+        key: 'getNewPost',
+        value: function getNewPost() {
+            var _this2 = this;
+
+            if (this.enable === false) return false;
+            this.enable = false;
+            var xmlhttp = new XMLHttpRequest();
+            xmlhttp.onreadystatechange = function () {
+                if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+                    if (xmlhttp.status == 200) {
+                        _this2.pNum++;
+                        var childItems = _this2.getChildItemsByAjaxHTML(xmlhttp.responseText);
+                        _this2.appendNewItems(childItems);
+                    }
+                    return _this2.enable = true;
+                }
+            };
+            xmlhttp.open("GET", location.origin + this.path + this.pNum + '/index.html', true);
+            xmlhttp.send();
+        }
+    }, {
+        key: 'getChildItemsByAjaxHTML',
+        value: function getChildItemsByAjaxHTML(HTMLText) {
+            var newHTML = document.createElement('html');
+            newHTML.innerHTML = HTMLText;
+            var childItems = newHTML.querySelectorAll('#' + this.wrapperId + ' > *');
+            return childItems;
+        }
+    }, {
+        key: 'appendNewItems',
+        value: function appendNewItems(items) {
+            var _this3 = this;
+
+            items.forEach(function (item) {
+                _this3.wNode.appendChild(item);
+            });
+        }
+    }]);
+
+    return j1Scroller;
+}();
+
+
+    var postWrapperId = 'card-wrapper';
+    var paginatePath = '/pages/public/learn/scroller-2/page'
+    new j1Scroller(paginatePath, postWrapperId);
+
+</script>
+++++

data/lib/starter_web/pages/_test_pages/infinite-scroll-tester-3.adoc

@@ -0,0 +1,235 @@
+---
+title:                                  Tester
+tagline:                                infinite scroll
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Template to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Testpages ]
+tags:                                   [ Example ]
+
+comments:                               false
+fab_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/scroller-3/
+regenerate:                             false
+
+resources:                              [ j1scroll ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+== Infinite scroll example 3
+
+lorem:sentences[5]
+
+++++
+<div class="row">
+  <ul id="home_news_panel-scroll-group" class="list-group list-group-horizontal align-items-stretch flex-wrap">
+  	<!-- [INFO   ] [j1.assets.data.panel.html             ] [ write post items ] -->
+  	<li id="home_news_panel-scroll-item" class="list-group-item items-2 p-0">
+  	  <article class="card card-same-height raised-z3 mb-3">
+  		<img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/katie-moum-1920x1280.jpg" alt="Welcome">
+  		<h3 class="card-header bg-primary notoc">Welcome</h3>
+  		<!-- Body|Excerpt -->
+  		<div class="card-body r-text-300 mt-4">
+  		  <div class="paragraph dropcap">
+  			<p class="dropcap"><span class="j1-dropcap">A</span>ll you’re doing at the end of the day is writing your content, and the J1
+  			  Template does all the tricky things: putting out HTML, Javascript, and CSS.
+  			  As a result, the site creation process gets out of your way.</p>
+  		  </div>
+  		  <div class="paragraph">
+  			<p><strong>Sounds fun, isn’t it</strong>?</p>
+  		  </div>
+  		</div>
+  		<!-- End Body|Excerpt -->
+  		<div class="card-footer r-text-200">
+  		  <div class="card-footer-text">
+  			<i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March, 28
+  		  </div>
+  		  <a class="card-link text-muted text-lowercase" href="/posts/public/featured/info/2021/03/28/welcome-to-j1/">
+  			read · jekyll for everyone
+  		  </a>
+  		</div>
+  	  </article>
+  	</li>
+  	<li id="home_news_panel-scroll-item" class="list-group-item items-2 p-0">
+
+  	  <article class="card card-same-height raised-z3 mb-3">
+  		<img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/runner-1920x1200.jpg" alt="J1 Template">
+  		<h3 class="card-header bg-primary notoc">J1 Template</h3>
+  		<!-- Body|Excerpt -->
+  		<div class="card-body r-text-300 mt-4">
+  		  <div class="paragraph dropcap">
+  			<p class="dropcap"><span class="j1-dropcap">T</span>he template system was initially developed to create a simple but fully
+  			  configurable website creation toolset for document servers. Document servers
+  			  provide websites or other content formats like PDF, projects, software
+  			  documentation, or similar approaches.</p>
+  		  </div>
+  		</div>
+  		<!-- End Body|Excerpt -->
+  		<div class="card-footer r-text-200">
+  		  <div class="card-footer-text">
+  			<i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March,  3
+  		  </div>
+  		  <a class="card-link text-muted text-lowercase" href="/posts/public/featured/knowledge/2021/03/03/about-j1/">
+  			read · first version is out
+  		  </a>
+  		</div>
+  	  </article>
+  	</li>
+  </ul>
+</div>
+++++
+
+++++
+<script>
+
+var _createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+// function _classCallCheck(instance, Constructor) {
+//   if (!(instance instanceof Constructor)) {
+//     throw new TypeError("Cannot call a class as a function");
+//   }
+// }
+
+var j1Scroller = function () {
+  function j1Scroller(path, wrapperId) {
+    // _classCallCheck(this, j1Scroller);
+
+    if (path === undefined || wrapperId === undefined) throw Error('no parameter.');
+    this.path = path;
+    this.pNum = 2;
+    this.pMaxNum = 6;
+    this.wNode = document.getElementById(wrapperId);
+    this.wrapperId = wrapperId;
+    this.enable = true;
+
+    this.detectScroll();
+  }
+
+  _createClass(j1Scroller, [{
+    key: 'detectScroll',
+    value: function detectScroll() {
+      var _this = this;
+
+      window.onscroll = function (ev) {
+        if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) _this.getNewPost();
+      };
+    }
+  }, {
+    key: 'getNewPost',
+    value: function getNewPost() {
+      var _this = this;
+      if (_this.pNum >= this.pMaxNum ) {
+        return;
+      }
+      if (this.enable === false) return false;
+      this.enable = false;
+      var xmlhttp = new XMLHttpRequest();
+      xmlhttp.onreadystatechange = function () {
+        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+          if (xmlhttp.status == 200) {
+            _this.pNum++;
+            var childItems = _this.getChildItemsByAjaxHTML(xmlhttp.responseText);
+            _this.appendNewItems(childItems);
+          }
+          return _this.enable = true;
+        }
+      };
+      xmlhttp.open("GET", location.origin + this.path + this.pNum + '/index.html', true);
+      xmlhttp.send();
+    }
+  }, {
+    key: 'getChildItemsByAjaxHTML',
+    value: function getChildItemsByAjaxHTML(HTMLText) {
+      var newHTML = document.createElement('html');
+      newHTML.innerHTML = HTMLText;
+      var childItems = newHTML.querySelectorAll('#' + this.wrapperId + ' > *');
+      return childItems;
+    }
+  }, {
+    key: 'appendNewItems',
+    value: function appendNewItems(items) {
+      var _this = this;
+
+      items.forEach(function (item) {
+        _this.wNode.appendChild(item);
+      });
+    }
+  }]);
+
+  return j1Scroller;
+}();
+
+$(function() {
+  var dependencies_met_page_ready = setInterval (function (options) {
+    if (j1.getState() === 'finished') {
+
+      var postWrapperId = 'home_news_panel-scroll-group';
+      var paginatePath  = '/assets/data/news_panel_posts/page';
+
+      new j1Scroller(paginatePath, postWrapperId);
+
+      $("#home_news_panel-scroll-group").j1Scroll({
+      	propertyName: "a custom value"
+      });
+
+      clearInterval(dependencies_met_page_ready);
+    }
+  });
+});
+
+</script>
+++++