j1-template 2024.3.13 → 2024.3.14

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

@@ -0,0 +1,758 @@
+---
+title:                                  Features
+tagline:                                Modules, Extensions and Integrations
+
+date:                                   2021-01-01
+#last_modified:                         2023-01-01
+
+description: >
+                                        J1 Template is a Bootstrap V5 website template for the static
+                                        site generator Jekyll.
+                                        For Jekyll, a huge number of templates are available that cover
+                                        all typical 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 Template is different: easy to use, no programming
+                                        is needed.
+keywords: >
+                                        Jekyll, JekyllOne, Theme, Software, Modules, Extensions, Integrations
+
+categories:                             [ Features ]
+tags:                                   [ Module, Extension, Integration ]
+
+robots:
+  index:                                true
+  follow:                               true
+
+image:
+  path:                                 /assets/image/modules/attics/christina-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+regenerate:                             false
+permalink:                              /pages/public/features/template_features/
+
+resources:                              [
+                                          animate, comments, rouge,
+                                          lightbox, carousel,
+                                          masterslider, lightgallery, gallery,
+                                          videojs, vimeoplayer
+                                        ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/image/modules/attics/christina-1920x1280.jpg
+          alt:                          Photo by Christina on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Christina
+            href:                       //unsplash.com/@wocintechchat
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// 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
+
+//  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"]
+For Jekyll, a huge number of templates are available that cover all typical
+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.
+
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="mt-5"]
+== Modules
+
+The Template provides a large number of building blocks to create modern
+web pages in minutes. The base idea of the J1 Template is to give all people
+a toolset at their hands to create a website with no need to start web
+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]
+<<Screen reader>> +
+mdi:mouse-move-down[24px, md-blue ml-3 mr-2]
+<<Animate on Scroll>> +
+mdi:animation[24px, md-blue ml-3 mr-2]
+<<Floating Action Buttons>> +
+mdi:magnify[24px, md-blue ml-3 mr-2]
+<<Full-text search engine>> +
+mdi:cookie[24px, md-blue ml-3 mr-2]
+<<Cookie Consent>> +
+mdi:translate[24px, md-blue ml-3 mr-2]
+<<Translator>> +
+mdi:window-shutter[24px, md-blue ml-3 mr-2]
+<<Master Header>> +
+mdi:clipboard[24px, md-blue ml-3 mr-2]
+<<Clipboard>> +
+mdi:forwardburger[24px, md-blue mdi-rotate-90 ml-3 mr-2]
+<<Smooth Scroll>> +
+mdi:near-me[24px, md-blue ml-3 mr-2]
+<<Enhanced Navigation>> +
+mdi:lightbulb-on[24px, md-blue ml-3 mr-2]
+<<Lightboxes>> +
+mdi:view-carousel[24px, md-blue ml-3 mr-2]
+<<Text and Image Carousels>> +
+mdi:gesture-swipe[24px, md-blue ml-3 mr-2]
+<<Text and Image Sliders>> +
+mdi:folder-multiple-image[24px, md-blue ml-3 mr-2]
+<<Image and Video Galleries>>
+
+[role="mt-4"]
+=== Infinite scroll
+
+Infinite scrolling (IS), or known as endless scrolling, is a technique that
+loads more content as a user scrolls down the page. It allows visitors to
+continue reading the content by scrolling seamlessly and not by loading
+additional pages.
+
+J1 Template supports infinite scrolling and is used, for example, for loading
+previews of blog articles.
+
+[role="mt-4"]
+=== Screen reader
+
+Speak2Me for J1 Template is a speech synthesise (TTS) module that enables a
+so-called screen reader. The reader functionality allows users to sit back
+and listen to the browser read aloud the important contents on a Web page.
+
+The *screen reader* on websites created by J1 Template is started by
+clicking on the *speaker* symbol mdi:speaker[24px, md-blue] placed top
+right in the *menu bar*.
+
+[role="mt-4"]
+=== Animate on Scroll
+
+Scroll-triggered animation (AOS) is an effective way to animate website
+elements such as text, graphics, photos, and video, bringing them to life
+as users scroll down a page. Scroll animations are more likely to grab the
+user's attention, making websites look and feel more dynamic and
+interesting.
+
+[role="mt-4"]
+=== Floating Action Buttons
+
+The *Floating Action Button* (FAB) is an element of Google's Material Design.
+A FAB represents the primary action in an application, or triggers additional
+functions for a webpage. FABs are increasingly used on the web and serves to
+enable important actions for a page, but separated from the main navigation.
+
+.FAB (Menu)
+lightbox::images--fab[ 1920, {data-images--fab} ]
+
+The template system supports Floating Action Buttons for in-page navigation.
+When the FAB is pressed, it provides more related actions like showing the
+content table or scrolling a page chapter-wise up and down.
+
+[role="mt-4"]
+=== Full-text search engine
+
+Full-text search (FTS) for a website is an advanced method of searching
+through all documents. FTS promises fast retrieval of data with advanced
+indexing and more intuitive search results based on relevance.
+
+.Full-text search
+lightbox::images--full-text-search[ 1920, {data-images--full-text-search} ]
+
+J1 implements Lunr for indexing the whole website. The engine is designed
+to be small but full-featured. Lunr enables developers to provide visitors
+with a great search experience without the need for external, server-sided
+search services like Google on the internet.
+
+[role="mt-4"]
+=== Cookie Consent
+
+Running websites in the EU and many other countries, implementing the
+*General Data Protection Regulation* (GDPR) is required to make a website
+compliant with the *ePrivacy* regulations of the European Unions and
+associated countries.
+
+.Cookie Consent
+lightbox::images--cookie-consent[ 1920, {data-images--cookie-consent} ]
+
+Under the GDPR, *most cookies* will fall into the category of *personal data*
+because they can identify visitors and can be used to provide website
+personalization and even profiling of individuals. As a result, you will
+need a *legal basis* for processing the data contained within those cookies.
+That legal basis is most likely going to be the CONSENT of your visitors on
+accepting the use of cookies.
+
+The Template system provides a configurable GDPR compliant module to manage
+the consent of your visitors on cookies.
+
+[role="mt-4"]
+=== Translator
+
+A Website translation service is useful in a wide range of situations.
+In today’s interconnected and global world English is no longer enough.
+Most online content is still written in English, while the language is
+just ranked 3rd in terms of the highest number of native speakers among all
+languages worldwide.
+
+.Native speakers by language
+lightbox::lingohub--speakers-by-language[ 1920, {data-lingohub--speakers-by-language} ]
+
+Source: link:{url-lingohub--speakers-by-language}[lingohub.com, {browser-window--new}]
+
+In 2015 it was necessary to support 25 languages to reach 90 percent of the
+entire Internet population in their native language. By 2020, a website will
+require localization into 48 languages to reach the same proportion of the
+global Internet audience.
+
+Localization adapts a website to cultural backgrounds and local languages.
+Translation makes it easier for users to browse content and find what they’re
+looking for. An excellent user experience and understanding the language are
+key for building trust in the content you provide.
+
+.Translator configuration (j1_config.yml)
+[source, yaml, role="noclip"]
+----
+translation:
+  enabled:                     true
+  provider:                    google
+
+  google:
+    layout:                    default
+    sourcelanguage:            en
+    translationlanguages:      [auto]
+----
+
+J1 integrates the *free* translation service provided by Google Translate
+(GT) and the *professional* translation services of Deepl (DT). If you want
+to get a larger number of international audiences, translating your site can
+help target your global audience more easily and quickly.
+
+.Google Translator
+lightbox::images--translator[ 1920, {data-images--translator} ]
+
+GT is fully integrated with the GDPR-compatible Cookie Consent module. If your
+visitors do not agree on cookies required to use Google Translate, GT gets
+automatically disabled, and all cookies from Google are deleted from the
+user's system.
+
+[role="mt-4"]
+=== Master Header
+
+The most-top position of a web page is important; this postion is presented to
+your vistors very first. The Master Header (Attic) give your reader a first
+impression of what is presented on a page.
+
+Attics may contains (dynamic) *Text*, *Images* or *Videos* to support a page
+for the content presented.
+
+.Master Header (image-based)
+lightbox::images--master-header[ 1920, {data-images--master-header} ]
+
+[role="mt-4"]
+=== Clipboard
+
+The clipboard is a special function of the operating system of desktop or
+mobile computers that temporarily stores copied text or other data in memory.
+Once something is stored in the clipboard, comments, the user can paste the
+data to a new location.
+
+[TIP]
+====
+Click on the *COPY* button (top-right) in the following source code
+section.
+====
+
+.Clipboard
+[source, js]
+----
+// ---------------------------------------------------------------
+// helper functions
+// ---------------------------------------------------------------
+function styleSheetLoaded(styleSheet) {
+  var sheets     = document.styleSheets,
+      stylesheet = sheets[(sheets.length - 1)];
+
+  // find CSS file 'styleSheetName' in document
+  for(var i in document.styleSheets) {
+    if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
+      return true;;
+    }
+  }
+}
+----
+
+J1 integrates the clipboard functionality of your computer system to copy and
+paste examples or code elements from a webpage. A clipboard will help your
+users a lot to manage the code snippets you’ve provided.
+
+[role="mt-4"]
+=== Smooth Scroll
+
+Smooth scrolling (SSR) is an enhanced feature of J1 designed to improve
+scrolling and positioning on anchor links. If SSR is enabled, an animated
+transition is done for scrolling to headlines (anchor links) and gets
+exactly positioned.
+
+[role="mt-4"]
+=== Enhanced Navigation
+
+When it comes to the usability of a website, your visitors' focus is on one
+important component: the Navigation System. The Navigation System used by
+J1 Template is a multi-purpose navigation builder based on the _Bootstrap_ V5
+Framework.
+
+.Navigation Module (NAV)
+lightbox::images--nav-module[ 1920, {data-images--nav-module} ]
+
+The NAV module for J1 consists of four configurable sub-modules:
+
+* Navigation Bar
+* MainMenu
+* Quicklinks
+* TopSearch
+
+All features are available by configuration, and no programming is needed.
+
+.Configuration example for main menu entry  (navigator_menu.yml)
+[source, yaml, role="noclip"]
+----
+  # ------------------------------------------------------------------------------
+  # Menu MANUALS
+  #
+  - item:                                 Manuals
+    sublevel:
+
+      # --------------------------------------------------------------------------
+      # Resources
+      #
+      - title:                            Resources
+        icon:                             bread-slice
+        dropdown:
+          - title:                        Country Flags
+            href:                         /pages/public/manuals/resources/country_flags/
+            icon:                         flag
+          - title:                        MD Color Palette
+            href:                         /pages/public/manuals/resources/color_palette/
+            icon:                         format-color-fill
+----
+
+[role="mt-4"]
+=== Lightboxes
+
+A Lightbox is, in general, a helper which displays enlarged, almost
+screen-filling versions of images (or videos) while dimming the remainder
+of the page. For the J1 Template, two different lightboxes are available:
+
+* Lightbox V2
+* LightGallery
+
+The default tool employed by J1 Template is Lightbox V2, a Javascript library
+written by Lokesh Dhakar.
+
+.Markup to place a Lightbox V2 (Asciidoc)
+[source, apib, role="noclip"]
+----
+.Lightbox V2
+lightbox::lb-example--template-features[ 300, {data-lb-example--template-features}, group ]
+----
+
+.Lightbox V2
+lightbox::lb-example--template-features[ 300, {data-lb-example--template-features}, group ]
+
+For more complex use cases, like thumbnail gallery previews or video support,
+LightGallery can be used alternatively.
+
+.Markup to place a LightGallery (Asciidoc)
+[source, apib, role="noclip"]
+----
+.LightGallery
+gallery::jg_old_times[ role="mb-4 wm-800" ]
+----
+
+.LightGallery
+gallery::jg_old_times[ role="mb-4 wm-800" ]
+
+[role="mt-4"]
+=== Text and Image Carousels
+
+J1 Carousel is based on OWL Carousel, a clean and neat jQuery slider plugin
+for creating fully responsive and touch-enabled carousel sliders. Carousels
+are mostly used for pictures data to animate the images as a series.
+
+.Markup to place a Image carousel (Asciidoc)
+[source, apib, role="noclip"]
+----
+.Image carousel
+carousel::demo_simple[role="mb-3"]
+----
+
+.Image carousel
+carousel::demo_simple[role="mb-3"]
+
+In general, J1 Carousel supports many more sources to be displayed as a
+slide show: simple text, for example.
+
+.Markup to place a Text carousel (Asciidoc)
+[source, apib, role="noclip"]
+----
+.Text carousel
+carousel::demo_text_carousel[role="mb-3"]
+----
+
+.Text carousel
+carousel::demo_text_carousel[role="mb-3"]
+
+A more eye-minded type of text-based slide show is a parallax text slider.
+If you want to emphasize your statements focussing on the meaning, this kind
+of slide show may be interesting.
+
+.Markup to place a Parallax carousel (Asciidoc)
+[source, apib, role="noclip"]
+----
+.Parallax carousel
+carousel::demo_text_carousel_parallax[role="mb-3"]
+----
+
+.Parallax text carousel
+carousel::demo_text_carousel_parallax[role="mb-3"]
+
+[role="mt-4"]
+=== Text and Image Sliders
+
+Master Slider is a premium image and content slider for any purposes, with
+super smooth hardware accelerated transitions. MS is a well-known Slider Plugin
+for _WordPress_. J1 implements the *free* version MS Lite of version v2.85.13
+(Feb 2022).
+
+masterslider::ms_00005[role="mt-4 mb-5"]
+
+masterslider::ms_00006[role="mt-4 mb-5"]
+
+masterslider::ms_00009[role="mt-4 mb-5"]
+
+[role="mt-5"]
+=== Image and Video Galleries
+
+Image and Video Galleries allow you to lay out groups of images or videos
+in very different ways. J1 supports JustifiedGallery is a great jQuery plugin
+to create responsive, infinite, and high-quality justified image galleries.
+The gallery uses a so-called masonry grid layout. It works by placing
+elements in an optimal position based on available horizontal and vertical
+space. Sort of like mason fitting stones in a wall.
+
+.Markup to place the Image Gallery (Asciidoc)
+[source, apib, role="noclip"]
+----
+.Image Gallery
+gallery::jg_example[role="mb-5"]
+----
+
+.Image Gallery
+gallery::jg_customizer[role="mb-5"]
+
+A JustifiedGallery provides not only images. See the next example of a gallery
+for HTML5 video content.
+
+.Markup to place the Video Gallery (Asciidoc)
+[source, apib, role="noclip"]
+----
+.Video Gallery (HTML5)
+gallery::jg_video_html5[role="mb-5"]
+----
+
+.Video Gallery (HTML5)
+gallery::jg_video_html5[role="mb-5"]
+
+[role="mt-4"]
+== Extensions
+
+Frameworks like _Bootstrap_ and Asciidoc are enormously flexible and customizable.
+Changing or adding components to frameworks requires a lot of experience. That
+is not the idea of J1. Customizations for the base frameworks are prepared,
+simple to use, and usable out-of-the-box.
+
+mdi:bootstrap[24px, md-blue ml-3 mr-2]
+<<Bootstrap extensions>> +
+mdi:group[24px, md-blue ml-3 mr-2]
+<<Blog Post Navigation>> +
+mdi:format-annotation-plus[24px, md-blue ml-3 mr-2]
+<<Block elements>> +
+mdi:near-me[24px, md-blue ml-3 mr-2]
+<<Asciidoctor extensions>> +
+mdi:content-duplicate[24px, md-blue ml-3 mr-2]
+<<Featured example content>> +
+mdi:image[24px, md-blue ml-3 mr-2]
+<<Royalty Free Images>>
+
+[role="mt-4"]
+=== Bootstrap extensions
+
+A set of Advanced Bootstrap Modals (ABM), based on the free package of Material
+Design for Bootstrap, is integrated with the template system. _Bootstrap_
+modals are used to add dialogues to your web pages for user notifications.
+
+To improve your visitor’s experience on important information that shouldn’t
+be missed. ABMs are a great choice to bring the user’s attention. Using the
+J1 Template predefined modal styles, some emotional weight is added to the
+information displayed. Ranging from an info level, a simple warning to
+critical messages.
+
+Creating a design for responsive HTML tables is challenging. J1 integrates
+responsible HTML tables for _Bootstrap_ to be used for Mobile Devices.
+
+.Responsible HTML table (RTable)
+[cols="6a,6a", options="header", width="100%", role="rtable mt-3"]
+|===
+|Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
+|`page.title`
+|The title of the Page.
+
+|`page.date`
+|The Date assigned to the Post. This can be overridden in a
+Post's front matter by specifying a new date/time in the format
+`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
+(to specify a time zone using an offset from UTC. e.g.
+`2008-12-14 10:30:00 +0900`).
+|===
+
+[role="mt-4"]
+=== Blog Post Navigation
+
+To make your Blog Articles available to your vistors, J1 offers an easy to use
+navigation module for all your posts. The Blog Post Navigator automatically
+generates different views to explore articles by Categoy, Date, or all posts
+from an Archive View.
+
+.Blog Post Navigator
+lightbox::images--blog-post-navigator[ 1920, {data-images--blog-post-navigator} ]
+
+[role="mt-4"]
+=== Block elements
+
+Banners and panels are complex but configurable building blocks, typically
+used for home and landing pages. Examples how to use banners and panels
+can be found with the included starter web for the homepage.
+
+.Teaser Banner
+lightbox::images--teaser-banner[ 1920, {data-images--teaser-banner} ]
+
+.Intro Panel
+lightbox::images--intro-panel[ 1920, {data-images--intro-panel} ]
+
+[role="mt-4"]
+=== Asciidoctor extensions
+
+J1 Template implements a bunch of incubating Ruby-based extensions for
+Asciidoctor. Using Asciidoctor extensions, it's easy to integrate lightboxes,
+galleries, icon fonts, and other complex elements using Asciidoc tags with
+your content pages.
+
+.MDI Icons
+[source, noformat, role="noclip"]
+----
+mdi:home[2x, mdi-pulsed ml-3 mr-2 mb-2] Symbol icon (pulsed)
+mdi:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon
+mdi:apple[2x, md-indigo ml-3 mr-2] Brand icon (colored)
+----
+
+[.result]
+====
+mdi:home[2x, mdi-pulsed ml-3 mr-2 mb-2] Symbol icon (pulsed) +
+mdi:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
+mdi:apple[2x, md-indigo ml-3 mr-2] Brand icon (colored)
+====
+
+[role="mt-4"]
+=== Featured example content
+
+All pages from the roundtrip section are provided by the starter web
+included with the J1 Template. Many real-world examples for your content
+could be taken from these pages and are easy to use with your website.
+
+.Example Content (Icon Fonts)
+lightbox::images--example-content[ 1920, {data-images--example-content} ]
+
+[role="mt-4"]
+=== Royalty Free Images
+
+All images for a *Starter Web*, for example, from the roundtrip section, are
+included with J1 Template. All images are taken from Unsplash.com as
+*Royalty Free* images and can be used without paying any license fees.
+
+
+[role="mt-5"]
+== Integrations
+
+The Internet of today has changed a lot. The new digital world is called the cloud.
+Services out of the cloud is a fast-growing business. J1 Template integrates cloud
+services to extend the functionality of a web for commenting features or Bootstrap
+themes, for example.
+
+mdi:theme-light-dark[2x, md-blue ml-3 mr-2]
+<<Bootstrap Themes>> (Bootswatch) +
+mdi:comment[2x, md-blue ml-3 mr-2]
+<<Comment providers>> +
+mdi:google-analytics[2x, md-blue ml-3 mr-2]
+<<Google Analytics>> +
+mdi:google-ads[2x, md-blue ml-3 mr-2]
+<<Google Adsense>> +
+mdi:youtube[2x, md-blue ml-3 mr-2]
+<<YouTube Video>> +
+mdi:vimeo[2x, md-blue ml-3 mr-2]
+<<Vimeo Video>>
+
+[role="mt-4"]
+=== Bootstrap Themes
+
+The Themes for the template system J1 are based on the free and Open Source
+CSS front-end framework _Bootstrap_ of version V5. Using _Bootstrap_ base style
+only results in a uniform appearance for the content in terms of the overall
+layout, text, tables, and form elements across all modern web browsers
+available on the market.
+
+Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
+a great set of already prepared _Bootstrap_ stylesheets in various designs are
+available on their website. There is no need to start from scratch. Re-define
+all the _Bootstrap_ variables, and rebuild the framework files to create a new
+theme.
+
+.Bootswatch Themes (Minty)
+lightbox::images--bootswatch-themes[ 1920, {data-images--bootswatch-themes} ]
+
+Many different styles are available. What is already available at
+link:{url-bootswatch--home}[Bootswatch, {browser-window--new}] is at least a
+good base for your modifications: your unique design. J1 integrates all
+available themes from _Bootswatch_ with the navigator module.
+
+[role="mt-4"]
+=== Comment providers
+
+Comments became an integral part of almost each website on the web. People
+want to talk about what they currently read on your web, listen to or see.
+And they want it right there, under what they’ve read or seen, not on their
+social networks.
+
+J1 Template supports currently two comment providers: Disqus (DQC) and
+Hyvor (HVC). The comment interfaces from the supported providers can be
+integrated by pure configuration.
+
+.Comments by Hyvor Talk
+lightbox::images--comments-hyvor[ 1920, {data-images--comments-hyvor} ]
+
+Enable the provider you want to use and add your access credentials to the
+configuration, and you're done. On all posts or pages you want to use for
+comments, the comment interface is shown automatically and can be used by
+your visitors.
+
+.Comments configuration for Hyvor (j1_config.yml)
+[source, yaml, role="noclip"]
+----
+  comments:
+    enabled:                              true
+    provider:                             hyvor
+
+    comments_headline:
+      en:                                 Leave a comment
+      de:                                 Kommentieren
+
+    hyvor:
+      site_id:                           'hyvor-site-id'
+
+    disqus:
+      site_id:                           '<your-site-short-name>'
+----
+
+DQC is fully integrated with the GDPR-compatible Cookie Consent module. If
+your visitors do not agree on cookies needed for Diqus, DQC gets
+automatically disabled, and all related cookies are deleted from the user's
+system.
+
+[role="mt-4"]
+=== Google Analytics
+
+Google Analytics (GAL) provides access to a massive amount of data related
+to how users find and interact with your site. For example, you can see how
+many people visited a specific page, how long they remained there, where your
+users live, how certain keywords perform, and so forth.
+
+Google Analytics is integrated by pure configuration. Simply enable the
+provider and set your your access credentials to the configuration, and
+you're done.
+
+.Google Analytics configuration (j1_config.yml)
+[source, yaml, role="noclip"]
+----
+  analytics:
+    enabled:                              true
+    provider:                             google
+
+    google:
+      tracking_id:                        '<your-tracking-id>'
+----
+
+GAL is fully integrated with the GDPR-compatible Cookie Consent module.
+If your visitors do not agree on cooies for *Analysis*, Google Analytics gets
+automatically disabled and all cookies from Google are deleted from the
+user's system.
+
+[role="mt-4"]
+=== Google Adsense
+
+Google Adsense (GAD) is integrated by pure configuration. Simply enable the
+provider and set your your access credentials to the configuration, and
+you're done.
+
+[role="mt-4"]
+=== YouTube Video
+
+J1 Template supports YouTube and Vimeo video content out-of-the-box.
+The type of content is *automatically detected* with your video galleries
+configured, and the player is started as needed.
+
+.Asciidoc Markup
+[source, apib, role="noclip"]
+----
+gallery::jg_video_online_youtube_james_and_adele[]
+----
+
+.YouTube Video
+gallery::jg_video_online_youtube_james_and_adele[role="mb-5"]
+
+[role="mt-4"]
+=== Vimeo Video
+
+J1 Template supports Vimeo video content out-of-the-box. The type of content
+is *automatically detected* with your video galleries configured, and the
+player is started as needed.
+
+.Asciidoc Markup
+[source, apib, role="noclip"]
+----
+gallery::jg_video_online_vimeo[role="mb-5"]
+----
+
+.Vimeo Video
+gallery::jg_video_online_vimeo[role="mb-7"]