🛠️ Fixes + New article

Author: Daniele-rolli

_includes/nav.html

@@ -127,5 +127,12 @@
         console.error("Search container not found");
       }
     }
+
+    document.addEventListener("keydown", (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault(); // Prevent default browser action
+        openSearch();
+      }
+    });
   </script>
 </nav>  

_includes/search.html

@@ -1,42 +1,35 @@
 <div
   id="search-container"
-  class="fixed inset-x-0 top-10 hidden flex items-center justify-center z-50"
-  role="dialog"
-  aria-labelledby="search-dialog-title"
-  aria-hidden="true"
+  class="fixed inset-0 bg-slate-900/25 backdrop-blur transition-opacity w-screen h-screen hidden flex z-50"
 >
   <div
-    class="bg-white dark:bg-neutral-700 w-full max-w-xl rounded-lg shadow-lg relative"
+    role="dialog"
+    aria-labelledby="search-dialog-title"
+    aria-hidden="true"
+    class="fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24"
   >
     <div
-      class="p-2 mx-4 border-b border-b-neutral-100 dark:border-b-neutral-700 outline-none relative flex items-center"
+      class="bg-white dark:bg-neutral-700 w-full max-w-xl rounded-lg shadow-xl relative"
     >
-      <!-- Search Icon -->
-      <i
-        class="fa-solid fa-magnifying-glass text-neutral-600 dark:text-neutral-100 hover:text-amber-400 text-lg pl-0"
-      ></i>
-
-      <!-- Search Input -->
-      <input
-        id="search-input"
-        type="text"
-        class="text-sm bg-transparent outline-none border-none placeholder-neutral-500 dark:placeholder-neutral-300 dark:text-neutral-300 focus:ring-0 pl-4 pr-10"
-        placeholder="Type to search..."
-        aria-label="Search input"
-      />
-
-      <!-- Close Button -->
-      <button
-        onclick="closeSearch()"
-        class="absolute right-0 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-black focus:outline-none focus:ring-0"
-        aria-label="Close search dialog"
+      <div
+        class="p-3 border-b border-b-neutral-100 dark:border-b-neutral-700 outline-none relative flex items-center justify-between"
       >
+        <!-- Search Input -->
+        <input
+          id="search-input"
+          type="text"
+          class="flex-1 text-sm bg-transparent outline-none border-none placeholder-neutral-500 dark:placeholder-neutral-300 dark:text-neutral-300 focus:ring-0"
+          placeholder="Type to search..."
+          aria-label="Search input"
+        />
+
+        <!-- Search Icon -->
         <i
-          class="fa-solid fa-close text-neutral-600 dark:text-neutral-100 hover:text-amber-400 text-lg"
+          class="fa-solid fa-magnifying-glass p-2 text-neutral-600 dark:text-neutral-100 hover:text-amber-400 text-lg cursor-pointer"
         ></i>
-      </button>
+      </div>
+      <ul id="results-container" class="pb-2"></ul>
     </div>
-    <ul id="results-container" class="space-y-2 py-2"></ul>
   </div>
 </div>
 
@@ -49,13 +42,22 @@
       console.error("Search container not found");
     }
   }
+
   // Initialize SimpleJekyllSearch
   document.addEventListener("DOMContentLoaded", () => {
     const searchInput = document.getElementById("search-input");
     const resultsContainer = document.getElementById("results-container");
 
+    // Add ESC key listener
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault(); // Prevent default to avoid bubbling
+        closeSearch();
+      }
+    });
+
     // Inject site.baseurl from Jekyll into the JSON path
