j1-template 2024.3.13 → 2024.3.14

data/lib/starter_web/assets/image/modules/icons/social/scalable/icon-twitter-x-28.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 24 56.571429"
+   width="28"
+   height="66"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="icons8-twitterx-28.svg"
+   inkscape:export-filename="D:\j1\github\j1-theme\j1-template\packages\300_theme_src\assets\image\modules\icons\social\twitter_x.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2256"
+     inkscape:window-height="1246"
+     id="namedview6"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:showpageshadow="false"
+     inkscape:zoom="15.212121"
+     inkscape:cx="8.87251"
+     inkscape:cy="31.942837"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 0.1515004,0.09387754 8.8052428,12.742245 0.60645907,22.545215 H 3.8268994 l 6.4194426,-7.695722 5.264182,7.695722 h 8.427454 L 14.886445,9.2926893 22.558809,0.09387754 H 19.388391 L 13.450108,7.1878765 8.6051561,0.09387754 Z M 4.8344778,2.5884705 H 7.3331775 L 19.257381,20.050622 h -2.477262 z"
+     id="path2"
+     style="stroke-width:1.23336;fill:#a8cbfe" />
+  <path
+     d="M 0.16495004,33.749791 8.7775961,46.534629 0.61774819,56.44337 H 3.8228945 l 6.3889565,-7.778755 5.239183,7.778755 h 8.387431 l -9.008547,-13.395515 7.635928,-9.298064 h -3.15536 l -5.910083,7.17054 -4.8219437,-7.17054 z m 4.66073806,2.52151 H 7.312521 l 11.867576,17.65056 H 16.7146 Z"
+     id="path2-8"
+     style="fill:#0d6efd;stroke-width:1.23705" />
+</svg>

