j1-template 2023.8.2 → 2023.9.1

data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb

@@ -1,20 +1,34 @@
 ---
 title:                                  Welcome to Jekyll
 tagline:                                Websites For Everyone
+
 #date:                                  <%= Time.now.strftime('%Y-%m-%d') %>
 #last_modified:                         2023-01-01
 
-categories:                             [ Jekyll, Featured ]
-tags:                                   [ Post, Template ]
+description: >
+                                        Jekyll is a static site generator that allows you to build websites
+                                        using HTML, CSS, Javascript, and Markdown for writing the content.
+                                        It uses templates and layouts to generate the static files that make
+                                        up your website, which can be hosted on any web server.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap
+
+categories:                             [ Jekyll ]
+tags:                                   [ Template, Theme ]
 
 image:
   path:                                 /assets/images/modules/attics/katie-moum-1920x1280.jpg
   width:                                1920
   height:                               1200
-  alt:                                  Jekyll for Everyone
+  alt:                                  Photo by Katie Moum on Unsplash
 
 group:                                  Featured
-series:                                 Featured
+#series:                                Featured
+
+tts:                                    true
+fab_menu_id:                            open_toc
+comments:                               false
 regenerate:                             false
 
 resources:                              [ animate ]
@@ -43,12 +57,12 @@ resource_options:
 // Place an excerpt at the most top position
 // -----------------------------------------------------------------------------
 [role="dropcap"]
-A static site serves the content straight to the user as it is stored on
-the server-side.
+Jekyll is a static site generator that allows you to build websites
+using HTML, CSS, Javascript, and Markdown or Asciidoc for writing
+the content.
 
-Contrary to WordPress, which uses a database to load dynamic content, a
-static site will display the content immediately as it will directly load
-the HTML files from the server.
+It uses templates and layouts to generate the static files that make up your
+website, which can be hosted on any web server.
 
 excerpt__end
 
@@ -68,8 +82,12 @@ All you’re doing at the end of the day is writing your content, and the J1
 Template does all the tricky things: putting out HTML, Javascript, and CSS.
 As a result, the site creation process gets out of your way.
 
+mdi:clock-time-five-outline[24px, md-gray mr-2 mt-4]
+*5 Minutes* to read
+
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
+[role="mt-5"]
 == What is a static site?
 
 A static site serves the content straight to the user as it is stored on
@@ -78,16 +96,12 @@ which use a database to load dynamic content, a static site will display
 the same content to every user as it will directly load the HTML files
 on the server.
 
-A static site serves the content straight to the user as it is stored on
-the server-side. In opposition to WordPress, which uses a database to load
-dynamic content, a static site will display the same content to every user
-as it will directly load the HTML files on the server.
-
 In the last few years, static sites have greatly increased in popularity.
 This surge is primarily due to advances in developer tools (languages and
 libraries) and a stronger desire among businesses to optimize website
 performance beyond the limits of a database-driven site.
 
+[role="mt-4"]
 === What's different?
 
 A dynamic website uses a database and PHP/MySQL to generate the content of
@@ -102,50 +116,73 @@ leveraging HTML and CSS as well as server-side scripting languages like PHP
 to build webpages on the fly and serve different content to each site
 visitor.
 
-=== Why use a static site?
+
+[role="mt-5"]
+== Why use a static site?
 
 What are the advantages of a static website over a dynamic site?
-You may be wondering *Why should I build a static site when I could do the
-same by using WordPress?*. Well, having a database implies a lot of downsides.
-Here come the main advantages of using a static site over a dynamic
-one.
-
-Performance::
-*The better performance and a crazy fast load time*.
-One of the main advantages of using a static site is the fact that
-it is crazy fast to load. Indeed, when the user requests a page, there is
+You may be wondering *Why should I build a static site* when I could do *the
+same by using WordPress?*.
+
+Well, having a database implies a lot of downsides. Here come the main
+advantages of using a static site over a dynamic one.
+
+[role="mt-4"]
+=== Performance
+
+Better performance and a crazy fast load time.
+
+One of the main advantages of using a static site is the fact that it is
+crazy fast to load. Indeed, when the user requests a page, there is
 no need to request a database and various files to generate the
 page itself as all the content is already placed in a one and only file:
-an HTML one. That’s why by using a static site, you will get a boost in
+an HTML one.
+
+That’s why by using a static site, you will get a boost in
 your loading time that will provide a great user experience for the
 internauts. Moreover, we know that more and more people are surfing the
 web using their smartphones with, sometimes, poor internet connections.
 That’s why having fast loading times will participate in making your
 website mobile-friendly.
 
