feat(post): collapse entries

posts/two-pointers.html

@@ -42,6 +42,7 @@
         </header>
         <article class="post-article">
           <h2>technique overview</h2>
+          <div class="problem-header">
             <h3>
               <a
                 target="blank"
@@ -49,6 +50,8 @@
                 >container with most water</a
               >
             </h3>
+          </div>
+          <div class="problem-content">
             <p>Sometimes, the mathematical solution is the simplest.</p>
             <p>
               The area of a container bounded by the ground and its columns at
@@ -56,13 +59,14 @@
               \text{length} = (r - l) \cdot \min\{height[l], height[r]\} \]
             </p>
             <p>
-            At its core, this is a maximization problem: maximize the contained
-            area. \[ \max\{(r - l) \cdot \min\{height[l], height[r]\}\} \]
+              At its core, this is a maximization problem: maximize the
+              contained area. \[ \max\{(r - l) \cdot \min\{height[l],
+              height[r]\}\} \]
             </p>
             <p>
               Given a new column position \(l_0 < l\) or \(r_0 < r\), the
-            contained area can only increase if the height of the corresponding
-            column increases.
+              contained area can only increase if the height of the
+              corresponding column increases.
             </p>
             <!-- TODO: add footnote -->
             <p>
@@ -72,7 +76,7 @@
               maintained.
             </p>
             <div class="post-code">
-            <pre><code class="language-python">def maxArea(height: list[int]) -> int:
+              <pre><code class="language-python">`def maxArea(height: list[int]) -> int:
     ans = 0
     l, r = 0, len(height) - 1
 
@@ -85,8 +89,10 @@
         while l < r and height[r] <= min_height:
             r -= 1
 
-    return ans</code></pre>
+    return ans`</code></pre>
             </div>
+          </div>
+          <div class="problem-header">
             <h3>
               <a
                 target="blank"
@@ -94,6 +100,8 @@
                 >boats to save people</a
               >
             </h3>
+          </div>
+          <div class="problem-content">
             <p>
               Usually, the metaphorical problem description is a distraction.
               However, I find that thinking within the confines of "boats" and
@@ -102,15 +110,17 @@
             <p>
               <!-- TODO: footnote -->
               Since only two people can fit in a boat at a time, pairing up
-            lightest and heaviest individuals will result in the least amount of
-            boats being used.
+              lightest and heaviest individuals will result in the least amount
+              of boats being used.
             </p>
             <p>
-            However, the weights are given in random order. Efficiently pairing
-            up the lightest and heaviest individuals, then, requires the most
-            common two-pointers prepreocessing step: sorting.
+              However, the weights are given in random order. Efficiently
+              pairing up the lightest and heaviest individuals, then, requires
+              the most common two-pointers prepreocessing step: sorting.
+            </p>
+            <p>
+              Finally, flesh out any remaining aspects of the implementation:
             </p>
-          <p>Finally, flesh out any remaining aspects of the implementation:</p>
             <ol>
               <li>If one person remains, give them a boat.</li>
               <li>
@@ -139,6 +149,7 @@
 
     return ans</code></pre>
             </div>
+          </div>
         </article>
       </div>
     </main>

readme.md

@@ -5,3 +5,4 @@ My portfolio website
 ## todo
 
 - Mobile support
+- Problem toggler

scripts/post.js

@@ -1,3 +1,4 @@
+document.addEventListener("DOMContentLoaded", () => {
   document.querySelectorAll("article h2").forEach((h2) => {
     const mdHeading = document.createElement("span");
     mdHeading.textContent = "# ";
@@ -5,9 +6,21 @@ document.querySelectorAll("article h2").forEach((h2) => {
     h2.prepend(mdHeading);
   });
 
-document.querySelectorAll("article h3").forEach((h3) => {
+  document.querySelectorAll(".problem-header h3").forEach((h3) => {
+    const toggle = document.createElement("span");
+    toggle.textContent = "v";
+    toggle.classList.add("problem-toggle");
+    toggle.addEventListener("click", () => {
+      const content = h3.parentElement.nextElementSibling;
+      content.style.display = toggle.textContent === ">" ? "block" : "none";
+      toggle.textContent = toggle.textContent === ">" ? "v" : ">";
+    });
+
     const mdHeading = document.createElement("span");
     mdHeading.textContent = "## ";
     mdHeading.style.color = "#0073e6";
+
     h3.prepend(mdHeading);
+    h3.prepend(toggle);
+  });
 });

styles/post.css

@@ -85,6 +85,19 @@ header {
   display: flex;
   justify-content: center;
 }
+
 .language-python {
-  font-size: 0.9em !important;
+  /* override prism.js styles */
+  font-size: 0.85em !important;
+}
+
+.problem-header {
+  position: relative;
+}
+
+.problem-toggle {
+  font-family: "Courier New", monospace;
+  position: absolute;
+  cursor: pointer;
+  left: -25px;
 }