From 746b70ea413f61f9287e826c81c23a4ae9059687 Mon Sep 17 00:00:00 2001
From: Yuanzhang Xiao <xyz.xiao@gmail.com>
Date: Mon, 15 Jan 2024 14:58:38 +0000
Subject: [PATCH] add ToC

---
 _config.yml                                   |   2 +-
 _includes/breadcrumb-4.html                   |   6 +-
 _layouts/page original.html                   |  13 +++
 _layouts/page.html                            | 105 +++++++++++++++++-
 css/style.css                                 |  89 +++++++++++++--
 .../experience-introduce-yourself.md          |   2 +-
 morea/02-overview/reading-building-blocks.md  |   9 +-
 .../reading-fading-interference.md            |   4 +-
 8 files changed, 209 insertions(+), 21 deletions(-)
 create mode 100755 _layouts/page original.html

diff --git a/_config.yml b/_config.yml
index 0528258..6025286 100755
--- a/_config.yml
+++ b/_config.yml
@@ -4,7 +4,7 @@
 # SITE SPECIFIC: The following fields are typically changed for each site
 name: EE 643 Spring 2024
 baseurl: /ee643spring2024
-morea_theme: zephyr
+morea_theme: cerulean-original
 timezone: Pacific/Honolulu
 morea_navbar_items:
   # - Prerequisites
diff --git a/_includes/breadcrumb-4.html b/_includes/breadcrumb-4.html
index 513ae46..82c5401 100755
--- a/_includes/breadcrumb-4.html
+++ b/_includes/breadcrumb-4.html
@@ -1,6 +1,6 @@
 <!-- Internal fragment for displaying the breadcrumb bar -->
-<div class="breadcrumb-background" style="padding-top: 1em; padding-bottom: .01em">
-  <div class="container">
+<div class="breadcrumb-background" style="padding-top: 1em; padding-bottom: .01em;">
+  <!-- <div class="container"> -->
     <nav aria-label="breadcrumb">
       <ol class="breadcrumb">
         {% if site.morea_head_breadcrumb_link %}
@@ -12,5 +12,5 @@
         <li class="breadcrumb-item active">{{ page.title }}</li>
       </ol>
     </nav>
-  </div>
+  <!-- </div> -->
 </div>
\ No newline at end of file
diff --git a/_layouts/page original.html b/_layouts/page original.html
new file mode 100755
index 0000000..f049122
--- /dev/null
+++ b/_layouts/page original.html	
@@ -0,0 +1,13 @@
+---
+layout: core
+---
+{% include breadcrumb-4.html %}
+
+{% if page.topdiv == 'container' %}
+<div class="container">
+  {{ content }}
+</div>
+{% else %}
+{{ content }}
+{% endif %}
+
diff --git a/_layouts/page.html b/_layouts/page.html
index f049122..5bdd9e0 100755
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,13 +1,114 @@
 ---
 layout: core
 ---
-{% include breadcrumb-4.html %}
 
 {% if page.topdiv == 'container' %}
 <div class="container">
-  {{ content }}
+  <div class="row">
+      <!-- Main Content -->
+      <div class="col-md-9">
+        {% include breadcrumb-4.html %}
+          {{ content }}
+      </div>
+
+      <!-- ToC Sidebar -->
+      <div class="col-md-3 d-none d-md-block">
+          <div class="toc-sidebar">
+            <div id="toc-container" class="toc__left-border"></div>
+          </div>
+      </div>
+  </div>
 </div>
 {% else %}
 {{ content }}
 {% endif %}
 