-Security::
-*Having a static website: say goodbye to hacking and security issues*.
+[role="mt-4"]
+=== Security
+
+Say goodbye to hacking and security issues.
+
 Are you tired of getting WordPress notifications about security issues and
 updates every week? No worries, as a static site has no database, there are
 close to no hack possible compared to a WordPress website. Indeed, your
 site will have way fewer footprints and security issues since it will
-only load plain HTML and CSS files. The security gain in having a static
+only load plain HTML and CSS files.
+
+The security gain in having a static
 website is one of the main reasons why many famous brands switch to a
 static site instead of having their website on Drupal or WordPress.
 
-Hosting::
-*Building a static site and hosting: you will save you money*.
-Using a static site, you will only have most of the time only HTML and CSS
-files to host. This kind of file is super light which also means that you
-will not need a powerhouse hosting to have a static site up and running.
+[role="mt-4"]
+=== Hosting
+
+Building a static site and hosting: you will save money.
+
+Using a static site, you need only HTML and CSS files to host. This kind
+of file is super light which also means that you will not need a powerhouse
+hosting to have a static site up and running.
+
 Moreover, if your traffic suddenly increases, your site will not go down,
 contrary to a dynamic site that should request the database each time
 for each user.
 
-Control::
-*You're the master*. You were using a CMS means, giving control over your
-site to others. Simple like this.
+[role="mt-4"]
+=== Control
+
+You're the master.
 
+You were using a CMS means, giving control over your site to others.
+Simple like this.
+
+
+[role="mt-5"]
 == Why use a site generator?
 
 Working with pure HTML files is annoying; senseless today. Indeed, if you need
@@ -159,6 +196,7 @@ content and the Template. To say it another way, by using a static site
 generator, you will only need to make the modification once, and the
 generator will apply it to all your pages.
 
+[role="mt-4"]
 === Why Jekyll?
 
 As the popularity of static sites is growing, there are plenty of static
@@ -171,37 +209,3 @@ When I decided to go for a blog based on a static web, I personally
 choose Jekyll as for me. It's a well-known static site generator, good support
 in case of trouble, and the software gets regularly updated. This website is
 powered by Jekyll. For good reasons.
-
-
-== Automatically generated posts
-
-You’ll find this post in your `_posts` directory. Go ahead and edit it and
-re-build the site to see your changes. You can rebuild the site in many
-different ways, but the most common way is to run `jekyll serve`, which
-launches a web server and auto-regenerates your site when a file is updated.
-
-Jekyll requires blog post files to be named according to the following format:
-
-`YEAR-MONTH-DAY-title.MARKUP`
-
-Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit
-numbers, and `MARKUP` is the file extension representing the format used in
-the file. After that, include the necessary front matter. Take a look at the
-source for this post to get an idea about how it works.
-
-Jekyll also offers powerful support for code snippets:
-
-[source, ruby]
-----
-def print_hi(name)
-  puts "Hi, #{name}"
-end
-print_hi('Tom')
-#=> prints 'Hi, Tom' to STDOUT.
-----
-
-Check out the https://jekyllrb.com/docs/home[Jekyll Docs, {{browser-window--new}}]
-for more info on how to get the most out of Jekyll. File all bugs amd feature
-requests at https://github.com/jekyll/jekyll/issues[Jekyll Github Project, {{browser-window--new}}].
-If you have questions, you can ask them on
-https://talk.jekyllrb.com/[Jekyll Talk, {{browser-window--new}}].

data/lib/starter_web/collections/posts/public/featured/_posts/2021-01-01-about-cookies.adoc

@@ -1,9 +1,12 @@
 ---
 title:                                  Cookies
-tagline:                                Good To Know
+title_extention:                        Good To Know About Cookies
+tagline:                                About Cookies
+
+#date:                                  2023-01-01
 #last_modified:                         2023-01-01
 
-categories:                             [ Technology, Featured ]
+categories:                             [ Technology ]
 tags:                                   [ Cookies ]
 
 image:
@@ -15,11 +18,12 @@ image:
 group:                                  Featured
 series:                                 Featured
 
+#tts:                                    false
 fab_menu_id:                            open_toc
 comments:                               false
 regenerate:                             false
 
-resources:                              [ animate, bmd ]
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      600
@@ -51,96 +55,104 @@ resource_options:
 Cookies can be used for various purposes, such as tracking user behavior,
 remembering login credentials, and personalizing the user experience.
 
