j1-template 2021.3.2 → 2022.0.0

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

@@ -0,0 +1,113 @@
+---
+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-0/
+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 id="google_translate_element" class="mb-5"></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!
+
+++++
+
+<!-- p><i class="flag-icon flag-icon-gr ml-3 mr-2 mb-2"></i> </p-->
+
+<script type="text/javascript">
+function googleTranslateElementInit() {
+  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
+}
+</script>
+
+<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+++++

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

@@ -0,0 +1,233 @@
+---
+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-1/
+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;
+
+  // ---------------------------------------------------------------------------
+  // helper functions
+  // ---------------------------------------------------------------------------
+  function googleTranslateElementInit() {
+    new google.translate.TranslateElement({
+      pageLanguage: 'en',
+      layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT
+    },
+    'google_translate_element'
+    );
+  }
+
+  // Set a Cookie
+  function setCookie(options /*cName, cValue, expDays*/) {
+    var defaults = {
+        name: '',
+        path: '/',
+        expires: 0,
+        domain: 'localhost'
+    };
+    var settings = $.extend(defaults, options);
+
+    var 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  + "; path=/";
+  }
+
+  // ---------------------------------------------------------------------------
+  // event handler
+  // ---------------------------------------------------------------------------
+  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');
+
+    // set script details for google-translate
+    script.id  = 'google-translate';
+    script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+
+    // set current TS
+    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 srcLang   = $(this).attr('src-lang');
+    var destLang  = $(this).attr('dest-lang');
+    var transCode = '/' + srcLang + '/' + destLang;
+
+    // set new language settings
+    setCookie({
+      name: 'googtrans',
+      data: transCode
+    });
+
+    // relod the page to apply new language settings
+    window.location = window.location.pathname;
+    location.reload();
+  });
+
+</script>
+++++

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

@@ -0,0 +1,149 @@
+---
+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-3/
+regenerate:                             false
+
+resources:                              [ clipboard, rouge, imagedropdown ]
+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)
+// -----------------------------------------------------------------------------
+
+++++
+<!-- destination language -->
+<div class="form-group bmd-form-group mb-2">
+
+  <select id="destination-language" name="source-language" class="form-control" is="ms-dropdown">
+    <option value="CZ" data-image-css="flag-icon flag-icon-cz rectangle size-md"> Czech</option>
+    <option value="DA" data-image-css="flag-icon flag-icon-dk rectangle size-md"> Danish</option>
+    <option selected value="DE" data-image-css="flag-icon flag-icon-de rectangle size-md"> German</option>
+    <option value="ES" data-image-css="flag-icon flag-icon-es rectangle size-md"> Spanish</option>
+    <option value="EN" data-image-css="flag-icon flag-icon-gb rectangle size-md"> English</option>
+    <option value="EL" data-image-css="flag-icon flag-icon-gr rectangle size-md"> Greek</option>
+    <option value="FI" data-image-css="flag-icon flag-icon-fi rectangle size-md"> Finnish</option>
+    <option value="FR" data-image-css="flag-icon flag-icon-fr rectangle size-md"> French</option>
+    <option value="HU" data-image-css="flag-icon flag-icon-hu rectangle size-md"> Hungarian</option>
+    <option value="IT" data-image-css="flag-icon flag-icon-it rectangle size-md"> Italian</option>
+    <option value="NL" data-image-css="flag-icon flag-icon-nl rectangle size-md"> Dutch</option>
+    <option value="PT" data-image-css="flag-icon flag-icon-pt rectangle size-md"> Portuguese</option>
+    <option value="RO" data-image-css="flag-icon flag-icon-ro rectangle size-md"> Romanian</option>
+    <option value="RU" data-image-css="flag-icon flag-icon-ru rectangle size-md"> Russian</option>
+    <option value="SK" data-image-css="flag-icon flag-icon-sk rectangle size-md"> Slovak</option>
+    <option value="SL "data-image-css="flag-icon flag-icon-sl rectangle size-md"> Slovenian</option>
+    <option value="SV" data-image-css="flag-icon flag-icon-sv rectangle size-md"> Swedish</option>
+  </select>
+  <label for="source-language" class="bmd-label-floating">Select language and scope</label>
+
+  <!-- select if translated text should lean towards formal|informal language -->
+  <select id="language-scope" class="form-control" is="ms-dropdown">
+    <option selected value="default" data-image-css="far fa-meh-blank mt-1 mr-3 mb-1">Regular language</option>
+    <option value="more" data-image-css="far fa-meh mt-1 mr-3">Formal language</option>
+    <option value="less" data-image-css="far fa-smile mt-1 mr-3">Informal language</option>
+  </select>
+
+</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!
+
+
+
+
+
+
+++++
+<script>
+
+  $(function() {
+    var ddDestinationLanguage = document.getElementById("destination-language").msDropdown;
+
+    ddDestinationLanguage.on("close", function() {
+      console.log(ddDestinationLanguage.uiData);
+    });
+  });
+
+</script>
+
+// <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+++++