j1-template 2023.4.4 → 2023.5.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/themes/j1/layouts/layout_metadata_generator.html +8 -1
- data/assets/themes/j1/adapter/js/analytics.js +6 -3
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/Gemfile +2 -2
- data/lib/starter_web/README.md +5 -5
- data/lib/starter_web/_config.yml +11 -10
- data/lib/starter_web/_data/modules/analytics.yml +4 -3
- data/lib/starter_web/_data/modules/defaults/analytics.yml +1 -1
- data/lib/starter_web/_data/templates/feed.xml +1 -1
- data/lib/starter_web/_data/templates/seo-tags.html +3 -6
- data/lib/starter_web/_data/templates/sitemap.xml +7 -5
- data/lib/starter_web/_plugins/filter/debug.rb +1 -1
- data/lib/starter_web/_plugins/filter/encodeBase64.rb +1 -1
- data/lib/starter_web/_plugins/filter/encryptAES.rb +1 -1
- data/lib/starter_web/_plugins/filter/filters.rb +1 -1
- data/lib/starter_web/_plugins/filter/liquify.rb +22 -0
- data/lib/starter_web/_plugins/filter/minifyJS.rb +1 -1
- data/lib/starter_web/_plugins/filter/minifyJSON.rb +1 -1
- data/lib/starter_web/_plugins/filter/prettify.rb +1 -1
- data/lib/starter_web/_plugins/filter/xml_prettify.rb +1 -1
- data/lib/starter_web/_plugins/index/lunr.rb +1 -1
- data/lib/starter_web/_plugins/seo/j1-seo-tags.rb +21 -19
- data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb +5 -7
- data/lib/starter_web/collections/posts/public/featured/_posts/2021-01-01-about-cookies.adoc +3 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/2021-02-01-static-site-generators.adoc +4 -1
- data/lib/starter_web/collections/posts/public/featured/_posts/2022-02-01-about-j1.adoc +3 -0
- data/lib/starter_web/index.html +12 -7
- data/lib/starter_web/package.json +2 -9
- data/lib/starter_web/pages/public/about/features.adoc +3 -3
- data/lib/starter_web/pages/public/about/reporting_issues.adoc +6 -3
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/000_intro.adoc +4 -1
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/100_converter.adoc +4 -1
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/200_themes.adoc +4 -1
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/_includes/documents/000_intro.asciidoc +1 -1
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/documentation.a2p +3 -3
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/documentation.adoc +5 -2
- data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/multi.adoc +5 -2
- data/lib/starter_web/pages/public/asciidoc_skeletons/simple-document/simple.adoc +5 -2
- data/lib/starter_web/pages/public/blog/navigator/archive/allview.html +5 -2
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +5 -2
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +5 -2
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +5 -2
- data/lib/starter_web/pages/public/blog/navigator/index.html +5 -2
- data/lib/starter_web/pages/public/features/general.adoc +11 -8
- data/lib/starter_web/pages/public/features/template.adoc +18 -15
- data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_all_books.adoc +4 -1
- data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_biography.adoc +4 -1
- data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_fantasy.adoc +3 -1
- data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_romance.adoc +3 -1
- data/lib/starter_web/pages/public/learn/bookshelf/jekyll_collections.adoc +3 -1
- data/lib/starter_web/pages/public/learn/bs_sass_variables/bs_sass_variables.adoc +3 -1
- data/lib/starter_web/pages/public/learn/core_web_vitals/core_web_vitals.adoc +3 -1
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/themes_bootstrap.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/asciidoc_extensions.adoc +13 -10
- data/lib/starter_web/pages/public/learn/roundtrip/bootstrap_themes.adoc +7 -4
- data/lib/starter_web/pages/public/learn/roundtrip/highlghter_rouge.adoc +5 -2
- data/lib/starter_web/pages/public/learn/roundtrip/icon_fonts.adoc +16 -13
- data/lib/starter_web/pages/public/learn/roundtrip/lunr_search.adoc +9 -6
- data/lib/starter_web/pages/public/learn/roundtrip/modal_extentions.adoc +8 -5
- data/lib/starter_web/pages/public/learn/roundtrip/present_images.adoc +20 -17
- data/lib/starter_web/pages/public/learn/roundtrip/present_videos.adoc +9 -6
- data/lib/starter_web/pages/public/learn/roundtrip/responsive_tables.adoc +10 -7
- data/lib/starter_web/pages/public/learn/roundtrip/typography.adoc +8 -5
- data/lib/starter_web/pages/public/learn/where_to_go.adoc +10 -7
- data/lib/starter_web/pages/public/legal/en/100_copyright.adoc +4 -1
- data/lib/starter_web/pages/public/legal/en/200_impress.adoc +4 -1
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +5 -2
- data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc +4 -1
- data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc +12 -9
- data/lib/starter_web/pages/public/plans/plans.adoc +4 -1
- data/lib/starter_web/pages/public/tools/cheatsheet/gem.adoc +4 -1
- data/lib/starter_web/pages/public/tools/cheatsheet/git.adoc +4 -1
- data/lib/starter_web/pages/public/tools/cheatsheet/j1.adoc +4 -1
- data/lib/starter_web/pages/public/tools/cheatsheet/yaml.adoc +6 -3
- data/lib/starter_web/pages/public/tools/previewer/preview_bootstrap_theme.adoc +11 -8
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +3 -2
@@ -1,9 +1,12 @@
|
|
1
1
|
---
|
2
2
|
title: Extensions
|
3
3
|
tagline: Asciidoctor Enhancements
|
4
|
-
date: 2020-11-07
|
4
|
+
date: 2020-11-07
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
6
|
-
J1
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
9
|
+
J1 Template implements some handy Ruby-based enhancements for Asciidoctor.
|
7
10
|
Providing extensions for a Jekyll theme is a unique feature of
|
8
11
|
JekyllOne (J1) compared to other Jekyll themes and templates.
|
9
12
|
Most extensions are based on well-documented examples from the
|
@@ -55,7 +58,7 @@ resource_options:
|
|
55
58
|
// Page content
|
56
59
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
57
60
|
[role="dropcap"]
|
58
|
-
J1
|
61
|
+
J1 Template implements some handy Ruby-based enhancements for Asciidoctor.
|
59
62
|
Providing extensions for a Jekyll theme is a unique feature of JekyllOne
|
60
63
|
compared to other Jekyll themes and templates. All already implemented
|
61
64
|
Asciidoctor extensions you'll find below. Additional valuable extensions
|
@@ -73,7 +76,7 @@ the Asciidoctor user manual.
|
|
73
76
|
[role="mt-4"]
|
74
77
|
== Asciidoc Result Extension
|
75
78
|
|
76
|
-
J1
|
79
|
+
J1 Template adds a simple Javascript based on the `View Result Extension` to
|
77
80
|
any `listingblock`. The extension adds an interactive toggle button `VIEW`
|
78
81
|
to the output of an Asciidoc listing block box placed to the top right of
|
79
82
|
the example box. If a result block `[.result]` is placed under a `listingblock`,
|
@@ -273,7 +276,7 @@ of the page. The technique, introduced by Lightbox V2, gained widespread
|
|
273
276
|
popularity thanks to its simple style. The term lightbox has been employed
|
274
277
|
since then for Javascript libraries to support such functionality.
|
275
278
|
|
276
|
-
To make the use of the built-in lightbox easier, the J1
|
279
|
+
To make the use of the built-in lightbox easier, the J1 Template offers an
|
277
280
|
Asciidoc extension: the lightBox block macro. The block macro `lightbox::`
|
278
281
|
embeds one or more images into the output document and puts the default
|
279
282
|
lightbox for J1 automatically on. The images `size` (width) and additional
|
@@ -368,7 +371,7 @@ lightbox::images-group[ 400, {data-images-group}, group_name ]
|
|
368
371
|
|
369
372
|
JustifiedGallery, the default gallery for J1, is a great jQuery plugin to
|
370
373
|
create responsive, infinite, and high-quality justified image galleries.
|
371
|
-
J1
|
374
|
+
J1 Template combines the Gallery with the lightboxes supported to enlarge
|
372
375
|
the images of a gallery.
|
373
376
|
|
374
377
|
Pictures you’ve made are typically not even in size. Images may have the same
|
@@ -400,7 +403,7 @@ or for content related to a specific country. The use of country flags can
|
|
400
403
|
make language selections or country indicators more visual to support your
|
401
404
|
visitors by making a more meaningful presentation.
|
402
405
|
|
403
|
-
The J1
|
406
|
+
The J1 Template comes with full support of country flags for Asciidoc
|
404
407
|
documents included.
|
405
408
|
|
406
409
|
Country flags can be used as inline icons by using the `flag:` inline macro:
|
@@ -493,7 +496,7 @@ flag:es[rectangle, xl]
|
|
493
496
|
|
494
497
|
== Icon Fonts
|
495
498
|
|
496
|
-
The J1
|
499
|
+
The J1 Template comes with full icon support for Asciidoc documents included.
|
497
500
|
All icon fonts are supported:
|
498
501
|
|
499
502
|
* FA (FontAwesome)
|
@@ -719,7 +722,7 @@ Ruby, Java, Groovy, or JavaScript. The number of extensions will grow - to get
|
|
719
722
|
handy and powerful functionality needed for modern web pages based on the
|
720
723
|
Asciidoc Markup language generated by Jekyll. For sure.
|
721
724
|
|
722
|
-
J1
|
725
|
+
J1 Template supports a set of advanced Bootstrap Modals that add dialogs to your
|
723
726
|
web pages for user notifications. The advanced Modals highlight important
|
724
727
|
information to your visitors. Modals are positioned over everything else in
|
725
728
|
the document so that messages get the full user's attention.
|
@@ -728,4 +731,4 @@ The next preview is focussing on advanced Bootstrap Modals, a great option
|
|
728
731
|
to customize your user dialogues using them!
|
729
732
|
|
730
733
|
Have a look for the link:{url-roundtrip--extended-modals}[Modal Extensions]
|
731
|
-
feature of J1
|
734
|
+
feature of J1 Template.
|
@@ -1,10 +1,13 @@
|
|
1
1
|
---
|
2
2
|
title: Themes
|
3
3
|
tagline: Bootstrap Styles
|
4
|
-
date: 2020-11-10
|
4
|
+
date: 2020-11-10
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
6
|
-
J1
|
7
|
-
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
9
|
+
J1 Template offers various unique functionalities compared to other Jekyll
|
10
|
+
themes and templates. Bootstrap themes for the J1 Template are based on the
|
8
11
|
free and open-source CSS front-end framework Bootstrap of version V5. The
|
9
12
|
Bootstrap themes for the J1 enable the presentation of different versions
|
10
13
|
(skins) of the same site using already prepared Bootstrap CSS templates.
|
@@ -95,5 +98,5 @@ integrated width J1 Template. The highlighter supports 100+ different languages
|
|
95
98
|
and generates HTML output using standard ANSI 256 colors displayed by all
|
96
99
|
current browsers.
|
97
100
|
|
98
|
-
To check the code highlighter J1
|
101
|
+
To check the code highlighter J1 Template offers, go for the
|
99
102
|
link:{url-roundtrip--rouge-hightlighter}[Rouge Code Highlighter].
|
@@ -1,8 +1,11 @@
|
|
1
1
|
---
|
2
2
|
title: Rouge
|
3
3
|
tagline: Code Highlighter
|
4
|
-
date: 2023-07-08
|
4
|
+
date: 2023-07-08
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
6
9
|
Rouge is a native Ruby themeable syntax highlighter fully
|
7
10
|
integrated width J1 Template. The highlighter supports 100+
|
8
11
|
different languages and generates HTML output using standard
|
@@ -187,7 +190,7 @@ end
|
|
187
190
|
[role="mt-4"]
|
188
191
|
== What next
|
189
192
|
|
190
|
-
The search option for the J1
|
193
|
+
The search option for the J1 Template is based on the search engine Lunr and
|
191
194
|
is fully integrated with the template. Lunr is designed to be lightweight
|
192
195
|
yet full-featured to provide users with a great search experience. Using
|
193
196
|
Lunr for a Jekyll website, there is no need to integrate complex external,
|
@@ -1,9 +1,12 @@
|
|
1
1
|
---
|
2
2
|
title: Icon Fonts
|
3
3
|
tagline: Popular Icons Sets
|
4
|
-
date: 2020-11-06
|
4
|
+
date: 2020-11-06
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
6
|
-
J1
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
9
|
+
J1 Template supports popular icons font sets out-of-the-box.
|
7
10
|
The icon sets MDI and FA are very good in design and have
|
8
11
|
a rich set of different icons for many categories used for
|
9
12
|
the Web. Iconify icons are not a locally stored icon-set
|
@@ -58,13 +61,13 @@ resource_options:
|
|
58
61
|
// Page content
|
59
62
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
60
63
|
[role="dropcap"]
|
61
|
-
J1
|
64
|
+
J1 Template supports popular icons font sets out-of-the-box. The icon sets MDI
|
62
65
|
and FA are very good in design and have a rich set of different icons for
|
63
66
|
many categories used for the Web. Iconify icons are not a locally stored
|
64
67
|
icon-set like MDI or FA. All Iconify icons are loaded over the Internet
|
65
68
|
using the so-called Unified OpenSource Icon Framework.
|
66
69
|
|
67
|
-
J1
|
70
|
+
J1 Template supports popular icons font sets out-of-the-box:
|
68
71
|
|
69
72
|
* link:{url-mdi--home}[Material Design Icons, {browser-window--new}] (MDI)
|
70
73
|
* link:{url-mdil--home}[Material Design Light Icons, {browser-window--new}] (MDIL)
|
@@ -84,7 +87,7 @@ Framework*. See section <<Iconify Icons>> for more information.
|
|
84
87
|
// -----------------------------------------------------------------------------
|
85
88
|
== Material Design Icons (Regular)
|
86
89
|
|
87
|
-
The primary icon-set for the J1
|
90
|
+
The primary icon-set for the J1 Template is
|
88
91
|
link:{url-mdi--home}[Material Design Icons, {browser-window--new}],
|
89
92
|
because it is a rich set providing more than 7200+ icons for the current
|
90
93
|
version (v7.0.96, March 2023). MDI has excellent *Material Design* support
|
@@ -245,14 +248,14 @@ various platforms to download icons in the format, color, and size they need
|
|
245
248
|
for any project. The repo today contains 7200+ icons (v7.0.96, March 2023)
|
246
249
|
including converted icons from the official set created by _Google_.
|
247
250
|
|
248
|
-
NOTE: _J1
|
251
|
+
NOTE: _J1 Template_ supports the full set of _MDI_ for the Web (Webfont, WOFF). The
|
249
252
|
icon set is fully integrated and can be used out-of-the-box.
|
250
253
|
|
251
254
|
|
252
255
|
[role="mt-5"]
|
253
256
|
== Material Design Light Icons
|
254
257
|
|
255
|
-
The primary icon-set for the J1
|
258
|
+
The primary icon-set for the J1 Template is
|
256
259
|
link:{url-mdi--home}[Material Design Icons, {browser-window--new}],
|
257
260
|
because it is a rich set providing more than 260+ icons for the current
|
258
261
|
version (v0.2.63). MDI has excellent *Material Design* support from a design
|
@@ -406,7 +409,7 @@ to Version 4, the current version is much more than face-lifting. Version 5
|
|
406
409
|
comes with more than 2300+ icons, but many are available only with the Pro
|
407
410
|
license. For the Free version, only a subset of 900+ icons is available.
|
408
411
|
|
409
|
-
NOTE: The CSS styles for FontAwesome V5 have been extended for the J1
|
412
|
+
NOTE: The CSS styles for FontAwesome V5 have been extended for the J1 Template
|
410
413
|
to the same classes (and their respective names) for other Font Icon sets.
|
411
414
|
Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
|
412
415
|
as well.
|
@@ -432,7 +435,7 @@ macros `fab:` and `fas:` are available to place icons where ever you want.
|
|
432
435
|
See more about this in section
|
433
436
|
link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
|
434
437
|
|
435
|
-
Find below examples of both and the use with J1
|
438
|
+
Find below examples of both and the use with J1 Template.
|
436
439
|
|
437
440
|
[role="mt-5"]
|
438
441
|
=== Brand icons
|
@@ -627,12 +630,12 @@ link:{url-iconify--home}[Iconify, {browser-window--new}]. Iconify is a so-called
|
|
627
630
|
unified OpenSource icon framework that makes it possible to use icons from
|
628
631
|
different icon sets using one (unified) syntax.
|
629
632
|
|
630
|
-
To access that framework, a Javascript client is needed. For the J1
|
633
|
+
To access that framework, a Javascript client is needed. For the J1 Template,
|
631
634
|
the client is build-in and is loaded if Iconify is requested as a resource.
|
632
635
|
To see what icon sets are available with that framework, check the page
|
633
636
|
link:{url-iconify--icon-sets}[Iconify Icon Sets, {browser-window--new}].
|
634
637
|
|
635
|
-
NOTE: Using Iconify icons with J1
|
638
|
+
NOTE: Using Iconify icons with J1 Template is quite easy. An Asciidoctor
|
636
639
|
inline macro `iconify:` (Asciidoctor Extension) is available to place icons
|
637
640
|
where ever you want. See more about this in section
|
638
641
|
link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
|
@@ -720,7 +723,7 @@ Have you've enjoyed the possibilities J1 offers for managing and
|
|
720
723
|
manipulating font icons. Do you think these icon sets can fit your needs?
|
721
724
|
Using Iconify, for all topics, you will find a suitable icon. And it's simple.
|
722
725
|
|
723
|
-
J1
|
726
|
+
J1 Template implements some handy Ruby-based enhancements for Asciidoctor.
|
724
727
|
Providing extensions for a Jekyll theme is a unique feature of JekyllOne (J1)
|
725
728
|
compared to other Jekyll themes and templates. Most extensions are based on
|
726
729
|
well-documented examples from the Asciidoctor Extensions Lab.
|
@@ -729,5 +732,5 @@ To make the use of modules for the template easier, some more extensions
|
|
729
732
|
support you to place for example lightboxes, sliders, galleries or fonts icons
|
730
733
|
using Asciidoc block elements. I'm sure, you'll love it.
|
731
734
|
|
732
|
-
To check the more the J1
|
735
|
+
To check the more the J1 Template offers, go for the
|
733
736
|
link:{url-roundtrip--asciidoc-extensions}[Asciidoc Extensions] made for J1!
|
@@ -1,9 +1,12 @@
|
|
1
1
|
---
|
2
2
|
title: Search
|
3
3
|
tagline: Lunr For J1
|
4
|
-
date: 2020-11-08
|
4
|
+
date: 2020-11-08
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
6
|
-
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
9
|
+
The search option for the J1 Template is based on the
|
7
10
|
search engine Lunr and is fully integrated with the template.
|
8
11
|
Lunr is designed to be lightweight yet full-featured to provide
|
9
12
|
users with a great search experience. Using Lunr for a Jekyll
|
@@ -55,7 +58,7 @@ resource_options:
|
|
55
58
|
// Page content
|
56
59
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
57
60
|
[role="dropcap"]
|
58
|
-
The search option for the J1
|
61
|
+
The search option for the J1 Template is based on the search engine Lunr and
|
59
62
|
is fully integrated with the Template. Lunr is designed to be lightweight yet
|
60
63
|
full-featured to provide users with a great search experience. Using Lunr for
|
61
64
|
a Jekyll website, there is no need to integrate complex external, server-sided
|
@@ -132,7 +135,7 @@ A document data set might look like this:
|
|
132
135
|
"title": "Roundtrip",
|
133
136
|
"tagline": "present images",
|
134
137
|
"url": "/pages/public/learn/roundtrip/present_images/",
|
135
|
-
"date": "2020-11-03
|
138
|
+
"date": "2020-11-03 +0100",
|
136
139
|
"tags": [
|
137
140
|
"Introduction",
|
138
141
|
"Module",
|
@@ -335,7 +338,7 @@ Example\|s: Search
|
|
335
338
|
summary what the document is all about.
|
336
339
|
|
337
340
|
Example\|s: QuickSearch is based on the search engine Lunr, fully integrated
|
338
|
-
with J1
|
341
|
+
with J1 Template ...
|
339
342
|
|
340
343
|
|===
|
341
344
|
|
@@ -430,7 +433,7 @@ Theme. This Tutorial focuses on the basics of Jekyll and J1, which all
|
|
430
433
|
people need to know for a successful way to a modern static website. Jekyll
|
431
434
|
(and J1) is quite different from classic Content Management Systems (CMS).
|
432
435
|
|
433
|
-
If you would like to learn more about the use of Jekyll and J1
|
436
|
+
If you would like to learn more about the use of Jekyll and J1 Template, the
|
434
437
|
tutorials present what you need to know:
|
435
438
|
|
436
439
|
* The basics of modern static webs
|
@@ -1,9 +1,12 @@
|
|
1
1
|
---
|
2
2
|
title: Modals
|
3
3
|
tagline: Improve Visitor Experience
|
4
|
-
date: 2020-11-08
|
4
|
+
date: 2020-11-08
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
6
|
-
J1
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
9
|
+
J1 Template supports a large set of advanced Bootstrap Modals
|
7
10
|
that add dialogs to your web pages for user notifications.
|
8
11
|
The advanced Modals highlight important information to your
|
9
12
|
visitors. Modals are positioned over everything else in the
|
@@ -54,7 +57,7 @@ resource_options:
|
|
54
57
|
// Page content
|
55
58
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
56
59
|
[role="dropcap"]
|
57
|
-
J1
|
60
|
+
J1 Template supports a large set of advanced Bootstrap Modals that add dialogs
|
58
61
|
to your web pages for user notifications. The advanced Modals highlight
|
59
62
|
important information to your visitors. Modals are positioned over everything
|
60
63
|
else in the document so that messages get the full user's attention.
|
@@ -65,7 +68,7 @@ else in the document so that messages get the full user's attention.
|
|
65
68
|
== Modal Examples
|
66
69
|
|
67
70
|
Improve your reader's experience with important information that be noticed.
|
68
|
-
Modals are a great choice to bring the user's attention. Using the J1
|
71
|
+
Modals are a great choice to bring the user's attention. Using the J1 Template
|
69
72
|
enhanced modal styles, emotional weight is added to the information displayed.
|
70
73
|
Ranging from an info level, a simple warning to critical messages.
|
71
74
|
|
@@ -84,7 +87,7 @@ enhancement to display tables on low-resolution devices or smaller window
|
|
84
87
|
sizes.
|
85
88
|
|
86
89
|
The Jekyll Theme JekyllOne supports a new design for responsive tables based
|
87
|
-
on Bootstrap. The approach used by J1
|
90
|
+
on Bootstrap. The approach used by J1 Template is based on pure CSS styles on
|
88
91
|
top of the classic Bootstrap tags for simplicity and portability to be viewed
|
89
92
|
best on all devices and browsers. Responsive tables help to read this important
|
90
93
|
information on mobiles a lot. This feature is what is meant to be fully
|
@@ -1,11 +1,14 @@
|
|
1
1
|
---
|
2
2
|
title: Image
|
3
3
|
tagline: Present Images
|
4
|
-
date: 2020-11-03
|
4
|
+
date: 2020-11-03
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
6
|
-
J1
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
9
|
+
J1 Template support valuable features to manage your image-based
|
7
10
|
content using lightboxes, carousels, sliders, and galleries.
|
8
|
-
The image modules of J1
|
11
|
+
The image modules of J1 Template offer a wide range of complex
|
9
12
|
functionality based on powerful OpenSource libraries like
|
10
13
|
Lightbox2, Master Slider, LightGallery, or JustifiedGallery
|
11
14
|
for high-end, masonry-styled preview maps.
|
@@ -74,9 +77,9 @@ resource_options:
|
|
74
77
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
75
78
|
[role="dropcap"]
|
76
79
|
Welcome to the preview page focussing on the image module. This page shows
|
77
|
-
all the valuable features of the J1
|
80
|
+
all the valuable features of the J1 Template to manage your image-based content
|
78
81
|
using using lightboxes, carousels, sliders, and galleries. The image modules
|
79
|
-
of J1
|
82
|
+
of J1 Template offer a wide range of complex functionality based on powerful
|
80
83
|
OpenSource libraries like Lightbox2, Master Slider, LightGallery, or
|
81
84
|
JustifiedGallery for high-end, masonry-styled preview maps.
|
82
85
|
|
@@ -92,12 +95,12 @@ of the page. The technique, introduced by Lightbox2, gained widespread
|
|
92
95
|
popularity thanks to its simple style. The term lightbox has been employed
|
93
96
|
since then for Javascript libraries to support such functionality.
|
94
97
|
|
95
|
-
For the J1
|
98
|
+
For the J1 Template, two different lightboxes are available:
|
96
99
|
|
97
100
|
* Lightbox2 (lightbox)
|
98
101
|
* LightGallery
|
99
102
|
|
100
|
-
The default tool employed by J1
|
103
|
+
The default tool employed by J1 Template is Lightbox2, a Javascript library
|
101
104
|
written by _Lokesh Dhakar_. The name of that (build-in) is *lightbox*.
|
102
105
|
For more complex use cases, like a thumbnail gallery preview or video support,
|
103
106
|
LightGallery can be used alternatively.
|
@@ -111,7 +114,7 @@ Both lightboxes are fully integrated to be used as standalone modules or
|
|
111
114
|
used as helpers *under-the-hood* by other apps or modules focussing on
|
112
115
|
image-data like gallery or carousel, the build-in carousel module.
|
113
116
|
|
114
|
-
TIP: For details of the default lightbox of J1
|
117
|
+
TIP: For details of the default lightbox of J1 Template, see the documentation
|
115
118
|
under the link:{url-j1-docs--lightbox-module}[Lightbox module, {browser-window--new}].
|
116
119
|
|
117
120
|
|
@@ -150,7 +153,7 @@ plugin for creating fully responsive and touch-enabled carousel sliders.
|
|
150
153
|
|
151
154
|
////
|
152
155
|
NOTE: OWL Carousel V1 is no longer available on the Internet; for an
|
153
|
-
unknown reason. Anyway, the J1
|
156
|
+
unknown reason. Anyway, the J1 Template is using this version of OWL
|
154
157
|
Carousel is a build-in carousel module because the software does an excellent
|
155
158
|
job, is based on an MIT license with no issues using them for private and
|
156
159
|
business use. And offers a lot of great features!
|
@@ -160,7 +163,7 @@ business use. And offers a lot of great features!
|
|
160
163
|
|
161
164
|
[role="mb-4"]
|
162
165
|
A slider or carousel is typically used for displaying images. Still, the
|
163
|
-
implementation for the J1
|
166
|
+
implementation for the J1 Template supports a lot more sources to be
|
164
167
|
displayed as a slide show: simple text, for example.
|
165
168
|
|
166
169
|
.Text Carousel
|
@@ -184,7 +187,7 @@ maybe the better choice.
|
|
184
187
|
carousel::demo_text_carousel_parallax[role="mb-4"]
|
185
188
|
|
186
189
|
Parallax text shows can be placed as banners on a page. For text shows,
|
187
|
-
different animations are available. Internally, J1
|
190
|
+
different animations are available. Internally, J1 Template uses some of
|
188
191
|
the great CSS styles offered by _animate.css_.
|
189
192
|
|
190
193
|
TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page, {browser-window--new}]
|
@@ -264,7 +267,7 @@ A carousel from a collection for J1 Template is a *pre-defined* carousel
|
|
264
267
|
type to display collection *articles* on a webpage as a carousel. Collection
|
265
268
|
carousels pull content from a specific *collection*. All Carousels
|
266
269
|
for collections display the article image and a link to the article as a
|
267
|
-
caption. All Slick carousels for the J1
|
270
|
+
caption. All Slick carousels for the J1 Template can be easily customized in
|
268
271
|
various ways, such as changing the slider speed, or the navigation options
|
269
272
|
like *Arrows* and *Dots*.
|
270
273
|
|
@@ -281,7 +284,7 @@ highlighting important or *featured* content for your posts content.
|
|
281
284
|
[role="mb-4"]
|
282
285
|
Post carousels pull news articles from a specific *group*. All Carousels for
|
283
286
|
posts display the post category, the title, the author information and
|
284
|
-
date. All Slick carousels for the J1
|
287
|
+
date. All Slick carousels for the J1 Template can be easily customized in
|
285
288
|
various ways, such as changing the number of posts displayed, the slider
|
286
289
|
speed, or the navigation options like *Arrows* and *Dots*.
|
287
290
|
|
@@ -305,7 +308,7 @@ link:{url-j1-slick-previewer}[Slick Previewer, {browser-window--new}],
|
|
305
308
|
== J1 Master Slider
|
306
309
|
|
307
310
|
The Javascript tool _Master Slider_ is a 3rd party plugin fully integrated
|
308
|
-
into the J1
|
311
|
+
into the J1 Template by the module `masterslider`. J1 Template uses the
|
309
312
|
*free* version of Master Slider (MS Lite). The Lite version does *not* support
|
310
313
|
all features: the functionality of *filters*, *layouts* are limited and no
|
311
314
|
*overlay* techniques are supported by the MS Lite version.
|
@@ -331,7 +334,7 @@ other digital data sources.
|
|
331
334
|
In short: Carousels are used to present images, and sliders are used to create
|
332
335
|
complex image-based slideshows (presentations).
|
333
336
|
|
334
|
-
TIP: For more details of the dimplementation of Master Slider of J1
|
337
|
+
TIP: For more details of the dimplementation of Master Slider of J1 Template, see
|
335
338
|
find documentation at
|
336
339
|
link:{url-j1-docs--masterslider-module}[Master Slider module, {browser-window--new}].
|
337
340
|
|
@@ -410,7 +413,7 @@ documents:
|
|
410
413
|
|
411
414
|
link:{url-justified-gallery--home}[JustifiedGallery, {browser-window--new}]
|
412
415
|
is a great _jQuery_ Plugin to create responsive, infinite, and high-quality
|
413
|
-
justified image galleries. J1
|
416
|
+
justified image galleries. J1 Template combines the Gallery with the lightboxes
|
414
417
|
supported to enlarge the images of a gallery. See the gallery in action; and
|
415
418
|
for sure, all that you see is even responsive. Change the size of your current
|
416
419
|
browser window, by width or height to see what will happen!
|
@@ -433,7 +436,7 @@ Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
|
|
433
436
|
and displaying digital image content. But much, much more can the J1 do for
|
434
437
|
your web.
|
435
438
|
|
436
|
-
The J1
|
439
|
+
The J1 Template support playing video on web pages by HTML5 Video, the new
|
437
440
|
standard of HTML. HTML5 Video implements a pure HTML way to show video on
|
438
441
|
the web. Modern browsers support the video tag `<video>` for the HTML5 video
|
439
442
|
standard. The previous proprietary de facto standard software like Flash
|
@@ -1,9 +1,12 @@
|
|
1
1
|
---
|
2
2
|
title: Video
|
3
3
|
tagline: Playing Video
|
4
|
-
date: 2020-11-04
|
4
|
+
date: 2020-11-04
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
6
|
-
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
9
|
+
The J1 Template support playing video on web pages by HTML5 Video,
|
7
10
|
the new standard of HTML. HTML5 Video implements a pure HTML way
|
8
11
|
to show video on the web. Modern browsers support the video tag
|
9
12
|
`<video>` for the HTML5 video standard. The previous proprietary
|
@@ -85,7 +88,7 @@ resource_options:
|
|
85
88
|
// Page content
|
86
89
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
87
90
|
[role="dropcap"]
|
88
|
-
The J1
|
91
|
+
The J1 Template support playing video on web pages by HTML5 Video, the new
|
89
92
|
standard of HTML. HTML5 Video implements a pure HTML way to show video
|
90
93
|
on the web.
|
91
94
|
|
@@ -128,7 +131,7 @@ how to use LightGallery for commercial websites and projects.
|
|
128
131
|
Digital image content, simple pictures or videos, are easy to make. Today,
|
129
132
|
every mobile has a camera. Presenting a bunch of (digital) pictures is done
|
130
133
|
very easily by using Justified Gallery. Videos created by a digicam or a mobile
|
131
|
-
can be played by J1
|
134
|
+
can be played by J1 Template using the HTML5 Video support. Present videos you
|
132
135
|
have made at it's best.
|
133
136
|
|
134
137
|
Two players are available with LightGallery:
|
@@ -147,7 +150,7 @@ gallery::jg_video_html5[role="mb-5"]
|
|
147
150
|
== Online Video content
|
148
151
|
|
149
152
|
The Internet is full of inspiring content. If you want to present video
|
150
|
-
content from the Internet, the online video support of J1
|
153
|
+
content from the Internet, the online video support of J1 Template is the
|
151
154
|
right choice.
|
152
155
|
|
153
156
|
=== YouTube
|
@@ -241,7 +244,7 @@ the Internet.
|
|
241
244
|
Sadly, one common flaw is seen in many templates and frameworks: a lack of
|
242
245
|
support for genuinely responsive text. While elements on a page resize
|
243
246
|
fluidly, the text still resizes on a fixed basis. To avoid this issue,
|
244
|
-
especially for heavily text-focused pages, J1
|
247
|
+
especially for heavily text-focused pages, J1 Template supports styles that
|
245
248
|
fluidly scale text size and line height to optimize readability for the user.
|
246
249
|
|
247
250
|
The Jekyll Theme JekyllOne places the character font as one of the most
|
@@ -1,11 +1,14 @@
|
|
1
1
|
---
|
2
2
|
title: Tables
|
3
3
|
tagline: Viewed Best On All Devices
|
4
|
-
date: 2020-11-09
|
4
|
+
date: 2020-11-09
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
6
9
|
The Jekyll Theme JekyllOne supports a new design for
|
7
10
|
responsive tables based on Bootstrap. The approach
|
8
|
-
used by J1
|
11
|
+
used by J1 Template is based on pure CSS styles on top
|
9
12
|
of the classic Bootstrap tags for simplicity and
|
10
13
|
portability to be viewed best on all devices and browsers.
|
11
14
|
keywords: >
|
@@ -59,7 +62,7 @@ resource_options:
|
|
59
62
|
[role="dropcap"]
|
60
63
|
Creating a design for responsive tables is challenging. The Jekyll Theme
|
61
64
|
JekyllOne supports a new design for responsive tables based on Bootstrap.
|
62
|
-
The approach used by J1
|
65
|
+
The approach used by J1 Template is based on pure CSS styles on top of the
|
63
66
|
classic Bootstrap tags for simplicity and portability to be viewed best
|
64
67
|
on all devices and browsers.
|
65
68
|
|
@@ -70,7 +73,7 @@ on all devices and browsers.
|
|
70
73
|
|
71
74
|
But, for sure, the solutions provided are a compromise. To fit the everyday
|
72
75
|
needs for tables viewed on desktop and mobile devices, two types of
|
73
|
-
*responsive* tables are implemented by J1
|
76
|
+
*responsive* tables are implemented by J1 Template:
|
74
77
|
|
75
78
|
.Types of responsive tables
|
76
79
|
[cols="3a,3a,6a", options="header", width="100%", role="rtable mt-4"]
|
@@ -79,7 +82,7 @@ needs for tables viewed on desktop and mobile devices, two types of
|
|
79
82
|
|
80
83
|
|`rtable`
|
81
84
|
|*R Table (J1)*
|
82
|
-
|J Table are used by J1
|
85
|
+
|J Table are used by J1 Template for default. Those tables are using the
|
83
86
|
*responsive text* feature (see link:{url-roundtrip--typography}[Typography])
|
84
87
|
with no additional CSS classes to be applied. For smaller viewports, the text
|
85
88
|
scales down and should fit the cells automatically. The default text size for
|
@@ -436,8 +439,8 @@ Expectedly you've enjoyed exploring all the possibilities J1 offers so far.
|
|
436
439
|
An exciting feature may be the use of themes. But much, much more can the J1
|
437
440
|
do for your Web Site.
|
438
441
|
|
439
|
-
J1
|
440
|
-
themes and templates. Bootstrap themes for the J1
|
442
|
+
J1 Template offers various unique functionalities compared to other Jekyll
|
443
|
+
themes and templates. Bootstrap themes for the J1 Template are based on the
|
441
444
|
free and open-source CSS front-end framework Bootstrap of version V5. The
|
442
445
|
Bootstrap themes for the J1 enable the presentation of different versions
|
443
446
|
(skins) of the same site using already prepared Bootstrap CSS templates.
|
@@ -1,9 +1,12 @@
|
|
1
1
|
---
|
2
2
|
title: Typography
|
3
3
|
tagline: Crucial Branding Element
|
4
|
-
date: 2020-11-05
|
4
|
+
date: 2020-11-05
|
5
|
+
#last_modified: 2023-01-01
|
5
6
|
description: >
|
6
|
-
|
7
|
+
J1 Template is a Bootstrap V5 website template for the static
|
8
|
+
site generator Jekyll.
|
9
|
+
J1 Template places the character font as
|
7
10
|
one of the most crucial branding elements for any website.
|
8
11
|
Typography matters for any media presenting text. The text
|
9
12
|
will take on an important role of acting not only as plain
|
@@ -74,7 +77,7 @@ as plain text but also as something like images.
|
|
74
77
|
Sadly, one common flaw is seen in many templates and frameworks: a lack of
|
75
78
|
support for genuinely responsive text. While elements on a page resize
|
76
79
|
fluidly, the text still resizes on a fixed basis. To avoid this issue,
|
77
|
-
especially for heavily text-focused pages, J1
|
80
|
+
especially for heavily text-focused pages, J1 Template supports styles that
|
78
81
|
fluidly scale text size and line height to optimize readability for the user.
|
79
82
|
|
80
83
|
Below you find an example of how text behaves if defined on a fixed basis -
|
@@ -253,11 +256,11 @@ Have you enjoyed playing with the text? I hope so. But even more, J1 can
|
|
253
256
|
do for your web pages. With the examples on that page, icons support the
|
254
257
|
meaning of what was grouped as text.
|
255
258
|
|
256
|
-
J1
|
259
|
+
J1 Template supports popular icons font sets out-of-the-box. The icon sets MDI
|
257
260
|
and FA are very good in design and have a rich set of different icons for
|
258
261
|
many categories used for the Web.
|
259
262
|
|
260
|
-
J1
|
263
|
+
J1 Template supports popular icons font sets like:
|
261
264
|
|
262
265
|
* Material Design Icons
|
263
266
|
* FontAwesome Icons V5
|
@@ -1,11 +1,14 @@
|
|
1
1
|
---
|
2
2
|
title: Where to go
|
3
3
|
tagline: Fasten Your Way
|
4
|
-
|
4
|
+
|
5
|
+
date: 2023-01-01
|
6
|
+
#last_modified: 2023-01-01
|
7
|
+
|
5
8
|
description: >
|
6
|
-
Welcome to the info pages of J1
|
9
|
+
Welcome to the info pages of J1 Template. A good decision
|
7
10
|
to get on that page first. Certainly, there is no better
|
8
|
-
place to learn what J1
|
11
|
+
place to learn what J1 Template can do and what pages are
|
9
12
|
available to experience more.
|
10
13
|
keywords: >
|
11
14
|
Jekyll, Theme, JekyllOne, Info, Introduction, Rocketstart,
|
@@ -60,9 +63,9 @@ resource_options:
|
|
60
63
|
// Page content
|
61
64
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
62
65
|
[role="dropcap"]
|
63
|
-
Welcome to the learning pages of JekyllOne, the J1
|
66
|
+
Welcome to the learning pages of JekyllOne, the J1 Template. A good decision to
|
64
67
|
get on that page first. Certainly, there is no better place to start learning
|
65
|
-
what the J1
|
68
|
+
what the J1 Template can do and what pages are available to experience more.
|
66
69
|
|
67
70
|
// Include sub-documents (if any) (if any)
|
68
71
|
// -----------------------------------------------------------------------------
|
@@ -73,13 +76,13 @@ some time diving into the techniques of creating modern static webs.
|
|
73
76
|
|
74
77
|
Roundtrip::
|
75
78
|
In this section, you’ll find a tour to show some of the main features of
|
76
|
-
the J1
|
79
|
+
the J1 Template. This trip covers how image data can be managed using
|
77
80
|
J1, some background of the Theme's typography, discuss extensions, and
|
78
81
|
what J1 can do in general. The roundtrip is a visual tour, no technical
|
79
82
|
stuff, nothing academic. See what you will get as an overview of some of
|
80
83
|
the top features of J1.
|
81
84
|
|
82
|
-
If you're interested what J1
|
85
|
+
If you're interested what J1 Template can do, continue by walking through the
|
83
86
|
roundtrip examples by starting an inspiring tour
|
84
87
|
link:{url-j1-roundtrip--present-images}[from here].
|
85
88
|
|