+<script>
+
+  // Generate the table of content including sections (h2) and subsections (h3)
+  document.addEventListener('DOMContentLoaded', function() {
+    const tocContainer = document.getElementById('toc-container');
+    const h2Headings = document.querySelectorAll('.col-md-9 h2');
+    const h2List = document.createElement('ul');
+    
+    h2Headings.forEach(h2 => {
+        const h2Item = document.createElement('li');
+        const h2Link = document.createElement('a');
+        h2Link.href = '#' + h2.id;
+        h2Link.textContent = h2.textContent;
+        h2Item.appendChild(h2Link);
+
+        // Create a sublist for h3 headings under this h2
+        const h3List = document.createElement('ul');
+        
+        // Get all next siblings until the next h2 or end of container
+        let nextElem = h2.nextElementSibling;
+        while (nextElem && nextElem.tagName !== 'H2') {
+            if (nextElem.tagName === 'H3') {
+                const h3Item = document.createElement('li');
+                const h3Link = document.createElement('a');
+                h3Link.href = '#' + nextElem.id;
+                h3Link.textContent = nextElem.textContent;
+                h3Item.appendChild(h3Link);
+                h3List.appendChild(h3Item);
+            }
+            nextElem = nextElem.nextElementSibling;
+        }
+
+        if (h3List.hasChildNodes()) {
+            h2Item.appendChild(h3List);
+        }
+        
+        h2List.appendChild(h2Item);
+    });
+
+    tocContainer.appendChild(h2List);
+  });
+
+  // Assign the active link based on the scroll position
+  document.addEventListener('scroll', function() {
+    const headings = document.querySelectorAll('.col-md-9 h2, .col-md-9 h3');
+    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+    const halfScreenHeight = window.innerHeight / 2;
+
+    // First, remove 'active' class from all ToC links
+    document.querySelectorAll('#toc-container a').forEach(a => {
+        a.classList.remove('active');
+    });
+
+    // Then, find and highlight the active link
+    foundActive = false
+
+    // Check all the sections/subsections except the last one
+    for (let i = 0; i < headings.length-1; i++) {
+        const heading = headings[i];
+        const headingTop = heading.offsetTop;
+        const headingHeight = heading.offsetHeight;
+        const nextHeadingTop = headings[i+1].offsetTop;
+        const nextHeadingHeight = headings[i+1].offsetHeight;
+
+        console.log('Heading:', heading.id, 'Top:', headingTop, 'Height:', headingHeight, 'Scroll:', scrollPosition, 'Half screen height:', halfScreenHeight);
+
+        // Check if the scroll position is within the current heading
+        if (scrollPosition + halfScreenHeight >= headingTop - headingHeight && (scrollPosition < headingTop - headingHeight || scrollPosition + halfScreenHeight < nextHeadingTop - nextHeadingHeight)) {
+            console.log('Found active link', heading.id); // Debugging
+            const activeLink = document.querySelector(`#toc-container a[href="#${heading.id}"]`);
+            activeLink.classList.add('active');
+            foundActive = true;
+            break; // Stop the loop once the active link is found
+        }
+    }
+    // Check the last section/subsection under a different rule
+    if (foundActive == false) {
+        lastHeading = headings[headings.length-1];
+        const headingTop = lastHeading.offsetTop;
+        const headingHeight = lastHeading.offsetHeight;
+        if (scrollPosition + halfScreenHeight >= headingTop - headingHeight) {
+            const activeLink = document.querySelector(`#toc-container a[href="#${lastHeading.id}"]`);
+            activeLink.classList.add('active');
+        }
+    }
+  });
+
+</script>
+  
diff --git a/css/style.css b/css/style.css
index 6015e2c..3cb2880 100755
--- a/css/style.css
+++ b/css/style.css
@@ -18,10 +18,46 @@ body {
   }
 }
 
+/* Add margins to paragraphs for larger devices */
+@media (min-width: 768px) {
+  p {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  }
+}
+
 /* Add top margin to h2 heading for larger devices */
 @media (min-width: 768px) {
   h2 {
-    margin-top: 1rem;
+    display: block;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px
+  }
+
+  h2 {
+    margin-top: 2.5rem;
+    margin-bottom: 1.25rem;
+  }
+}
+
+/* Add top margin to h3 heading for larger devices */
+@media (min-width: 768px) {
+  h3 {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  }
+
+  h3 {
+    margin-top: 1.875rem;
+    margin-bottom: 1.25rem;
   }
 }
 
@@ -65,12 +101,6 @@ body {
   background-color: var(--bs-white);
 }
 
-/*
-h1, h2, h3 {
-  margin-top: .20em;
-}
-*/
-
 small {
   font-size: .7em
 }
@@ -87,4 +117,47 @@ small {
       padding-bottom: 2rem;
       margin-top: 2em;
   }
