j1-template 2021.3.2 → 2022.0.3

data/lib/starter_web/pages/_test_pages/button-tester-1.adoc

@@ -0,0 +1,127 @@
+---
+title:                                  Tester
+tagline:                                button
+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/button_tester/
+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="all" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+++++
+<div>
+
+  <a href="#void" class="btn btn-xl btn-primary text-uppercase mr-2 mb-2">
+  	<i class="mdi mdi-language-ruby mdi-3x mr-2"></i>
+  	<span class="float-right text-left mt-2">Let's Use this Button
+  		<span class="d-block r-text-200">30 days free for all users</span>
+  	</span>
+  </a>
+
+  <a href="#void" class="btn btn-xl btn-primary text-uppercase mr-2 mb-2">
+  	<i class="mdi mdi-language-ruby mdi-3x mr-2"></i>
+  	<span class="float-right text-left mt-2">Let's Use this Button
+  		<span class="d-block r-text-200">30 days free for all users</span>
+  	</span>
+  </a>
+
+</div>
+
+<style>
+
+/*
+.btn-xl {
+    line-height: 1.4;
+    padding: 0.92857rem 1.85714rem;
+    font-size: 1.28571rem;
+}
+
+.u-btn-content {
+    white-space: normal;
+}
+
+.g-font-weight-600 {
+    font-weight: 600 !important;
+}
+
+.g-letter-spacing-0_5 {
+    letter-spacing: 0.03571rem;
+}
+
+.g-brd-2 {
+    border-width: 2px !important;
+}
+
+.g-mr-10 {
+    margin-right: 0.71429rem !important;
+}
+
+.g-mb-15 {
+    margin-bottom: 1.07143rem !important;
+}
+
+.g-font-size-11 {
+    font-size: 0.78571rem !important;
+}
+
+.g-font-size-42 {
+    font-size: 3rem !important;
+}
+
+.pull-left {
+    float: left;
+}
+*/
+
+</style>
+++++

data/lib/starter_web/pages/_test_pages/card-tester.adoc

