docs(docs): add Approach and Explanation sections with mermaid diagrams to problem pages

apps/docs/content/(array)/977-squares-of-a-sorted-array.mdx

@@ -27,6 +27,21 @@ Squaring each element and sorting the new array is very trivial, could you find
 - `-10^4 <= nums[i] <= 10^4`
 - `nums` is sorted in non-decreasing order.
 
+## Approach
+
+```mermaid
+flowchart TD
+  S(["sortedSquares(nums)"]) --> I["ans = Array(n), left = 0, right = n - 1"]
+  I --> L{"more i from n-1 down to 0?"}
+  L -- no --> E(["return ans"])
+  L -- yes --> C{"abs(nums[left]) < abs(nums[right])?"}
+  C -- yes --> R["square = nums[right]; right--"]
+  C -- no --> F["square = nums[left]; left++"]
+  R --> W["ans[i] = square * square — fill from the back, largest first"]
+  F --> W
+  W --> L
+```
+
 ## Solution
 
 ```js
@@ -53,3 +68,7 @@ var sortedSquares = function(nums) {
   return ans;
 };
 ```
+
+## Explanation
+
+<YouTube id="FPCZsG_AkUg" title="Squares of a Sorted Array - Leetcode 977 - Python" />