fix: new article for May 1

Author: Daniele-rolli

.gitignore

@@ -4,3 +4,4 @@ _site
 .jekyll-metadata
 vendor
 Gemfile.lock
+/node_modules

Gemfile

@@ -5,4 +5,5 @@ gem 'webrick'
 gem 'jekyll-feed'
 gem 'jekyll-postcss'
 gem 'jekyll-seo-tag'
-gem 'jemoji'
+gem 'jemoji'
+gem 'jekyll-paginate-v2'

_config.yml

@@ -26,10 +26,66 @@ include:
   - _post
 
 plugins:
+  - jekyll-paginate-v2
   - jekyll-feed
   - jekyll-seo-tag
   - jekyll-postcss
   - jemoji
 
 postcss:
   cache: false
+
+pagination:
+  
+  # Site-wide kill switch, disabled here it doesn't run at all 
+  enabled: true
+
+  # Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
+  debug: false
+
+  # The default document collection to paginate if nothing is specified ('posts' is default)
+  collection: 'posts'
+
+  # How many objects per paginated page, used to be `paginate` (default: 0, means all)
+  per_page: 9
+
+  # The permalink structure for the paginated pages (this can be any level deep)
+  permalink: '/page/:num/' # Pages are index.html inside this folder (default)
+  #permalink: '/page/:num.html' # Pages are simple html files 
+  #permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.
+
+  # Optional the title format for the paginated pages (supports :title for original page title, :num for pagination page number, :max for total number of pages)
+  title: ':title - page :num'
+
+  # Limit how many pagenated pages to create (default: 0, means all)
+  limit: 0
+  
+  # Optional, defines the field that the posts should be sorted on (omit to default to 'date')
+  sort_field: 'date'
+
+  # Optional, sorts the posts in reverse order (omit to default decending or sort_reverse: true)
+  sort_reverse: true
+
+  # Optional, the default category to use, omit or just leave this as 'posts' to get a backwards-compatible behavior (all posts)
+  category: 'posts'
+
+  # Optional, the default tag to use, omit to disable
+  tag: ''
+
+  # Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts, 
+  # in reality this can be any value, suggested are the Microsoft locale-codes (e.g. en_US, en_GB) or simply the ISO-639 language code )
+  locale: '' 
+
+ # Optional,omit or set both before and after to zero to disable. 
+ # Controls how the pagination trail for the paginated pages look like. 
+  trail: 
+    before: 2
+    after: 2
+
+  # Optional, the default file extension for generated pages (e.g html, json, xml).
+  # Internally this is set to html by default
+  extension: html
+
+  # Optional, the default name of the index file for generated pages (e.g. 'index.html')
+  # Without file extension
+  indexpage: 'index'

_includes/comments.html

@@ -61,6 +61,7 @@
   {% else %}
   {% seo %}
   {% endif %}
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <link href="{{ '/assets/main.css' | relative_url }}" rel="stylesheet" />
   <link href="{{ '/assets/lights.css?v=2' | relative_url }}" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>

_includes/head.html

@@ -1,8 +1,11 @@
 {% include search.html %}
-<nav class="bg-transparent">
+<div class="sticky top-3 z-10 px-3 sm:px-6">
+<nav
+  class="max-w-7xl mx-auto bg-white/80 dark:bg-neutral-800/80 backdrop-blur-md border border-neutral-200/70 dark:border-neutral-700/60 shadow-md shadow-neutral-900/5 dark:shadow-neutral-900/30 rounded-2xl"
+>
   <div id="lights" class="hidden"></div>
-  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-    <div class="relative flex h-16 items-center justify-between">
+  <div class="px-4 sm:px-6">
+    <div class="relative flex h-14 items-center justify-between">
       <div class="flex justify-center sm:items-stretch sm:justify-start">
         <a href="{{ site.baseurl }}/" class="flex shrink-0 items-center">
           <img
@@ -11,59 +14,6 @@
           />
           <p class="ml-4 dark:text-gray-100 font-bold">Beaver Blog</p>
         </a>
