update notes content and scss types

src/layouts/NotesLayout.astro

@@ -5,7 +5,7 @@ import "../styles/global.scss";
 import "../styles/pages-styles/notes-content.scss";
 import "../styles/pages-styles/notes-custom.scss";
 ---
-<BaseLayout title={frontmatter.title} hideLangSwitcher={true}>
+<BaseLayout title={frontmatter.title} hideLangSwitcher={false}>
     <div class="main-content">
 
         <nav class="sidebar">
@@ -58,6 +58,8 @@ import "../styles/pages-styles/notes-custom.scss";
             </div>
         </aside>
     </div>
+
+    <script src="../scripts/sublink.js"></script>
+    <script src="../scripts/activeHeading.js"></script>
 </BaseLayout>
 
-<script src="../scripts/sublink.js"></script>

src/pages/notes/computer-architecture.mdx

@@ -346,4 +346,22 @@ int arr[ARRAY_SIZE];
 for (int i = 0; i < ARRAY_SIZE; i++) {
     arr[i] = i;
 }
-```
+```
+
+### 2.4 Strings
+
+In C language, strings are stored in an array of characters. The end of the string is
+marked by a special character, the null character `\0`.
+
+```c frame="terminal"
+// string.cpp
+char str[] = "Hello, World!";
+char str1[6] = {'H', 'e', 'l', 'l', 'o', '\0'};
+char str2[6] = "Hello";
+```
+
+Here are some common;y-used string functions defined in the `string.h` library:
+
+1. `size_t strlen(const char * str)`: Returns the length of the string (not including the null terminator).
+2. `char * strcpy ( char * destination, const char * source )`: Copies the C string pointed by source into the array pointed by destination, including the terminating null character (and stopping at that point).
+3. 

src/scripts/activeHeading.js

@@ -0,0 +1,44 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const sidebarLinks = document.querySelectorAll(".right-sidebar-content a");
+    const headers = document.querySelectorAll(".notes-content h2, .notes-content h3, .notes-content h4");
+
+    /**
+     * Updates the active link in the right sidebar based on scroll position and
+     * updates the URL with the corresponding heading's hash.
+     */
+    function updateActiveHeading() {
+      let currentActiveId = "";
+
+      // Loop through each heading and update the current active heading ID.
+      headers.forEach(header => {
+        const rect = header.getBoundingClientRect();
+        // If the top of the header is above 100px from the top, consider it "active".
+        // (You can adjust this value if needed.)
+        if (rect.top <= 100 && rect.bottom >= 100) {
+          currentActiveId = header.id;
+        }
+      });
+
+      // If a header is active, update the URL hash to its id and change the sidebar link.
+      if (currentActiveId) {
+        // Update the browser's URL hash
+        window.history.replaceState(null, null, `#${currentActiveId}`);
+
+        // Remove the 'active' class from all sidebar links
+        sidebarLinks.forEach(link => link.classList.remove("active"));
+
+        // Add the 'active' class to the sidebar link corresponding to the active header
+        const activeLink = document.querySelector(`.right-sidebar-content a[href="#${currentActiveId}"]`);
+        if (activeLink) {
+          activeLink.classList.add("active");
+        }
+      }
+    }
+
+    // Listen for scroll events and update the active heading accordingly.
+    window.addEventListener("scroll", updateActiveHeading);
+
+    // Run once on page load in case the page is already scrolled down.
+    updateActiveHeading();
+  });
+

src/styles/_variables.scss

@@ -14,7 +14,14 @@ $button-padding-top: 1rem;
 $button-padding-left: 2rem;
 $button-font-size: 20px;
 
-/* Notes Content Settings */
+/* Navigation Settings */
+$navigation-text-size: 20px;
+$navigation-padding-size: 16px;
+$navigation-text-padding-size: 8px;
+
+/**************************
+ * Notes Content Settings *
+ **************************/
 
 /* Sidebar Settings */
 $sidebar-width: 22vw;

src/styles/pages-styles/notes-content.scss

@@ -182,15 +182,14 @@
     &-content {
         align-items: center;
         height: auto;
-        padding-top: 48px;
+        padding-top: (v.$navigation-padding-size + v.$navigation-text-padding-size) * 2 + v.$navigation-text-size;
         padding-bottom: 10px;
 
         ul {
             padding-left: 10px;
             list-style: none;
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
         }
     }
 
@@ -291,7 +290,7 @@
     border-left: 1px solid #d1d1d2;
 
     &-content {
-        padding-top: 20px;
+        padding-top: (v.$navigation-padding-size + v.$navigation-text-padding-size) * 2 + v.$navigation-text-size;;
         padding-left: 10px;
         padding-right: 10px;
 
@@ -318,6 +317,7 @@
 
         ul ul {
             padding-left: 20px;
+            list-style: none;
         }
 
         li {
@@ -359,6 +359,11 @@
     }
 }
 
+.right-sidebar-content a.active {
+    color: v.$theme-text-color;  
+    padding-left: 12px;         
+  }
+
 .second-heading {
     margin-left: 0;
 }