-Providing clear and transparent information about cookies helps users
-understand how their data is used and allows them to make informed choices
-about their privacy.
+Providing clear and transparent information about using cookies by website
+operators helps users understand how their data is used and allows them to
+make better choices about their privacy.
 
 excerpt__end
 
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+mdi:clock-time-five-outline[24px, md-gray mr-2 mt-4]
+*3-5 Minutes* to read
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="mt-5"]
+== What are Cookies
+
+HTTP header cookies, or short cookies, are a small data files that a website
+asks your browser to create on your computer or mobile device. A cookie allows
+the website to store your actions or preferences over time.
+
+All modern browsers support cookies. However, users can configure a browser
+to decline them. Moreover, all users can delete all or selected cookie files 
+whenever they like.
+
+Find below how cookies are typically used for.
+
+[role="mt-4"]
+=== General
 
-== What are cookies technically
+In general, cookies are used to remember a vistors personal preferences.
 
-In short, a  cookie is a small piece of data that a website asks your
-browser to store on your computer or mobile device. The cookie allows the
-website to "remember" your actions or preferences over time. All modern
-browsers support cookies, but users can set their browsers to decline them
-and can delete them whenever they like. Good to know.
+[role="mt-4"]
+=== Identification
 
-Websites mainly use cookies for:
+Cookies allows to identify users, on return for example.
 
-Identification::
-Identify users, on return for example.
+[role="mt-4"]
+=== Support
 
-General information storage::
-Remember users' custom preferences.
+The data stored in cookies can help users to complete tasks without
+re-entering the same information when visiting the site later.
 
-Support::
-Help users complete tasks without re-entering information when browsing
-from one page to another or when visiting the site later.
+[role="mt-4"]
+=== Tracking
 
-Track behavioral::
 Cookies can also be used for online behavioral target advertising and to
-show adverts relevant to something that the user searched for in the past.
-The webserver supplying the webpage can store a cookie on the user's
-computer or mobile device.
-
-All these cookies are called HTTP header cookies. Another way of storing
-cookies is through JavaScript code contained or referenced on that page.
-Each time the user requests a new page, the webserver can receive the
-values of the cookies it previously set and return the page with content
-relating to these values. Similarly, JavaScript code can read a
-cookie belonging to its domain and act accordingly.
-
-.How are they used
-[NOTE]
-====
-The web server supplying the webpage can store a cookie on the user's
-computer or mobile device. An external web server that manages files
-included or referenced in the web page can store cookies. All these
-cookies are called HTTP header cookies. Another way of storing cookies
-is through JavaScript code contained or referenced on that page.
-
-Each time the user requests a new page, the web server can receive the
-values of the cookies it previously set and return the page with content
-relating to these values. Similarly, JavaScript code can read a
-cookie belonging to its domain and act accordingly.
-====
+show innformation relevant to something that users searched for in the past.
+The webserver supplying the webpage can store a cookie on the users
+computer or mobile device to store such personal preferences.
+
 
-== Types of cookies
+[role="mt-5"]
+== Types of Cookies
 
-HTTP cookies are essential to the modern Internet but potentially a
-vulnerability to your privacy. As a necessary part of web browsing, cookies
-help web developers give you more personal, convenient website visits.
-Cookies let websites remember you, your website logins, shopping carts, and
-more. But they can also be a treasure trove of private info for criminals
-to spy on.
+Cookies let websites remember you: for example your logins or purchases.
+But they can also be a treasure trove of private info for criminals to
+spy on.
 
-Since the data in cookies doesn't change, cookies themselves aren't harmful.
-They *can't infect* computers with viruses or other malware. However, some
-cyberattacks can hijack cookies and enable access to your browsing sessions.
-The danger lies in their ability to track individuals' browsing histories.
-Cookies generally can be classified by its *lifespan* and the *domain* to
-which it belongs.
+In general, cookies can't infect computers with viruses or other type of
+malware. However, some cyberattacks can hijack cookies and enable access to
+your browsing sessions. The danger lies in their ability to track individuals'
+browsing histories. Web browser manufacturers introduced many security
+functions to minimize attack risks.
 
-=== By Lifespan
+A cookie can be classified by its lifespan and the website to which it
+belongs.
 
-Cookies classified by *lifespan* are either a:
+[role="mt-4"]
+=== Lifespan
+
+Cookies classified by lifespan are either a:
 
 Session cookie::
-Session cookies gets automatically deleted when the user closes the web browser
-and all open window tabs.
+Session cookies gets automatically deleted when the user closes the
+web browser and all open window tabs.
 
 Persistent cookie::
