Merge branch 'prod' into dev

Reviewed-on: #4

.frontmatter/database/mediaDb.json

@@ -0,0 +1 @@
+{}

.frontmatter/database/pinnedItemsDb.json

@@ -0,0 +1 @@
+{}

.frontmatter/database/taxonomyDb.json

@@ -0,0 +1 @@
+{"taxonomy":{"tags":["comment-system","hello","principles","privacy","remark42","self-hosted","test","world"],"categories":[]}}

.github/workflows/pages-deploy.yml

@@ -37,12 +37,12 @@ jobs:
 
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3
+          ruby-version: 3.3
           bundler-cache: true
 
       - name: Build site
@@ -53,11 +53,11 @@ jobs:
       - name: Test site
         run: |
           bundle exec htmlproofer _site \
-            \-\-disable-external=true \
+            \-\-disable-external \
             \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: "_site${{ steps.pages.outputs.base_path }}"
 
@@ -70,4 +70,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.gitignore

@@ -5,6 +5,7 @@ Gemfile.lock
 
 # Jekyll cache
 .jekyll-cache
+.jekyll-metadata
 _site
 
 # RubyGems
@@ -16,7 +17,11 @@ package-lock.json
 
 # IDE configurations
 .idea
-.vscode
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+!.vscode/tasks.json
 
 # Misc
+_sass/vendors
 assets/js/dist

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+    "[markdown]": {
+        "editor.fontSize": 14,
+        "editor.lineHeight": 26,
+        "editor.wordWrap": "wordWrapColumn",
+        "editor.wordWrapColumn": 64,
+        "editor.lineNumbers": "off",
+        "editor.quickSuggestions": {
+            "comments": "off",
+            "strings": "off",
+            "other": "off"
+        },
+        "editor.minimap.enabled": false
+    }
+}

.vscode/tasks.json

@@ -0,0 +1,26 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Run Jekyll Server",
+      "type": "shell",
+      "command": "./tools/run.sh",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "detail": "Runs the Jekyll server with live reload."
+    },
+    {
+      "label": "Build Jekyll Site",
+      "type": "shell",
+      "command": "./tools/test.sh",
+      "group": {
+        "kind": "build"
+      },
+      "problemMatcher": [],
+      "detail": "Build the Jekyll site for production."
+    }
+  ]
+}

Gemfile

@@ -2,10 +2,10 @@
 
 source "https://rubygems.org"
 
-gem "jekyll-theme-chirpy", "~> 6.2", ">= 6.2.2"
+gem "jekyll-theme-chirpy", "~> 7.2", ">= 7.2.2"
 
 group :test do
-  gem "html-proofer", "~> 4.4"
+  gem "html-proofer", "~> 5.0", group: :test
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
@@ -16,13 +16,8 @@ platforms :mingw, :x64_mingw, :mswin, :jruby do
 end
 
 # Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+gem "wdm", "~> 0.2.0", :platforms => [:mingw, :x64_mingw, :mswin]
 
 # Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
 # do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
-
-# Lock jekyll-sass-converter to 2.x on Linux-musl
-if RUBY_PLATFORM =~ /linux-musl/
-  gem "jekyll-sass-converter", "~> 2.0"
-end
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

README.md

@@ -25,25 +25,13 @@ Jekyll site. The following is a list of targets:
 To save you time, and also in case you lose some files while copying, we extract those files/configurations of the
 latest version of the **Chirpy** theme and the [CD][CD] workflow to here, so that you can start writing in minutes.
 
