j1-template 2023.2.7 → 2023.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (452) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/themes/j1/layouts/content_generator_news_panel_posts.html +2 -1
  3. data/_includes/themes/j1/layouts/content_generator_post.html +2 -2
  4. data/_includes/themes/j1/layouts/layout_metadata_generator.html +38 -38
  5. data/_includes/themes/j1/procedures/blocks/footer/boxes/about_box.proc +1 -1
  6. data/_includes/themes/j1/procedures/blocks/footer/boxes/contacts_box.proc +1 -1
  7. data/_includes/themes/j1/procedures/blocks/footer/boxes/issue.proc +1 -1
  8. data/_includes/themes/j1/procedures/blocks/footer/boxes/links_box.proc +1 -1
  9. data/_includes/themes/j1/procedures/blocks/footer/boxes/news_box.proc +1 -1
  10. data/_includes/themes/j1/procedures/layouts/default_writer.proc +1 -3
  11. data/_includes/themes/j1/procedures/layouts/module_writer.proc +7 -23
  12. data/_includes/themes/j1/procedures/layouts/resource_writer.proc +8 -8
  13. data/_includes/themes/j1/procedures/posts/create_series_header.proc +1 -1
  14. data/_layouts/compress.html +26 -21
  15. data/_layouts/default.html +36 -30
  16. data/assets/data/banner.html +5 -2
  17. data/assets/data/footer.html +15 -3
  18. data/assets/data/masonry.html +1 -1
  19. data/assets/data/masterslider.html +1 -0
  20. data/assets/data/menu.html +4 -4
  21. data/assets/data/panel.html +6 -3
  22. data/assets/data/quicklinks.html +138 -149
  23. data/assets/error_pages/HTTP204.html +3 -3
  24. data/assets/error_pages/HTTP400.html +3 -3
  25. data/assets/error_pages/HTTP401.html +3 -3
  26. data/assets/error_pages/HTTP403.html +3 -3
  27. data/assets/error_pages/HTTP404.html +3 -3
  28. data/assets/error_pages/HTTP444.html +3 -3
  29. data/assets/error_pages/HTTP445.html +3 -3
  30. data/assets/error_pages/HTTP446.html +5 -5
  31. data/assets/error_pages/HTTP447.html +7 -7
  32. data/assets/error_pages/HTTP448.html +7 -7
  33. data/assets/error_pages/HTTP500.html +3 -3
  34. data/assets/error_pages/HTTP501.html +3 -3
  35. data/assets/error_pages/HTTP502.html +3 -3
  36. data/assets/error_pages/HTTP503.html +3 -3
  37. data/assets/themes/j1/adapter/js/advertising.js +355 -156
  38. data/assets/themes/j1/adapter/js/analytics.js +1 -1
  39. data/assets/themes/j1/adapter/js/asciidoctor.js +1 -1
  40. data/assets/themes/j1/adapter/js/attic.js +22 -14
  41. data/assets/themes/j1/adapter/js/bmd.js +1 -1
  42. data/assets/themes/j1/adapter/js/carousel.js +5 -4
  43. data/assets/themes/j1/adapter/js/clipboard.js +1 -1
  44. data/assets/themes/j1/adapter/js/comments.js +5 -5
  45. data/assets/themes/j1/adapter/js/cookieConsent.js +1 -1
  46. data/assets/themes/j1/adapter/js/customFunctions.js +1 -1
  47. data/assets/themes/j1/adapter/js/customModule.js +1 -1
  48. data/assets/themes/j1/adapter/js/dropdowns.js +4 -2
  49. data/assets/themes/j1/adapter/js/fab.js +9 -6
  50. data/assets/themes/j1/adapter/js/framer.js +1 -1
  51. data/assets/themes/j1/adapter/js/iconPicker.js +227 -0
  52. data/assets/themes/j1/adapter/js/j1.js +402 -76
  53. data/assets/themes/j1/adapter/js/justifiedGallery.js +9 -3
  54. data/assets/themes/j1/adapter/js/justifiedGalleryCustomizer.js +2 -2
  55. data/assets/themes/j1/adapter/js/lightbox.js +4 -3
  56. data/assets/themes/j1/adapter/js/logger.js +1 -1
  57. data/assets/themes/j1/adapter/js/lunr.js +1 -1
  58. data/assets/themes/j1/adapter/js/masonry.js +4 -3
  59. data/assets/themes/j1/adapter/js/masterslider.js +30 -57
  60. data/assets/themes/j1/adapter/js/mmenu.js +2 -2
  61. data/assets/themes/j1/adapter/js/navigator.js +7 -5
  62. data/assets/themes/j1/adapter/js/nbinteract.js +9 -9
  63. data/assets/themes/j1/adapter/js/particles.js +2 -2
  64. data/assets/themes/j1/adapter/js/rangeSlider.js +2 -2
  65. data/assets/themes/j1/adapter/js/rouge.js +2 -2
  66. data/assets/themes/j1/adapter/js/rtable.js +1 -1
  67. data/assets/themes/j1/adapter/js/rtextResizer.js +1 -1
  68. data/assets/themes/j1/adapter/js/scroller.js +97 -109
  69. data/assets/themes/j1/adapter/js/slick.js +28 -18
  70. data/assets/themes/j1/adapter/js/themeToggler.js +259 -0
  71. data/assets/themes/j1/adapter/js/themer.js +63 -23
  72. data/assets/themes/j1/adapter/js/toccer.js +9 -6
  73. data/assets/themes/j1/adapter/js/translator.js +4 -2
  74. data/assets/themes/j1/adapter/js/waves.js +6 -4
  75. data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.css +1322 -417
  76. data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.min.css +3 -3
  77. data/assets/themes/j1/core/css/themes/unodark/bootstrap.css +2064 -1273
  78. data/assets/themes/j1/core/css/themes/unodark/bootstrap.min.css +3 -3
  79. data/assets/themes/j1/core/css/themes/unolight/bootstrap.css +10280 -9399
  80. data/assets/themes/j1/core/css/themes/unolight/bootstrap.min.css +10 -10
  81. data/assets/themes/j1/core/css/vendor.css +0 -14
  82. data/assets/themes/j1/core/css/vendor.min.css +1 -1
  83. data/assets/themes/j1/modules/backstretch/js/backstretch.js +6 -4
  84. data/assets/themes/j1/modules/backstretch/js/backstretch.min.js +1 -1
  85. data/assets/themes/j1/modules/deeplAPI/js/deeplAPI.js +1 -1
  86. data/assets/themes/j1/modules/deeplAPI/js/deeplAPI.min.js +1 -1
  87. data/assets/themes/j1/modules/iconPicker/README.md +266 -0
  88. data/assets/themes/j1/modules/iconPicker/css/universal-icon-picker.css +419 -0
  89. data/assets/themes/j1/modules/iconPicker/css/universal-icon-picker.min.css +17 -0
  90. data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-brands.json +467 -0
  91. data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-brands.min.json +1 -0
  92. data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-regular.json +169 -0
  93. data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-regular.min.json +1 -0
  94. data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-solid.json +1136 -0
  95. data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-solid.min.json +1 -0
  96. data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome.json +1772 -0
  97. data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome.min.json +1 -0
  98. data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-light.json +292 -0
  99. data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-light.min.json +1 -0
  100. data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-regular.json +7312 -0
  101. data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-regular.min.json +1 -0
  102. data/assets/themes/j1/modules/iconPicker/images/magnifying-glass-solid.svg +1 -0
  103. data/assets/themes/j1/modules/iconPicker/images/star-of-life-solid.svg +3 -0
  104. data/assets/themes/j1/modules/iconPicker/images/xmark-solid.svg +3 -0
  105. data/assets/themes/j1/modules/iconPicker/js/universal-icon-picker.js +493 -0
  106. data/assets/themes/j1/modules/iconPicker/js/universal-icon-picker.min.js +17 -0
  107. data/assets/themes/j1/modules/jquery/AUTHORS.txt +372 -0
  108. data/assets/themes/j1/modules/jquery/LICENSE.txt +43 -0
  109. data/assets/themes/j1/modules/jquery/css/images/ui-icons_444444_256x240.png +0 -0
  110. data/assets/themes/j1/modules/jquery/css/images/ui-icons_555555_256x240.png +0 -0
  111. data/assets/themes/j1/modules/jquery/css/images/ui-icons_777620_256x240.png +0 -0
  112. data/assets/themes/j1/modules/jquery/css/images/ui-icons_777777_256x240.png +0 -0
  113. data/assets/themes/j1/modules/jquery/css/images/ui-icons_cc0000_256x240.png +0 -0
  114. data/assets/themes/j1/modules/jquery/css/images/ui-icons_ffffff_256x240.png +0 -0
  115. data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.css +92 -92
  116. data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.min.css +4 -4
  117. data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.structure.css +88 -88
  118. data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.structure.min.css +2 -2
  119. data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.theme.css +4 -4
  120. data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.theme.min.css +2 -2
  121. data/assets/themes/j1/modules/jquery/js/jquery-ui.js +13683 -13678
  122. data/assets/themes/j1/modules/jquery/js/jquery-ui.min.js +3 -3
  123. data/assets/themes/j1/modules/jquery/js/jquery.js +1029 -1203
  124. data/assets/themes/j1/modules/jquery/js/jquery.min.js +2 -2
  125. data/assets/themes/j1/modules/jquery/js/jquery.min.map +1 -1
  126. data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.css +1315 -0
  127. data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.min.css +7 -0
  128. data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.structure.css +886 -0
  129. data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.structure.min.css +5 -0
  130. data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.theme.css +446 -0
  131. data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.theme.min.css +5 -0
  132. data/assets/themes/j1/modules/jquery-3.5.1/js/extensions/hasClass.js +37 -0
  133. data/assets/themes/j1/modules/jquery-3.5.1/js/extensions/hasClass.min.js +17 -0
  134. data/assets/themes/j1/modules/jquery-3.5.1/js/extensions/removeClass.js +42 -0
  135. data/assets/themes/j1/modules/jquery-3.5.1/js/extensions/removeClass.min.js +17 -0
  136. data/assets/themes/j1/modules/jquery-3.5.1/js/jquery-ui.js +19057 -0
  137. data/assets/themes/j1/modules/jquery-3.5.1/js/jquery-ui.min.js +6 -0
  138. data/assets/themes/j1/modules/jquery-3.5.1/js/jquery.js +10872 -0
  139. data/assets/themes/j1/modules/jquery-3.5.1/js/jquery.min.js +2 -0
  140. data/assets/themes/j1/modules/jquery-3.5.1/js/jquery.min.map +1 -0
  141. data/assets/themes/j1/modules/jquery-3.5.1/js/require.js +2145 -0
  142. data/assets/themes/j1/modules/jquery-3.5.1/js/require.min.js +5 -0
  143. data/assets/themes/j1/modules/lightGallery/js/modules/j1/j1-video.js +2 -2
  144. data/assets/themes/j1/modules/lightGallery/js/modules/j1/j1-video.min.js +1 -1
  145. data/assets/themes/j1/modules/masterslider/css/theme/uno.css +9 -9
  146. data/assets/themes/j1/modules/masterslider/css/theme/uno.min.css +1 -1
  147. data/assets/themes/j1/modules/mmenuLight/css/theme/uno/mmenu.css +2 -2
  148. data/assets/themes/j1/modules/mmenuLight/css/theme/uno/mmenu.min.css +1 -1
  149. data/assets/themes/j1/modules/rouge/css/uno.dark/theme.css +136 -47
  150. data/assets/themes/j1/modules/rouge/css/uno.light/theme.css +9 -9
  151. data/assets/themes/j1/modules/scroller/js/scroller.js +76 -69
  152. data/assets/themes/j1/modules/scroller/js/scroller.min.js +1 -1
  153. data/assets/themes/j1/modules/translator/js/translator.js +1 -1
  154. data/assets/themes/j1/modules/translator/js/translator.min.js +1 -1
  155. data/lib/j1/version.rb +1 -1
  156. data/lib/starter_web/Gemfile +2 -2
  157. data/lib/starter_web/README.md +5 -5
  158. data/lib/starter_web/_config.yml +5 -2
  159. data/lib/starter_web/_data/blocks/banner.yml +8 -5
  160. data/lib/starter_web/_data/blocks/defaults/footer.yml +4 -4
  161. data/lib/starter_web/_data/blocks/footer.yml +12 -5
  162. data/lib/starter_web/_data/blocks/panel.yml +41 -38
  163. data/lib/starter_web/_data/j1_config.yml +68 -58
  164. data/lib/starter_web/_data/layouts/collection.yml +1 -0
  165. data/lib/starter_web/_data/layouts/default.yml +1 -1
  166. data/lib/starter_web/_data/layouts/home.yml +38 -9
  167. data/lib/starter_web/_data/layouts/news_panel_posts.yml +1 -0
  168. data/lib/starter_web/_data/layouts/page.yml +2 -1
  169. data/lib/starter_web/_data/layouts/post.yml +1 -0
  170. data/lib/starter_web/_data/layouts/raw.yml +1 -0
  171. data/lib/starter_web/_data/modules/advertising.yml +209 -58
  172. data/lib/starter_web/_data/modules/analytics.yml +2 -2
  173. data/lib/starter_web/_data/modules/attics.yml +4 -7
  174. data/lib/starter_web/_data/modules/defaults/advertising.yml +3 -2
  175. data/lib/starter_web/_data/modules/defaults/attics.yml +3 -3
  176. data/lib/starter_web/_data/modules/defaults/iconPicker.yml +42 -0
  177. data/lib/starter_web/_data/modules/defaults/navigator.yml +15 -13
  178. data/lib/starter_web/_data/modules/defaults/theme_toggler.yml +42 -0
  179. data/lib/starter_web/_data/modules/iconPicker.yml +64 -0
  180. data/lib/starter_web/_data/modules/masonry.yml +3 -3
  181. data/lib/starter_web/_data/modules/masterslider.yml +5 -5
  182. data/lib/starter_web/_data/modules/navigator_menu.yml +311 -160
  183. data/lib/starter_web/_data/modules/scroller.yml +8 -8
  184. data/lib/starter_web/_data/modules/slick.yml +47 -86
  185. data/lib/starter_web/_data/modules/theme_toggler.yml +29 -0
  186. data/lib/starter_web/_data/modules/themer.yml +0 -6
  187. data/lib/starter_web/_data/resources.yml +54 -53
  188. data/lib/starter_web/_data/templates/feed.xml +1 -1
  189. data/lib/starter_web/_includes/attributes.0.asciidoc +626 -0
  190. data/lib/starter_web/_includes/attributes.asciidoc +81 -72
  191. data/lib/starter_web/_includes/google/static/google_ad_5128488466.html +19 -0
  192. data/lib/starter_web/_includes/google/static/google_ad_7284712660.html +19 -0
  193. data/lib/starter_web/_includes/google/templates/google_ads.html +55 -0
  194. data/lib/starter_web/_plugins/asciidoctor/google-ad-block.rb +47 -0
  195. data/lib/starter_web/_plugins/index/lunr.rb +1 -1
  196. data/lib/starter_web/assets/images/badges/configBinder.jpg +0 -0
  197. data/lib/starter_web/assets/images/badges/docsBinder.jpg +0 -0
  198. data/lib/starter_web/assets/images/badges/notebookBinder.jpg +0 -0
  199. data/lib/starter_web/assets/images/badges/scaleable/configBinder.svg +1 -1
  200. data/lib/starter_web/assets/images/badges/scaleable/docsBinder.svg +1 -1
  201. data/lib/starter_web/assets/images/badges/scaleable/myBinder.svg +1 -1
  202. data/lib/starter_web/assets/images/badges/scaleable/notebookBinder.svg +1 -1
  203. data/lib/starter_web/assets/images/icons/hyvor-talk/jpg/hyvor-logo.512x512.jpg +0 -0
  204. data/lib/starter_web/assets/images/icons/hyvor-talk/png/hyvor-logo.24x24.jpg +0 -0
  205. data/lib/starter_web/assets/images/icons/hyvor-talk/scalable/hyvor-logo.svg +1 -1
  206. data/lib/starter_web/assets/images/icons/j1/jpg/j1-256x256.jpg +0 -0
  207. data/lib/starter_web/assets/images/icons/j1/jpg/j1-512x512.jpg +0 -0
  208. data/lib/starter_web/assets/images/icons/j1/jpg/j1-64x64.jpg +0 -0
  209. data/lib/starter_web/assets/images/icons/j1/png/j1-256x256.png +0 -0
  210. data/lib/starter_web/assets/images/icons/j1/png/j1-512x512.jpg +0 -0
  211. data/lib/starter_web/assets/images/icons/j1/png/j1-512x512.jpg.png +0 -0
  212. data/lib/starter_web/assets/images/icons/j1/png/j1-512x512.png +0 -0
  213. data/lib/starter_web/assets/images/icons/j1/png/j1-64x64.png +0 -0
  214. data/lib/starter_web/assets/images/icons/j1/scalable/j1.svg +1 -1
  215. data/lib/starter_web/assets/images/icons/mdi/mdi.svg +1 -0
  216. data/lib/starter_web/assets/images/icons/mdi/mdil.svg +1 -0
  217. data/lib/starter_web/assets/images/modules/attics/1920x1280/alexander-redl.jpg +0 -0
  218. data/lib/starter_web/assets/images/modules/attics/1920x1280/alina-grubnyak.jpg +0 -0
  219. data/lib/starter_web/assets/images/modules/attics/1920x1280/andrea-badino.jpg +0 -0
  220. data/lib/starter_web/assets/images/modules/attics/1920x1280/brad-neathery.jpg +0 -0
  221. data/lib/starter_web/assets/images/modules/attics/1920x1280/brigitta-schneiter.jpg +0 -0
  222. data/lib/starter_web/assets/images/modules/attics/1920x1280/bruno-figueiredo.jpg +0 -0
  223. data/lib/starter_web/assets/images/modules/attics/1920x1280/clem-onojeghuo.jpg +0 -0
  224. data/lib/starter_web/assets/images/modules/attics/1920x1280/core_web_vitals_best.png +0 -0
  225. data/lib/starter_web/assets/images/modules/attics/1920x1280/crawford-jolly.jpg +0 -0
  226. data/lib/starter_web/assets/images/modules/attics/1920x1280/eleni-afiontzi.jpg +0 -0
  227. data/lib/starter_web/assets/images/modules/attics/1920x1280/fly-d.jpg +0 -0
  228. data/lib/starter_web/assets/images/modules/attics/1920x1280/guillaume-bolduc.jpg +0 -0
  229. data/lib/starter_web/assets/images/modules/attics/1920x1280/harpal-singh.jpg +0 -0
  230. data/lib/starter_web/assets/images/modules/attics/1920x1280/hayden-mills-2.jpg +0 -0
  231. data/lib/starter_web/assets/images/modules/attics/1920x1280/j1-content-mockup-1.jpg +0 -0
  232. data/lib/starter_web/assets/images/modules/attics/1920x1280/j1-content-mockup-2.jpg +0 -0
  233. data/lib/starter_web/assets/images/modules/attics/1920x1280/j1-content-mockup-3.jpg +0 -0
  234. data/lib/starter_web/assets/images/modules/attics/1920x1280/j1-starter-mockup-1.jpg +0 -0
  235. data/lib/starter_web/assets/images/modules/attics/1920x1280/john-schnobrich-2.jpg +0 -0
  236. data/lib/starter_web/assets/images/modules/attics/1920x1280/josep-martins.jpg +0 -0
  237. data/lib/starter_web/assets/images/modules/attics/1920x1280/josh-liu.jpg +0 -0
  238. data/lib/starter_web/assets/images/modules/attics/1920x1280/kelly-sikkemal.jpg +0 -0
  239. data/lib/starter_web/assets/images/modules/attics/1920x1280/kira-auf-der-heide.jpg +0 -0
  240. data/lib/starter_web/assets/images/modules/attics/1920x1280/kristopher-roller.jpg +0 -0
  241. data/lib/starter_web/assets/images/modules/attics/1920x1280/kristopher-roller.webp +0 -0
  242. data/lib/starter_web/assets/images/modules/attics/1920x1280/matthaeus.jpg +0 -0
  243. data/lib/starter_web/assets/images/modules/attics/1920x1280/melanie-deziel.jpg +0 -0
  244. data/lib/starter_web/assets/images/modules/attics/1920x1280/milad-fakurian.jpg +0 -0
  245. data/lib/starter_web/assets/images/modules/attics/1920x1280/mohammad-rahmani.jpg +0 -0
  246. data/lib/starter_web/assets/images/modules/attics/1920x1280/nasa.jpg +0 -0
  247. data/lib/starter_web/assets/images/modules/attics/1920x1280/quino-al-2.jpg +0 -0
  248. data/lib/starter_web/assets/images/modules/attics/1920x1280/recha-oktaviani.jpg +0 -0
  249. data/lib/starter_web/assets/images/modules/attics/building-blocks-1920x1280.jpg +0 -0
  250. data/lib/starter_web/assets/images/modules/attics/christina-1920x1280.jpg +0 -0
  251. data/lib/starter_web/assets/images/modules/attics/cookies-1920x1200.jpg +0 -0
  252. data/lib/starter_web/assets/images/modules/attics/katie-moum-1920x1280.jpg +0 -0
  253. data/lib/starter_web/assets/images/modules/icons/j1/scalable/j1.svg +1 -1
  254. data/lib/starter_web/assets/images/pages/asciidoc_skeletons/example-pdf-screenshot.jpg +0 -0
  255. data/lib/starter_web/assets/images/pages/core_web_vitals/200-create-a-link-1.jpg +0 -0
  256. data/lib/starter_web/assets/images/pages/core_web_vitals/core_web_vitals_best.jpg +0 -0
  257. data/lib/starter_web/assets/images/pages/core_web_vitals/core_web_vitals_best_full.jpg +0 -0
  258. data/lib/starter_web/assets/images/pages/features/bootswatch-themes-1280x800.jpg +0 -0
  259. data/lib/starter_web/assets/images/pages/features/global-mobile-traffic-1920x1080.jpg +0 -0
  260. data/lib/starter_web/assets/images/pages/features/google-lighthouse-1080x300.jpg +0 -0
  261. data/lib/starter_web/assets/images/pages/features/mobile-navigation-600x800.jpg +0 -0
  262. data/lib/starter_web/assets/images/pages/features/native-speakers-by-language.jpg +0 -0
  263. data/lib/starter_web/assets/images/pages/html_validator/appdevtools-html-validator.jpg +0 -0
  264. data/lib/starter_web/assets/images/pages/html_validator/freeformatter-html-validator.jpg +0 -0
  265. data/lib/starter_web/assets/images/pages/html_validator/w3c-nu-checker.jpg +0 -0
  266. data/lib/starter_web/assets/images/pages/html_validator/w3c-validator.jpg +0 -0
  267. data/lib/starter_web/assets/images/posts/featured/dynamic-web-access.jpg +0 -0
  268. data/lib/starter_web/assets/images/posts/featured/jamstack-generators.jpg +0 -0
  269. data/lib/starter_web/assets/images/posts/featured/jekyll.1200x400.jpg +0 -0
  270. data/lib/starter_web/assets/images/posts/featured/jekyll.jpg +0 -0
  271. data/lib/starter_web/assets/images/posts/featured/static-web-access.jpg +0 -0
  272. data/lib/starter_web/assets/images/promo/home/screenshot.jpg +0 -0
  273. data/lib/starter_web/assets/images/quotes/promo/home/screenshot.jpg +0 -0
  274. data/lib/starter_web/assets/images/quotes/promo/jekyll/jekyll-faq.jpg +0 -0
  275. data/lib/starter_web/assets/images/quotes/promo/jekyll/jekyll-generator.jpg +0 -0
  276. data/lib/starter_web/assets/images/quotes/promo/jekyll/jekyll-generator.png +0 -0
  277. data/lib/starter_web/assets/images/quotes/promo/jekyll/jekyll-og.png +0 -0
  278. data/lib/starter_web/assets/images/quotes/promo/jekyll/scalable/jekyll-faq.psd +0 -0
  279. data/lib/starter_web/collections/_biography/a-life-in-questions.adoc +8 -9
  280. data/lib/starter_web/collections/_biography/becoming.adoc +23 -10
  281. data/lib/starter_web/collections/_biography/born-to-run.adoc +28 -10
  282. data/lib/starter_web/collections/_biography/forty-autumns.adoc +20 -13
  283. data/lib/starter_web/collections/_biography/not-dead-yet.adoc +25 -15
  284. data/lib/starter_web/collections/_biography/princess-diarist-the.adoc +24 -15
  285. data/lib/starter_web/collections/_biography/when-breath-becomes-air.adoc +25 -12
  286. data/lib/starter_web/collections/_fantasy/harry-potter-deathly-hallows.adoc +14 -10
  287. data/lib/starter_web/collections/_fantasy/harry-potter-philosophers-stone.adoc +11 -8
  288. data/lib/starter_web/collections/_fantasy/mistborn-trilogy.adoc +32 -8
  289. data/lib/starter_web/collections/_fantasy/ready-player-one.adoc +17 -14
  290. data/lib/starter_web/collections/_fantasy/sword-of-destiny.adoc +27 -13
  291. data/lib/starter_web/collections/_fantasy/terry-pratchet-diary.adoc +38 -15
  292. data/lib/starter_web/collections/_people/diana-petersen.adoc +2 -0
  293. data/lib/starter_web/collections/_people/larry-parker.adoc +2 -0
  294. data/lib/starter_web/collections/_people/parveen-anand.adoc +2 -0
  295. data/lib/starter_web/collections/_portfolio/branding.adoc +5 -0
  296. data/lib/starter_web/collections/_portfolio/graphic_design.adoc +5 -0
  297. data/lib/starter_web/collections/_portfolio/identity.adoc +5 -0
  298. data/lib/starter_web/collections/_portfolio/illustration.adoc +5 -0
  299. data/lib/starter_web/collections/_portfolio/photography.adoc +5 -0
  300. data/lib/starter_web/collections/_portfolio/web_design.adoc +5 -0
  301. data/lib/starter_web/collections/_romance/{breath-of-snow-and-ashes-a.adoc → breath-of-snow-and-ashes.adoc} +20 -5
  302. data/lib/starter_web/collections/_romance/dressmaker-the.adoc +26 -14
  303. data/lib/starter_web/collections/_romance/fiery-cross-the.adoc +12 -9
  304. data/lib/starter_web/collections/_romance/it-ends-with-us.adoc +14 -11
  305. data/lib/starter_web/collections/_romance/outlander-novel.adoc +48 -25
  306. data/lib/starter_web/collections/_romance/virgins-outlander-short-story.adoc +30 -15
  307. data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb +4 -2
  308. data/lib/starter_web/collections/posts/public/featured/_posts/2021-01-01-about-cookies.adoc +4 -1
  309. data/lib/starter_web/collections/posts/public/featured/_posts/2021-02-01-static-site-generators.adoc +5 -3
  310. data/lib/starter_web/collections/posts/public/featured/_posts/2022-02-01-about-j1.adoc +4 -1
  311. data/lib/starter_web/collections/posts/public/featured/_posts/_includes/attributes.asciidoc +2 -2
  312. data/lib/starter_web/index.html +1 -18
  313. data/lib/starter_web/package.json +3 -3
  314. data/lib/starter_web/pages/public/about/features.adoc +1 -1
  315. data/lib/starter_web/pages/public/about/reporting_issues.adoc +1 -1
  316. data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/_includes/attributes.asciidoc +1 -1
  317. data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/_includes/documents/100_converter/112_getting_started.asciidoc +1 -1
  318. data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/_includes/documents/200_themes/212_values.asciidoc +4 -4
  319. data/lib/starter_web/pages/public/blog/navigator/index.html +2 -2
  320. data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_all_books.adoc +1 -1
  321. data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_biography.adoc +1 -1
  322. data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_fantasy.adoc +1 -1
  323. data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_romance.adoc +1 -1
  324. data/lib/starter_web/pages/public/learn/bookshelf/jekyll_collections.adoc +75 -65
  325. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/attributes.asciidoc +58 -0
  326. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/accordion.asciidoc +34 -0
  327. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/alerts.asciidoc +15 -0
  328. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/badges.asciidoc +9 -0
  329. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/body.asciidoc +14 -0
  330. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/breadcrumbs.asciidoc +14 -0
  331. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/buttons.asciidoc +75 -0
  332. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/cards.asciidoc +22 -0
  333. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/carousel.asciidoc +37 -0
  334. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/close.asciidoc +15 -0
  335. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/code.asciidoc +14 -0
  336. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/color_system.asciidoc +353 -0
  337. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/components.asciidoc +69 -0
  338. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/dropdowns.asciidoc +53 -0
  339. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/figures.asciidoc +5 -0
  340. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/forms.asciidoc +270 -0
  341. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/grid.asciidoc +49 -0
  342. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/links.asciidoc +21 -0
  343. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/list_groups.asciidoc +28 -0
  344. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/modals.asciidoc +43 -0
  345. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/navbar.asciidoc +45 -0
  346. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/navs.asciidoc +28 -0
  347. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/offcanvas.asciidoc +16 -0
  348. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/options.asciidoc +30 -0
  349. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/pagination.asciidoc +40 -0
  350. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/paragraph.asciidoc +5 -0
  351. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/placeholders.asciidoc +5 -0
  352. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/popovers.asciidoc +28 -0
  353. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/position.asciidoc +8 -0
  354. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/progress_bars.asciidoc +12 -0
  355. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/spacing.asciidoc +14 -0
  356. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/spinners.asciidoc +12 -0
  357. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/tables.asciidoc +55 -0
  358. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/thumbnails.asciidoc +9 -0
  359. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/toasts.asciidoc +18 -0
  360. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/tooltips.asciidoc +28 -0
  361. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/typography.asciidoc +115 -0
  362. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/z_index.asciidoc +26 -0
  363. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/tables/_table.asciidoc +9 -0
  364. data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/tables/accordion.asciidoc +87 -0
  365. data/lib/starter_web/pages/public/learn/bs_sass_variables/bs_sass_variables.adoc +262 -0
  366. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/attributes.asciidoc +59 -0
  367. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/documents/100_chapter.asciidoc +541 -0
  368. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/documents/200_chapter.asciidoc +33 -0
  369. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/build_command_options.asciidoc +72 -0
  370. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/files_and_folders.asciidoc +66 -0
  371. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/global_configuration_options.asciidoc +63 -0
  372. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/global_variables.asciidoc +26 -0
  373. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/page_variables.asciidoc +54 -0
  374. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/serve_command_options.asciidoc +45 -0
  375. data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/site_variables.asciidoc +59 -0
  376. data/lib/starter_web/pages/public/learn/core_web_vitals/core_web_vitals.adoc +442 -0
  377. data/lib/starter_web/pages/public/learn/roundtrip/_includes/attributes.0.asciidoc +112 -0
  378. data/lib/starter_web/pages/public/learn/roundtrip/_includes/attributes.asciidoc +2 -2
  379. data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/100_gistblock.asciidoc +3 -4
  380. data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/themes_rouge.asciidoc +1 -1
  381. data/lib/starter_web/pages/public/learn/roundtrip/asciidoc_extensions.adoc +2 -2
  382. data/lib/starter_web/pages/public/learn/roundtrip/icon_fonts.adoc +10 -10
  383. data/lib/starter_web/pages/public/learn/roundtrip/present_images.adoc +35 -4
  384. data/lib/starter_web/pages/public/learn/roundtrip/responsive_tables.adoc +3 -3
  385. data/lib/starter_web/pages/public/learn/where_to_go.adoc +41 -49
  386. data/lib/starter_web/pages/public/legal/en/100_copyright.adoc +2 -2
  387. data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +2 -2
  388. data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc +2 -2
  389. data/lib/starter_web/pages/public/tools/cheatsheet/gem.adoc +255 -0
  390. data/lib/starter_web/pages/public/tools/cheatsheet/git.adoc +1458 -0
  391. data/lib/starter_web/pages/public/tools/cheatsheet/j1.adoc +63 -0
  392. data/lib/starter_web/pages/public/tools/cheatsheet/yaml.adoc +514 -0
  393. data/lib/starter_web/pages/public/{previewer → tools/previewer}/preview_bootstrap_theme.adoc +94 -5
  394. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  395. data/lib/starter_web/utilsrv/package.json +1 -1
  396. metadata +169 -60
  397. data/_includes/themes/j1/modules/ads/google_ad_content_home.html +0 -11
  398. data/_includes/themes/j1/modules/ads/google_ad_top_home.html +0 -11
  399. data/assets/themes/j1/core/css/nbinteract-tutorial/styles.css +0 -1711
  400. data/assets/themes/j1/core/css/nbinteract-tutorial/styles.min.css +0 -1
  401. data/assets/themes/j1/modules/advertising/js/google/adInitializer.js +0 -127
  402. data/assets/themes/j1/modules/deeplAPI/js/deeplAPI.2.js +0 -460
  403. data/assets/themes/j1/modules/mdiPreviewer/css/previewer.css +0 -97
  404. data/assets/themes/j1/modules/mdiPreviewer/css/previewer.min.css +0 -15
  405. data/assets/themes/j1/modules/mdiPreviewer/js/previewer.js +0 -115
  406. data/assets/themes/j1/modules/mdiPreviewer/js/previewer.min.js +0 -15
  407. data/assets/themes/j1/modules/mdilPreviewer/css/previewer.css +0 -97
  408. data/assets/themes/j1/modules/mdilPreviewer/css/previewer.min.css +0 -15
  409. data/assets/themes/j1/modules/mdilPreviewer/js/previewer.js +0 -125
  410. data/assets/themes/j1/modules/mdilPreviewer/js/previewer.min.js +0 -15
  411. data/lib/starter_web/_includes/themes/j1/modules/ads/google_ad_content_home.html +0 -11
  412. data/lib/starter_web/_includes/themes/j1/modules/ads/google_ad_top_home.html +0 -11
  413. data/lib/starter_web/assets/images/icons/j1/j1-256x256.gif +0 -0
  414. data/lib/starter_web/assets/images/pages/asciidoc_skeletons/example-pdf-screenshot.png +0 -0
  415. data/lib/starter_web/assets/images/pages/features/bootswatch-themes-1280x800.png +0 -0
  416. data/lib/starter_web/assets/images/pages/features/global-mobile-traffic-1920x1080.png +0 -0
  417. data/lib/starter_web/assets/images/pages/features/google-lighthouse-1080x300.png +0 -0
  418. data/lib/starter_web/assets/images/pages/features/mobile-navigation-600x800.png +0 -0
  419. data/lib/starter_web/assets/images/pages/features/native-speakers-by-language.png +0 -0
  420. data/lib/starter_web/assets/images/pages/nbinteract/binderhub-architecture.jpg +0 -0
  421. data/lib/starter_web/assets/images/pages/nbinteract/jupyterlab-architecture.jpg +0 -0
  422. data/lib/starter_web/assets/images/pages/nbinteract/mandelbrot-menge-1920x1200.jpg +0 -0
  423. data/lib/starter_web/assets/images/pages/nbinteract/mandelbrot-menge.png +0 -0
  424. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi-textbook-example.jpg +0 -0
  425. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_bar.jpg +0 -0
  426. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_hist.jpg +0 -0
  427. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_line.jpg +0 -0
  428. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_multiple_choice.jpg +0 -0
  429. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_scatter.jpg +0 -0
  430. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_scatter_drag.jpg +0 -0
  431. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_short_answer.jpg +0 -0
  432. data/lib/starter_web/assets/images/pages/nbinteract/nbi-textbook-example.jpg +0 -0
  433. data/lib/starter_web/assets/images/posts/featured/dynamic-web-access.png +0 -0
  434. data/lib/starter_web/assets/images/posts/featured/jamstack-generators.png +0 -0
  435. data/lib/starter_web/assets/images/posts/featured/jekyll.1200x400.png +0 -0
  436. data/lib/starter_web/assets/images/posts/featured/jekyll.png +0 -0
  437. data/lib/starter_web/assets/images/posts/featured/post-1.jpg +0 -0
  438. data/lib/starter_web/assets/images/posts/featured/post-2.jpg +0 -0
  439. data/lib/starter_web/assets/images/posts/featured/post-3.jpg +0 -0
  440. data/lib/starter_web/assets/images/posts/featured/post-4.jpg +0 -0
  441. data/lib/starter_web/assets/images/posts/featured/post-5.jpg +0 -0
  442. data/lib/starter_web/assets/images/posts/featured/static-web-access.png +0 -0
  443. data/lib/starter_web/collections/posts/public/series/_posts/2022-08-01-organize-your-life.adoc +0 -118
  444. data/lib/starter_web/collections/posts/public/series/_posts/2022-08-02-organize-your-life.adoc +0 -118
  445. data/lib/starter_web/collections/posts/public/series/_posts/2022-08-03-organize-your-life.adoc +0 -118
  446. data/lib/starter_web/collections/posts/public/series/_posts/2022-09-01-organize-your-life.adoc +0 -117
  447. data/lib/starter_web/collections/posts/public/series/_posts/2022-09-02-organize-your-life.adoc +0 -117
  448. /data/lib/starter_web/assets/images/badges/{configBinder.png → png/configBinder.png} +0 -0
  449. /data/lib/starter_web/assets/images/badges/{docsBinder.png → png/docsBinder.png} +0 -0
  450. /data/lib/starter_web/assets/images/badges/{notebookBinder.png → png/notebookBinder.png} +0 -0
  451. /data/lib/starter_web/assets/images/icons/hyvor-talk/{hyvor-logo.24x24.png → png/hyvor-logo.24x24.png} +0 -0
  452. /data/lib/starter_web/assets/images/icons/hyvor-talk/{hyvor-logo.512x512.png → png/hyvor-logo.512x512.png} +0 -0