-    const jsonPath = "{{ site.baseurl }}/assets/search.json"; // Inject site.baseurl here
+    const jsonPath = "{{ site.baseurl }}/assets/search.json";
 
     if (!searchInput || !resultsContainer) {
       console.error("Search input or results container not found");
@@ -69,8 +71,11 @@
       searchResultTemplate: `
         <li>
           <a href="{url}" class="flex items-center p-2 dark:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-600">
-            <div>
+            <div class="flex flex-row">
+              <div class="flex flex-col ml-2">
               <p class="text-sm font-bold">{title}</p>
+              <p class="text-sm">{details}</p>
+              </div>
             </div>
           </a>
         </li>`,

_layouts/post.html

@@ -51,7 +51,7 @@ <h1 class="text-4xl dark:text-neutral-100 font-bold">
               {{ page.title }}
             </h1>
             <p class="text-sm text-neutral-600 dark:text-neutral-100">
-              {{ page.details }}
+              {{ page.description }}
             </p>
           </header>
 
@@ -60,22 +60,31 @@ <h1 class="text-4xl dark:text-neutral-100 font-bold">
           </div>
 
           <!-- Navigation for Previous and Next Posts -->
+          {% assign posts_in_category = site.posts | where: "category",
+          page.category | sort: "position" %} {% for post in posts_in_category
+          %} {% if post.url == page.url %} {% assign current_index =
+          forloop.index0 %} {% endif %} {% endfor %} {% assign previous_index =
+          current_index | minus: 1 %} {% assign next_index = current_index |
+          plus: 1 %}
+
           <nav
             class="mt-8 flex justify-between border-t pt-4 dark:border-neutral-700"
           >
-            {% if page.previous %}
+            {% if previous_index >= 0 %} {% assign previous_post =
+            posts_in_category[previous_index] %}
             <a
-              href="{{ page.previous.url }}"
+              href="{{ previous_post.url }}"
               class="px-4 py-2 text-sm font-medium text-amber-400"
             >
-              &larr; Previous: {{ page.previous.title }}
+              &larr; Previous: {{ previous_post.title }}
             </a>
-            {% endif %} {% if page.next %}
+            {% endif %} {% if next_index < posts_in_category.size %} {% assign
+            next_post = posts_in_category[next_index] %}
             <a
-              href="{{ page.next.url }}"
+              href="{{ next_post.url }}"
               class="px-4 py-2 text-sm font-medium text-amber-400"
             >
-              Next: {{ page.next.title }} &rarr;
+              Next: {{ next_post.title }} &rarr;
             </a>
             {% endif %}
           </nav>

_posts/Beaver Notes/Dev/2025-01-03-How-to-contribute.md

@@ -14,17 +14,15 @@ One of the biggest ways to contribute is by helping with our documentation. We a
 
 # Blog Posts
 
-A blog is one of the best means for a project to grow and update its users on the work that is being done. Contributing to the blog means getting in touch with the developers to see what’s new, writing release articles, sharing tips and tricks, etc. In the following guide, [link to guide](), we’ll show you how you can contribute to the blog.
+A blog is one of the best means for a project to grow and update its users on the work that is being done. Contributing to the blog means getting in touch with the developers to see what’s new, writing release articles, sharing tips and tricks, etc. In the [following guide]({% post_url 2025-01-06-Contribute-to-blog %}), we’ll show you how you can contribute to the blog.
 
 # Code Contributions
 
-Code is obviously a great way to contribute to the project. By hunting down bugs, fixing issues open on GitHub, or implementing new features from the roadmap, you’ll be sure to leave your mark on Beaver and its growth. Follow this guide, [link to guide](), to set up the environment and get started. 
-
-If you don't feel quite ready to contribute to the app you can also contribute to Beaver’s website code, by following this guide: [link to guide]().
+Code is obviously a great way to contribute to the project. By hunting down bugs, fixing issues open on GitHub, or implementing new features from the roadmap, you’ll be sure to leave your mark on Beaver and its growth. Follow [this guide]({% post_url 2025-02-13-Code-Contributions %}), to set up the environment and get started. 
 
 # Translation 
 
-Beaver is enjoyed by people all around the world. You can help us reach even more people by helping us translate the desktop app. You could be the first to translate the app or update an existing translation. All translations are done using an open-source platform called [Traduora](). Check out this page to contribute to translations: [link to guide]()
+Beaver is enjoyed by people all around the world. You can help us reach even more people by helping us translate the desktop app. You could be the first to translate the app or update an existing translation. All translations are done using an open-source platform called Traduora. Check out [this page]({% post_url 2025-01-06-translate %}) to contribute to translations.
 
 # UI and UX 
 

_posts/Beaver Notes/Dev/2025-01-05-Contribute-to-docs.md

@@ -3,7 +3,7 @@ layout: post
 title: Contributing to the Docs
 details: Good documentation is the foundation of a great project.
 category: Beaver Notes (DEV)
-position: 2
+position: 3
 ---
 
 Beaver's Documentation website is built using Jekyll, a static site generator. This makes collaboration straightforward, even if you’re not a developer. There are two main ways to contribute to the docs:

_posts/Beaver Notes/Dev/2025-01-06-Contribute-to-blog.md

@@ -3,7 +3,7 @@ layout: post
 title: Contributing to the Blog
 details: An engaging blog is a good blog.
 category: Beaver Notes (DEV)
-position: 3
+position: 4
 ---
 
 Beaver's Blog website, like the docs, is built using Jekyll, a static site generator. To contribute to the blog, you don't need to be an artist, blogger, or developer.

_posts/Beaver Notes/Dev/2025-02-13-Code-Contributions.md

@@ -0,0 +1,133 @@
+---
+layout: post
+title: Code Contributions
+details: Help develop new features, squash bugs, and improve code
+category: Beaver Notes (DEV)
+position: 2
+---
+
+Thank you for your interest in contributing to Beaver Notes! We are thrilled to have you on board.
+
+# Prerequisites
+
+Before contributing to the project, make sure you have the necessary tools installed:
+
+- [**Node.js**](https://nodejs.org/): Version 22 or later
+- **Yarn**: `npm install -g yarn`
+
+Once you have these, you can verify the versions using:
+
+```
+node -v
+yarn -v
+```
+
+# Getting Started
+
+**1. Fork the Repository**
+
+Click the Fork button at the top right of the repo and clone it to your machine:
+
+```bash
+git clone https://github.com/your-username/Beaver-Notes.git
+
+cd Beaver-Notes
+```
+
+**2. Install Dependencies**
+
+Ensure you have Yarn installed, then install dependencies:
+
+```bash
+yarn install
+```
+
+**3. Run the Project in Development Mode**
+
+```bash
+yarn watch
+```
+
+**4. Create a New Branch**
+
+Use a descriptive name for your branch:
+
+```bash
+git checkout -b feature/add-dark-mode
+```
+
+# Code Style & Quality
+
+### Linting
+
+To maintain code quality, we use [Prettier](https://prettier.io/) for code formatting. Prettier will automatically format your code based on the `.prettierrc` configuration file.
+
+You can run Prettier manually by executing:
+
+```
+yarn prettier --write .
+```
+
+We also use ESLint for static code analysis. This helps identify and fix code quality and style issues.
+
+Run the linter:
+
+```
+yarn lint
+```
+
+Auto-fix lint issues:
+
+```
+yarn lint --fix
+```
+
+### Pre-commit Hooks (Husky and Lint-Staged)
+
+We use [Husky](https://typicode.github.io/husky/) and [Lint-Staged](https://github.com/lint-staged/lint-staged) to ensure that code formatting and linting happen before committing changes.
+
+Before you make a commit, the following will happen automatically:
+
+- Prettier will format the code.
+- ESLint will check for issues and fix them if possible.
+
+When attempting to commit, Husky will invoke the lint-staged script, which runs the following linting tasks:
+
+```json
+"lint-staged": {
+  "*.{js,ts,vue}": "eslint --cache --fix"
+}
+```
+
+# 6. Commit and Push Changes
+
+After making changes, commit and push them to the repository. Here’s a typical workflow:
+
+1. Stage your changes:
+
+```
+git add .
+```
+
+2. Commit the changes:
+
+```
+git commit -m "Your commit message"
+```
+
+Husky will run Prettier and ESLint checks before committing.
+
+3. Push the changes:
+
+```
+git push origin branch-name
+```
+
+
+# 9. Submitting a Pull Request
+
+> If you’re planning to make significant changes or add new features, ensure that you follow the project’s conventions. This includes:
+- Keeping the code consistent with the existing style.
+- Running Prettier and ESLint checks before pushing your changes.
+
+Once your changes are committed and pushed to your branch, you can open a pull request (PR) to merge your changes into the development branch. They will be merged into the main branch once a new release is ready. Make sure to describe the changes in the PR description, including any important details. Also, check the relevant checkboxes. We know it can be boring, but it helps get your PR accepted faster.