data/lib/starter_web/assets/image/modules/icons/social/scalable/icon-twitter-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px"><path d="M 2.3671875 3 L 9.4628906 13.140625 L 2.7402344 21 L 5.3808594 21 L 10.644531 14.830078 L 14.960938 21 L 21.871094 21 L 14.449219 10.375 L 20.740234 3 L 18.140625 3 L 13.271484 8.6875 L 9.2988281 3 L 2.3671875 3 z M 6.2070312 5 L 8.2558594 5 L 18.033203 19 L 16.001953 19 L 6.2070312 5 z"/></svg>

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1",
-  "version": "2024.3.13",
+  "version": "2024.3.14",
   "description": "J1 Template",
   "homepage": "https://your.site",
   "author": {
@@ -27,7 +27,6 @@
     "ruby_gemfile": "Gemfile",
     "ruby_userize": "true",
     "ruby_vendorize": "true",
-    "mode": "production",
     "loglevel": "silent"
   },
   "engines": {
@@ -46,14 +45,12 @@
     "app": "run-p -s app:*",
     "app:rackup": "cross-env INTERFACE=$npm_package_config_jekyll_app_interface PORT=$npm_package_config_jekyll_app_port bundle exec puma -C _data/puma/config.rb",
     "app:open": "npm run delay-3s && cross-var open-cli $npm_package_config_jekyll_app_url",
-
     "build": "run-s -s build:*",
     "build:info": "echo build site incremental ..",
     "build:do": "bundle exec jekyll b --incremental",
     "postbuild": "run-s -s postbuild:*",
     "postbuild:finished": "echo .. build finished.",
     "postbuild:hint": "echo to open the site, run: yarn site",
-
     "bundle": "run-s -s bundler:*",
     "bundler:info": "echo create bundle ..",
     "bundler:clean": "shx rm -f Gemfile.lock",
@@ -64,7 +61,6 @@
     "bundle_vendor:info": "echo bundle rubies using vendor path ..",
     "bundle_vendor:set-path": "bundle config set --local path ./vendor",
     "bundle_vendor:bundle": "bundle install",
-
     "clean": "run-s -s clean-site && run-s clean:*",
     "clean-site": "echo clean up site files .. && bundle exec jekyll clean",
     "clean:start": "echo clean up projects files ..",
@@ -73,43 +69,36 @@
     "clean:etc-folder": "echo remove etc folder .. && shx rm -rf etc",
     "clean:logfiles": "echo remove various log files .. && shx rm -f *.log",
     "clean:locks": "echo remove lock files .. && shx rm -f *.lock && shx rm -f package-lock.json",
-
     "delay-1s": "node ./node_modules/npm-delay 1000",
     "delay-2s": "node ./node_modules/npm-delay 2000",
     "delay-3s": "node ./node_modules/npm-delay 3000",
     "delay-5s": "node ./node_modules/npm-delay 5000",
-
     "j1-app": "run-p -s app:*",
-
     "j1-site": "run-p -s j1-site:*",
     "j1-site:jekyll": "echo startup the site .. && cross-var bundle exec jekyll serve --config $npm_package_config_jekyll_config_file --port $npm_package_config_jekyll_port --livereload-port $npm_package_config_jekyll_livereload_port $npm_package_config_jekyll_option_incremental $npm_package_config_jekyll_option_livereload $npm_package_config_jekyll_option_initial_build $npm_package_config_jekyll_option_watch --open 2>jekyll.log",
-
     "rebuild": "run-s -s rebuild:* && run-s -s post-rebuild:*",
     "rebuild:info": "echo rebuild site incremental ..",
     "rebuild:clean": "echo clean up site files .. && bundle exec jekyll clean",
     "rebuild:do": "bundle exec jekyll b --incremental",
-
     "post-rebuild": "run-s -s postrebuild:*",
     "post-rebuild:finished": "echo .. rebuild finished.",
     "post-rebuild:hint": "echo to open the site, run: yarn site",
-
     "reset": "run-s -s reset:*",
     "reset:start": "echo reset project to factory state ..",
     "reset:base-clean-files": "echo cleaning up .. && npm --silent run clean",
-    "reset:finished": "echo done.",
-
+    "reset:finished": "echo done. && shx echo",
     "setup": "npm --silent run setup-start && npm --silent run setup-base && run-s -s setup:*",
     "setup-start": "echo prepare project control && npm --silent install shx && echo done. && shx echo && echo setup development system for first use ..",
-    "setup-base": "echo installing base modules .. && echo installing base project modules .. > install.log && npm install shx npm-run-all cross-var cross-env >> install.log && echo done. >> install.log && shx echo >> install.log && echo done.",
+    "setup-base": "echo installing base modules .. && echo installing base project modules .. > install.log && npm install shx npm-run-all cross-var cross-env >> install.log && echo done. >> install.log && shx echo >> install.log && echo done. && shx echo",
     "setup:env": "echo configure environment .. && run-s -s set-env:*",
-    "set-env:loglevel": "cross-var npm config set jekyll_one_com:loglevel  $npm_package_config_loglevel",
-    "set-env:mode": "cross-var npm config set jekyll_one_com:mode $npm_package_config_mode && echo done.",
+    "set-env:loglevel": "cross-var npm config set jekyll_one_com:loglevel $npm_package_config_loglevel && echo done.",
     "setup:create-folders": "echo create project folders ..",
     "setup:create-log-folder": "echo create log folder .. && shx mkdir ./log",
     "setup:create-log-archived-folder": "echo create archived log folder .. && shx mkdir ./log/archived",
     "setup:create-etc-folder": "echo create etc folder .. && shx mkdir ./etc && echo done.",
-    "setup:node-modules": "shx echo && echo installing main project modules .. && shx echo >> install.log && echo installing main project modules .. >> install.log && npm --silent install >> install.log && echo done. >> install.log && shx echo >> install.log && echo done.",
-    "setup:detect-os": "echo detect OS .. && cross-var if-env OS=Windows_NT && cross-var echo \"os detected: $OS\" || OS=$(echo $(getos)) && echo \"os detected: $OS\" && echo done.",
+    "setup:node-modules": "shx echo && echo installing main project modules .. && shx echo >> install.log && echo installing main project modules .. >> install.log && npm --silent install >> install.log && echo done. >> install.log && shx echo >> install.log && echo done. && shx echo",
+    "setup:detect-os": "echo detect OS .. && cross-var if-env OS=Windows_NT && cross-var echo \"os detected: $OS\" || OS=$(echo $(getos)) && echo \"os detected: $OS\" && echo done. && shx echo",
+    "setup:finished": "echo done. && shx echo",
     "setup:site": "run-s -s build"
   },
   "dependencies": {

data/lib/starter_web/pages/public/amplitude_yt_tester.adoc

@@ -0,0 +1,218 @@
+---
+title:                                  Amplitude YT Tester
+title_extention:                        YT Video Integration
+tagline:                                YT Video Integration
+
+date:                                   2024-09-21
+#last_modified:                         2024-01-01
+
+description: >
+                                        The J1 Template support playing video on web pages
+                                        by HTML5 Video, the new standard of HTML to show
+                                        videos on web pages.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        html, html5, video, support, flash player,
+                                        quicktime, silverlight
+
+categories:                             [ Roundtrip ]
+tags:                                   [ Module, Video ]
+
+image:
+  path:                                 /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+attic:                                  false
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/amplitude_yt_tester/
+
+resources:                              [ amplitudejs ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+          alt:                          Video Tester
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+The J1 Template support playing video on web pages by HTML5 Video, the new
+standard of HTML to show videos on webpages.
+
+Modern browsers support the video tag `<video>` for the new HTML5 video
+standard. The previous proprietary de facto standard software like
+_Flash Player_, _Quicktime_, or _Silverlight_ is no longer needed as the
+Jekyll theme J1 provides HTML5 Video support for local video content
+and from online sources on the Internet.
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="mt-4"]
+== YouTube Audio
+
+// https://www.youtube.com/watch?v=7_WWz2DSnT8
+//
+// https://www.youtube.com/watch?v=WxcWO9O4DSM, 19:58, Tchaikovsky - Romeo and Juliet: Fantasy Overture
+// https://www.youtube.com/watch?v=zAmDwCz2BOs
+// https://www.youtube.com/watch?v=ryxAe4B_3Pg
+// https://www.youtube.com/watch?v=wI1Rr29OCJM
+
+You can embed any YouTube video in your web pages and visitors on your
+site will be able to play and pause the video audio with a simple click.
+With this technique, you can also use a YouTube video as background audio
+that runs in a loop.
+
+[TIP]
+====
+The audio player is created using the YouTube API. Read the full Tutorial at:
+http://www.labnol.org/internet/youtube-audio-player/26740/[Embed YouTube as an Audio Player, {browser-window--new}]
+====
+
+[role="mt-4"]
+=== How to Embed YouTube Audio
+
+It takes just one step to embed a YouTube audio. Open any YouTube video
+and make a note of the YouTube Video ID (a string of 11 characters).
+
+Next copy-paste the code below anywhere on your website and replace
+VIDEO_ID with actual ID of your YouTube video.
+
+[source, html]
+----
+<div data-video="VIDEO_ID" data-autoplay="0" data-loop="1" id="youtube-audio"></div>
+<script src="https://www.youtube.com/iframe_api"></script>
+<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
+----
+
+There are few other configuration parameters that you can change depending
+on requirements. For instance, if you set data-autoplay to 1, the audio will
+begin playing immediately on page load. Likewise, set data-loop to 1 and the
+audio will play continuously in a never-ending loop until manually stopped.
+
+This internally renders the YouTube video using the IFRAME player and would
+thus work on both desktop and mobile browsers. The JavaScript files are hosted
+on Github while the images are hosted on Imgur. It is recommended that you
+copy the assets to your own server before deploying on a heavy-traffic website.
+
+[role="mt-4"]
+=== Technical Details
+
+We are using the YouTube JavaScript API that renders a regular YouTube player
+but with the width and height set to *0 pixels*. When the user clicks the
+audio button, it toggles the existing YouTube player state and the video
+begins to play or pauses.
+
+Here’s the annotated version of the source code. It can be extended to embed
+YouTube playlists, the default playback volume can be changed or you even
+https://www.labnol.org/internet/embed-part-of-youtube-video/27948/[embeda part, {browser-window--new}]
+of the video.
+
+////
+[role="mt-5"]
+=== YT Player
+++++
+<!-- 1. The <iframe> (and video player) will replace this <div> tag.            -->
+<!-- =========================================================================== -->
+<div style="display:flex;justify-content:center;align-items:center;">
+  <div id="youtube-audio1" data-video="WxcWO9O4DSM" data-autoplay="0" data-loop="1"></div>
+  <div id="youtube-audio2" data-video="zAmDwCz2BOs" data-autoplay="0" data-loop="1"></div>
+  <!-- div id="youtube-audio2"></div -->
+  <div id="youtube-audio3" data-video="ryxAe4B_3Pg" data-autoplay="0" data-loop="1"></div>
+  <div id="youtube-audio4" data-video="wI1Rr29OCJM" data-autoplay="0" data-loop="1"></div>
+</div>
+++++
+
+++++
+<script>
+  $(function() {
+
+    // Load the IFrame Player API code asynchronously.
+    var techScript;
+
+    var tech    = document.createElement('script');
+    tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/youtube.js";
+    techScript  = document.getElementsByTagName('script')[0];
+
+    techScript.parentNode.insertBefore(tech, techScript);
+
+  });
+</script>
+++++
+////
+
+[role="mt-5"]
+== Amplitude Player
+
+lorem:sentences[5]
+
+.Mimi Rutherfurt · Maritim Verlag (YouTube)
+amplitude::mimi_rutherfurt_yt_large[role="mt-4 mb-8"]
+
+++++
+<script>
+  $(function() {
+
+    // Load the IFrame Player API code asynchronously.
+    var techScript;
+
+    var tech    = document.createElement('script');
+    tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js";
+    techScript  = document.getElementsByTagName('script')[0];
+
+    techScript.parentNode.insertBefore(tech, techScript);
+
+  });
+</script>
+++++
+////
+[[ms_video]]
+== MS Slider using YouTube Video
+
+lorem:sentences[5]
+
+.Slider using Video
+masterslider::ms_00010[role="mt-4 mb-5"]
+
+
+[role="mt-5"]
+== YouTube Video
+
+YouTube is a popular online video-sharing platform that allows users to
+upload, view, share, and comment on videos. The platform provides services
+for people and organizations to publish various video content.
+
+.Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift
+youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mt-4 mb-5"]
+
+
+[role="mt-5"]
+== Local Video
+
+VideoJS provides a flexible and customizable platform for displaying and
+controlling MPEG 4 video content on websites and web applications.
+
+.Video over VideoJS
+gallery::jg_video_html5_videojs[role="mt-4 mb-5"]
+////

data/lib/starter_web/pages/public/features/template.adoc

@@ -33,10 +33,9 @@ regenerate:                             false
 permalink:                              /pages/public/features/template_features/
 
 resources:                              [
-                                          animate, comments, rouge,
-                                          lightbox, carousel,
-                                          masterslider, lightgallery, gallery,
-                                          videojs, vimeoplayer
+                                          amplitudejs, lightbox, carousel,
+                                          master-slider, lightgallery, gallery,
+                                          videojs, vimeo-player
                                         ]
 resource_options:
   - attic:
@@ -57,8 +56,8 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:url-fontawesome--home:                 https://fontawesome.com/
-:url-roundtrip--mdi-icons:              /pages/public/tour/mdi_icon_font/#material-design-icons
+:url-fontawesome--home:                 //fontawesome.com/
+:url-roundtrip--mdi-icons:              /pages/public/learn/roundtrip/mdi_icon_font/#material-design-icons
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -77,7 +76,7 @@ use cases for websites. The bad story: most of them require programming and
 low-level customization. Deep knowledge of Jekyll and valuable experience
 using HTML, CSS, and Javascript is required.
 
-J1 is different: easy to use, no programming is needed.
+*J1 is different: easy to use, no programming is needed.*
 
 
 // Include sub-documents (if any)
@@ -93,6 +92,8 @@ development or web design from the beginning.
 mdi:mouse-move-down[24px, md-blue ml-3 mr-2]
 <<Infinite scroll>> +
 mdi:speaker[24px, md-blue ml-3 mr-2]
+<<AmplitudeJS Player>> +
+mdi:speaker[24px, md-blue ml-3 mr-2]
 <<Screen reader>> +
 mdi:mouse-move-down[24px, md-blue ml-3 mr-2]
 <<Animate on Scroll>> +
@@ -121,7 +122,7 @@ mdi:gesture-swipe[24px, md-blue ml-3 mr-2]
 mdi:folder-multiple-image[24px, md-blue ml-3 mr-2]
 <<Image and Video Galleries>>
 
-[role="mt-4"]
+[role="mt-5"]
 === Infinite scroll
 
 Infinite scrolling (IS), or known as endless scrolling, is a technique that
@@ -132,6 +133,15 @@ additional pages.
 J1 Template supports infinite scrolling and is used, for example, for loading
 previews of blog articles.
 
+[role="mt-4"]
+=== AmplitudeJS Player
+
+J1 Template provides playing audio on web pages by HTML5 and supports custom
+players created by AmplitudeJS to playback audio individually.
+
+.Emancipator · From Dusk To Dawn
+amplitude::free_emancipator_large[role="mt-3 mb-5"]
+
 [role="mt-4"]
 === Screen reader