-        <div class="hidden sm:ml-6 sm:block">
-          <div class="flex space-x-4">
-            <a
-              href="https://bsky.app/profile/beavernotes.com"
-              class="group rounded-md dark:text-neutral-100 hover:bg-blue-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-            >
-              <i
-                class="fa-brands fa-bluesky fa-xl group-hover:text-blue-400"
-              ></i>
-            </a>
-
-            <a
-              href="https://mastodon.social/@Beavernotes"
-              class="group rounded-md dark:text-neutral-100 hover:bg-[#6364FF] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-            >
-              <i
-                class="fa-brands fa-mastodon fa-xl group-hover:text-[#6364FF]"
-              ></i>
-            </a>
-
-            <a
-              href="https://www.reddit.com/r/BeaverNotes"
-              class="group rounded-md dark:text-neutral-100 hover:bg-[#FF4500] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-            >
-              <i
-                class="fa-brands fa-reddit fa-xl group-hover:text-[#FF4500]"
-              ></i>
-            </a>
-
-            <a
-              href="https://x.com/BeaverNotes"
-              class="group rounded-md dark:text-neutral-100 hover:bg-[#1DA1F5] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-            >
-              <i
-                class="fa-brands fa-twitter fa-xl group-hover:text-[#1DA1F2]"
-              ></i>
-            </a>
-
-            <a
-              href="https://docs.beavernotes.com"
-              class="group rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-            >
-              <i class="fa-solid fa-book fa-xl group-hover:text-amber-400"></i>
-            </a>
-
-            <a
-              href="{{site.url}}/feed.xml"
-              class="group rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-            >
-              <i class="fa-solid fa-rss fa-xl group-hover:text-amber-400"></i>
-            </a>
-          </div>
-        </div>
       </div>
       <!-- Search Icon Button -->
       <button
@@ -87,60 +37,6 @@
         ></i>
       </button>
     </div>
-
-    <!-- Share Buttons Container -->
-    <div class="sm:hidden">
-      <div class="flex justify-center">
-        <a
-          href="https://bsky.app/profile/beavernotes.com"
-          class="group rounded-md dark:text-neutral-100 hover:bg-blue-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-        >
-          <i class="fa-brands fa-bluesky fa-xl group-hover:text-blue-400"></i>
-        </a>
-
-        <a
-          href="https://mastodon.social/@Beavernotes"
-          class="group rounded-md dark:text-neutral-100 hover:bg-[#6364FF] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-        >
-          <i class="fa-brands fa-mastodon fa-xl group-hover:text-[#6364FF]"></i>
-        </a>
-
-        <a
-          href="https://www.reddit.com/r/BeaverNotes"
-          class="group rounded-md dark:text-neutral-100 hover:bg-[#FF4500] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-        >
-          <i class="fa-brands fa-reddit fa-xl group-hover:text-[#FF4500]"></i>
-        </a>
-
-        <a
-          href="https://x.com/BeaverNotes"
-          class="group rounded-md dark:text-neutral-100 hover:bg-[#1DA1F5] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-        >
-          <i class="fa-brands fa-twitter fa-xl group-hover:text-[#1DA1F2]"></i>
-        </a>
-
-        <a
-          href="https://docs.beavernotes.com"
-          class="group rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-        >
-          <i class="fa-solid fa-book fa-xl group-hover:text-amber-400"></i>
-        </a>
-
-        <a
-          href="{{site.url}}/feed.xml"
-          class="group rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
-        >
-          <i class="fa-solid fa-rss fa-xl group-hover:text-amber-400"></i>
-        </a>
-      </div>
-    </div>
-
-    <ul
-      id="results-container"
-      class="fixed right-0 z-40 w-80 bg-neutral-100 dark:bg-neutral-700 dark:text-neutral-100 rounded-xl overflow-auto"
-    >
-      <li></li>
-    </ul>
   </div>
   <script>
     function toggleDarkMode() {
@@ -167,7 +63,7 @@
       const icon = document.getElementById("dark-mode-icon");
       const savedTheme = localStorage.getItem("theme");
       const systemPrefersDark = window.matchMedia(
-        "(prefers-color-scheme: dark)"
+        "(prefers-color-scheme: dark)",
       ).matches;
 
       if (savedTheme) {
@@ -230,3 +126,4 @@
     });
   </script>
 </nav>
+</div>