-A persistent cookie *remains* on the user's computer/device for a pre-defined
-period of time.
+A persistent cookie remains on the user's computer/device for a
+pre-defined period of time; for a year at the maximum.
 
-=== By Domain
+[role="mt-4"]
+=== Website
 
-Cookies classified by the *domain* to which it belongs, are either of:
+The domain classifies cookies, the web address to which it belongs is
+either of:
 
 First-party cookie::
 First-party cookie cookies are set by the webserver of the visited page
-and share the *same domain* you're visiting. These are generally safer, as
+and share the same domain you're visiting. These are generally safer, as
 long as users are browsing reputable websites or ones that have not been
 compromised.
 
@@ -148,29 +160,43 @@ Third-party cookies::
 Third-party cookies are stored by a *different* domain to the visited page.
 This can happen when the webpage references a file located outside its domain.
 Third-party cookies let advertisers or analytics companies track the user's
-browsing history across the web on *any* sites that contain their ads.
+browsing history across the web on any sites that contain their ads.
 
 
-== Security aspects on using cookies
+[role="mt-5"]
+== Security
 
-Without cookies, the web would not work as it does today. However, since the
-mid 90ies when cookies were invented, the web changed quite a lot, and so did
-the attack methods on web applications; as mentioned, the Internet is not a
-friendly place.
+Without cookies, the Web would not work as it does today. However, since the
+mid 90ies when Cookies were introduced, the web changed quite a lot, and so
+did the attack methods on web applications.
 
-A well-known attack method is known as Cross-Site Request Forgery or short
-*CSRF*. CSRF is an attack, a criminal act, that forces an end user to execute
-unwanted actions. A cookie may play a *role* in such scenarios, but they are
-not generally *unsafe* if you want, you can read more about that on the
-CRSF Page on {url-owasp-attacks--csrf}[OWASP, {browser-window--new}].
+[role="mb-4"]
+A well-known attack method is known as cross-site request forgery or short
+CSRF. A *CSRF* is an attack that forces an end user to execute unwanted
+actions. A cookie may play a role in such scenarios, but they are not
+generally unsafe.
 
-== How to control cookies
+[TIP]
+====
+If you like, read more about on a CRSF attack on the page
+link:{url-owasp-attacks--csrf}[OWASP, {browser-window--new}].
+====
 
-Users can take control, used or *not* used, or delete cookies. For more
-details, see {url-about-cookies--home}[AboutCookies]. You can delete
-all cookies that are already on your computer, and you can set most
-browsers to prevent them from being placed.
 
+[role="mt-5"]
+== Control
+
+Users can take control when cookies are used or not. You can delete all
+cookies that are already on your computer, and you
+can set most browsers to prevent them from being placed.
+
+[role="mb-4"]
 If you do this, however, you may have to manually adjust some preferences
 every time you visit a site, and some services and functionalities may not
 work.
+
+[TIP]
+====
+For more information how cookies are used, visit the page
+link:{url-about-cookies--home}[AboutCookies, {browser-window--new}].
+====

data/lib/starter_web/collections/posts/public/featured/_posts/2021-02-01-static-site-generators.adoc

@@ -1,9 +1,12 @@
 ---
 title:                                  Static Site Generators
-tagline:                                Top Open Source SSGs
+title_extention:                        Top Open Source Static Site Generators
+tagline:                                Top Open Source
+
+#date:                                  2023-01-01
 #last_modified:                         2023-01-01
 
-categories:                             [ Jekyll, Featured ]
+categories:                             [ Jekyll ]
 tags:                                   [ Generators ]
 
 image:
@@ -15,10 +18,12 @@ image:
 group:                                  Featured
 series:                                 Featured
 
+#tts:                                    false
+fab_menu_id:                            open_toc
 comments:                               false
 regenerate:                             false
 
-resources:                              [ animate, bmd, lightbox ]
+resources:                              [ animate, lightbox ]
 resource_options:
   - attic:
       padding_top:                      600
@@ -43,14 +48,14 @@ resource_options:
 // Place an excerpt at the most top position
 // -----------------------------------------------------------------------------
 [role="dropcap"]
-This article highlights the top open-source projects providing static site
+This article highlights the top Open Source projects providing static site
 generators, so-called SSGs, in many different programming languages. You will
 find Jekyll one of them.
 
 A SSG is a software tool that assists in creating websites by generating
 static HTML, CSS, and JavaScript files. Unlike dynamic websites that generate
