jekyll-theme-nocc 2.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: f68377affd630caa0340fd472f07e1ccd3f1c5c4d4bbf8e0fd1ebe27830775b8
+  data.tar.gz: 82548b646b5ee01ec9daf055fb7002e10c7f984bd7b738040a85a535597c971b
+SHA512:
+  metadata.gz: 10fe510840c716834157dc4f6e129c15addccd67cc3d3cc66f56fc07d81f9085ee6bcd79509e664c47b9b4abf8a8ed4e15532bdb37e1ff11027c4ff1abd28440
+  data.tar.gz: d7ae379b4925859bbe516dc3fcb49f819145f2a1e65be9253b4b5b958e083322438285e4f8954051aafcf841f678c3f54e8059d53b97ef5435896e51904d4bfa

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Carles Loriente
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,92 @@
+# jekyll-theme-nocc
+
+## Introduction
+
+**Are you tired of outdated Bootstrap themes?**
+
+**Say hello to NOCC 🎉**: A Modern Bootstrap 5 Theme!
+
+It comes in three powerful options:
+
+- **💎 Theme Jekyll Nocc**: A Ruby gem that brings the power of NOCC directly to your Jekyll project. [Get it now!](https://rubygems.org/gems/jekyll-theme-nocc).
+- **🌟 Nocc Bootstrap Theme**: An NPM Package that brings the power of NOCC directly to your NodeJS project. [Get it now!](https://www.npmjs.com/package/nocc-bootstrap-theme).
+- **🌐 Full Site Bundle for Jekyll**: A complete static website showcasing NOCC's seamless integration. Featuring a beautifully designed homepage, dynamic tag cloud, image gallery, and more. [Explore on GitHub](https://github.com/carlesloriente/bootstrap-theme-jekyll).
+
+> **ⓘ** NOCC is a complete replacement for Bootstrap 5.3.3
+
+## Table of contents
+
+- [jekyll-theme-nocc](#jekyll-theme-nocc)
+  - [Introduction](#introduction)
+  - [Table of contents](#table-of-contents)
+  - [Features](#features)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [Contributing](#contributing)
+  - [Development](#development)
+  - [Creator](#creator)
+  - [Thanks](#thanks)
+  - [Copyright and License](#copyright-and-license)
+
+## Features
+
+1. **Use of the latest Bootstrap 5 library**
+2. **Fully Responsive and Dual Color (light and dark)**
+3. **CSS and JS files are minimized by default**
+4. **Self-hosted Google web fonts**
+5. **Demo site built-in**
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-theme-nocc"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-theme-nocc
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jekyll-theme-nocc
+
+## Usage
+
+TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/carlesloriente/jekyll-theme-nocc. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-nocc.gemspec` accordingly.
+
+## Creator
+
+**[Carles Loriente](https://www.linkedin.com/in/carles-loriente/)** is the creator and maintainer of the NOCC Bootstrap theme.
+
+- [Linkedin](https://www.linkedin.com/in/carles-loriente)
+- [Twitter](https://twitter.com/godarthvader)
+- [GitHub](https://github.com/carlesloriente)
+
+## Thanks
+
+[Bootstrap 5](https://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
+
+## Copyright and License
+
+Copyright (c) 2025 Carles Loriente. Code released under the[MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -0,0 +1,102 @@
+landing                 : false
+title                   : NOCC
+author                  : Your Name
+url                     : "https://www.yoururl.com"
+author_url              : "https://www.yoururl.com"
+baseurl                 : "/" 
+timezone                : "Europe/Madrid"
+description             : A responsive dual theme using Bootstrap 5 for Jekyll created by Carles Loriente.
+full_description        : >
+ A responsive dual theme using Bootstrap 5 for Jekyll created by Carles Loriente. Featuring a homepage, about page, tags cloud page, gallery of images page, examples post pages, post comments powered by Disqus, and contact page form powered by Formspree.
+gh_repository           : https://github.com/yourusername/yourrepo/
+encoding                : "utf-8"
+locale                  : "en-US"
+lang                    : "en"
+formemail               : 
+permalink               : pretty
+
+# Manifest
+name                    : "NOCC Boostrap Jekyll Theme"
+short_name              : "NOCC"
+language                : "en"
+lang_direction          : "ltr"
+color                   : "#FFFFFF"
+
+# Theme Notice (please don't remove it ;))
+theme_version           : v2.0.0
+theme_name              : NOCC Bootstrap Jekyll Theme
+theme_repo              : https://github.com/carlesloriente/jekyll-theme-nocc/
+theme_url               : https://bootstrap-theme.notesoncloudcomputing.com/
+theme_author            : Carles Loriente
+theme_author_url        : https://www.notesoncloudcomputing.com/about/
+theme_download          : https://github.com/carlesloriente/jekyll-theme-nocc/archive/refs/heads/main.zip
+theme_package           : https://rubygems.org/gems/jekyll-theme-nocc
+theme_logo              : "/assets/vendor/nocc-bootstrap-theme/images/nocc/nocc_logo.webp"
+
+# Social Profiles
+email                   : "you@email.com"
+twitter_username        : 
+github_username         : 
+linkedin_username       : 
+kofi                 : 
+
+# Add your google-analytics ID here to activate google analytics
+google_site_verification: 
+google_analytics        : 
+google_adsense_account  : 
+google_tag_id           : 
+
+# Disqus Comments
+# Leave shortname blank to disable comments site-wide.
+# Disable comments for any post by adding `comments: false` to that post's YAML Front Matter.
+disqus_shortname        : 
+
+includes_dir            : _includes
+layouts_dir             : _layouts
+plugins_dir             : _plugins
+tags_dir                : tags
+
+collections:
+  posts:
+    permalink           : /posts/:name/
+    output              : true
+  tags:
+    permalink           : /tags/:name/
+    output              : true
+
+defaults:
+  - scope:
+      path              : "posts"
+      type              : posts
+    values:
+      layout            : post
+  - scope:
+      path              : 'assets/**'
+    values:
+      sitemap           : false
+
+# Markdown Processors
+kramdown:
+  auto_ids              : true
+  entity_output         : as_char
+  toc_levels            : [1, 2, 3, 4, 5, 6]
+  smart_quotes          : lsquo,rsquo,ldquo,rdquo
+  input                 : GFM
+  hard_wrap             : false
+  footnote_nr           : 1
+  show_warnings         : false
+
+# Build settings
+paginate                : 20
+paginate_path           : "/notes/page:num/"
+plugins:
+  - jekyll-feed
+  - jekyll-paginate
+  - jekyll-redirect-from
+
+sass:
+  load_paths:
+    - ./_sass
+  style                 : compressed
+
+exclude: ["AUTHORS.md", "CODE_OF_CONDUCT.md", "CONTRIBUTING.md", "CODEOWNERS", "LICENSE", "README.md", "SECURITY.md", "WORKFLOW.md", "Gemfile", "Gemfile.lock", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"]

data/_includes/carousel.html

@@ -0,0 +1,39 @@
+  <section class="homehead">
+    <div class="mx-auto">
+      <div id="carouselRide" class="carousel slide carousel-fade" data-bs-ride="true">
+        <div class="carousel-inner">
+          <div class="overlay"></div>
+          <div class="page-heading">
+            {%- if page.title %}
+              <h1>{{ page.title }}</h1>
+            {% else -%}
+              <h1>{{ site.title }}</h1>
+            {% endif -%}
+            {%- if site.description %}
+              <h2 class="subheading">{{ site.description }}</h2>
+            {% endif -%}
+          </div>
+          {%- for image in page.carousel %}
+          <div class="carousel-item" data-bs-interval="20000">
+            <img src="{{ image }}" class="d-block w-100" aria-hidden="true">
+          </div>
+          {% endfor -%}
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselRide" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselRide" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+    </div>
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', (event) => {
+        var carouselInner = document.getElementsByClassName('carousel-item');
+        var carouselItem = carouselInner[0];
+        carouselItem.className += ' active';
+      });
+    </script>
+  </section>

data/_includes/code_block.html

@@ -0,0 +1,3 @@
+<div class="language-{{ include.lang }} highlighter-rouge"><pre class="highlight"><button type="button" class="btn-clipboard float-end tooltip" type="button" aria-label="Copy to clipboard" data-bs-original-title="Copy to clipboard"><span class="tooltiptext">Copy to clipboard</span><span class="clipboard filter-white"></span></button>
+<code>{{ include.content }}</code>
+</pre></div>

data/_includes/disqus_comments.html

@@ -0,0 +1,16 @@
+{% if page.comments != false and jekyll.environment == "production" %}
+  <div id="disqus_thread"></div>
+  <script type="text/javascript">
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.url | absolute_url }}';
+    };
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'https://{{ site.disqus_shortname }}.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+{% endif %}

data/_includes/features.html

@@ -0,0 +1,18 @@
+
+<div id="icon-grid" class="container px-4 py-5">
+  <h2 class="pb-2 border-bottom">Key Features</h2>
+  <div class="row g-4 py-5 row-cols-2 row-cols-lg-3">
+  {% for feature in features -%}
+    <div class="col d-flex align-items-start">
+      <div class="features-icon features-icon-gradient text-body-emphasis  d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+        <img role="img" class="filter-white" alt="Free software" aria-label="Free Software" src="{{ feature.background }}" width="45em" height="45em">
+      </div>
+      <div>
+        <h3 class="fs-2 text-body-emphasis">{{ feature.background }}</h3>
+        {{ feature.content }}
+      </div>
+    </div>
+  {% endfor -%}
+  </div>
+</div>
+<div class="home-divider"></div>

data/_includes/footer.html

@@ -0,0 +1,55 @@
+
+<!-- Footer -->
+<footer class="footer mt-auto">
+  <div class="container">
+    <ul class="list-inline text-center">
+      {%- if site.email %}
+      <li class="list-inline-item rounded-circle">
+        <a href="mailto:{{ site.email | encode_email }}" hreflang="{{ site.lang }}" aria-label="{{ site.email }} address">
+          <img class="filter-white" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/envelope-at-fill.svg' | relative_url }}" width="32px" height="32px" aria-hidden="true">
+        </a>
+      </li>
+      {%- endif -%}
+      {% if site.twitter_username %}
+      <li class="list-inline-item rounded-circle">
+        <a href="https://twitter.com/{{ site.twitter_username }}" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="{{ site.twitter_username }} Twitter">
+          <img class="filter-white" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/twitter-x.svg' | relative_url }}" width="32px" height="32px" aria-hidden="true">
+        </a>
+      </li>
+      {%- endif -%}
+      {% if site.facebook_username %}
+      <li class="list-inline-item rounded-circle">
+        <a href="https://www.facebook.com/{{ site.facebook_username }}" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="{{ site.facebook_username }} Facebook">
+          <img class="filter-white" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/facebook.svg' | relative_url }}" width="32px" height="32px" aria-hidden="true">
+        </a>
+      </li>
+      {%- endif -%}
+      {% if site.linkedin_username %}
+      <li class="list-inline-item rounded-circle">
+        <a href="https://www.linkedin.com/in/{{ site.linkedin_username }}" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="{{ site.linkedin_username }} Linkedin">
+          <img class="filter-white" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/linkedin.svg' | relative_url }}" width="32px" height="32px" aria-hidden="true">
+        </a>
+      </li>
+      {%- endif -%}
+      {% if site.github_username %}
+      <li class="list-inline-item rounded-circle">
+        <a href="https://github.com/{{ site.github_username }}" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="{{ site.github_username }} GitHub">
+          <img class="filter-white" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/github.svg' | relative_url }}" width="32px" height="32px" aria-hidden="true">
+        </a>
+      </li>
+      {%- endif -%}
+      {% if site.instagram_username %}
+      <li class="list-inline-item rounded-circle">
+        <a href="https://instagram.com/{{ site.instagram_username }}" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="{{ site.instagram_username }} Instagram">
+          <img class="filter-white" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/instagram.svg' | relative_url }}" width="32px" height="32px" aria-hidden="true">
+        </a>
+      </li>
+      {%- endif %}
+    </ul>
+    <p class="copyright text-copyright">Copyright &copy; <a href="{{ site.author_url }}" hreflang="{{ site.lang }}" aria-label="{{ site.title }} author">{{ site.author }}</a> {{ 'now' | date: "%Y" }}<br />
+      <a href="{{ site.theme_repo }}" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="{{ site.theme_name }}">{{ site.theme_name }}</a> {{ site.theme_version }} created by <a href="{{ site.theme_author_url }}" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="Autor website {{ site.theme_author_url }}">{{ site.theme_author }}</a><br />
+      Build with <a href="https://jekyllrb.com" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="Jekyll">Jekyll</a><br />
+      Proudly hosted by <a href="https://github.com" hreflang="{{ site.lang }}" target="_blank" rel="noopener noreferrer" aria-label="Github"><strong>GitHub</strong></a>
+    </p>
+  </div>
+</footer>

data/_includes/google_analytics.html

@@ -0,0 +1,8 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script type="text/javascript" async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}" ></script>
+<script type="text/javascript">
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '{{ site.google_analytics }}', {cookie_flags: 'SameSite=None;Secure'});
+</script>

data/_includes/head.html

@@ -0,0 +1,33 @@
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
+  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% elsif page.description %}{{ page.description | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% else %}{{ site.description | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% endif %}">
+  <meta name="google-site-verification" content="{{ site.google_site_verification }}">
+  <meta name="author" content="{{ site.author }}">
+  {%- if site.twitter_username %}
+  <meta name="twitter:site" content="{{ site.twitter_username }}">
+  <meta name="twitter:creator" content="{{ site.twitter_username }}">
+  {% endif -%}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta property="twitter:domain" content='{{ site.url | split: "//" | last | split: "/" | first }}'>
+  <meta property="twitter:url" content="{{ page.url | absolute_url }}">
+  <meta name="twitter:title" content="{{ page.title | escape }}">
+  <meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% elsif page.description %}{{ page.description | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% else %}{{ site.description | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% endif %}">
+  <meta name="twitter:image" content="{{ page.background | absolute_url }}">
+  <meta property="og:url" content="{{ page.url | absolute_url }}">
+  <meta property="og:site_name" content="{{ site.title }}">
+  <meta property="og:type" content="article">
+  <meta property="og:title" content="{{ page.title | escape }}">
+  <meta property="og:locale" content="{{ site.locale }}">
+  <meta property="og:published_time" content="{% if page.date %}{{ page.date }}{% else %}{{ site.date }}{% endif %}">
+  <meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% elsif page.description %}{{ page.description | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% else %}{{ site.description | strip_html | normalize_whitespace | truncate: 160 | escape | page.title }}{% endif %}">
+  <meta property="og:image" content="{{ page.background | absolute_url }}">
+  <link rel="stylesheet" href="{{ '/assets/vendor/nocc-bootstrap-theme/css/nocc-theme.min.css' | relative_url }}" type="text/css">
+  <link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}" type="text/css">
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ 'feed.xml' | relative_url }}">
+  <link rel="shortcut icon" href="{{ '/assets/vendor/nocc-bootstrap-theme/images/favicon_io/favicon.ico' | relative_url }}">
+  <link rel="icon" href="{{ '/assets/vendor/nocc-bootstrap-theme/images/favicon_io/favicon.ico' | relative_url }}" sizes="any">
+  <link rel="icon" href="{{ '/assets/vendor/nocc-bootstrap-theme/images/favicon_io/favicon.svg' | relative_url }}" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="{{ '/assets/vendor/nocc-bootstrap-theme/images/favicon_io/favicon.png' | relative_url }}" type="image/png">
+  <link rel="manifest" href="/manifest.webmanifest">

data/_includes/image.html

@@ -0,0 +1,20 @@
+    {%- for file in site.static_files -%}
+      {%- if file.path contains include.folder -%}
+      {%- if file.extname == '.jpg' or 
+        file.extname == '.jpeg' or 
+        file.extname == '.JPG' or  
+        file.extname == '.webp' or 
+        file.extname == '.png' or 
+        file.extname == '.JPEG' -%}
+        {% assign filenameparts = file.path | split: "/" %}
+        {% assign filename = filenameparts | last | replace: file.extname,"" -%}
+        <button class="thumbnail ratio ratio-4x3" id="{{ filename }}" data-bs-toggle="modal" data-bs-title="{{ filename }}" aria-label="{{ filename }}"
+          data-bs-image="{{ file.path }}"
+          data-bs-target="#image-gallery">
+          <img class="img-thumbnail"
+            src="{{ file.path }}"
+            alt="{{ filename }}">
+        </button>
+      {%- endif -%}
+      {%- endif -%}
+    {%- endfor - %}

data/_includes/navbar.html

@@ -0,0 +1,48 @@
+    <div class="position-fixed bottom-0 end-0 mb-3 me-3">
+      <button class="btn-toggle py-2 d-flex align-items-center" id="bd-toggle" data-bs-toggle="button" type="button" aria-expanded="false" aria-label="Toggle theme color">
+        <span class="daylight filter-white"></span>
+      </button>
+    </div>
+    <script type="text/javascript" src="{{ '/assets/vendor/nocc-bootstrap-theme/js/theme-toggler.min.js' | relative_url }}"></script>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
+      <div class="container">
+        <a class="navbar-brand" hreflang="{{ site.lang }}" href="{{ site.baseurl }}">{{ site.title | escape }}</a>
+        <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+          Menu
+          <i class="fa fa-bars"></i>
+        </button>
+        <div class="collapse navbar-collapse justify-content-end" id="navbarResponsive">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link" hreflang="{{ site.lang }}" href="{{ site.baseurl }}" aria-label="{{ site.title }} Home">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" hreflang="{{ site.lang }}" href="{{ 'about/' | relative_url }}" aria-label="{{ site.title }} About">About</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" hreflang="{{ site.lang }}" href="{{ 'posts/' | relative_url }}" aria-label="{{ site.title }} Posts">Posts</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" hreflang="{{ site.lang }}" href="{{ site.tags_dir | append: '/' | relative_url }}" aria-label="{{ site.title }} Tags">Tags</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" hreflang="{{ site.lang }}" href="{{ 'gallery/' | relative_url }}" aria-label="{{ site.title }} Gallery of images">Gallery</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" hreflang="{{ site.lang }}" href="{{ 'contact/' | relative_url }}" aria-label="{{ site.title }} Contact form">Contact</a>
+            </li>
+            {%- if site.gh_repository %}
+            <li class="nav-item">
+              <a href="{{ site.gh_repository }}" hreflang="{{ site.lang }}" target="_blank" rel="noreferrer" aria-label="{{ site.title }} repo" title="{{ site.title }} repo"><img class="filter-white" src="/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/github.svg" width="24px" height="24px" aria-hidden="true" /></a>
+            </li>
+            {%- endif %}
+            {%- if site.kofi %}
+            <li class="nav-item">
+              <a href="https://ko-fi.com/{{ site.kofi }}" hreflang="{{ site.lang }}" target="_blank" rel="noreferrer" aria-label="Support me on ko-fi.com" title="Support me on ko-fi.com"><img class="nav-kofi" src="/assets/vendor/nocc-bootstrap-theme/images/nocc/kofi_s_logo_nolabel.webp" border="0" alt="Buy Me a Coffee at ko-fi.com" /></a>
+            </li>
+            {% endif -%}
+          </ul>
+        </div>
+      </div>
+    </nav>

data/_includes/read_time.html

@@ -0,0 +1,3 @@
+<span class="reading-time" title="Estimated read time">
+{%- assign words = include.content | number_of_words -%}
+{% if words < 270 %} 1 min {% else %} {{ words | divided_by:135 }} mins {% endif %} read</span>

data/_includes/scripts.html

@@ -0,0 +1,88 @@
+
+{% unless page.tagsindex -%}
+<script type="text/javascript" rel="preload" src="{{ '/assets/vendor/nocc-bootstrap-theme/js/jquery/3.7.1/jquery.min.js' | relative_url }}"></script>
+{% endunless -%}
+<script type="text/javascript" src="{{ '/assets/vendor/nocc-bootstrap-theme/js/clipboardjs/clipboard.min.js' | relative_url }}"></script>
+<script type="text/javascript" src="{{ '/assets/vendor/nocc-bootstrap-theme/js/copy-clipboard.js' | relative_url }}"></script>
+<script type="text/javascript" src="{{ '/assets/vendor/nocc-bootstrap-theme/js/bootstrap/5.3.3/bootstrap.bundle.min.js' | relative_url }}"></script>
+{%- if jekyll.environment != "development" %}
+<script type="text/javascript" src="https://notes-on-cloud-infrastructure.disqus.com/count.js" async id="dsq-count-scr"></script>
+{%- endif %}
+{%- if page.url contains 'contact' -%}
+  <!-- Form Validation -->
+  <script type="text/javascript" src="{{ '/assets/vendor/nocc-bootstrap-theme/js/jq-bootstrap-validation.min.js' | relative_url }}"></script>
+  <!-- Send Form -->
+  <script>
+    $(function () {
+      $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
+        preventSubmit: true,
+        submitError: function ($form, event, errors) {
+          // additional error messages or events
+        },
+        submitSuccess: function ($form, event) {
+          event.preventDefault(); // prevent default submit behaviour
+          // get values from FORM
+          var name = $("input#name").val();
+          var email = $("input#email").val();
+          var message = $("textarea#message").val();
+          var firstName = name; // For Success/Failure Message
+          // Check for white space in name for Success/Fail message
+          if (firstName.indexOf(' ') >= 0) {
+            firstName = name.split(' ').slice(0, -1).join(' ');
+          }
+          $this = $("#sendMessageButton");
+          $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
+          $.ajax({
+            url: "//formspree.io/f/{{ site.formemail }}",
+            type: "POST",
+            data: {
+              name: name,
+              email: email,
+              message: message
+            },
+            cache: false,
+            success: function () {
+              // Success message
+              $('#success').html("<div class='alert alert-success'>");
+              $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
+              $('#success > .alert-success').append("<strong>Your message has been sent. </strong>");
+              $('#success > .alert-success').append('</div>');
+              //clear all fields
+              $('#contactForm').trigger("reset");
+            },
+            error: function () {
+              // Fail message
+              $('#success').html("<div class='alert alert-success'>");
+              $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
+              $('#success > .alert-success').append("<strong>Your message has been sent. </strong>");
+              $('#success > .alert-success').append('</div>');
+              //$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
+              //$('#success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
+              //$('#success > .alert-danger').append('</div>');
+              //clear all fields
+              $('#contactForm').trigger("reset");
+            },
+            complete: function () {
+              setTimeout(function () {
+                $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
+              }, 1000);
+            }
+          });
+        },
+        filter: function () {
+          return $(this).is(":visible");
+        }
+      });
+
+      $("a[data-toggle=\"tab\"]").click(function (e) {
+        e.preventDefault();
+        $(this).tab("show");
+      });
+    });
+
+    /*When clicking on Full hide fail/success boxes */
+    $('#name').focus(function () {
+      $('#success').html('');
+    });
+  </script>
+{%- endif -%}

data/_layouts/carousel.html

@@ -0,0 +1,39 @@
+  <section class="homehead">
+    <div class="mx-auto">
+      <div id="carouselRide" class="carousel slide carousel-fade" data-bs-ride="true">
+        <div class="carousel-inner">
+          <div class="overlay"></div>
+          <div class="page-heading">
+            {%- if page.title %}
+              <h1>{{ page.title }}</h1>
+            {% else -%}
+              <h1>{{ site.title }}</h1>
+            {% endif -%}
+            {%- if site.description %}
+              <h2 class="subheading">{{ site.description }}</h2>
+            {% endif -%}
+          </div>
+          {%- for image in page.carousel %}
+          <div class="carousel-item" data-bs-interval="20000">
+            <img src="{{ image }}" class="d-block w-100" aria-hidden="true">
+          </div>
+          {% endfor -%}
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselRide" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselRide" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+    </div>
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', (event) => {
+        var carouselInner = document.getElementsByClassName('carousel-item');
+        var carouselItem = carouselInner[0];
+        carouselItem.className += ' active';
+      });
+    </script>
+  </section>

data/_layouts/default.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="h-100" lang="{{ site.lang }}" data-bs-theme="light">
+  <head>
+    {% include head.html %}
+    {%- if jekyll.environment != "development" -%}
+    {% include google_analytics.html %}
+    {%- endif -%}
+  </head>
+  <body class="d-flex flex-column h-100" style="overflow-x: hidden;">
+    <header>
+    {% include navbar.html %}
+    </header>
+  {{ content }}
+    {% include footer.html %}
+    {% include scripts.html %}
+  </body>
+</html>