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.
- checksums.yaml +4 -4
- data/_includes/themes/j1/layouts/content_generator_news_panel_posts.html +2 -1
- data/_includes/themes/j1/layouts/content_generator_post.html +2 -2
- data/_includes/themes/j1/layouts/layout_metadata_generator.html +38 -38
- data/_includes/themes/j1/procedures/blocks/footer/boxes/about_box.proc +1 -1
- data/_includes/themes/j1/procedures/blocks/footer/boxes/contacts_box.proc +1 -1
- data/_includes/themes/j1/procedures/blocks/footer/boxes/issue.proc +1 -1
- data/_includes/themes/j1/procedures/blocks/footer/boxes/links_box.proc +1 -1
- data/_includes/themes/j1/procedures/blocks/footer/boxes/news_box.proc +1 -1
- data/_includes/themes/j1/procedures/layouts/default_writer.proc +1 -3
- data/_includes/themes/j1/procedures/layouts/module_writer.proc +7 -23
- data/_includes/themes/j1/procedures/layouts/resource_writer.proc +8 -8
- data/_includes/themes/j1/procedures/posts/create_series_header.proc +1 -1
- data/_layouts/compress.html +26 -21
- data/_layouts/default.html +36 -30
- data/assets/data/banner.html +5 -2
- data/assets/data/footer.html +15 -3
- data/assets/data/masonry.html +1 -1
- data/assets/data/masterslider.html +1 -0
- data/assets/data/menu.html +4 -4
- data/assets/data/panel.html +6 -3
- data/assets/data/quicklinks.html +138 -149
- data/assets/error_pages/HTTP204.html +3 -3
- data/assets/error_pages/HTTP400.html +3 -3
- data/assets/error_pages/HTTP401.html +3 -3
- data/assets/error_pages/HTTP403.html +3 -3
- data/assets/error_pages/HTTP404.html +3 -3
- data/assets/error_pages/HTTP444.html +3 -3
- data/assets/error_pages/HTTP445.html +3 -3
- data/assets/error_pages/HTTP446.html +5 -5
- data/assets/error_pages/HTTP447.html +7 -7
- data/assets/error_pages/HTTP448.html +7 -7
- data/assets/error_pages/HTTP500.html +3 -3
- data/assets/error_pages/HTTP501.html +3 -3
- data/assets/error_pages/HTTP502.html +3 -3
- data/assets/error_pages/HTTP503.html +3 -3
- data/assets/themes/j1/adapter/js/advertising.js +355 -156
- data/assets/themes/j1/adapter/js/analytics.js +1 -1
- data/assets/themes/j1/adapter/js/asciidoctor.js +1 -1
- data/assets/themes/j1/adapter/js/attic.js +22 -14
- data/assets/themes/j1/adapter/js/bmd.js +1 -1
- data/assets/themes/j1/adapter/js/carousel.js +5 -4
- data/assets/themes/j1/adapter/js/clipboard.js +1 -1
- data/assets/themes/j1/adapter/js/comments.js +5 -5
- data/assets/themes/j1/adapter/js/cookieConsent.js +1 -1
- data/assets/themes/j1/adapter/js/customFunctions.js +1 -1
- data/assets/themes/j1/adapter/js/customModule.js +1 -1
- data/assets/themes/j1/adapter/js/dropdowns.js +4 -2
- data/assets/themes/j1/adapter/js/fab.js +9 -6
- data/assets/themes/j1/adapter/js/framer.js +1 -1
- data/assets/themes/j1/adapter/js/iconPicker.js +227 -0
- data/assets/themes/j1/adapter/js/j1.js +402 -76
- data/assets/themes/j1/adapter/js/justifiedGallery.js +9 -3
- data/assets/themes/j1/adapter/js/justifiedGalleryCustomizer.js +2 -2
- data/assets/themes/j1/adapter/js/lightbox.js +4 -3
- data/assets/themes/j1/adapter/js/logger.js +1 -1
- data/assets/themes/j1/adapter/js/lunr.js +1 -1
- data/assets/themes/j1/adapter/js/masonry.js +4 -3
- data/assets/themes/j1/adapter/js/masterslider.js +30 -57
- data/assets/themes/j1/adapter/js/mmenu.js +2 -2
- data/assets/themes/j1/adapter/js/navigator.js +7 -5
- data/assets/themes/j1/adapter/js/nbinteract.js +9 -9
- data/assets/themes/j1/adapter/js/particles.js +2 -2
- data/assets/themes/j1/adapter/js/rangeSlider.js +2 -2
- data/assets/themes/j1/adapter/js/rouge.js +2 -2
- data/assets/themes/j1/adapter/js/rtable.js +1 -1
- data/assets/themes/j1/adapter/js/rtextResizer.js +1 -1
- data/assets/themes/j1/adapter/js/scroller.js +97 -109
- data/assets/themes/j1/adapter/js/slick.js +28 -18
- data/assets/themes/j1/adapter/js/themeToggler.js +259 -0
- data/assets/themes/j1/adapter/js/themer.js +63 -23
- data/assets/themes/j1/adapter/js/toccer.js +9 -6
- data/assets/themes/j1/adapter/js/translator.js +4 -2
- data/assets/themes/j1/adapter/js/waves.js +6 -4
- data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.css +1322 -417
- data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.min.css +3 -3
- data/assets/themes/j1/core/css/themes/unodark/bootstrap.css +2064 -1273
- data/assets/themes/j1/core/css/themes/unodark/bootstrap.min.css +3 -3
- data/assets/themes/j1/core/css/themes/unolight/bootstrap.css +10280 -9399
- data/assets/themes/j1/core/css/themes/unolight/bootstrap.min.css +10 -10
- data/assets/themes/j1/core/css/vendor.css +0 -14
- data/assets/themes/j1/core/css/vendor.min.css +1 -1
- data/assets/themes/j1/modules/backstretch/js/backstretch.js +6 -4
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js +1 -1
- data/assets/themes/j1/modules/deeplAPI/js/deeplAPI.js +1 -1
- data/assets/themes/j1/modules/deeplAPI/js/deeplAPI.min.js +1 -1
- data/assets/themes/j1/modules/iconPicker/README.md +266 -0
- data/assets/themes/j1/modules/iconPicker/css/universal-icon-picker.css +419 -0
- data/assets/themes/j1/modules/iconPicker/css/universal-icon-picker.min.css +17 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-brands.json +467 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-brands.min.json +1 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-regular.json +169 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-regular.min.json +1 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-solid.json +1136 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome-solid.min.json +1 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome.json +1772 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/font-awesome.min.json +1 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-light.json +292 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-light.min.json +1 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-regular.json +7312 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-regular.min.json +1 -0
- data/assets/themes/j1/modules/iconPicker/images/magnifying-glass-solid.svg +1 -0
- data/assets/themes/j1/modules/iconPicker/images/star-of-life-solid.svg +3 -0
- data/assets/themes/j1/modules/iconPicker/images/xmark-solid.svg +3 -0
- data/assets/themes/j1/modules/iconPicker/js/universal-icon-picker.js +493 -0
- data/assets/themes/j1/modules/iconPicker/js/universal-icon-picker.min.js +17 -0
- data/assets/themes/j1/modules/jquery/AUTHORS.txt +372 -0
- data/assets/themes/j1/modules/jquery/LICENSE.txt +43 -0
- data/assets/themes/j1/modules/jquery/css/images/ui-icons_444444_256x240.png +0 -0
- data/assets/themes/j1/modules/jquery/css/images/ui-icons_555555_256x240.png +0 -0
- data/assets/themes/j1/modules/jquery/css/images/ui-icons_777620_256x240.png +0 -0
- data/assets/themes/j1/modules/jquery/css/images/ui-icons_777777_256x240.png +0 -0
- data/assets/themes/j1/modules/jquery/css/images/ui-icons_cc0000_256x240.png +0 -0
- data/assets/themes/j1/modules/jquery/css/images/ui-icons_ffffff_256x240.png +0 -0
- data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.css +92 -92
- data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.min.css +4 -4
- data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.structure.css +88 -88
- data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.structure.min.css +2 -2
- data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.theme.css +4 -4
- data/assets/themes/j1/modules/jquery/css/jquery-ui/jquery-ui.theme.min.css +2 -2
- data/assets/themes/j1/modules/jquery/js/jquery-ui.js +13683 -13678
- data/assets/themes/j1/modules/jquery/js/jquery-ui.min.js +3 -3
- data/assets/themes/j1/modules/jquery/js/jquery.js +1029 -1203
- data/assets/themes/j1/modules/jquery/js/jquery.min.js +2 -2
- data/assets/themes/j1/modules/jquery/js/jquery.min.map +1 -1
- data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.css +1315 -0
- data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.min.css +7 -0
- data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.structure.css +886 -0
- data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.structure.min.css +5 -0
- data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.theme.css +446 -0
- data/assets/themes/j1/modules/jquery-3.5.1/css/jquery-ui/jquery-ui.theme.min.css +5 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/extensions/hasClass.js +37 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/extensions/hasClass.min.js +17 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/extensions/removeClass.js +42 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/extensions/removeClass.min.js +17 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/jquery-ui.js +19057 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/jquery-ui.min.js +6 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/jquery.js +10872 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/jquery.min.js +2 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/jquery.min.map +1 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/require.js +2145 -0
- data/assets/themes/j1/modules/jquery-3.5.1/js/require.min.js +5 -0
- data/assets/themes/j1/modules/lightGallery/js/modules/j1/j1-video.js +2 -2
- data/assets/themes/j1/modules/lightGallery/js/modules/j1/j1-video.min.js +1 -1
- data/assets/themes/j1/modules/masterslider/css/theme/uno.css +9 -9
- data/assets/themes/j1/modules/masterslider/css/theme/uno.min.css +1 -1
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno/mmenu.css +2 -2
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno/mmenu.min.css +1 -1
- data/assets/themes/j1/modules/rouge/css/uno.dark/theme.css +136 -47
- data/assets/themes/j1/modules/rouge/css/uno.light/theme.css +9 -9
- data/assets/themes/j1/modules/scroller/js/scroller.js +76 -69
- data/assets/themes/j1/modules/scroller/js/scroller.min.js +1 -1
- data/assets/themes/j1/modules/translator/js/translator.js +1 -1
- data/assets/themes/j1/modules/translator/js/translator.min.js +1 -1
- 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 +5 -2
- data/lib/starter_web/_data/blocks/banner.yml +8 -5
- data/lib/starter_web/_data/blocks/defaults/footer.yml +4 -4
- data/lib/starter_web/_data/blocks/footer.yml +12 -5
- data/lib/starter_web/_data/blocks/panel.yml +41 -38
- data/lib/starter_web/_data/j1_config.yml +68 -58
- data/lib/starter_web/_data/layouts/collection.yml +1 -0
- data/lib/starter_web/_data/layouts/default.yml +1 -1
- data/lib/starter_web/_data/layouts/home.yml +38 -9
- data/lib/starter_web/_data/layouts/news_panel_posts.yml +1 -0
- data/lib/starter_web/_data/layouts/page.yml +2 -1
- data/lib/starter_web/_data/layouts/post.yml +1 -0
- data/lib/starter_web/_data/layouts/raw.yml +1 -0
- data/lib/starter_web/_data/modules/advertising.yml +209 -58
- data/lib/starter_web/_data/modules/analytics.yml +2 -2
- data/lib/starter_web/_data/modules/attics.yml +4 -7
- data/lib/starter_web/_data/modules/defaults/advertising.yml +3 -2
- data/lib/starter_web/_data/modules/defaults/attics.yml +3 -3
- data/lib/starter_web/_data/modules/defaults/iconPicker.yml +42 -0
- data/lib/starter_web/_data/modules/defaults/navigator.yml +15 -13
- data/lib/starter_web/_data/modules/defaults/theme_toggler.yml +42 -0
- data/lib/starter_web/_data/modules/iconPicker.yml +64 -0
- data/lib/starter_web/_data/modules/masonry.yml +3 -3
- data/lib/starter_web/_data/modules/masterslider.yml +5 -5
- data/lib/starter_web/_data/modules/navigator_menu.yml +311 -160
- data/lib/starter_web/_data/modules/scroller.yml +8 -8
- data/lib/starter_web/_data/modules/slick.yml +47 -86
- data/lib/starter_web/_data/modules/theme_toggler.yml +29 -0
- data/lib/starter_web/_data/modules/themer.yml +0 -6
- data/lib/starter_web/_data/resources.yml +54 -53
- data/lib/starter_web/_data/templates/feed.xml +1 -1
- data/lib/starter_web/_includes/attributes.0.asciidoc +626 -0
- data/lib/starter_web/_includes/attributes.asciidoc +81 -72
- data/lib/starter_web/_includes/google/static/google_ad_5128488466.html +19 -0
- data/lib/starter_web/_includes/google/static/google_ad_7284712660.html +19 -0
- data/lib/starter_web/_includes/google/templates/google_ads.html +55 -0
- data/lib/starter_web/_plugins/asciidoctor/google-ad-block.rb +47 -0
- data/lib/starter_web/_plugins/index/lunr.rb +1 -1
- data/lib/starter_web/assets/images/badges/configBinder.jpg +0 -0
- data/lib/starter_web/assets/images/badges/docsBinder.jpg +0 -0
- data/lib/starter_web/assets/images/badges/notebookBinder.jpg +0 -0
- data/lib/starter_web/assets/images/badges/scaleable/configBinder.svg +1 -1
- data/lib/starter_web/assets/images/badges/scaleable/docsBinder.svg +1 -1
- data/lib/starter_web/assets/images/badges/scaleable/myBinder.svg +1 -1
- data/lib/starter_web/assets/images/badges/scaleable/notebookBinder.svg +1 -1
- data/lib/starter_web/assets/images/icons/hyvor-talk/jpg/hyvor-logo.512x512.jpg +0 -0
- data/lib/starter_web/assets/images/icons/hyvor-talk/png/hyvor-logo.24x24.jpg +0 -0
- data/lib/starter_web/assets/images/icons/hyvor-talk/scalable/hyvor-logo.svg +1 -1
- data/lib/starter_web/assets/images/icons/j1/jpg/j1-256x256.jpg +0 -0
- data/lib/starter_web/assets/images/icons/j1/jpg/j1-512x512.jpg +0 -0
- data/lib/starter_web/assets/images/icons/j1/jpg/j1-64x64.jpg +0 -0
- data/lib/starter_web/assets/images/icons/j1/png/j1-256x256.png +0 -0
- data/lib/starter_web/assets/images/icons/j1/png/j1-512x512.jpg +0 -0
- data/lib/starter_web/assets/images/icons/j1/png/j1-512x512.jpg.png +0 -0
- data/lib/starter_web/assets/images/icons/j1/png/j1-512x512.png +0 -0
- data/lib/starter_web/assets/images/icons/j1/png/j1-64x64.png +0 -0
- data/lib/starter_web/assets/images/icons/j1/scalable/j1.svg +1 -1
- data/lib/starter_web/assets/images/icons/mdi/mdi.svg +1 -0
- data/lib/starter_web/assets/images/icons/mdi/mdil.svg +1 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/alexander-redl.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/alina-grubnyak.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/andrea-badino.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/brad-neathery.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/brigitta-schneiter.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/bruno-figueiredo.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/clem-onojeghuo.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/core_web_vitals_best.png +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/crawford-jolly.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/eleni-afiontzi.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/fly-d.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/guillaume-bolduc.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/harpal-singh.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/hayden-mills-2.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/j1-content-mockup-1.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/j1-content-mockup-2.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/j1-content-mockup-3.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/j1-starter-mockup-1.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/john-schnobrich-2.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/josep-martins.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/josh-liu.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/kelly-sikkemal.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/kira-auf-der-heide.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/kristopher-roller.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/kristopher-roller.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/matthaeus.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/melanie-deziel.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/milad-fakurian.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/mohammad-rahmani.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/nasa.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/quino-al-2.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/1920x1280/recha-oktaviani.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/building-blocks-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/christina-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/cookies-1920x1200.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/katie-moum-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/scalable/j1.svg +1 -1
- data/lib/starter_web/assets/images/pages/asciidoc_skeletons/example-pdf-screenshot.jpg +0 -0
- data/lib/starter_web/assets/images/pages/core_web_vitals/200-create-a-link-1.jpg +0 -0
- data/lib/starter_web/assets/images/pages/core_web_vitals/core_web_vitals_best.jpg +0 -0
- data/lib/starter_web/assets/images/pages/core_web_vitals/core_web_vitals_best_full.jpg +0 -0
- data/lib/starter_web/assets/images/pages/features/bootswatch-themes-1280x800.jpg +0 -0
- data/lib/starter_web/assets/images/pages/features/global-mobile-traffic-1920x1080.jpg +0 -0
- data/lib/starter_web/assets/images/pages/features/google-lighthouse-1080x300.jpg +0 -0
- data/lib/starter_web/assets/images/pages/features/mobile-navigation-600x800.jpg +0 -0
- data/lib/starter_web/assets/images/pages/features/native-speakers-by-language.jpg +0 -0
- data/lib/starter_web/assets/images/pages/html_validator/appdevtools-html-validator.jpg +0 -0
- data/lib/starter_web/assets/images/pages/html_validator/freeformatter-html-validator.jpg +0 -0
- data/lib/starter_web/assets/images/pages/html_validator/w3c-nu-checker.jpg +0 -0
- data/lib/starter_web/assets/images/pages/html_validator/w3c-validator.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/dynamic-web-access.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/jamstack-generators.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/jekyll.1200x400.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/jekyll.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/static-web-access.jpg +0 -0
- data/lib/starter_web/assets/images/promo/home/screenshot.jpg +0 -0
- data/lib/starter_web/assets/images/quotes/promo/home/screenshot.jpg +0 -0
- data/lib/starter_web/assets/images/quotes/promo/jekyll/jekyll-faq.jpg +0 -0
- data/lib/starter_web/assets/images/quotes/promo/jekyll/jekyll-generator.jpg +0 -0
- data/lib/starter_web/assets/images/quotes/promo/jekyll/jekyll-generator.png +0 -0
- data/lib/starter_web/assets/images/quotes/promo/jekyll/jekyll-og.png +0 -0
- data/lib/starter_web/assets/images/quotes/promo/jekyll/scalable/jekyll-faq.psd +0 -0
- data/lib/starter_web/collections/_biography/a-life-in-questions.adoc +8 -9
- data/lib/starter_web/collections/_biography/becoming.adoc +23 -10
- data/lib/starter_web/collections/_biography/born-to-run.adoc +28 -10
- data/lib/starter_web/collections/_biography/forty-autumns.adoc +20 -13
- data/lib/starter_web/collections/_biography/not-dead-yet.adoc +25 -15
- data/lib/starter_web/collections/_biography/princess-diarist-the.adoc +24 -15
- data/lib/starter_web/collections/_biography/when-breath-becomes-air.adoc +25 -12
- data/lib/starter_web/collections/_fantasy/harry-potter-deathly-hallows.adoc +14 -10
- data/lib/starter_web/collections/_fantasy/harry-potter-philosophers-stone.adoc +11 -8
- data/lib/starter_web/collections/_fantasy/mistborn-trilogy.adoc +32 -8
- data/lib/starter_web/collections/_fantasy/ready-player-one.adoc +17 -14
- data/lib/starter_web/collections/_fantasy/sword-of-destiny.adoc +27 -13
- data/lib/starter_web/collections/_fantasy/terry-pratchet-diary.adoc +38 -15
- data/lib/starter_web/collections/_people/diana-petersen.adoc +2 -0
- data/lib/starter_web/collections/_people/larry-parker.adoc +2 -0
- data/lib/starter_web/collections/_people/parveen-anand.adoc +2 -0
- data/lib/starter_web/collections/_portfolio/branding.adoc +5 -0
- data/lib/starter_web/collections/_portfolio/graphic_design.adoc +5 -0
- data/lib/starter_web/collections/_portfolio/identity.adoc +5 -0
- data/lib/starter_web/collections/_portfolio/illustration.adoc +5 -0
- data/lib/starter_web/collections/_portfolio/photography.adoc +5 -0
- data/lib/starter_web/collections/_portfolio/web_design.adoc +5 -0
- data/lib/starter_web/collections/_romance/{breath-of-snow-and-ashes-a.adoc → breath-of-snow-and-ashes.adoc} +20 -5
- data/lib/starter_web/collections/_romance/dressmaker-the.adoc +26 -14
- data/lib/starter_web/collections/_romance/fiery-cross-the.adoc +12 -9
- data/lib/starter_web/collections/_romance/it-ends-with-us.adoc +14 -11
- data/lib/starter_web/collections/_romance/outlander-novel.adoc +48 -25
- data/lib/starter_web/collections/_romance/virgins-outlander-short-story.adoc +30 -15
- data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb +4 -2
- data/lib/starter_web/collections/posts/public/featured/_posts/2021-01-01-about-cookies.adoc +4 -1
- data/lib/starter_web/collections/posts/public/featured/_posts/2021-02-01-static-site-generators.adoc +5 -3
- data/lib/starter_web/collections/posts/public/featured/_posts/2022-02-01-about-j1.adoc +4 -1
- data/lib/starter_web/collections/posts/public/featured/_posts/_includes/attributes.asciidoc +2 -2
- data/lib/starter_web/index.html +1 -18
- data/lib/starter_web/package.json +3 -3
- data/lib/starter_web/pages/public/about/features.adoc +1 -1
- data/lib/starter_web/pages/public/about/reporting_issues.adoc +1 -1
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/_includes/attributes.asciidoc +1 -1
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/_includes/documents/100_converter/112_getting_started.asciidoc +1 -1
- data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/_includes/documents/200_themes/212_values.asciidoc +4 -4
- data/lib/starter_web/pages/public/blog/navigator/index.html +2 -2
- data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_all_books.adoc +1 -1
- data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_biography.adoc +1 -1
- data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_fantasy.adoc +1 -1
- data/lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_romance.adoc +1 -1
- data/lib/starter_web/pages/public/learn/bookshelf/jekyll_collections.adoc +75 -65
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/attributes.asciidoc +58 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/accordion.asciidoc +34 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/alerts.asciidoc +15 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/badges.asciidoc +9 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/body.asciidoc +14 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/breadcrumbs.asciidoc +14 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/buttons.asciidoc +75 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/cards.asciidoc +22 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/carousel.asciidoc +37 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/close.asciidoc +15 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/code.asciidoc +14 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/color_system.asciidoc +353 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/components.asciidoc +69 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/dropdowns.asciidoc +53 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/figures.asciidoc +5 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/forms.asciidoc +270 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/grid.asciidoc +49 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/links.asciidoc +21 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/list_groups.asciidoc +28 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/modals.asciidoc +43 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/navbar.asciidoc +45 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/navs.asciidoc +28 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/offcanvas.asciidoc +16 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/options.asciidoc +30 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/pagination.asciidoc +40 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/paragraph.asciidoc +5 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/placeholders.asciidoc +5 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/popovers.asciidoc +28 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/position.asciidoc +8 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/progress_bars.asciidoc +12 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/spacing.asciidoc +14 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/spinners.asciidoc +12 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/tables.asciidoc +55 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/thumbnails.asciidoc +9 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/toasts.asciidoc +18 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/tooltips.asciidoc +28 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/typography.asciidoc +115 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/z_index.asciidoc +26 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/tables/_table.asciidoc +9 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/tables/accordion.asciidoc +87 -0
- data/lib/starter_web/pages/public/learn/bs_sass_variables/bs_sass_variables.adoc +262 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/attributes.asciidoc +59 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/documents/100_chapter.asciidoc +541 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/documents/200_chapter.asciidoc +33 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/build_command_options.asciidoc +72 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/files_and_folders.asciidoc +66 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/global_configuration_options.asciidoc +63 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/global_variables.asciidoc +26 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/page_variables.asciidoc +54 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/serve_command_options.asciidoc +45 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/_includes/tables/site_variables.asciidoc +59 -0
- data/lib/starter_web/pages/public/learn/core_web_vitals/core_web_vitals.adoc +442 -0
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/attributes.0.asciidoc +112 -0
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/attributes.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/100_gistblock.asciidoc +3 -4
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/themes_rouge.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/asciidoc_extensions.adoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/icon_fonts.adoc +10 -10
- data/lib/starter_web/pages/public/learn/roundtrip/present_images.adoc +35 -4
- data/lib/starter_web/pages/public/learn/roundtrip/responsive_tables.adoc +3 -3
- data/lib/starter_web/pages/public/learn/where_to_go.adoc +41 -49
- data/lib/starter_web/pages/public/legal/en/100_copyright.adoc +2 -2
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +2 -2
- data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc +2 -2
- data/lib/starter_web/pages/public/tools/cheatsheet/gem.adoc +255 -0
- data/lib/starter_web/pages/public/tools/cheatsheet/git.adoc +1458 -0
- data/lib/starter_web/pages/public/tools/cheatsheet/j1.adoc +63 -0
- data/lib/starter_web/pages/public/tools/cheatsheet/yaml.adoc +514 -0
- data/lib/starter_web/pages/public/{previewer → tools/previewer}/preview_bootstrap_theme.adoc +94 -5
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +169 -60
- data/_includes/themes/j1/modules/ads/google_ad_content_home.html +0 -11
- data/_includes/themes/j1/modules/ads/google_ad_top_home.html +0 -11
- data/assets/themes/j1/core/css/nbinteract-tutorial/styles.css +0 -1711
- data/assets/themes/j1/core/css/nbinteract-tutorial/styles.min.css +0 -1
- data/assets/themes/j1/modules/advertising/js/google/adInitializer.js +0 -127
- data/assets/themes/j1/modules/deeplAPI/js/deeplAPI.2.js +0 -460
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.css +0 -97
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.min.css +0 -15
- data/assets/themes/j1/modules/mdiPreviewer/js/previewer.js +0 -115
- data/assets/themes/j1/modules/mdiPreviewer/js/previewer.min.js +0 -15
- data/assets/themes/j1/modules/mdilPreviewer/css/previewer.css +0 -97
- data/assets/themes/j1/modules/mdilPreviewer/css/previewer.min.css +0 -15
- data/assets/themes/j1/modules/mdilPreviewer/js/previewer.js +0 -125
- data/assets/themes/j1/modules/mdilPreviewer/js/previewer.min.js +0 -15
- data/lib/starter_web/_includes/themes/j1/modules/ads/google_ad_content_home.html +0 -11
- data/lib/starter_web/_includes/themes/j1/modules/ads/google_ad_top_home.html +0 -11
- data/lib/starter_web/assets/images/icons/j1/j1-256x256.gif +0 -0
- data/lib/starter_web/assets/images/pages/asciidoc_skeletons/example-pdf-screenshot.png +0 -0
- data/lib/starter_web/assets/images/pages/features/bootswatch-themes-1280x800.png +0 -0
- data/lib/starter_web/assets/images/pages/features/global-mobile-traffic-1920x1080.png +0 -0
- data/lib/starter_web/assets/images/pages/features/google-lighthouse-1080x300.png +0 -0
- data/lib/starter_web/assets/images/pages/features/mobile-navigation-600x800.png +0 -0
- data/lib/starter_web/assets/images/pages/features/native-speakers-by-language.png +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/binderhub-architecture.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/jupyterlab-architecture.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/mandelbrot-menge-1920x1200.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/mandelbrot-menge.png +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi-textbook-example.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_bar.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_hist.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_line.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_multiple_choice.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_scatter.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_scatter_drag.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_short_answer.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/nbi-textbook-example.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/dynamic-web-access.png +0 -0
- data/lib/starter_web/assets/images/posts/featured/jamstack-generators.png +0 -0
- data/lib/starter_web/assets/images/posts/featured/jekyll.1200x400.png +0 -0
- data/lib/starter_web/assets/images/posts/featured/jekyll.png +0 -0
- data/lib/starter_web/assets/images/posts/featured/post-1.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/post-2.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/post-3.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/post-4.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/post-5.jpg +0 -0
- data/lib/starter_web/assets/images/posts/featured/static-web-access.png +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2022-08-01-organize-your-life.adoc +0 -118
- data/lib/starter_web/collections/posts/public/series/_posts/2022-08-02-organize-your-life.adoc +0 -118
- data/lib/starter_web/collections/posts/public/series/_posts/2022-08-03-organize-your-life.adoc +0 -118
- data/lib/starter_web/collections/posts/public/series/_posts/2022-09-01-organize-your-life.adoc +0 -117
- data/lib/starter_web/collections/posts/public/series/_posts/2022-09-02-organize-your-life.adoc +0 -117
- /data/lib/starter_web/assets/images/badges/{configBinder.png → png/configBinder.png} +0 -0
- /data/lib/starter_web/assets/images/badges/{docsBinder.png → png/docsBinder.png} +0 -0
- /data/lib/starter_web/assets/images/badges/{notebookBinder.png → png/notebookBinder.png} +0 -0
- /data/lib/starter_web/assets/images/icons/hyvor-talk/{hyvor-logo.24x24.png → png/hyvor-logo.24x24.png} +0 -0
- /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-
|
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/
|
data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/100_gistblock.asciidoc
CHANGED
@@ -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
|
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[]
|
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,
|
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-
|
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
|
-
|
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]
|