-}
\ No newline at end of file
+}
+
+/* Define a toc-sidebar class for the table of content on the sidebar */
+.toc-sidebar {
+  position: fixed; /* or 'sticky' */
+  top: 70px; /* Adjust based on your navbar height */
+  /* margin: 0.5rem; */
+  /* font-weight: 50; /* lighter weight */
+  /* line-height: 2rem; */
+}
+
+.toc__left-border {
+  border-left: 1px solid var(--bs-border-color);
+}
+
+#toc-container, #toc-container ul {
+  list-style: none;
+  padding-left: 0.5rem;
+}
+
+#toc-container {
+  font-size: .875rem;
+  margin-bottom: 0;
+  padding: 0.5rem 0;
+}
+
+#toc-container li {
+  margin: 0.5rem 0.5rem;
+}
+
+#toc-container a {
+  color: var(--bs-primary-color); /* lighter color */
+  display: block;
+  text-decoration: none;
+}
+
+#toc-container a:hover {
+  color: var(--bs-link-hover-color); /* Color changes on hover */
+}
+
+#toc-container a.active {
+  color: var(--bs-link-hover-color); /* Color for active section link */
+}
+
diff --git a/morea/01-introduction/experience-introduce-yourself.md b/morea/01-introduction/experience-introduce-yourself.md
index 6f386e2..230721b 100644
--- a/morea/01-introduction/experience-introduce-yourself.md
+++ b/morea/01-introduction/experience-introduce-yourself.md
@@ -9,7 +9,7 @@ morea_start_date: "2024-01-08T23:00"
 morea_labels:
 ---
 
-# E01: Introduce yourself
+# Introduce yourself
 
 ## Task
 
diff --git a/morea/02-overview/reading-building-blocks.md b/morea/02-overview/reading-building-blocks.md
index 1f51f0d..175668c 100644
--- a/morea/02-overview/reading-building-blocks.md
+++ b/morea/02-overview/reading-building-blocks.md
@@ -18,7 +18,7 @@ Here is the block diagram of a typical <span style="color: red;">point-to-point<
 
 Note that for each block in the transmitter, there is a counterpart in the receiver. Let us divide into each block and discuss their roles.
 
-## Source Encoder and Source Decoder
+## Source encoder and source decoder
 
 <figure style="text-align: center;">
   <img src="02-building-blocks-source-coding.png" alt="Source coding in a typical communication system" width="500">
@@ -32,7 +32,7 @@ Even if the source is already a binary sequence (e.g., a text message that is na
 
 Source coding is an important topic in information theory. But we will not dive deep into this topic in this course.
 
-## Channel Encoder and Channel Decoder
+## Channel encoder and channel decoder
 
 <figure style="text-align: center;">
   <img src="02-building-blocks-channel-coding.png" alt="Channel coding in a typical communication system" width="500">
@@ -44,7 +44,7 @@ Well, the source encoder removes the inherent redundancy in the source signal, w
 
 We will discuss some simple channel coding and decoding schemes in this course.
 
-## Modulator and Demodulator
+## Modulator and demodulator
 
 <figure style="text-align: center;">
   <img src="02-building-blocks-modulation.png" alt="Modulation in a typical communication system" width="500">
@@ -63,4 +63,5 @@ Therefore, the transmitter needs to carefully "modulate" the signal into the cor
 
 Modulation is also important in avoiding *multi-user interference*. For example, in LTE, if two AT&T cell phones are making phone calls in the same room, their signals will be modulated into different frequency bins withint the AT&T spectrum.
 
-Of course, the frequency is not the only degree of freedom. Modulation can place signals in different space and time. We will elaborate on this important topic later.
\ No newline at end of file
+Of course, the frequency is not the only degree of freedom. Modulation can place signals in different space and time. We will elaborate on this important topic later.
+
diff --git a/morea/02-overview/reading-fading-interference.md b/morea/02-overview/reading-fading-interference.md
index 1963e40..9bca1a7 100644
--- a/morea/02-overview/reading-fading-interference.md
+++ b/morea/02-overview/reading-fading-interference.md
@@ -16,7 +16,7 @@ There are two key challenges in wireless communications:
 
 Both challenges are *unique* in wireless communications.
 
-## How to Deal With Fading?
+## How to deal with fading?
 
 <figure style="text-align: center;">
   <img src="02-building-blocks-channel-coding.png" alt="Channel coding in a typical communication system" width="500">
@@ -27,7 +27,7 @@ As we discussed earlier, the channel encoder adds redundancy to combat the imper
 
 As we will see later, compared to other channel imperfections (e.g., noises), fading is much harder to deal with. Therefore, channel coding is particularly important in wireless communication systems.
 
-## How to Deal With Interference
+## How to deal with interference
 
 <figure style="text-align: center;">
   <img src="02-building-blocks-modulation.png" alt="Modulation in a typical communication system" width="500">