-## Prerequisites
-
-Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of
-the basic environment. [Git](https://git-scm.com/) also needs to be installed.
-
-## Installation
-
-Sign in to GitHub and [**use this template**][use-template] to generate a brand new repository and name it
-`USERNAME.github.io`, where `USERNAME` represents your GitHub username.
-
-Then clone it to your local machine and run:
-
-```console
-$ bundle
-```
-
 ## Usage
 
-Please see the [theme's docs](https://github.com/cotes2020/jekyll-theme-chirpy#documentation).
+Check out the [theme's docs](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
+
+## Contributing
+
+This repository is automatically updated with new releases from the theme repository. If you encounter any issues or want to contribute to its improvement, please visit the [theme repository][chirpy] to provide feedback.
 
 ## License
 
@@ -51,6 +39,5 @@ This work is published under [MIT][mit] License.
 
 [gem]: https://rubygems.org/gems/jekyll-theme-chirpy
 [chirpy]: https://github.com/cotes2020/jekyll-theme-chirpy/
-[use-template]: https://github.com/cotes2020/chirpy-starter/generate
 [CD]: https://en.wikipedia.org/wiki/Continuous_deployment
-[mit]: https://github.com/cotes2020/chirpy-starter/blob/master/LICENSE
+[mit]: https://github.com/cotes2020/chirpy-starter/blob/master/LICENSE

_config-prod.yml

@@ -1,19 +0,0 @@
-# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
-id: 'blog'
-
-url: "https://bangararaju.kottedi.in"
-
-show_drafts: false
-future: false
-
-comments:
-  active: 'remark42' # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
-  # The active options are as follows:
-  # remark42 settings > https://remark42.com/
-  remark42:
-    host: 'https://remark42.kottedi.in'
-
-# Custom configuration
-custom-config:
-  blog-services:
-    service_url: 'https://blog-svc.kottedi.in'

_config-uat.yml

@@ -1,12 +0,0 @@
-# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
-id: 'blog-uat'
-
-url: "https://bangararaju-uat.kottedi.in"
-
-show_drafts: true
-future: true
-
-# Custom configuration
-custom-config:
-  blog-services:
-    service_url: 'https://blog-svc-uat.kottedi.in'

_config.yml

@@ -4,10 +4,6 @@ id: 'blog-dev'
 # Import the theme
 theme: jekyll-theme-chirpy
 
-# Change the following value to '/PROJECT_NAME' ONLY IF your site type is GitHub Pages Project sites
-# and doesn't have a custom domain.
-baseurl: "/blog"
-
 # The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
 # If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,
 # otherwise, the layout language will use the default value of 'en'.
@@ -19,21 +15,22 @@ timezone: Asia/Kolkata
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
 # ↓ --------------------------
 
-title: Bangara Raju # the main title
+title: Engineer's Odyssey # the main title
 
-tagline: Only Blogging Nothing More or Less # it will display as the sub-title
+tagline: Your Hub for Tech, DIY, and Innovation # it will display as the subtitle
 
 description: >- # used by seo meta and the atom feed
   Through my articles and stories, I hope to guide you through the intricate world of technology, offer insights into automation's transformative power, unveil the secrets behind successful DIY projects, and encourage you to fearlessly pursue new skills.
 
-# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
+# Fill in the protocol & hostname for your site.
+# E.g. 'https://username.github.io', note that it does not end with a '/'.
 url: "http://localhost:4000"
 
 github:
-  username: rajukottedi # change to your github username
+  username: rajukottedi # change to your GitHub username
 
 twitter:
-  username: RajuKottedi # change to your twitter username
+  username: RajuKottedi # change to your Twitter username
 
 social:
   # Change to your full name.
@@ -42,19 +39,44 @@ social:
   email: bangararaju.kottedi@gmail.com # change to your email address
   links:
     # The first element serves as the copyright owner's link
-    - https://github.com/rajukottedi  # change to your github homepage
-    - https://twitter.com/rajukottedi # change to your twitter homepage
+    - https://github.com/rajukottedi  # change to your GitHub homepage
+    - https://twitter.com/rajukottedi # change to your Twitter homepage
     # Uncomment below to add more social links
     - https://www.facebook.com/RajuKottedi435
-    - https://www.linkedin.com/in/RajuKottedi
+    - https://www.linkedin.com/in/bangararajuk/
 
-google_site_verification: # fill in to your verification string
+# Site Verification Settings
+webmaster_verifications:
+  google: # fill in your Google verification code
+  bing: # fill in your Bing verification code
+  alexa: # fill in your Alexa verification code
+  yandex: # fill in your Yandex verification code
+  baidu: # fill in your Baidu verification code
+  facebook: # fill in your Facebook verification code
 
 # ↑ --------------------------
 # The end of `jekyll-seo-tag` settings
 
-google_analytics:
-  id: G-W2VG43SN3N # fill in your Google Analytics ID
+# Web Analytics Settings
+analytics:
+  google:
+    id: # fill in your Google Analytics ID
+  goatcounter:
+    id: # fill in your GoatCounter ID
+  umami:
+    id: # fill in your Umami ID
+    domain: # fill in your Umami domain
+  matomo:
+    id: # fill in your Matomo ID
+    domain: # fill in your Matomo domain
+  cloudflare:
+    id: # fill in your Cloudflare Web Analytics token
+  fathom:
+    id: # fill in your Fathom Site ID
+
+# Page Views settings
+pageviews:
+  provider: # now only supports 'goatcounter'
 
 # Prefer color scheme setting.
 #
@@ -67,23 +89,28 @@ google_analytics:
 #     light  - Use the light color scheme
 #     dark   - Use the dark color scheme
 #
-theme_mode: # [light|dark]
+theme_mode: # [light | dark]
 
-# The CDN endpoint for images.
+# The CDN endpoint for media resources.
 # Notice that once it is assigned, the CDN url
-# will be added to all image (site avatar & posts' images) paths starting with '/'
+# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn:
+cdn:
 
 # the avatar on sidebar, support local or CORS resources
 avatar: /assets/img/avatar.jpg
 
+# The URL of the site-wide social preview image used in SEO `og:image` meta tag.
+# It can be overridden by a customized `page.image` in front matter.
+social_preview_image: # string, local or CORS resources
+
 # boolean type, the global switch for TOC in posts.
 toc: true
 
 comments:
-  active: 'remark42' # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
+# Global switch for the post comment system. Keeping it empty means disabled.
+  provider: 'remark42' # [disqus | utterances | giscus]
   # The active options are as follows:
   # remark42 settings > https://remark42.com/
   remark42:
@@ -101,6 +128,7 @@ comments:
     category:
     category_id:
     mapping: # optional, default to 'pathname'
+    strict: # optional, default to '0'
     input_position: # optional, default to 'bottom'
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`
@@ -111,16 +139,28 @@ assets:
     enabled: # boolean, keep empty means false
     # specify the Jekyll environment, empty means both
     # only works if `assets.self_host.enabled` is 'true'
-    env: # [development|production]
+    env: # [development | production]
 
 pwa:
-  enabled: true # the option for PWA feature
+  enabled: true # The option for PWA feature (installable)
+  cache:
+    enabled: true # the option for PWA offline cache
+    # Paths defined here will be excluded from the PWA cache.
+    # Usually its value is the `baseurl` of another website that
+    # shares the same domain name as the current website.
+    deny_paths:
+      - "/api"
+      # - "/example"  # URLs match `<SITE_URL>/example/*` will not be cached by the PWA
 
 paginate: 10
 
+# The base URL of your site
+baseurl: "/blog"
+
 # ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
+  footnote_backlink: "&#8617;&#xfe0e;"
   syntax_highlighter: rouge
   syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
     css_class: highlight
@@ -157,10 +197,6 @@ defaults:
     values:
       layout: page
       permalink: /:title/
-  - scope:
-      path: assets/img/favicons
-    values:
-      swcache: true
   - scope:
       path: assets/js/dist
     values:
@@ -184,10 +220,12 @@ exclude:
   - docs
   - tools
   - README.md
-  - CHANGELOG.md
   - LICENSE
+  - purgecss.js
   - rollup.config.js
-  - package*.json
+  - "package*.json"
+  - db_scripts
+  - frontmatter.json
 
 jekyll-archives:
   enabled: [categories, tags]
@@ -205,4 +243,5 @@ future: true
 # Custom configuration
 custom-config:
   blog-services:
-    service_url: 'http://localhost:5000'
+    service_url: 'https://localhost:7013/blog/api/v1/posts'
+    service_key: 'c6eAXYcNT873TT7BfMgQyS4ii7hxa53TLEUN7pAGaaU='

_data/contact.yml

@@ -5,7 +5,7 @@
 
 - type: linkedin
   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
-  url:  'https://in.linkedin.com/in/bangara-raju-kottedi-299072109' # Fill with your Linkedin homepage
+  url:  'https://www.linkedin.com/in/bangararajuk/' # Fill with your Linkedin homepage
 
 # - type: twitter
 #   icon: "fa-brands fa-x-twitter"
@@ -26,3 +26,15 @@
 # - type: stack-overflow
 #   icon: 'fab fa-stack-overflow'
 #   url:  ''                  # Fill with your stackoverflow homepage
+#
+# - type: bluesky
+#   icon: 'fa-brands fa-bluesky'
+#   url: ''                   # Fill with your Bluesky profile link
+#
+# - type: reddit
+#   icon: 'fa-brands fa-reddit'
+#   url: ''                   # Fill with your Reddit profile link
+#
+# - type: threads
+#   icon: 'fa-brands fa-threads'
+#   url: ''                   # Fill with your Threads profile link

_data/locales/en.yml

@@ -40,7 +40,7 @@ copyright:
     Except where otherwise noted, the blog posts on this site are licensed
     under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
 
-meta: Using the :PLATFORM theme :THEME
+meta: Using the :THEME theme for :PLATFORM.
 
 not_found:
   statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.

_data/share.yml

@@ -22,4 +22,29 @@ platforms:
   #
   # - type: Weibo
   #   icon: "fab fa-weibo"
-  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #   link: "https://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #
+  # - type: Mastodon
+  #   icon: "fa-brands fa-mastodon"
+  #   # See: https://github.com/justinribeiro/share-to-mastodon#properties
+  #   instances:
+  #     - label: mastodon.social
+  #       link: "https://mastodon.social/"
+  #     - label: mastodon.online
+  #       link: "https://mastodon.online/"
+  #     - label: fosstodon.org
+  #       link: "https://fosstodon.org/"
+  #     - label: photog.social
+  #       link: "https://photog.social/"
+  #
+  # - type: Bluesky
+  #   icon: "fa-brands fa-bluesky"
+  #   link: "https://bsky.app/intent/compose?text=TITLE%20URL"
+  #
+  # - type: Reddit
+  #   icon: "fa-brands fa-square-reddit"
+  #   link: "https://www.reddit.com/submit?url=URL&title=TITLE"
+  #
+  # - type: Threads
+  #   icon: "fa-brands fa-square-threads"
+  #   link: "https://www.threads.net/intent/post?text=TITLE%20URL"

_drafts/2023-07-23-future-post.md

@@ -1,8 +0,0 @@
----
-
-title: Future Post
-date: 2023-07-23 0:00:00 +0530
-
----
-
-# Future Post Modified

_drafts/2024-07-08-anatomy-of-a-csrf-attack.md

@@ -0,0 +1,8 @@
+---
+title: Anatomy of a CSRF Attack
+date: 2024-07-08 0:00:00 +5:30
+tags:
+    - csrf
+    - security
+slug: anatomy-csrf-attack
+---

_drafts/2025-02-02-getting-started-with-python.md

@@ -0,0 +1,28 @@
+---
+title: "Part 1: Getting Started with Python"
+description: Kick off your Python journey! Learn what Python is, set up your environment, and write your first program. Perfect for beginners—let’s start coding!
+date: 2025-02-02T16:59:46.763Z
+tags: []
+categories: []
+image:
+  path: /assets/img/posts/python-getting-started.png
+disable-ty: false
+series: "Python Practical Guide: A Beginner's Journey"
+slug: part-1-started-python
+---
+
+## What is Python?
+Python is a versatile, high-level programming language known for its simplicity and readability. It’s used for:
+- Web development
+- Data analysis and visualization
+- Artificial intelligence and machine learning
+- Automation and scripting
+- Game development
+- And much more!
+
+## Why Learn Python?
+1. **Beginner-Friendly**: Easy-to-read syntax makes it perfect for first-time coders.
+2. **Versatile**: Use it for almost any type of project or industry.
+3. **In-Demand Skill**: Python developers are highly sought after in the job market.
+4. **Huge Community**: Tons of resources, libraries, and frameworks to help you learn and grow.
+5. **Fun and Powerful**: Automate tasks, analyze data, or build apps—Python makes it easy!

_drafts/2025-02-02-python-basics---syntax-and-fundamentals.md

@@ -0,0 +1,12 @@
+---
+title: "Part 2: Python Basics - Syntax and Fundamentals"
+description: "Learn Python’s building blocks: variables, data types, input/output, and basic operations. Start writing clean, readable code today!"
+date: 2025-02-02T18:04:14.853Z
+tags: []
+categories: []
+image:
+  path: /assets/img/posts/python-logo.jpg
+disable-ty: true
+series: "Python Practical Guide: A Beginner's Journey"
+slug: part-2-python-basics-syntax-fundamentals
+---

_includes/comment.html

@@ -0,0 +1,5 @@
+<!--  The comments switcher -->
+{% if page.comments and site.comments.provider %}
+  {% capture path %}comments/{{ site.comments.provider }}.html{% endcapture %}
+  {% include {{ path }} %}
+{% endif %}

_includes/comments-counter.html

@@ -4,6 +4,30 @@
     }
 </style>
 
-<i class="fa fa-comment" aria-hidden="true" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.comments}}"
-    data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
-<span class="remark42__counter"></span>
+<i class="fa fa-comment" aria-hidden="true" {% if include.tooltip %}
+    title="{{site.data.locales[include.lang].post.comments}}" data-bs-toggle="tooltip" data-bs-placement="bottom" {%
+    endif %}></i>
+<span class="remark42__counter"></span>
+
+<script>
+    function commentTextChange() {
+        var target = document.querySelector('.remark42__counter');
+        if(!target){
+            window.setTimeout(commentTextChange, 500);
+            return;
+        }
+        var observer = new MutationObserver(function (mutations) {
+            const comments = document.querySelector(".remark42__counter");
+            var commentsCount = 0;
+            if(Number(comments.innerText) !== NaN){
+                commentsCount = Number(comments.innerText);
+            }
+            if(commentsCount !== commentsCountFromResponse){
+                ajax(serviceUrl + "/UpdatePostCommentsCount?blogUrl=" + siteId + "&postSlug=" + postId, "POST", commentsCount);
+            }
+        });
+        var config = { childList: true };
+        observer.observe(target, config);
+    }
+    commentTextChange();
+</script>

_includes/comments.html

@@ -1,5 +0,0 @@
-<!--  The comments switcher -->
-{% if page.comments and site.comments.active %}
-  {% capture path %}comments/{{ site.comments.active }}.html{% endcapture %}
-  {% include {{ path }} %}
-{% endif %}

_includes/comments/remark42.html

@@ -4,11 +4,11 @@
 <script>
     var remark_config = {
     host: remark42Host,
-    site_id: siteId,
+    site_id: "{{site.id}}",
     components: ['embed', 'counter'],
 
     max_shown_comments: 10,
-    theme: modeToggle.modeStatus,
+    theme: Theme.visualState,
 
     locale: 'en',
     show_email_subscription: false
@@ -23,11 +23,11 @@
     }
 })(remark_config.components || ['embed']);
 
-var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
+var targetDiv = document.getElementById("mode-toggle");
 
 if (targetDiv != null) {
     targetDiv.addEventListener("click", () => {
-        window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
+        window.REMARK42.changeTheme(Theme.visualState === 'light' ? 'dark' : 'light');
     })
 }
 </script>

_includes/head.html

@@ -4,34 +4,48 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
-  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="viewport"
     content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
 
-  {% capture seo_tags %}
-  {% seo title=false %}
-  {% endcapture %}
+  {%- capture seo_tags -%}
+    {% seo title=false %}
+  {%- endcapture -%}
+
+  <!-- Setup Open Graph image -->
 
   {% if page.image %}
-  {% assign img = page.image.path | default: page.image %}
+    {% assign src = page.image.path | default: page.image %}
 
-  {% unless img contains '://' %}
-  {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
-  {% capture target %}"{{ img | absolute_url }}"{% endcapture %}
+    {% unless src contains '://' %}
+      {%- capture img_url -%}
+        {% include media-url.html src=src subpath=page.media_subpath absolute=true %}
+      {%- endcapture -%}
 
-  {% if site.img_cdn contains '//' %}
-  <!-- it's a cross-origin URL -->
-  {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
-  {% else %}
-  <!-- it's a local file path -->
-  {%- capture replacement -%}
-  "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
-  {%- endcapture -%}
-  {% endif %}
+      {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
+      {%- capture new_url -%}{{ img_url }}{%- endcapture -%}
 
-  {% assign seo_tags = seo_tags | replace: target, replacement %}
-  {% endunless %}
+      {% assign seo_tags = seo_tags | replace: old_url, new_url %}
+    {% endunless %}
+
+  {% elsif site.social_preview_image %}
+    {%- capture img_url -%}
+      {% include media-url.html src=site.social_preview_image absolute=true %}
+    {%- endcapture -%}
+
+    {%- capture og_image -%}
+      <meta property="og:image" content="{{ img_url }}" />
+    {%- endcapture -%}
+
+    {%- capture twitter_image -%}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta property="twitter:image" content="{{ img_url }}" />
+    {%- endcapture -%}
+
+    {% assign old_meta_clip = '<meta name="twitter:card" content="summary" />' %}
+    {% assign new_meta_clip = og_image | append: twitter_image %}
+    {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %}
   {% endif %}
 
   {{ seo_tags }}
@@ -45,62 +59,95 @@
 
   {% include_cached favicons.html %}
 
-  {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-  <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
-
-  {% else %}
-  {% for cdn in site.data.origin[type].cdns %}
-  <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
-  <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
-  {% endfor %}
-
-  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
-  {% endif %}
-
-  <!-- GA -->
-  {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
-  <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
-  <link rel="dns-prefetch" href="https://www.google-analytics.com">
-
-  <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
-  <link rel="dns-prefetch" href="https://www.googletagmanager.com">
-  {% endif %}
+  <!-- Resource Hints -->
+  {% unless site.assets.self_host.enabled %}
+    {% for hint in site.data.origin.cors.resource_hints %}
+      {% for link in hint.links %}
+        <link rel="{{ link.rel }}" href="{{ hint.url }}" {{ link.opts | join: ' ' }}>
+      {% endfor %}
+    {% endfor %}
+  {% endunless %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
+  {% unless jekyll.environment == 'production' %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+  {% endunless %}
 
-  <!-- Font Awesome -->
+  <!-- Theme style -->
+  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+
+  <!-- Web Font -->
+  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
+
+  <!-- Font Awesome Icons -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
-  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+  <!-- 3rd-party Dependencies -->
 
   {% if site.toc and page.toc %}
   <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
   {% endif %}
 
-  {% if page.layout == 'page' or page.layout == 'post' %}
-  <!-- Manific Popup -->
-  <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
+  {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
+  <link rel="stylesheet" href="{{ site.data.origin[type]['lazy-polyfill'].css | relative_url }}">
   {% endif %}
 
-  <!-- JavaScript -->
+  {% if page.layout == 'page' or page.layout == 'post' %}
+  <!-- Image Popup -->
+  <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
+  {% endif %}
+
+  <!-- Scripts -->
   <script>
     var serviceUrl = "{{site.custom-config.blog-services.service_url}}";
-    var siteId = "{{site.id}}";
-    var postId = "{{page.title}}";
+    var serviceApiKey = "{{site.custom-config.blog-services.service_key}}";
+    var siteId = "{{site.url}}{{site.baseurl}}";
+    var postId = "{{page.slug}}";
     var remark42Host = "{{ site.comments.remark42.host }}";
 
-    function ajax(url) {
-      return new Promise(function (resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.onload = function () {
-          resolve(this.responseText);
-        };
-        xhr.onerror = reject;
-        xhr.open('GET', url);
-        xhr.send();
-      });
+    var postDetails = {
+      postUrl: "{{site.url}}{{site.baseurl}}{{page.url}}",
+      slug: "{{page.slug}}",
+      title: "{{page.title}}",
+      description: "{{page.description}}",
+      categories: [],
+      image: "{{page.image.path}}",
+      createdDate: "{{page.date}}",
+      modifiedDate: "{{page.last_modified_at | strip}}",
+      blogUrl: "{{site.url}}{{site.baseurl}}",
+      views: 0,
+      likes: 0,
+      comments: 0
+    };
+
+  function liquidArrayToJsonArray(){
+      var items = [];
+    {% for category in page.categories %}
+      {% assign cat = category %}
+      items.push("{{cat}}");
+    {% endfor %}
+      return items;
+  }
+
+    postDetails.categories = liquidArrayToJsonArray();
+
+    function ajax(url, type, payload) {
+    if (payload === undefined) {
+      payload = null;
     }
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        resolve(this.responseText);
+      };
+      xhr.onerror = reject;
+      xhr.open(type, url);
+      xhr.setRequestHeader('XApiKey', serviceApiKey);
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.setRequestHeader('ngsw-bypass', '');
+      xhr.send(JSON.stringify(payload));
+    });
+  }
   </script>
 {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
   <!-- Google Tag Manager -->
@@ -122,9 +169,28 @@
   <!-- End Microsoft Clarity -->
 {% endif %}
 
-  {% unless site.theme_mode %}
-  {% include mode-toggle.html %}
-  {% endunless %}
+<script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
+
+  {% include js-selector.html lang=lang %}
+
+  {% if jekyll.environment == 'production' %}
+    <!-- PWA -->
+    {% if site.pwa.enabled %}
+      <script
+        defer
+        src="{{ '/app.min.js' | relative_url }}?baseurl={{ site.baseurl | default: '' }}&register={{ site.pwa.cache.enabled }}"
+      ></script>
+    {% endif %}
+
+    <!-- Web Analytics -->
+    {% for analytics in site.analytics %}
+      {% capture str %}{{ analytics }}{% endcapture %}
+      {% assign platform = str | split: '{' | first %}
+      {% if site.analytics[platform].id and site.analytics[platform].id != empty %}
+        {% include analytics/{{ platform }}.html %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
 
   {% include metadata-hook.html %}
 </head>

_includes/likes-views.html

@@ -22,23 +22,50 @@
     }
 </style>
 
-    {% include views.html tooltip=true onload=false lang=lang %}
-    {% include likes.html tooltip=true onload=false lang=lang %}
+{% include views.html tooltip=true onload=false lang=lang %}
+{% include likes.html tooltip=true onload=false lang=lang %}
 
 <script>
     const views = document.getElementById("views-count");
     const likes = document.getElementById("likes-count");
     const postLikesAndViews = document.getElementById("likes-views");
+    var commentsCountFromResponse = 0;
 
     postLikesAndViews.style.display = "none";
 
-    ajax(serviceUrl + "/GetPostLikesAndViews?siteId=" + siteId + "&postId=" + postId)
+    ajax(serviceUrl + "/GetPostLikesAndViews?blogUrl=" + siteId + "&postSlug=" + postId, "GET")
         .then(function (result) {
             if (result != "N/A") {
                 var response = JSON.parse(result);
-                views.innerText = response.postViews;
-                likes.innerText = response.postLikes;
-                postLikesAndViews.style.display = "inline";
+                if(!response.postExists){
+                    postDetails.likes = postDetails.views = postDetails.comments = 0;
+                    if(Number(likes.innerText) !== NaN){
+                        postDetails.likes = Number(likes.innerText);
+                    }
+                    if(Number(views.innerText) !== NaN){
+                        postDetails.views = Number(views.innerText);
+                    }
+                    if(postDetails.modifiedDate === ""){
+                        postDetails.modifiedDate = postDetails.createdDate;
+                    }
+                }
+
+                ajax(serviceUrl + "/CreatePost", "POST", postDetails)
+                        .then(function (result) {
+                            if(result != "N/A"){
+                                var response = JSON.parse(result);
+                                setPostMetrics(response);
+                            }
+                        });
             }
         });
+
+    function setPostMetrics(response){
+        if(response.postExists){
+            views.innerText = response.views;
+            likes.innerText = response.likes;
+            commentsCountFromResponse = response.comments;
+            postLikesAndViews.style.display = "inline";
+        }
+    } 
 </script>

_includes/likes.html

@@ -37,18 +37,17 @@
 
     function apiCall(url, event) {
         onLoadAndClick();
-        ajax(url)
+        ajax(url, "POST")
             .then(function (result) {
-                console.log(result);
                 if (event === "click") {
                     heartIcon.classList.toggle("liked");
                 }
                 likesCount.innerHTML = result;
                 heartIcon.style.pointerEvents = 'auto';
-            })
+            });
     }
 
-    var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId;
+    var apiUrl = serviceUrl + "/GetPostLikes?blogUrl=" + siteId + "&postSlug=" + postId;
 
     if(likesOnLoad == "{{include.onload}}"){
     apiCall(apiUrl);
@@ -56,11 +55,11 @@
 
     heartIcon.addEventListener("click", () => {
         if (!heartIcon.classList.contains("liked")) {
-            apiUrl = serviceUrl + "/LikePost?siteId=" + siteId + "&postId=" + postId;
+            apiUrl = serviceUrl + "/LikePost?blogUrl=" + siteId + "&postSlug=" + postId;
         } else {
-            apiUrl = serviceUrl + "/DislikePost?siteId=" + siteId + "&postId=" + postId;
+            apiUrl = serviceUrl + "/DislikePost?blogUrl=" + siteId + "&postSlug=" + postId;
         }
 
         apiCall(apiUrl, "click");
-    });
+    })
 </script>

_includes/post-series.html

@@ -0,0 +1,28 @@
+<style>
+    #post-series {
+        margin-top: 25px;
+    }
+
+    .card {
+        padding: 10px;
+    }
+</style>
+
+{% if page.series %}
+{% assign posts = site.posts | where: "series", page.series | sort: 'date' %}
+<div id="post-series">
+    <div class="card">
+        <div>
+            <h3>{{ page.series }} ({{ posts | size }} - Part Series)</h3>
+            <ol>
+                {% assign posts = site.posts | where: "series", page.series | sort: "date" %}
+                {% for post in posts %}
+                <li>{% if post.url == page.url %}{{ post.title }} {% else %}
+                    <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>{% endif %}
+                </li>
+                {% endfor %}
+            </ol>
+        </div>
+    </div>
+</div>
+{% endif %}

_includes/thank-you.html

@@ -0,0 +1,47 @@
+{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
+{% assign title = title | uri_escape %}
+{% assign url = page.url | absolute_url | url_encode %}
+{% assign link = site.data.share.platforms[2].link | replace: 'TITLE', title | replace: 'URL', url %}
+<style>
+    .thank-you {
+        border-left: 5px solid #959595;
+        margin: 1.5em 0;
+        padding: 0.5em 1em;
+        color: inherit;
+        font-style: italic;
+        margin-left: -20px;
+        font-style: italic;
+    }
+</style>
+
+<!-- Thank you message -->
+<blockquote class="thank-you">
+    <p>Thank you for reading. I trust it provided value to you. Your feedback
+        is important, so please share your thoughts in the <a href="#remark42"><strong>comments</strong></a> below. If
+        you found it helpful, consider giving it a <a href="#topbar-wrapper" id="ty-like"><strong>like</strong></a> and
+        <a href="{{ link }}" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top"
+            aria-label="Linkedin" data-bs-original-title="Linkedin" aria-describedby="tooltip190113">
+            <strong>sharing</strong></a> it with others, also feel free to check out my [LinkedIn profile] - <a
+            href="{{ site.data.contact[1].url }}" target="_blank"><strong>Bangara Raju Kottedi</strong></a>.
+    </p>
+</blockquote>
+
+<script>
+
+function handleDelayedClick() {
+        setTimeout(function() {
+            heartIcon.click();
+        }, 1000);
+    }
+
+    const tyLike = document.getElementById("ty-like");
+
+    tyLike.addEventListener("click", (event) => {
+        if (!heartIcon.classList.contains("liked")) {
+        handleDelayedClick();
+        }
+        else{
+            event.preventDefault(); 
+        }
+    });
+</script>

_includes/views.html

@@ -1,7 +1,6 @@
 <i class="fa fa-eye fa-fw" aria-hidden="true" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
   data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
-<em id="views-count" style="margin-right: 12px">
-</em>
+<em id="views-count" style="margin-right: 12px"></em>
 
 <script>
   const viewsOnLoad = "true";

_layouts/default.html

@@ -1,6 +1,5 @@
 ---
 layout: compress
-# Default layout
 ---
 
 <!doctype html>
@@ -8,19 +7,12 @@ layout: compress
 {% include origin-type.html %}
 
 {% include lang.html %}
-
-{% capture prefer_mode %}
 {% if site.theme_mode %}
-data-mode="{{ site.theme_mode }}"
-{% endif %}
-{% endcapture %}
-
-{% if layout.tail_includes %}
-  {% assign has_tail = true %}
+  {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
 {% endif %}
 
 <!-- `site.alt_lang` can specify a language different from the UI -->
-<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
+<html lang="{{ page.lang | default: site.lang }}" {{ prefer_mode }}>
 {% include head.html %}
 
 <body>
@@ -35,15 +27,16 @@ data-mode="{{ site.theme_mode }}"
   {% include sidebar.html lang=lang %}
 
   <div id="main-wrapper" class="d-flex justify-content-center">
-    <div class="container px-xxl-5">
+    <div class="container d-flex flex-column px-xxl-5">
       {% include topbar.html lang=lang %}
       
-      <div class="row">
-        <main
-          aria-label="Main Content"
-          class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"
-        >
-          {{ content }}
+      <div class="row flex-grow-1">
+        <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
+          {% if layout.refactor or layout.layout == 'default' %}
+            {% include refactor-content.html content=content lang=lang %}
+          {% else %}
+            {{ content }}
+          {% endif %}
         </main>
 
         <!-- panel -->
@@ -63,14 +56,11 @@ data-mode="{{ site.theme_mode }}"
       <div class="row">
         <!-- tail -->
         <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
-          {% if has_tail %}
-            {% for _include in layout.tail_includes %}
-              {% assign _include_path = _include | append: '.html' %}
-              {% include {{ _include_path }} lang=lang %}
-            {% endfor %}
-          {% endif %}
+        {% for _include in layout.tail_includes %}
+          {% assign _include_path = _include | append: '.html' %}
+          {% include {{ _include_path }} lang=lang %}
+        {% endfor %}
 
-          {% include related-posts.html lang=lang %}
           {% include_cached footer.html lang=lang %}
         </div>
       </div>
@@ -85,21 +75,20 @@ data-mode="{{ site.theme_mode }}"
   </aside>
 </div>
 
-  <div id="mask"></div>
+<div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div>
 
   {% if site.pwa.enabled %}
     {% include_cached notification.html lang=lang %}
   {% endif %}
 
-  <!-- JavaScripts -->
+  <!-- Embedded scripts -->
 
-  {% include js-selector.html %}
+  {% for _include in layout.script_includes %}
+    {% assign _include_path = _include | append: '.html' %}
+    {% include {{ _include_path }} %}
+  {% endfor %}
 
-  {% if page.mermaid %}
-  {% include mermaid.html %}
-  {% endif %}
-
-  {% include_cached search-loader.html %}
+  {% include_cached search-loader.html lang=lang %}
 </body>
 
 </html>

_layouts/post.html

@@ -1,108 +1,155 @@
 ---
-layout: page
+layout: default
 refactor: true
 panel_includes:
 - toc
 tail_includes:
 - related-posts
 - post-nav
-- comments
+- comment
+script_includes:
+  - comment
 ---
 
 {% include lang.html %}
 
-<header>
-  <h1 data-toc-skip>{{ page.title }}</h1>
+{% include toc-status.html %}
 
-  <div class="post-meta text-muted">
-
-    <div class="d-flex justify-content-between">
-      <div>
-        <!-- published date -->
-        <span>
-          {{ site.data.locales[lang].post.posted }}
-          {% include datetime.html date=page.date tooltip=true lang=lang %}
-        </span>
-
-        <!-- lastmod date -->
-        {% if page.last_modified_at and page.last_modified_at != page.date %}
-        <span>
-          {{ site.data.locales[lang].post.updated }}
-          {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
-        </span>
-        {% endif %}
-      </div>
-
-      <!-- post counter -->
-      <div id="likes-views">
-        {% include likes-views.html tooltip=true lang=lang %}
-        {% include comments-counter.html tooltip=true lang=lang %}
-      </div>
-
-    </div>
-
-    {% if page.image %}
-    {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
-    {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
-    {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
-
-    {% capture lqip %}
-    {% if page.image.lqip %}
-    lqip="{{ page.image.lqip }}"
-    {% endif %}
-    {% endcapture %}
-
-    <div class="mt-3 mb-3">
-      <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
-      {%- if page.image.alt -%}
-      <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
-      {%- endif -%}
-    </div>
+<article class="px-1" data-toc="{{ enable_toc }}">
+  <header>
+    <h1 data-toc-skip>{{ page.title }}</h1>
+    {% if page.description %}
+    <p class="post-desc fw-light mb-4">{{ page.description }}</p>
     {% endif %}
 
-    <div class="d-flex justify-content-between">
-      <!-- author(s) -->
-      <span>
-        {% if page.author %}
-        {% assign authors = page.author %}
-        {% elsif page.authors %}
-        {% assign authors = page.authors %}
-        {% endif %}
+    <div class="post-meta text-muted">
+      <div class="d-flex justify-content-between">
+        <div>
+          <!-- published date -->
+          <span>
+            {{ site.data.locales[lang].post.posted }}
+            {% include datetime.html date=page.date tooltip=true lang=lang %}
+          </span>
 
-        {{ site.data.locales[lang].post.written_by }}
-
-        <em>
-          {% if authors %}
-          {% for author in authors %}
-          <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
-          {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
-          {% endfor %}
-          {% else %}
-          <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
+          <!-- lastmod date -->
+          {% if page.last_modified_at and page.last_modified_at != page.date %}
+          <span>
+            {{ site.data.locales[lang].post.updated }}
+            {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
+          </span>
           {% endif %}
-        </em>
-      </span>
+        </div>
 
-        <!-- read time -->
-        {% include read-time.html content=content prompt=true lang=lang %}
-    </div> <!-- .d-flex -->
+        <!-- post counter -->
+        <div id="likes-views">
+          {% include likes-views.html tooltip=true lang=lang %}
+          {% include comments-counter.html tooltip=true lang=lang %}
+        </div>
 
-  </div> <!-- .post-meta -->
-</header>
+      </div>
+
+      {% if page.image %}
+      {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
+      {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
+      {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
+
+      {% if page.image.lqip %}
+      {%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
+      {% endif %}
+
+      <div class="mt-3 mb-3">
+        <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
+        {%- if page.image.alt -%}
+        <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
+        {%- endif -%}
+      </div>
+      {% endif %}
+
+      <div class="d-flex justify-content-between">
+        <!-- author(s) -->
+        <span>
+          {% if page.author %}
+          {% assign authors = page.author %}
+          {% elsif page.authors %}
+          {% assign authors = page.authors %}
+          {% endif %}
+
+          {{ site.data.locales[lang].post.written_by }}
+
+          <em>
+            {% if authors %}
+            {% for author in authors %}
+            {% if site.data.authors[author].url -%}
+            <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
+            {%- else -%}
+            {{ site.data.authors[author].name }}
+            {%- endif %}
+            {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
+            {% endfor %}
+            {% else %}
+            <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
+            {% endif %}
+          </em>
+        </span>
+
+        <div>
+          <!-- pageviews -->
+          {% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
+            <span>
+              <em id="pageviews">
+                <i class="fas fa-spinner fa-spin small"></i>
+              </em>
+              {{ site.data.locales[lang].post.pageview_measure }}
+            </span>
+          {% endif %}
+
+          <!-- read time -->
+          {% include read-time.html content=content prompt=true lang=lang %}
+        </div>
+      </div>
+    </div>
+    <!-- .post-meta -->
+    {% include post-series.html %}
+  </header>
+
+  {% if enable_toc %}
+  <div id="toc-bar" class="d-flex align-items-center justify-content-between invisible">
+    <span class="label text-truncate">{{ page.title }}</span>
+    <button type="button" class="toc-trigger btn me-1">
+      <i class="fa-solid fa-list-ul fa-fw"></i>
+    </button>
+  </div>
+
+  <button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm">
+    <span class="label ps-2 pe-1">{{- site.data.locales[lang].panel.toc -}}</span>
+    <i class="fa-solid fa-angle-right fa-fw"></i>
+  </button>
+
+  <dialog id="toc-popup" class="p-0">
+    <div class="header d-flex flex-row align-items-center justify-content-between">
+      <div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
+      <button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75">
+        <i class="fas fa-close"></i>
+      </button>
+    </div>
+    <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
+  </dialog>
+  {% endif %}
 
   <div class="content">
     {{ content }}
+    {% if page.disable-ty != true %}
+    {% include thank-you.html %}
+    {% endif %}
   </div>
-
   <div class="post-tail-wrapper text-muted">
-
     <!-- categories -->
     {% if page.categories.size > 0 %}
     <div class="post-meta mb-3">
       <i class="far fa-folder-open fa-fw me-1"></i>
       {% for category in page.categories %}
       <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
-      {%- unless forloop.last -%}, {%- endunless -%}
+      {%- unless forloop.last -%},{%- endunless -%}
       {% endfor %}
     </div>
     {% endif %}
@@ -119,12 +166,12 @@ tail_includes:
     </div>
     {% endif %}
 
-    <div class="post-tail-bottom
-    d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
+    <div class="
+        post-tail-bottom
+        d-flex justify-content-between align-items-center mt-5 pb-2
+      ">
       <div class="license-wrapper">
-
         {% if site.data.locales[lang].copyright.license.template %}
-
         {% capture _replacement %}
         <a href="{{ site.data.locales[lang].copyright.license.link }}">
           {{ site.data.locales[lang].copyright.license.name }}
@@ -132,12 +179,12 @@ tail_includes:
         {% endcapture %}
 
         {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
-
         {% endif %}
       </div>
 
       {% include post-sharing.html lang=lang %}
-
-    </div><!-- .post-tail-bottom -->
-
-  </div><!-- div.post-tail-wrapper -->
+    </div>
+    <!-- .post-tail-bottom -->
+  </div>
+  <!-- div.post-tail-wrapper -->
+</article>

_posts/2023-07-22-hello.md

@@ -1,9 +1,14 @@
 ---
-
 title: Hello World
 date: 2023-07-22 0:00:00 +0530
-tags: [hello, world]
-
+tags:
+    - hello world
+slug: hello-world
+description: Hello World
+categories: []
+disable-ty: true
+image:
+    path: /assets/img/posts/hello-world.jpg
 ---
 
-# Hello World
+## Hello World

_posts/2023-07-22-self-hosted-commenting-system.md

@@ -1,10 +1,24 @@
 ---
 title: Self-Hosted Commenting System
 date: 2023-07-23 0:00:00 +0530
-tags: [privacy, self-hosted, comment-system, remark42]
+tags:
+    - privacy
+    - self-hosted
+    - comment-system
+    - remark42
+categories:
+    - Open Source
+    - Services
+slug: hosted-commenting-system
+image:
+    path: /assets/img/posts/remark42.png
+keywords:
+    - remark42
+    - self-hosted
+    - privacy
 ---
 
-# Privacy-focused lightweight commenting engine
+## Privacy-focused lightweight commenting engine
 
 ## [Remark 42](https://remark42.com/)
 

_posts/2024-04-03-solid-principles.md

@@ -0,0 +1,213 @@
+---
+title: SOLID Principles
+description: The SOLID principles are a set of design principles aimed at improving software quality, making it easier to understand, extend, and maintain.
+date: 2024-04-03T16:10:57.476Z
+tags:
+  - code quality
+  - oops
+  - principles
+categories:
+  - Programming
+  - Principles
+image:
+  path: /assets/img/posts/solid-principles.jpg
+  alt: Understanding SOLID Principles
+slug: solid-principles
+---
+
+The SOLID principles are a set of **five design principles** that are intended to guide software development to create more  **understandable**, **maintainable**, **extendable** and **scalable** code. These principles were introduced by **Robert C. Martin** (also known as Uncle Bob) in the early 2000s and have since become fundamental concepts in object-oriented design and programming. Here's a brief overview of each principle:
+
+## 1. Single Responsibility Principle (SRP):
+This principle states that a class should have **only one reason to change**. In other words, a class should have **only one responsibility or job**. By adhering to SRP, you ensure that classes are focused and have clear, understandable purposes, which makes them **easier to maintain and test**.
+
+**Example**: *Think of a chef in a restaurant. Instead of having a chef who both cooks meals and serves customers, you'd want separate roles. The chef should focus on cooking delicious dishes, while a waiter takes care of serving customers.*
+
+```c#
+// Before
+public class Chef
+{
+    public void CookMeals() { /*...*/ }
+    public void ServeMeals() { /*...*/ }
+}
+
+// After
+public class Chef
+{
+    public void CookMeals() { /*...*/ }
+}
+
+public class Waiter
+{
+    public void ServeMeals() { /*...*/ }
+}
+
+```
+
+## 2. Open/Closed Principle (OCP):
+This Principle suggests that software entities `(classes, modules, functions, etc.)` should be **open for extension** but **closed for modification**. This means that you should be able to **extend the behavior of a module without modifying its source code**. This is typically achieved through the use of **inheritance**, **polymorphism** and **parameters**.
+
+**Example**: *Consider a shape drawing application. Instead of modifying the existing shape classes every time you need to add a new shape, you'd create a abstact class called **Shape** and implement it in different shape classes like **Circle**, **Square**, etc. Then, when you want to add a new shape, you create a new class that implements the Shape without modifying the existing code.*
+
+```c#
+// Before
+public class Shape
+{
+    public double CircleArea(double radius) { /*...*/ }
+
+    public double SquareArea(double sideLength) { /*...*/ }
+}
+
+// After
+public abstract class Shape
+{
+    public abstract double Area();
+}
+
+public class Circle : Shape
+{
+    public override double Area() { /*...*/ }
+}
+
+public class Square : Shape
+{
+    public override double Area() { /*...*/ }
+}
+```
+
+## 3. Liskov Substitution Principle (LSP):
+This Principle states that objects of a superclass should be substitutable with objects of its subclasses without affecting the correctness of the program. In simpler terms, **a subclass should behave in such a way that it does not break the functionality that the superclass expects**.
+
+**Example**: *Consider a program that expects objects of type Bird. According to LSP, if you have a class Swan that inherits from Bird, you should be able to substitute an instance of Swan wherever you expect an Bird without breaking the program's functionality.*
+
+```c#
+// Before
+public abstract class Bird 
+{
+    public abstract void Fly() { /* I can fly */}
+}
+
+public abstract class Penguin : Bird 
+{
+    // Violating LSP principle (Penguin class breaks Fly functionality)
+    public override void Fly() 
+    { 
+        throw new NotImplementedException("Penguins can't fly!");
+    }
+}
+
+// After
+public abstract class Bird 
+{
+    public abstract void Fly() { /* I can fly */}
+}
+
+public abstract class Swan : Bird
+{
+    public override void Fly() { /* I can fly */ }
+}
+```
+
+## 4. Interface Segregation Principle (ISP)
+This Principle suggests that clients should not be forced to depend on interfaces they do not use. In other words, **interfaces should be fine-grained and specific to the client's needs**. This involves breaking large interfaces into smaller, more focused interfaces.
+
+**Example**: *Lets consider **IPerson** interface which has methods to work and eat. **Robot** class cannot implement IPerson interface as it cannot eat. IPerson should be splitted in to smaller interfaces like **IEater** and **IWorker** so Robot can implement IWorker.*
+```c#
+// Before
+public interface IPerson
+{
+    void Work();
+    void Eat();
+}
+
+public class Robot : IPerson
+{
+    public void Work() { /*...*/ }
+    public void Eat() { /*...*/ } // Doesn't make sense for a robot
+}
+
+// After
+public interface IWorker
+{
+    void Work();
+}
+
+public interface IEater
+{
+    void Eat();
+}
+
+public class Robot : IWorker
+{
+    public void Work() { /*...*/ }
+}
+
+public class Human : IEater, IWorker
+{
+    public void Work() { /*...*/ }
+    public void Eat() { /*...*/ }
+}
+```
+
+## 5. Dependency Inversion Principle (DIP)
+This Principle states that high-level modules should not depend on low-level modules. Instead, **both should depend on abstractions**. This principle encourages the use of interfaces or abstract classes to decouple classes from their concrete implementations. Abstractions should not depend on details. Details should depend on abstractions.
+
+**Example**: *If UserService directly depends on the concrete implementation of MySQLDatabase. This violates DIP since the high-level class UserService is directly dependent on a low-level class.
+**If we want to switch to a different database system (e.g., PostgreSQL), we need to modify the UserService class**.
+Instead of depending on concrete implementations, the high-level class UserService should depend on abstractions. Let's create a Database interface as an abstraction:*
+
+```c#
+// Before
+
+/* Low-level module */
+class MySQLDatabase {
+  getUserData(id: number): string {
+    // Logic to fetch user data from MySQL database
+  }
+}
+
+/* High-level module */
+class UserService {
+  private database: MySQLDatabase;
+
+  constructor() {
+    this.database = new MySQLDatabase();
+  }
+
+  getUser(id: number): string {
+    return this.database.getUserData(id);
+  }
+}
+
+// After
+
+/* Abstract interface (abstraction) for the low-level module */
+interface Database {
+  getUserData(id: number): string;
+}
+
+/* low-level module implementing the Database interface */
+class MySQLDatabase implements Database {
+  getUserData(id: number): string {}
+}
+
+/* low-level module implementing the Database interface */
+class PostgreSQLDatabase implements Database {
+  getUserData(id: number): string {}
+}
+
+/* High-level module */
+class UserService {
+  private database: Database;
+
+  constructor(database: Database) {
+    this.database = database;
+  }
+
+  getUser(id: number): string {
+    return this.database.getUserData(id);
+  }
+}
+```
+This way, the UserService class depends on the Database abstraction, not on concrete implementations, fulfilling the Dependency Inversion Principle.
+
+**Note:** I'm excited to share this post that's like a treasure chest filled with nuggets of wisdom from different articles I've come across. Some of the examples taken from these articles [1](https://dev.to/galwaycoder/the-solid-principles-in-software-design-explained-53n) [2](https://dev.to/lukeskw/solid-principles-theyre-rock-solid-for-good-reason-31hn).

_posts/2025-01-01-a-beginners-guide-to-ufw.md

@@ -0,0 +1,143 @@
+---
+title: "Keep Your Linux System Secure: A Beginner’s Guide to UFW"
+description: UFW is a tool that helps you decide which connections can or can't access your Linux system. It's simple enough for beginners but also has features for experts.
+date: 2025-01-01T17:48:18.319Z
+tags:
+    - firewall
+    - linux
+    - security
+    - ufw
+categories:
+    - Linux
+    - Firewall
+image:
+    path: /assets/img/posts/ufw-logo.jpg
+    alt: A Beginner's Guide to UFW (Uncomplicated Firewall)
+slug: ufw-guide
+---
+UFW (Uncomplicated Firewall) is a powerful yet user-friendly tool that allows you to control which connections can access your Linux system. Designed with simplicity in mind, it’s perfect for beginners while still offering advanced features for experienced users. In this post, we’ll explore how UFW works, how to use it effectively, and why it’s an essential tool for securing your system.
+
+When it comes to securing your Linux server or desktop, managing network access is one of the most critical tasks. Firewalls serve as the first line of defense, and while tools like iptables offer granular control, they can be intimidating for beginners. That’s where UFW (Uncomplicated Firewall) steps in.
+
+UFW is a user-friendly interface for managing iptables, designed to simplify the process of configuring a firewall. Whether you’re a seasoned Linux administrator or a newcomer, UFW makes securing your system straightforward and efficient.
+
+## Why Use UFW?
+1. **Ease of Use:** UFW abstracts the complexities of iptables, offering simple commands to configure firewall rules.
+2. **Default Settings:** UFW ships with sensible defaults, such as denying all incoming connections while allowing outgoing ones.
+3. **Integration:** It integrates well with many linux distributions and is often installed by default.
+4. **Script-Friendly:** UFW is ideal for automation and scripting, making it perfect for managing servers at scale.
+
+## Installing UFW
+Most modern Linux distributions come with UFW pre-installed. If it’s not already on your system, you can install it with the following commands:
+
+For Ubuntu/Debian:
+```terminal
+sudo apt update
+sudo apt install ufw
+```
+For CentOS/RHEL:
+```terminal
+sudo yum install epel-release
+sudo yum install ufw
+```
+For Arch Linux:
+```terminal
+sudo pacman -S ufw
+```
+## Basic UFW Commands
+### Enable UFW
+Before configuring UFW, you need to enable it:
+```terminal
+sudo ufw enable
+```
+### Check UFW Status
+To see whether UFW is running and view current rules:
+```terminal
+sudo ufw status
+```
+### Allowing connections
+To allow traffic on a specific port, use the `allow` command. For example, to allow SSH connections:
+```terminal
+sudo ufw allow ssh
+```
+Or, specify the port number:
+```terminal
+sudo ufw allow 22
+```
+### Denying Connections
+To block traffic on a specific port:
+```terminal
+sudo ufw deny 80
+```
+### Removing Rules
+To delete a rule, prepend the rule with `delete`. For example:
+```terminal
+sudo ufw delete allow 22
+```
+Or Remove a rule by its number
+
+List UFW Rules with Numbers
+```terminal
+sudo ufw status numbered
+```
+Example output
+```terminal
+Status: active
+
+     To                         Action      From
+[ 1] 22/tcp                     ALLOW       Anywhere
+[ 2] 80/tcp                     ALLOW       Anywhere
+[ 3] 22/tcp (v6)                ALLOW       Anywhere (v6)
+[ 4] 80/tcp (v6)                ALLOW       Anywhere (v6)
+```
+Delete the Rule by Number
+```terminal
+sudo ufw delete 2
+```
+### Resetting UFW
+To reset UFW to its default state, removing all rules:
+```terminal
+sudo ufw reset
+```
+## Advanced Usage
+### Limiting Connections
+To protect against brute-force attacks, you can limit connections by using `limit` rule in UFW. This rule restricts the rate of new connections from the same IP address, allowing only a limited number of connections per minute (default: 6 attempts within 30 seconds). You can adjust these values by modifying the UFW configuration files, typically found in `/etc/ufw/` or `/etc/ufw/ufw.conf`, or by customizing rate limits using iptables rules directly. within a specified time frame. For instance, to limit SSH attempts, you can execute:
+```terminal
+sudo ufw limit ssh
+```
+This helps to deter malicious actors trying to gain unauthorized access to your system by repeatedly guessing passwords or exploiting vulnerabilities.
+### Allowing Specific IP Addresses
+To allow traffic from a specific IP address:
+```terminal
+sudo ufw allow from 192.168.0.100
+```
+Allowing Traffic to a Specific Port and IP
+For more granular control, you can specify both source IP and destination port:
+```terminal
+sudo ufw allow from 192.168.0.100 to any port 22
+sudo ufw allow from 192.168.0.0/24 to any port 22 proto tcp
+```
+### Using Application Profiles
+UFW supports application profiles to simplify rule management for common services. List available profiles with:
+```terminal
+sudo ufw app list
+```
+To allow a specific application, UFW provides predefined profiles for commonly used software and services. These profiles encapsulate the necessary port and protocol details, simplifying firewall configuration. For instance, to permit traffic for an application like Apache, you can execute:
+```terminal
+sudo ufw allow 'Apache Full'
+```
+This command enables both HTTP (port 80) and HTTPS (port 443) traffic, as defined in the application profile.
+
+## Best Practices
+1. **Start with Defaults:** UFW's default policy denies incoming traffic and allows outgoing traffic, a good starting point for most setups.
+2. **Enable Logging:** Turn on logging to monitor blocked traffic:
+```terminal
+sudo ufw logging on
+```
+3. **Test Rules:** Before applying complex rules on a production system, test them in a safe environment.
+4. **Document Changes:** Keep a record of the rules you add or remove to make troubleshooting easier.
+
+## Conclusion
+UFW makes it easy to manage your firewall, even if you’re new to Linux. By learning its simple and advanced features, you can protect your system without the hassle of complicated tools like iptables. Whether you’re using one computer or many servers, UFW is a great tool to keep things secure.
+
+

_tabs/about.md

@@ -5,7 +5,7 @@ order: 4
 ---
 
 ## Meet Bangara Raju: Your Guide to Tech, DIY, and Beyond
-Hello there, curious minds and fellow explorers! I'm **Bangara Raju**, and I'm absolutely thrilled to welcome you to my corner of the internet. 
+Hello there, curious minds and fellow explorers! I'm [**Bangara Raju**](https://bangararaju.kottedi.in/){:target="_blank"}, and I'm absolutely thrilled to welcome you to my corner of the internet. 
 
 ### A Byte-Sized Introduction:
 By day, I'm immersed in the world of code and algorithms, working as a **Software Engineer** to shape the digital landscapes we navigate.

assets/js/comments/remark42.js

@@ -4,7 +4,7 @@ var remark_config = {
     components: ['embed'],
 
     max_shown_comments: 10,
-    theme: modeToggle.modeStatus,
+    theme: Theme.visualState,
 
     locale: 'en',
     show_email_subscription: false
@@ -23,6 +23,6 @@ var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-
 
 if (targetDiv != null) {
     targetDiv.addEventListener("click", () => {
-        window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
+        window.REMARK42.changeTheme(Theme.visualState === 'light' ? 'dark' : 'light');
     })
 }

assets/js/common.js

@@ -3,14 +3,17 @@ var siteId = document.currentScript.getAttribute('siteid');
 var postId = document.currentScript.getAttribute('postid');
 var remark42Host = document.currentScript.getAttribute('remark42host');
 
-function ajax(url) {
+function ajax(url, type, payload) {
+    if (payload === undefined) {
+      payload = null;
+    }
     return new Promise(function (resolve, reject) {
       var xhr = new XMLHttpRequest();
       xhr.onload = function () {
         resolve(this.responseText);
       };
       xhr.onerror = reject;
-      xhr.open('GET', url);
-      xhr.send();
+      xhr.open(type, url);
+      xhr.send(payload);
     });
   }

assets/js/likes.js

@@ -16,7 +16,6 @@ function apiCall(url, event) {
     onLoadAndClick();
     ajax(url)
         .then(function (result) {
-            console.log(result);
             if(event === "click"){
                 heartIcon.classList.toggle("liked");
             }

db_scripts/mysql.sql

@@ -4,11 +4,12 @@
 
 CREATE USER blog_admin@'%' IDENTIFIED BY 'pass@1234';
 
-GRANT ALL PRIVILEGES ON blogDB.* TO blog_admin@'%';
+GRANT ALL PRIVILEGES ON blogDB.* TO blog_admin@'192.168.0.%';
+GRANT ALL PRIVILEGES ON blogDB.* TO blog_admin@'10.1.0.%';
 
 SHOW GRANTS FOR blog_admin@'%';
 
-FLUSH PRIVILEGES
+FLUSH PRIVILEGES;
 
 -- Create Counter Table
 

frontmatter.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "https://frontmatter.codes/frontmatter.schema.json",
+  "frontMatter.taxonomy.contentTypes": [
+    {
+      "name": "default",
+      "pageBundle": false,
+      "previewPath": null,
+      "fields": [
+        {
+          "title": "Title",
+          "name": "title",
+          "type": "string"
+        },
+        {
+          "title": "Description",
+          "name": "description",
+          "type": "string"
+        },
+        {
+          "title": "Publishing date",
+          "name": "date",
+          "type": "datetime",
+          "default": "{{now}}",
+          "isPublishDate": true
+        },
+        {
+          "title": "Tags",
+          "name": "tags",
+          "type": "tags"
+        },
+        {
+          "title": "Categories",
+          "name": "categories",
+          "type": "categories"
+        },
+        {
+          "title": "image",
+          "name": "image",
+          "type": "fields",
+          "fields": [
+            {
+              "title": "path",
+              "name": "path",
+              "type": "image"
+            }
+          ]
+        },
+        {
+          "title": "disable-ty",
+          "name": "disable-ty",
+          "type": "boolean"
+        },
+        {
+          "title": "series",
+          "name": "series",
+          "type": "string"
+        }
+      ]
+    }
+  ],
+  "frontMatter.framework.id": "jekyll",
+  "frontMatter.content.publicFolder": "",
+  "frontMatter.preview.host": "http://localhost:4000",
+  "frontMatter.content.pageFolders": [
+    {
+      "title": "drafts",
+      "path": "[[workspace]]/_drafts"
+    },
+    {
+      "title": "posts",
+      "path": "[[workspace]]/_posts"
+    }
+  ],
+  "frontMatter.git.enabled": true
+}

tools/run.sh

@@ -0,0 +1,54 @@
+#!/usr/bin/env bash
+#
+# Run jekyll serve and then launch the site
+
+prod=false
+command="bundle exec jekyll s -l"
+host="127.0.0.1"
+
+help() {
+  echo "Usage:"
+  echo
+  echo "   bash /path/to/run [options]"
+  echo
+  echo "Options:"
+  echo "     -H, --host [HOST]    Host to bind to."
+  echo "     -p, --production     Run Jekyll in 'production' mode."
+  echo "     -h, --help           Print this help information."
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  -H | --host)
+    host="$2"
+    shift 2
+    ;;
+  -p | --production)
+    prod=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    echo -e "> Unknown option: '$opt'\n"
+    help
+    exit 1
+    ;;
+  esac
+done
+
+command="$command -H $host"
+
+if $prod; then
+  command="JEKYLL_ENV=production $command"
+fi
+
+if [ -e /proc/1/cgroup ] && grep -q docker /proc/1/cgroup; then
+  command="$command --force_polling"
+fi
+
+echo -e "\n> $command\n"
+eval "$command"

tools/test.sh

@@ -0,0 +1,89 @@
+#!/usr/bin/env bash
+#
+# Build and test the site content
+#
+# Requirement: html-proofer, jekyll
+#
+# Usage: See help information
+
+set -eu
+
+SITE_DIR="_site"
+
+_config="_config.yml"
+
+_baseurl=""
+
+help() {
+  echo "Build and test the site content"
+  echo
+  echo "Usage:"
+  echo
+  echo "   bash $0 [options]"
+  echo
+  echo "Options:"
+  echo '     -c, --config   "<config_a[,config_b[...]]>"    Specify config file(s)'
+  echo "     -h, --help               Print this information."
+}
+
+read_baseurl() {
+  if [[ $_config == *","* ]]; then
+    # multiple config
+    IFS=","
+    read -ra config_array <<<"$_config"
+
+    # reverse loop the config files
+    for ((i = ${#config_array[@]} - 1; i >= 0; i--)); do
+      _tmp_baseurl="$(grep '^baseurl:' "${config_array[i]}" | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
+
+      if [[ -n $_tmp_baseurl ]]; then
+        _baseurl="$_tmp_baseurl"
+        break
+      fi
+    done
+
+  else
+    # single config
+    _baseurl="$(grep '^baseurl:' "$_config" | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
+  fi
+}
+
+main() {
+  # clean up
+  if [[ -d $SITE_DIR ]]; then
+    rm -rf "$SITE_DIR"
+  fi
+
+  read_baseurl
+
+  # build
+  JEKYLL_ENV=production bundle exec jekyll b \
+    -d "$SITE_DIR$_baseurl" -c "$_config"
+
+  # test
+  bundle exec htmlproofer "$SITE_DIR" \
+    --disable-external \
+    --ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  -c | --config)
+    _config="$2"
+    shift
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    # unknown option
+    help
+    exit 1
+    ;;
+  esac
+done
+
+main