-content on the server side in response to each user request, static sites
-pre-generate the content before it's served to users.
+content on the server side in response to each request of a user, static sites
+pre-generate the content upfront it is served to users.
 
 excerpt__end
 
@@ -65,22 +70,22 @@ excerpt__end
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+mdi:clock-time-five-outline[24px, md-gray mr-2 mt-4]
+*3 Minutes* to read
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-== Dynamic page access
-
-// [role="mb-3"]
-// image::/assets/images/posts/featured/markus-spiske-2.jpg[{{page.title}}]
+[role="mt-5"]
+== Dynamic Webs
 
-A typical CMS-driven website works by building each and every page
+A typical website driven by a CMS works by building each and every page
 *dynamically*. That means fetching the content from a database to pass them
-over to a template system (engine) to load the page content, adding the
-required structure information (e.g., CSS styles) and Javascript components if
+over to a an middleware engine to load the content, add the required
+structure information, for example CSS styles, and Javascript components if
 needed. This means every page is assembled *on demand*.
 
-.Accessing scheme for a CMS (dynamic web)
-lightbox::kickstart-wiad--dynamic-web-access[ 800, {data-kickstart-wiad--dynamic-web-access} ]
+.Accessing Scheme for a CMS
+lightbox::kickstart-wiad--dynamic-web-access[800, {data-kickstart-wiad--dynamic-web-access}]
 
 callout::1["Web Browser"]
 callout::2["Web Server"]
@@ -88,43 +93,54 @@ callout::3["Rendering Engine (e.g. PHP-based)"]
 callout::4["Database (e.g. MySQL, Postgres)"]
 callout::5["Static content (Images, Videos, JS- and CSS files) and Caches", ml-2 mb-3]
 
-== Is a CMS needed?
 
-For many websites, dynamic page generation is entirely unnecessary and
-adds unwanted risks in terms of complexity, performance losses, and security
+[role="mt-5"]
+== Are CMS required?
+
+For many websites, dynamic page generation is entirely unnecessary and adds
+unwanted risks in terms of complexity, performance losses, and security
 issues. After all, the content of most websites changes, when the content
-authors make changes. Why the hell should a web page always assemble on
+authors make changes. Why the hell should a web page always be assembled on
 demand if there are no changes?
 
-NOTE: To be fair, most CMS are providing caching systems for web pages to
+[NOTE]
+====
+To be fair, most CMS are providing caching systems for web pages to
 prevent unnecessary creation processes. It is not easy to implement such
 a caching strategy, and in the very end, it adds the next level of
 complexity.
+====
 
-A Static Site Generator takes a different approach and generates all the pages
+A static site generator takes a different approach and generates all the pages
 of the website *upfront*. That does not necessarily mean that a static website
 is always built from scratch. Modern generators support a so-called
-incremental build, as does. When there are changes detected to the
-content, only selected pages will rebuild.
+incremental build. When there are changes detected to the content, only
+selected pages are rebuild.
 
-.Accessing scheme for a static web
-lightbox::kickstart-wiad--static-web-access[ 800, {data-kickstart-wiad--static-web-access} ]
+.Accessing Scheme for a Static Web
+lightbox::kickstart-wiad--static-web-access[800, {data-kickstart-wiad--static-web-access}]
 
 callout::1["Web Browser"]
 callout::2["Web Server"]
 callout::3["Server-side rendered (prepared) static content", ml-2 mb-3]
 
-== Statically build web pages
+
+[role="mt-5"]
+== Static Webs
 
 Overall, statically build web pages having no moving parts in the deployed
 website. This results in browser-side caching only, the performance
-goes up, and static sites are far more secure because they *build already*.
-To find out what OpenSource Static Site Generators are available today and
-their ranking in terms of popularity, go for Jamstack. You'll find a
-comprehensive list of static site generators used today.
+goes up, and static sites are far more secure because they *build* already
+and cannot be modified.
 
-Check popular static site generators at {url-jamstack--generators}[Jamstack, {browser-window--new}]!
+To find out what Open Source SSG are available today and their ranking in
+terms of popularity, go for Jamstack. You'll find a comprehensive list of
+static site generators used today.
 
-.Top Ratings at Jamstack of October 2022
 [role="mb-4"]
-image::/assets/images/posts/featured/jamstack-generators.jpg["jamstack-generators"]
+Check the most popular site generators available at the
+{url-jamstack--generators}[Jamstack, {browser-window--new}]
+site.
+
+.Top Ratings at Jamstack of October 2022
+image::/assets/images/posts/featured/jamstack-generators.jpg["SSGs at Jamstack"]