@@ -0,0 +1,128 @@
+---
+title:                                  Tester
+tagline:                                button
+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/card_tester/
+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="all" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+++++
+<div>
+
+  <article class="card raised-z3 mb-5">
+    <h3 id="35983" class="card-header bg-primary">Welcome</h3>
+    <!-- h5 class="notoc card-subtitle text-muted mb-2">jekyll for everyone</h5 -->
+
+    <div class="row mx-0">
+
+      <div class="col-md-6 img-bg--fill px-0"
+        style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url(/assets/images/modules/attics/katie-moum-1920x1280.jpg);">
+      </div>
+
+      <!-- div class="col-md-6 px-0">
+        <img class="img__object--cover" src="/assets/images/modules/attics/katie-moum-1920x1280.jpg" alt="Welcome">
+      </div -->
+
+      <div class="col-md-6 p-0">
+        <div class="card-body r-text-300">All 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.   Sounds fun, isn’t it?  ...</div>
+        <div class="card-footer r-text-200">
+          
+          <div class="card-footer-text">
+            <i class="mdi mdi-calendar-blank mdi-md-grey mr-1"></i> 2021 March, 28
+          </div>
+          <a class="card-link text-muted text-lowercase" href="/posts/public/featured/2021/03/28/welcome-to-j1/#readmore">
+          Read · jekyll for everyone
+          </a>
+        </div>
+      </div>
+
+  </div>
+
+  </article>
+
+
+  <article class="card raised-z5 mb-5">
+    <h3 id="35983" class="card-header bg-primary">Welcome</h3>
+    <!-- h5 class="notoc card-subtitle text-muted mb-2">jekyll for everyone</h5 -->
+    <div class="card-body r-text-300">All 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.   Sounds fun, isn’t it?  ...</div>
+    <div class="card-footer r-text-200">
+      <div class="card-footer-text">
+        <i class="mdi mdi-calendar-blank mr-1"></i> 2021 March, 28
+      </div>
+      <a class="card-link md-grey-800 font-weight-bold g-font-size-12 text-uppercase" href="/posts/public/featured/2021/03/28/welcome-to-j1/#readmore">
+      Read · jekyll for everyone
+      </a>
+    </div>
+  </article>
+
+</div>
+
+<style>
+
+
+.g-bg-img-hero {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.g-px-0 {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+</style>
+
+++++

data/lib/starter_web/pages/_test_pages/cookieConsent.adoc

@@ -0,0 +1,96 @@
+---
+title:                                  J1
+tagline:                                Cookie Consent
+date:                                   2021-06-24 00:00:00 +100
+description: >
+                                        Bootstrap Cookie Consent Module
+                                        for J1 Template
+
+categories:                             [ Testpages ]
+tags:                                   [ Example ]
+
+scrollbar:                              false
+fab_menu_id:                            default
+
+advertising:                            false
+comments:                               false
+
+permalink:                              /pages/public/cookieConsent/
+regenerate:                             true
+
+resources:                              [ bsCookieConsent ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/cookies-1920x1200.jpg
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:badges-enabled:                        false
+
+//  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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+++++
+<div class="container">
+  <h2>Usage</h2>
+  <p>Initialize the cookie consent framework with the constructor</p>
+  <p><code>var cookieSettings = new BootstrapCookieConsent()</code></p>
+  <h3>Show the Dialog</h3>
+  <p>
+    On a new visit the dialog is shown automatically. For reconfiguration
+    show the Dialog again with <code>cookieSettings.showDialog()</code>.
+  </p>
+  <p>
+    <a href="javascript:showSettingsDialog()" class="btn btn-primary">Cookie Settings</a>
+  </p>
+  <h2>Read the settings</h2>
+  <p>Read all cookie settings with <code>cookieSettings.getSettings()</code></p>
+  <div class="card mb-4">
+    <div class="card-body">
+      <pre class="mb-0" id="settingsOutput"></pre>
+    </div>
+  </div>
+  <p>Read a specific cookie setting with <code>cookieSettings.getSettings('analyses')</code></p>
+  <div class="card">
+    <div class="card-body">
+      <pre class="mb-0" id="settingsAnalysisOutput"></pre>
+    </div>
+  </div>
+</div>
+
+<script>
+
+    function showSettingsDialog() {
+      j1.cookieConsent.showDialog();
+    }
+
+    var dependencies_met_cookie_consent_ready = setInterval (function (options) {
+      if ( typeof j1.cookieConsent !== 'undefined' ) {
+        $("#settingsOutput").text(JSON.stringify(j1.cookieConsent.getSettings()))
+        $("#settingsAnalysisOutput").text(j1.cookieConsent.getSettings('analyses'))
+        clearInterval(dependencies_met_cookie_consent_ready);
+      }
+    });
+
+</script>
+++++

data/lib/starter_web/pages/_test_pages/deepl.0.adoc

@@ -0,0 +1,258 @@
+---
+title:                                  Tester
+tagline:                                deepl
+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/deepl-0/
+regenerate:                             false
+
+resources:                              [ clipboard, rouge ]
+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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// https://github.com/EdwardBalaj/Simple-DeepL-API-Integration
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+== Deepl API V2
+
+An integration of the DeepL API that translates a given text from one language
+(default:English) to another language and outputs the translation.
+
+++++
+<div>
+	<!-- Keeps all elements in a well laid out form. -->
+	<form id="layout">
+		<!-- Source language part, also kept in its own element. -->
+		<div id="source">
+			<!-- Since English is the only option, it will default to it. -->
+			<select id="source-language" name="source-language">
+      <option value="DE">Auto</option>
+				<option value="EN">English</option>
+        <option value="DE">German</option>
+			</select>
+
+			<textarea type="text" id="original-text"></textarea>
+		</div>
+
+		<!-- Uses the translateText() function in the API-DeepL.js file to parse the input, s
+			 end it for translation, and then parse the response. -->
+		<input type="button" id="translate" onclick="translateText()" value="Translate">
+		</br>
+
+		<!-- Destination language part, also kept in its own element. -->
+		<div id="destination">
+			<!-- Since there are more destination languages, and they are all sorted in alphabetical order,
+			     Bulgarian is the default one. -->
+			<select id="destination-language" name="destination-language">
+				<option value="BG">Bulgarian</option>
+				<option value="ZH">Chinese</option>
+				<option value="CS">Czech</option>
+				<option value="DA">Danish</option>
+				<option value="NL">Dutch</option>
+				<option value="EN-US">English (American)</option>
+				<option value="EN-GB">English (British)</option>
+				<option value="EN">English (Others)</option>
+				<option value="ET">Estonian</option>
+				<option value="FI">Finnish</option>
+				<option value="FR">French</option>
+				<option selected value="DE">German</option>
+				<option value="EL">Greek</option>
+				<option value="HU">Hungarian</option>
+				<option value="IT">Italian</option>
+				<option value="JA">Japanese</option>
+				<option value="LV">Latvian</option>
+				<option value="LT">Lithuanian</option>
+				<option value="PL">Polish</option>
+				<option value="PT-PT">Portuguese (Portugal)</option>
+				<option value="PT-BR">Portuguese (Brazilian)</option>
+				<option value="PT">Portuguese (Others)</option>
+				<option value="RO">Romanian</option>
+				<option value="RU">Russian</option>
+				<option value="SK">Slovak</option>
+				<option value="SL">Slovenian</option>
+				<option value="ES">Spanish</option>
+				<option value="SV">Swedish</option>
+			</select>
+
+			<textarea type="text" id="translated-text"></textarea>
+		</div>
+
+	</form>
+</div>
+++++
+
+++++
+<style>
+
+textarea {
+	word-wrap: break-word;
+	min-width: 100%;
+	max-width: 100%;
+	min-height: 10em;
+}
+
+select {
+	display: block;
+	width: 10em;
+	margin: 1em 0;
+}
+
+</style>
+++++
+
+++++
+<script>
+
+/*
+	Author: Alexandru Edward Balaj
+	Date: 15/07/2021
+	Project: Simple DeepL API Integration
+	License: MIT License
+	File name: API-DeepL.js
+	File description: JavaScript algorithm that parses the input, sends it using the DeepL API,
+					  and then parses the output to display it.
+*/
+
+/*
+	The aim of the algorithm design laid out here,
+	was to create a module oriented way,
+	to help with futures updates and allow for easier error tracking.
+*/
+
+/*
+	Authentication key given in the specifications.
+*/
+// var AUTH_KEY = "5652c0b9-adcf-7f2e-f6a2-3a577f700dc9:fx";
+var AUTH_KEY = "fe1c56dc-1342-9899-26db-c5d701791e2d:fx";
+
+var TAG_HANDLING = "xml";
+/*
+	Since the specifications required for the website,
+	to accept only English text, the source language is coded here,
+	so that in the future, if required this could be easily changed.
+*/
+var SOURCE_LANG = "auto";
+
+/*
+	According to XMLHttpRequest specifications, when the request is done,
+	it returns a code ("4"), and when the status of the request is ok,
+	it returns another code ("200");
+*/
+var READYSTATE_DONE = 4;
+var STATUS_OK = 200;
+
+/*
+	Creates an xmlHttpRequest object as soon as the page has loaded.
+*/
+var xhr = new XMLHttpRequest();
+
+/*
+	Setup function for creating a request, designed as a module, according to DeepL API specifications.
+*/
+function setup() {
+	xhr.open("POST", "https://api-free.deepl.com/v2/translate", true);
+
+	xhr.setRequestHeader("Accept", "*/*");
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+  // xhr.setRequestHeader("tag_handling", "xml");
+	// xhr.setRequestHeader("User-Agent", "DeepL API Implementation");
+	// xhr.setRequestHeader("Content-Length", null);
+}
+
+/*
+	Prepare text function used to parse, or arrange text, designed as a module.
+	Currently it splits all text whenever a newline ("\n") is met,
+	so that it preserves the original layout of the text,
+	which would have otherwise been lost because of the way DeepL accepts multiple sentences.
+*/
+function prepareText(original_text) {
+	return original_text.split("\n");
+}
+
+/*
+	Translate text function which uses all the other modules, in order to create a request,
+	which is sent to the DeepL API to translate, and then display the result, designed as a module.
+*/
+function translateText() {
+	setup();
+
+	var target_language = document.getElementById("destination-language").value;
+
+	var original_text = document.getElementById("original-text").value;
+
+	original_text_lines = prepareText(original_text);
+
+	// Makes a request with every line, as a new text to translate.
+	var request = "";
+	for(var i = 0; i < original_text_lines.length; i++) {
+		request += "&text=" + original_text_lines[i];
+	}
+
+	xhr.onload = function () {
+		if (xhr.readyState === xhr.DONE) {
+			if (xhr.status === 200) {
+				// Uses JSON to parse the response.
+				var result = JSON.parse(xhr.responseText);
+
+				// Recreates the response as one text, which kept its original layout.
+				var translated_text = "";
+				for(var i = 0; i < result.translations.length; i++) {
+					translated_text += result.translations[i].text;
+					translated_text += "\n";
+				}
+
+				document.getElementById("translated-text").value = translated_text;
+			}
+		}
+	};
+
+	// Send the request to the server for translation.
+	//xhr.send("auth_key=" + AUTH_KEY + request + "&source_lang=" + SOURCE_LANG + "&target_lang=" + target_language);
+  xhr.send("auth_key=" + AUTH_KEY + request + "&target_lang=" + target_language + "&tag_handling=xml&ignore_tags=em");
+  //xhr.send("auth_key=" + AUTH_KEY + request + "&source_lang=" + SOURCE_LANG + "&target_lang=" + target_language + "tag_handling=" + TAG_HANDLING);
+}
+</script>
+++++