@@ -0,0 +1,442 @@
1
+ ---
2
+ title: Core Web Vitals
3
+ tagline: Improve the user experience
4
+ date: 2023-06-07 00:00:00 +100
5
+ description: >
6
+ Optimizing the user experience you offer on your website is essential
7
+ for the success of any online business. Google does use different user
8
+ experience-related metrics to rank web pages for SEO and has continued
9
+ to provide multiple tools to measure and improve web performance.
10
+
11
+ keywords: >
12
+ Jekyll, Theme, JekyllOne, Turorial, SEO, Optimizing, User Experience,
13
+ Core Web Vitals, Speed Index
14
+
15
+ categories: [ Tutorial ]
16
+ tags: [ SEO, FCP, LCP, TBT, CLS, Speed Index ]
17
+
18
+ image:
19
+ path: /assets/images/modules/attics/leon-1920x1280.jpg
20
+ width: 1920
21
+ height: 1280
22
+ alt: Photo by Leon
23
+
24
+ fab_menu_id: open_toc
25
+ regenerate: true
26
+ permalink: /pages/public/learn/core_web_vitals/
27
+
28
+ resources: [ animate, clipboard, lightbox, rouge]
29
+ resource_options:
30
+ - attic:
31
+ slides:
32
+ - url: /assets/images/modules/attics/leon-1920x1280.jpg
33
+ alt: Photo by Leon
34
+ ---
35
+
36
+ // Page Initializer
37
+ // =============================================================================
38
+ // Enable the Liquid Preprocessor
39
+ :page-liquid:
40
+
41
+ // Set (local) page attributes here
42
+ // -----------------------------------------------------------------------------
43
+ // :page--attr: <attr-value>
44
+
45
+ // Load Liquid procedures
46
+ // -----------------------------------------------------------------------------
47
+ {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
48
+
49
+ // Load page attributes
50
+ // -----------------------------------------------------------------------------
51
+ {% include {{load_attributes}} scope="all" %}
52
+
53
+
54
+ // Page content
55
+ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
56
+ [role="dropcap"]
57
+ Optimizing the user experience you provide on your website is essential to
58
+ the success of any online business. Google uses various user experience-related
59
+ metrics to rank websites for SEO and continues to provide several tools to
60
+ measure and improve web performance.
61
+
62
+ // Include sub-documents (if any)
63
+ // -----------------------------------------------------------------------------
64
+ // See: https://css-tricks.com/improve-largest-contentful-paint-lcp-on-your-website-with-ease/
65
+
66
+ == Core Web Vitals
67
+
68
+ In its recent attempt to make measuring and understanding a good user
69
+ experience easier, _Google_ has standardized the site's user experience
70
+ metrics. These standardized metrics, called *Core Web Vitals*, help
71
+ evaluate the *real-world* user experience of a website.
72
+
73
+ *Core Web Vitals* is a set of specific website performance metrics introduced
74
+ by Google to measure and quantify the user experience of a web page. They
75
+ focus on key aspects of web *page loading*, *interactivity*, and
76
+ *visual stability*, which are crucial for providing a good user experience.
77
+
78
+ The Core Web Vitals *metrics* are:
79
+
80
+ * First Contentful Paint (FCP): `FCP` measures how long it takes the browser
81
+ to render the *first piece of DOM content* after a user navigates to your
82
+ page. Images, non-white `<canvas>` elements, and SVGs on your page are
83
+ considered DOM content; anything inside an iframe isn't included.
84
+ Values should less than *1.8 seconds*.
85
+
86
+ * Largest Contentful Paint (LCP): LCP measures the loading speed of
87
+ the main content on a web page. It represents the time taken for the
88
+ largest visible element, such as an image or a block of text, to be
89
+ rendered within the viewport. To provide a good user experience, the
90
+ `LCP` should occur within the first *2.5 seconds* of the page starting
91
+ to load.
92
+
93
+ * Total Blocking Time: `TBT` measures the total amount of time that a page
94
+ is blocked from responding to user input, such as mouse clicks, screen
95
+ taps, or keyboard presses. The sum is calculated by adding the blocking
96
+ portion of all *long tasks* between *First Contentful Paint* (FCP) and
97
+ *Time to Interactive*. Any task that executes for more than *50 ms* is a
98
+ *long task*. Values for `TBT` should in total less than
99
+ *200 milliseconds*.
100
+
101
+ * Cumulative Layout Shift (CLS): `CLS` measures the *visual* stability
102
+ of a web page. It quantifies how much the page layout *shifts* during
103
+ the loading process. Layout shifts can be disruptive, causing users
104
+ to accidentally click on the wrong elements or lose their place on
105
+ the page. A good user experience aims for a `CLS` score of less than
106
+ *0.1*.
107
+
108
+ Very good (excellent) website performance values for *Core Web Vitals*
109
+ takes a lot of work to achieve. Values like the screenshot below require
110
+ much work in the optimization and even then, can only rarely be achieved.
111
+
112
+ .Excellent performance values (Lighthouse)
113
+ lightbox::core_web_vitals_best_full[ 800, {data-image--core_web_vitals_best_full}, role="mt-3"]
114
+
115
+ Nevertheless, it makes sense to achieve the best possible performance. The
116
+ ranking of a website will improve a lot, and above all: the readers will
117
+ appreciate it and visit such sites again.
118
+
119
+
120
+ == J1 Template Build-in Optimizations
121
+
122
+ Optimizations of the *Core Web Vitals* are already done for all pages
123
+ the template system.
124
+
125
+ Bla ...
126
+
127
+ First Contentful Paint (FCP::
128
+ Bla ...
129
+
130
+ Largest Contentful Paint (LCP)::
131
+ Bla ...
132
+
133
+ Total Blocking Time::
134
+ Bla ...
135
+
136
+ Cumulative Layout Shift (CLS)::
137
+ Bla ...
138
+
139
+
140
+ == Optimizise LCP
141
+
142
+ The Largest Contentful Paint or short *LCP* is one of the Core Web Vitals
143
+ metrics that measure when the largest *content element* becomes *visible* in
144
+ the browser. While other metrics like *TTFB* (time to first byte) and
145
+ First Contentful Paint (*FCP*) also help measure page experience, they don't
146
+ indicate when the page has become *meaningful* to the user.
147
+
148
+ Typically, the page provides only a less context information to the user
149
+ until the largest element becomes fully visible. LCP is, therefore, more
150
+ representative of user expectations. As a Core Web Vital metric, LCP accounts
151
+ for *25%* of the total performance ccore, making it one of the most important
152
+ metrics to optimize a page.
153
+
154
+ As per Google, the types of elements considered for Largest Contentful
155
+ Paint are:
156
+
157
+ * `<img>` elements
158
+ * `<image>` elements inside an `<svg>` element
159
+ * `<video>` elements (the poster image is used)
160
+ * An element with a background image loaded via the https://developer.mozilla.org/en-US/docs/Web/CSS/url[url()]
161
+ function (as opposed to a
162
+ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients[CSS])
163
+ gradient
164
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements[Block-level]
165
+ elements containing text nodes or other inline-level text elements.
166
+
167
+ Now, there are multiple ways to measure the LCP of your page. The easiest
168
+ ways to measure it online is available on
169
+ https://imagekit.io/blog/improve-google-pagespeed-insights-score-for-images/?utm_source=css-tricks&utm_medium=sponsored_content&utm_campaign=csstricks_LCP[PageSpeed Insights, {browser-window--new}].
170
+
171
+ Other Tools:
172
+
173
+ * Google Chrome Developer Tools (Lighthouse)
174
+ * Search Console (Core Web Vitals Report)
175
+
176
+ For example, *Google PageSpeed Insights* in
177
+ its report indicates the element considered for calculating the LCP.
178
+
179
+ // image::https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/09/LCP_Image.jpg?resize=1601%2C1201&ssl=1[image,width=558,height=419]
180
+
181
+ Now that you know what is LCP and what our target should be let’s look at
182
+ ways to improve LCP on our website. The underlying principle of reducing
183
+ LCP in all of the techniques mentioned below is to reduce the data downloaded
184
+ on the user’s device and reduce the time it takes to send and execute that
185
+ content.
186
+
187
+ === Optimizing Images
188
+
189
+ On most websites, the above-the-fold content usually contains a large
190
+ image which gets considered for LCP. It could either be a hero image, a
191
+ banner, or a carousel. It is, therefore, crucial that you optimize these
192
+ images for a better LCP.
193
+
194
+ // image::https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/09/optimised-vs-unoptimised.jpeg?resize=1600%2C681&ssl=1[image,width=1600,height=681]
195
+
196
+ To optimize your images, you should use a third-party image CDN like
197
+ ImageKit.io. The advantage of using a third-party
198
+ https://imagekit.io/blog/what-is-image-cdn-guide/?utm_source=css-tricks&utm_medium=sponsored_content&utm_campaign=csstricks_LCP[image CDN, {browser-window--new}]
199
+ is that you can focus on your actual business and leave image
200
+ optimization to the image CDN.
201
+
202
+ The image CDN would stay at the edge of technology evolution, and you
203
+ always get the best possible features with minimum ongoing investment.
204
+
205
+ ImageKit is a complete real-time image CDN that integrates with any
206
+ existing cloud storage like AWS S3, Azure, Google Cloud Storage, etc. It
207
+ even comes with its integrated image storage and manager called the
208
+ Media Library.
209
+
210
+ Here is how ImageKit can help you improve your LCP score.
211
+
212
+ ==== Images in Lighter Formats
213
+
214
+ ImageKit detects if the user’s browser supports modern lighter formats
215
+ like WebP or AVIF and automatically delivers the image in the *lightest*
216
+ possible format in real-time. Formats like WebP are over 30% lighter
217
+ compared to their JPEG equivalents.
218
+
219
+ ////
220
+ [role="mb-5"]
221
+ image::https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/09/webp_jpg_image_size_comparison.jpeg?resize=1200%2C691&ssl=1[image,width=1200,height=691]
222
+ ////
223
+
224
+ ==== Automatically Compress Images
225
+
226
+ Not just converting the image to the correct format, ImageKit also
227
+ compresses your image to a smaller size. In doing so, it balances the
228
+ image’s visual quality and the output size.
229
+
230
+ You get the option to alter the compression level (or quality) in
231
+ real-time by just changing a URL parameter, thereby balancing your
232
+ business requirements of visual quality and load time.
233
+
234
+ // image::https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/09/image-compression-comparison_quality.jpeg?resize=1750%2C860&ssl=1[image,width=1750,height=860]
235
+
236
+ ==== Real-time Transformations for Images
237
+
238
+ Google uses mobile-first indexing for almost all websites. It is
239
+ therefore essential to optimize LCP for mobile more than that for
240
+ desktop. Every image needs to be scaled down to as per the layout’s
241
+ requirement.
242
+
243
+ For example, you would need the image in a smaller size on the product
244
+ listing page and a larger size on the product detail page. This resizing
245
+ ensures that you are not sending any additional bytes than what is
246
+ required for that particular page.
247
+
248
+ ImageKit allows you to transform
249
+ https://imagekit.io/responsive-images/?utm_source=css-tricks&utm_medium=sponsored_content&utm_campaign=csstricks_LCP[responsive images, {browser-window--new}]
250
+ in real-time just by adding the corresponding transformation in
251
+ the image URL. For example, the following image is resized to width
252
+ 200px and height 300px by adding the height and width transformation
253
+ parameters in its URL.
254
+
255
+ ////
256
+ [role="mb-5"]
257
+ image::https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/09/eiffel-tower-example_200400.jpg?resize=200%2C400&ssl=1[image,width=200,height=400]
258
+ ////
259
+
260
+ ==== Caching Images
261
+
262
+ Image CDNs use a global
263
+ https://imagekit.io/blog/what-is-content-delivery-network-cdn-guide/?utm_source=css-tricks&utm_medium=sponsored_content&utm_campaign=csstricks_LCP[Content Delivery Network, {browser-window--new}]
264
+ (CDN) to deliver the images. Using a CDN ensures that images load from a
265
+ location closer to the user instead of your server, which could be halfway
266
+ across the globe.
267
+
268
+ // image::https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/09/CDN_server_user.jpg?resize=702%2C250&ssl=1[image,width=702,height=250]
269
+
270
+ ImageKit, for example, uses AWS Cloudfront as its CDN, which has over
271
+ 220 deliver nodes globally. A vast majority of the images get loaded in
272
+ less than 50ms. Additionally, it uses the proper caching directives to
273
+ cache the images on the user’s device, CDN nodes, and even its
274
+ processing network for a faster load time.
275
+
276
+ This helps to improve LCP on your website.
277
+
278
+
279
+ === Client-side Optimization
280
+
281
+ ==== Preload Critical Resources
282
+
283
+ There are certain cases where the browser may not prioritize loading a
284
+ visually important resource that impacts LCP. For example, a banner
285
+ image above the fold could be specified as a background image inside a
286
+ CSS file. Since the browser would never know about this image until the
287
+ CSS file is downloaded and parsed along with the DOM tree, it will not
288
+ prioritize loading it.
289
+
290
+ For such resources, you can preload them by adding a `<link>` tag with a
291
+ `rel= "preload"` attribute to the head section of your HTML document.
292
+
293
+ [source, html]
294
+ ----
295
+ <!-- Example of preloading -->
296
+ <link rel="preload" src="banner_image.jpg" />
297
+ ----
298
+
299
+ While you can preload multiple resources in a document, you should
300
+ always restrict it to above-the-fold images or videos, page-wide font
301
+ files, or critical CSS and JS files.
302
+
303
+ ==== Preconnect Third-party Origins
304
+
305
+ If you use third-party domains to deliver critical above-the-fold
306
+ content like JS, CSS, or images, then you would benefit by indicating to
307
+ the browser that a connection to that third-party domain needs to be
308
+ made as soon as possible. This is done using the `rel="preconnect"`
309
+ attribute of the `<link>` tag.
310
+
311
+ [source, html]
312
+ ----
313
+ <link rel="preconnect" href="https://static.example.com" />
314
+ ----
315
+
316
+ With `preconnect` in place, the browser can save the domain connection
317
+ time when it downloads the actual resource later.
318
+
319
+ Subdomains like static.example.com, of your main website domain
320
+ example.com are also third-party domains in this context.
321
+
322
+ You can also use the _dns-prefetch_ as a fallback in browsers that don’t
323
+ support preconnect. This directive instructs the browser to complete the
324
+ DNS resolution to the third-party domain even if it cannot establish a
325
+ proper connection.
326
+
327
+ ==== Compress Text Files
328
+
329
+ Any text-based data you load on your webpage should be compressed when
330
+ transferred over the network using a compression algorithm like gzip or
331
+ Brotli. SVGs, JSONs, API responses, JS and CSS files, and your main
332
+ page’s HTML are good candidates for compression using these algorithms.
333
+ This compression significantly reduces the amount of data that will get
334
+ downloaded on page load, therefore bringing down the LCP.
335
+
336
+ ==== Remove Render-blocking Resources
337
+
338
+ When the browser receives the HTML page from your server, it parses the
339
+ DOM tree. If there is any external stylesheet or JS file in the DOM, the
340
+ browser has to pause for them before moving ahead with the parsing of
341
+ the remaining DOM tree.
342
+
343
+ These JS and CSS files are called render-blocking resources and delay
344
+ the LCP time. Here are some ways to reduce the blocking time for JS and
345
+ CSS files:
346
+
347
+ ==== Remove Unnecessary Bundles
348
+
349
+ Avoid shipping huge bundles of JS and CSS files to the browser if they
350
+ are not needed. If the CSS can be downloaded a lot later, or a JS
351
+ functionality is not needed on a particular page, there is no reason to
352
+ load it up front and block the render in the browser.
353
+
354
+ Suppose you cannot split a particular file into smaller bundles, but it
355
+ is not critical to the functioning of the page either. In that case, you
356
+ can use the defer attribute of the script tag to indicate to the browser
357
+ that it can go ahead with the DOM parsing and continue to execute the JS
358
+ file at a later stage. Adding the defer attribute removes any blocker
359
+ for DOM parsing. The LCP, therefore, goes down.
360
+
361
+ ==== Use Inline CSS
362
+
363
+ Critical CSS comprises the style definitions needed for the DOM that
364
+ appears in the first fold of your page. If the style definitions for
365
+ this part of the page are inline, i.e., in each element’s `style`
366
+ attribute, the browser has no dependency on the external CSS to style
367
+ these elements. Therefore, it can render the page quickly, and the LCP
368
+ goes down.
369
+
370
+ ==== Minify Content
371
+
372
+ You should always minify the CSS and JS files before loading them in the
373
+ browser. CSS and JS files contain whitespace to make them legible, but
374
+ they are unnecessary for code execution. So, you can remove them, which
375
+ reduces the file size on production. Smaller file size means that the
376
+ files can load quickly, thereby reducing your LCP time.
377
+
378
+ Compression techniques, as discussed earlier, use data compression
379
+ algorithms to bring down the file size delivered over the network. Gzip
380
+ and Brotli are two compression algorithms.
381
+ https://imagekit.io/blog/what-and-why-brotli-compression/?utm_source=css-tricks&utm_medium=sponsored_content&utm_campaign=csstricks_LCP[Brotli compression, {browser-window--new}]
382
+ offers a superior compression ratio compared to Gzip and is
383
+ now supported on all major browsers, servers, and CDNs.
384
+
385
+
386
+ === Server-side Optimization
387
+
388
+ A lot of computation, DB queries, and page construction happens on the
389
+ server. You should analyze the requests going to your servers and
390
+ identify the possible bottlenecks for responding to the requests. It
391
+ could be a DB query slowing things down or the building of the page on
392
+ your server.
393
+
394
+ You can apply best practices like caching of DB responses, pre-rendering
395
+ of pages, amongst others, to reduce the time it takes for your server to
396
+ respond to requests.
397
+
398
+ Of course, if the above does not improve the response time, you might
399
+ need to increase your server capacity to handle the number of requests
400
+ coming in.
401
+
402
+ ==== Reduce Response Times
403
+
404
+ If your server takes long to respond to a request, then the time it
405
+ takes to render the page on the screen also goes up. It, therefore,
406
+ negatively affects every page speed metric, including LCP. To improve
407
+ your server response times, here is what you should do.
408
+
409
+ ==== Content Delivery Network (CDN)
410
+
411
+ We have already seen above that using an image CDN like ImageKit
412
+ improves the loading time for your images. Your users get the content
413
+ delivered from a CDN node close to their location in milliseconds.
414
+
415
+ // image::https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/09/with-cdn.jpg?resize=452%2C250&ssl=1[image,width=452,height=250]
416
+
417
+ You should extend the same to other content on your website. Using a CDN
418
+ for your static content like JS, CSS, and font files will significantly
419
+ speed up their load time. ImageKit does support the delivery of static
420
+ content through its systems.
421
+
422
+ You can also try to use a CDN for your HTML and APIs to cache those
423
+ responses on the CDN nodes. Given the dynamic nature of such content,
424
+ using a CDN for HTML or APIs can be a lot more complex than using a CDN
425
+ for static content.
426
+
427
+ ////
428
+ === Conclusion
429
+
430
+ Core Web Vitals, which include LCP, have become a significant search
431
+ ranking factor and strongly correlate with the user experience.
432
+ Therefore, if you run an online business, you should optimize these
433
+ vitals to ensure the success of the same.
434
+
435
+ The above techniques have a significant impact on optimizing LCP. Using
436
+ ImageKit as your image CDN will give you a quick headstart.
437
+
438
+ https://imagekit.io/registration/?utm_source=css-tricks&utm_medium=sponsored_content&utm_campaign=csstricks_LCP[Sign-up for an forever free account, {browser-window--new}],
439
+ upload your images to the ImageKit storage,
440
+ or connect your origin, and start delivering optimized images in
441
+ minutes.
442
+ ////
@@ -0,0 +1,112 @@
1
+ // ~/document_base_folder/000_includes
2
+ // Asciidoc attribute includes: attributes.asciidoc
3
+ // -----------------------------------------------------------------------------
4
+
5
+ // URLs - Internal references and/or sources on the Internet
6
+ // -----------------------------------------------------------------------------
7
+ tag::urls[]
8
+
9
+ :url-mdb--home: https://mdbootstrap.com/
10
+ :url-mdb--bs-modals: https://mdbootstrap.com/docs/jquery/modals/basic/
11
+ :url-mdb--bs-modals-legacy: https://mdbootstrap.com/legacy/4.3.2/?page=javascript/modals
12
+
13
+ :url-w3org--css-spec: https://www.w3.org/Style/CSS/specs.en.html
14
+ :url-w3schools--css-tutorial: https://www.w3schools.com/css/default.asp
15
+
16
+ :url-fontawesome--home: https://fontawesome.com/
17
+ :url-fontawesome--icons: https://fontawesome.com/v5/search
18
+ :url-fontawesome--get-started: https://fontawesome.com/get-started
19
+
20
+ :url-mdi--home: https://materialdesignicons.com/
21
+ :url-mdi-icons--cheatsheet: https://cdn.materialdesignicons.com/3.3.92/
22
+
23
+ :url-iconify--home: https://iconify.design/
24
+ :url-iconify--icon-sets: https://iconify.design/icon-sets/
25
+ :url-iconify--medical-icons: https://iconify.design/icon-sets/medical-icon/
26
+ :url-iconify--brand-icons: https://iconify.design/icon-sets/logos/
27
+
28
+ :url-jekyll-one--core-doc-color-scheme: https://support.jekyll-one.com/user_guide/core/color_scheme
29
+
30
+ :url-light-gallery--license: http://sachinchoolur.github.io/lightGallery/docs/license.html
31
+
32
+ :url-font-icons--icon-picker: https://jekyll.one/pages/public/tools/previewer/icon-picker/
33
+
34
+ :url-asciidoctor-extensions--lab: https://github.com/asciidoctor/asciidoctor-extensions-lab
35
+ :url-asciidoctor-extensions--use-extension: https://github.com/asciidoctor/asciidoctor-extensions-lab#using-an-extension
36
+ :url-asciidoctor-user-manual--extensions: http://asciidoctor.org/docs/user-manual/#extensions
37
+
38
+ :url-roundtrip--data-slider-picker: /pages/public/learn/roundtrip/data_slider_picker
39
+ :url-roundtrip--image_headers: /pages/public/learn/roundtrip/image_header
40
+ :url-roundtrip--readme-first: /pages/public/learn/read_me_first/
41
+ :url-roundtrip--present-images: /pages/public/learn/roundtrip/present_images/
42
+ :url-roundtrip--present-videos: /pages/public/learn/roundtrip/present_videos/
43
+ :url-roundtrip--cards: /pages/public/learn/roundtrip/cards/
44
+ :url-roundtrip--typography: /pages/public/learn/roundtrip/typography/
45
+ :url-roundtrip--asciidoc-extensions: /pages/public/learn/roundtrip/asciidoc_extensions/
46
+ :url-roundtrip--extended-modals: /pages/public/learn/roundtrip/modals/
47
+ :url-roundtrip--icon-fonts: /pages/public/learn/roundtrip/mdi_icon_font/
48
+ :url-roundtrip--responsive-tables: /pages/public/learn/roundtrip/responsive_tables/
49
+ :url-roundtrip--themes: /pages/public/learn/roundtrip/themes/
50
+ :url-roundtrip--quicksearch: /pages/public/learn/roundtrip/quicksearch/
51
+
52
+ :url-github-gist--home: https://gist.github.com/
53
+ :url-asciidoc-extensions--gist-example: https://gist.github.com/mojavelinux/5546622
54
+
55
+ :url-previewer--theme: /pages/public/tools/previewer/theme/
56
+
57
+ :url-fa-icons--previewer: https://fontawesome.com/v5/search
58
+ :url-iconify-icons--previewer: https://icon-sets.iconify.design/
59
+
60
+ :url-kickstarter--web-in-a-day: https://jekyll.one/pages/public/learn/kickstarter/web_in_a_day/meet_and_greet/
61
+
62
+ end::urls[]
63
+
64
+
65
+ // FOOTNOTES, global asciidoc attributes (variables)
66
+ // -----------------------------------------------------------------------------
67
+ tag::footnotes[]
68
+
69
+ :fn-bootstrap-v5--responsive-text: footnote:[https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes[Supported with Bootstrap V5 · Responsive font sizes, window="_blank"]]
70
+ :fn-mdi-icons--home: footnote:[https://materialdesignicons.com/[MDI icons · Home, window="_blank"]]
71
+
72
+ end::footnotes[]
73
+
74
+
75
+ // Tags - Asciidoc attributes used internally
76
+ // -----------------------------------------------------------------------------
77
+ tag::tags[]
78
+ end::tags[]
79
+
80
+
81
+ // Data - Data elements for Asciidoctor extensions
82
+ // -----------------------------------------------------------------------------
83
+ tag::data[]
84
+
85
+ :data-images-standalone: "assets/images/modules/gallery/old_times/image_02.jpg, GrandPa's 80th Birthday"
86
+ :data-images-group: "assets/images/modules/gallery/old_times/image_03.jpg, GrandPa's annual journey, assets/images/modules/gallery/old_times/image_04.jpg, GrandPa's annual journey"
87
+
88
+ :data-images--themes-menu: "assets/images/pages/roundtrip/themes-menu-1280x800.jpg, Themes menu (Bootswatch)"
89
+ :data-images--styles-menu: "assets/images/pages/roundtrip/styles-menu-1280x800.jpg, Styles menu (Bootswatch)"
90
+
91
+ :data-quicksearch-icon: "assets/images/pages/roundtrip/600_quicksearch/quicksearch_icon-800x200.jpg, Search button (magnifier) in the quick access area"
92
+ :data-quicksearch-input: "assets/images/pages/roundtrip/600_quicksearch/quicksearch_input-800x200.jpg, Input bar for a QuickSearch"
93
+
94
+ end::data[]
95
+
96
+
97
+ // Images - Images from local include/images folder
98
+ // -----------------------------------------------------------------------------
99
+ tag::images[]
100
+ end::images[]
101
+
102
+
103
+ // PRODUCTS, local product information (e.g. release)
104
+ // -----------------------------------------------------------------------------
105
+ tag::products[]
106
+ end::products[]
107
+
108
+
109
+ // AUTHORS, local author information (e.g. article)
110
+ // -----------------------------------------------------------------------------
111
+ tag::authors[]
112
+ end::authors[]
@@ -29,7 +29,7 @@ tag::urls[]
29
29
 
30
30
  :url-light-gallery--license: http://sachinchoolur.github.io/lightGallery/docs/license.html
31
31
 
32
- :url-material-design-icons--cheatsheet: https://jekyll.one/pages/public/previewer/mdi_font/
32
+ :url-font-icons--icon-picker: https://jekyll.one/pages/public/tools/previewer/icon-picker/
33
33
 
34
34
  :url-asciidoctor-extensions--lab: https://github.com/asciidoctor/asciidoctor-extensions-lab
35
35
  :url-asciidoctor-extensions--use-extension: https://github.com/asciidoctor/asciidoctor-extensions-lab#using-an-extension
@@ -52,7 +52,7 @@ tag::urls[]
52
52
  :url-github-gist--home: https://gist.github.com/
53
53
  :url-asciidoc-extensions--gist-example: https://gist.github.com/mojavelinux/5546622
54
54
 
55
- :url-previewer--theme: /pages/public/previewer/theme/
55
+ :url-previewer--theme: /pages/public/tools/previewer/theme/
56
56
 
57
57
  :url-fa-icons--previewer: https://fontawesome.com/v5/search
58
58
  :url-iconify-icons--previewer: https://icon-sets.iconify.design/
@@ -5,17 +5,16 @@ An excellent place for code snippets is Gist at Github. To embed an existing
5
5
  gist into your documents, the Asciidoc Extention *Gist block* provides the
6
6
  block macro `gist::` to do so.
7
7
 
8
- The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
8
+ The following gist snippet is taken from link:{url-asciidoc-extensions--gist-example}[this example, window="_blank"]:
9
9
 
10
10
  [source, prometheus, role="noclip"]
11
11
  ----
12
12
  .Gist title
13
- gist::git_address[] <1>
13
+ gist::git_address[]
14
14
  ----
15
- <1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
16
15
 
17
16
  .Example of a gist block
18
- [source, prometheus, role="noclip"]
17
+ [source, text, role="noclip"]
19
18
  ----
20
19
  .Guard setup to live preview AsciiDoc output
21
20
  gist::mojavelinux/5546622[]
@@ -24,7 +24,7 @@ Make a selection of a theme below to preview.
24
24
  <!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
25
25
  <!-- NOTE: control the behaviour of popper.js for positioning -->
26
26
  <!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->
27
- <button class="btn btn-primary btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-bs-toggle="dropdown" data-bs-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
27
+ <button class="btn btn-flex btn-lg btn-warning dropdown-toggle" data-flip="false" type="button" data-bs-toggle="dropdown" data-bs-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
28
28
  Select Theme<span class="caret"></span>
29
29
  </button>
30
30
  <ul class="dropdown-menu scrollable-menu" role="menu">
@@ -649,7 +649,7 @@ lorem:sentences[5]
649
649
  All macro types available for `lorem:` to be used for blind text can be
650
650
  found with the following table below.
651
651
 
652
- //.Tabelle
652
+ .Macros available
653
653
  [cols="5,2,5a", options="header", role="rtable mb-2"]
654
654
  |===
655
655
  |Macro | Type |Example
@@ -679,7 +679,7 @@ lorem:sentences[5]
679
679
  |
680
680
  lorem:date[]
681
681
 
682
- |`date[strftime]` e.g. `date[%Y-%m-%d]``
682
+ |`date[strftime]` e.g. `date[%Y-%m-%d]`
683
683
  |date
684
684
  |
685
685
  lorem:date[%Y-%m-%d]