feat(posts): only unfold first algorithm problem

posts/algorithms/two-pointers.html

@@ -42,7 +42,7 @@
         </header>
         <article class="post-article">
           <h2>technique overview</h2>
-          <div class="problem-header">
+          <div class="fold">
             <h3>
               <a
                 target="blank"
@@ -91,7 +91,7 @@
     return ans</code></pre>
             </div>
           </div>
-          <div class="problem-header">
+          <div class="fold">
             <h3>
               <a
                 target="blank"

scripts/post.js

@@ -15,12 +15,16 @@ document.addEventListener("DOMContentLoaded", () => {
     h2.prepend(mdHeading);
   });
 
-  document.querySelectorAll(".problem-header h3").forEach((h3, i) => {
+  document.querySelectorAll(".fold h3").forEach((h3, i) => {
     const toggle = document.createElement("span");
-    toggle.textContent = i === 0 ? "v" : ">";
+    toggle.textContent = "v";
+
+    // only unfold first algorithm problem
+    if (urlToTopic() === "algorithms" && i === 0) toggle.textContent = "v";
+
     h3.parentElement.nextElementSibling.style.display =
       toggle.textContent === ">" ? "none" : "block";
-    toggle.classList.add("problem-toggle");
+    toggle.classList.add("fold-toggle");
     toggle.addEventListener("click", () => {
       const content = h3.parentElement.nextElementSibling;
       toggle.textContent = toggle.textContent === ">" ? "v" : ">";

styles/post.css

@@ -91,11 +91,11 @@ header {
   font-size: 0.85em !important;
 }
 
-.problem-header {
+.fold {
   position: relative;
 }
 
-.problem-toggle {
+.fold-toggle {
   font-family: monospace;
   position: absolute;
   cursor: pointer;