refactor: separate mdx files

Author: JuneLin2001

docs/LeetCode/11. Container With Most Water/README.mdx

@@ -2,93 +2,76 @@
 title: 11. Container With Most Water
 description: You are given an integer array height of length n. There are n vertical lines drawn such that the two endpoints of the ith line are (i, 0) and (i, height[i]).Find two lines that together with the x-axis form a container, such that the container contains the most water.Return the maximum amount of water a container can store.Notice that you may not slant the container.
 keywords:
-  [
-    LeetCode,
-    11. Container With Most Water,
-    Medium,
-    Array,
-    Two Pointers,
-    Greedy,
-  ]
+  [LeetCode, 11. Container With Most Water, Medium, Array, Two Pointers, Greedy]
+tags: [LeetCode, Medium, Array, Two Pointers, Greedy]
 ---
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-import CodeBlock from '@theme/CodeBlock';
+import CodeBlock from "@theme/CodeBlock";
 import DifficultyBadge from "@site/src/components/Badges/DifficultyBadge";
-import Solution from '!!raw-loader!./solution.js';
+import Solution from "!!raw-loader!./solution.js";
+import Description from "./_Description.md";
+import Examples from "./_Examples.md";
 
 # [{frontMatter.title}](https://leetcode.com/problems/container-with-most-water)
 
 <DifficultyBadge difficulty="Medium" />
 
 <Tabs>
   <TabItem value="description" label="題目描述" default>
-  ## Description
-    You are given an integer array height of length `n`. There are n vertical lines drawn such that the two endpoints of the `ith` line are `1(i, 0)` and `(i, height[i])`.  
-
-    Find two lines that together with the x-axis form a container, such that the container contains the most water.  
-
-    Return the maximum amount of water a container can store.  
-
-    **Notice** that you may not slant the container.  
-
-
-  #### Example 1:
-    ![](https://s3-lc-upload.s3.amazonaws.com/uploads/2018/07/17/question_11.jpg)
-  > **Input:** height = [1,8,6,2,5,4,8,3,7]  
-  **Output:** 49    
-  **Explanation:** The above vertical lines are represented by array [1,8,6,2,5,4,8,3,7]. In this case, the max area of water (blue section) the container can contain is 49.
-
-  #### Example 2:
-  > **Input:** height = [1,1]  
-  **Output:** 1  
-
+    <details open>
+      <summary>Description</summary>
+        <Description />
+        <Examples />
+    </details> 
   </TabItem>
+
   <TabItem value="solution" label="解答">
    ## Solution
     <CodeBlock language="js">{Solution}</CodeBlock>
   </TabItem>
 </Tabs>
 
-
 ## 解題思路
-    
+
     1. 先定義好 `left pointer` 和 `right pointer` 分別指向 height 的頭與尾，以及 mostWater 紀錄目前的最大水量值。
     ```js
       let left = 0;
       let right = height.length - 1;
       let mostWater = 0;
     ```
     2. 重複執行程式直到 right 和 left 重合。
-   ```js
-    while (right > left) {
 
-    }
-   ```
-    3. 使用 waterCurrently 算出目前水量，因為最大水兩高度是由兩邊中較短的決定的（假設一邊是 8 一邊是 5，水最高只能到 5，再多就會從水槽流出，而 right - left 是寬度，`長 * 寬`就是目前水量了。  
+```js
+while (right > left) {}
+```
+
+    3. 使用 waterCurrently 算出目前水量，因為最大水兩高度是由兩邊中較短的決定的（假設一邊是 8 一邊是 5，水最高只能到 5，再多就會從水槽流出，而 right - left 是寬度，`長 * 寬`就是目前水量了。
         若 waterCurrently > mostWater 則更新。
 
-   ```js
-    const waterCurrently = Math.min(height[left], height[right]) * (right - left); 
+```js
+const waterCurrently = Math.min(height[left], height[right]) * (right - left);
 
-    mostWater = Math.max(mostWater, waterCurrently);
-   ```
+mostWater = Math.max(mostWater, waterCurrently);
+```
 
     4. 如果左邊較短的話就把 `left pointer` 向右移動，反之則把 `right point` 向左移。
-   ```js
-    if (height[left] < height[right]) {
-      left++;
-    } else {
-      right--;
-    }
-   ```
-    5. 最後回傳 mostWater 就是答案了。
-   ```js
-     return mostWater;
-   ```
 
+```js
+if (height[left] < height[right]) {
+  left++;
+} else {
+  right--;
+}
+```
 
+    5. 最後回傳 mostWater 就是答案了。
+
+```js
+return mostWater;
+```
 
 ## 心得
+
     練習 Two Pointers，題目光看描述覺得很抽象，但有圖片輔助說明有好懂了不少！

docs/LeetCode/11. Container With Most Water/_Description.md

@@ -0,0 +1 @@
+Given an array of positive integers nums and a positive integer target, return the minimal length of a subarray whose sum is greater than or equal to target. If there is no such subarray, return 0 instead.

docs/LeetCode/11. Container With Most Water/_Examples.md

@@ -0,0 +1,12 @@
+#### Example 1:
+
+    ![](https://s3-lc-upload.s3.amazonaws.com/uploads/2018/07/17/question_11.jpg)
+
+> **Input:** height = [1,8,6,2,5,4,8,3,7]  
+>  **Output:** 49  
+>  **Explanation:** The above vertical lines are represented by array [1,8,6,2,5,4,8,3,7]. In this case, the max area of water (blue section) the container can contain is 49.
+
+#### Example 2:
+
+> **Input:** height = [1,1]  
+>  **Output:** 1

docs/LeetCode/11. Container With Most Water/solution.js

@@ -22,5 +22,3 @@ var maxArea = function (height) {
 
   return mostWater;
 };
-
-console.log(maxArea([1, 8, 6, 2, 5, 4, 8, 3, 7]));

docs/LeetCode/209. Minimum Size Subarray Sum/README.mdx

@@ -11,91 +11,42 @@ keywords:
     Sliding Window,
     Prefix Sum,
   ]
+tags: [LeetCode, Medium, Array, Binary Search, Sliding Window, Prefix Sum]
 ---
 
 # [{frontMatter.title}](https://leetcode.com/problems/minimum-size-subarray-sum/)
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
 import DifficultyBadge from "@site/src/components/Badges/DifficultyBadge";
+import Solution from "!!raw-loader!./solution.js";
+import Description from "./_Description.md";
+import Examples from "./_Examples.md";
 
 <DifficultyBadge difficulty="Medium" />
 
 <Tabs>
   <TabItem value="description" label="題目描述" default>
-    ## Description
-
-Given an array of positive integers nums and a positive integer target, return the minimal length of a subarray whose sum is greater than or equal to target. If there is no such subarray, return 0 instead.
-
-#### Example 1:
-
-Input: target = 7, nums = [2,3,1,2,4,3]
-Output: 2
-Explanation: The subarray [4,3] has the minimal length under the problem constraint.
-
-#### Example 2:
-
-Input: target = 4, nums = [1,4,4]
-Output: 1
-
-#### Example 3:
-
-Input: target = 11, nums = [1,1,1,1,1,1,1,1]
-Output: 0
-
-### Constraints:
-
-```
-1 <= target <= 109
-1 <= nums.length <= 105
-1 <= nums[i] <= 104
-```
-
-Follow up: If you have figured out the O(n) solution, try coding another solution of which the time complexity is O(n log(n)).
-
+    <details open>
+      <summary>Description</summary>
+        <Description />
+        <Examples />
+    </details> 
   </TabItem>
+
   <TabItem value="solution" label="解答">
    ## Solution
-```js
-/**
- * @param {number} target
- * @param {number[]} nums
- * @return {number}
- */
-var minSubArrayLen = function (target, nums) {
-  let minLength = nums.length + 1;
-  let left = 0;
-  let right = 0;
-  let currentSum = 0;
-
-while (right < nums.length) {
-currentSum += nums[right];
-
-    while (currentSum >= target) {
-      if (minLength > right - left + 1) {
-        minLength = right - left + 1;
-      }
-      currentSum -= nums[left];
-      left++;
-    }
-
-    right++;
-
-}
-if (minLength === nums.length + 1) {
-return 0;
-} else {
-return minLength;
-}
-};
-```
+    <CodeBlock language="js">{Solution}</CodeBlock>
   </TabItem>
 </Tabs>
 
 ### 解題思路
 
-練習 slide window，首先由 right 開始慢慢往右移動，並加總 left 和 right 範圍的這個 window 中的總和，直到大於 target。當大於 target 時候 left 就往右移動來減少 minLength 的可能值，重複移動 left 和 right 直到找出正確答案。
+練習 `Sliding Window`  
+首先由 `right` 開始慢慢往右移動，並加總 `left` 和 `right` 範圍的這個 window 中的總和，直到大於 `target`。  
+當大於 `target` 時候 `left` 就往右移動來減少 `minLength` 的可能值，重複移動 `left` 和 `right` 直到找出正確答案。
 
 ### 心得
 
-也是看了 [Wilson Ren 的 資料結構與演算法 (JavaScript)](https://www.udemy.com/course/algorithm-data-structure) 介紹這題經典題，要把這些題型弄熟打好演算法基礎!
+也是看了 [Wilson Ren 的 資料結構與演算法 (JavaScript)](https://www.udemy.com/course/algorithm-data-structure) 介紹這題經典題，要把這些題型弄熟打好演算法基礎!

docs/LeetCode/209. Minimum Size Subarray Sum/_Description.md

@@ -0,0 +1,7 @@
+    You are given an integer array height of length `n`. There are n vertical lines drawn such that the two endpoints of the `ith` line are `1(i, 0)` and `(i, height[i])`.
+
+    Find two lines that together with the x-axis form a container, such that the container contains the most water.
+
+    Return the maximum amount of water a container can store.
+
+    **Notice** that you may not slant the container.

docs/LeetCode/209. Minimum Size Subarray Sum/_Examples.md

@@ -0,0 +1,25 @@
+#### Example 1:
+
+> **Input:** target = 7, nums = [2,3,1,2,4,3]  
+> **Output:** 2  
+> **Explanation:** The subarray [4,3] has the minimal length under the problem constraint.
+
+#### Example 2:
+
+> **Input:** target = 4, nums = [1,4,4]  
+> **Output:** 1
+
+#### Example 3:
+
+> **Input:** target = 11, nums = [1,1,1,1,1,1,1,1]  
+> **Output:** 0
+
+### Constraints:
+
+```
+1 <= target <= 109
+1 <= nums.length <= 105
+1 <= nums[i] <= 104
+```
+
+Follow up: If you have figured out the O(n) solution, try coding another solution of which the time complexity is O(n log(n)).

docs/LeetCode/349. Intersection of Two Arrays/README.mdx

@@ -1,61 +1,55 @@
 ---
 title: 349. Intersection of Two Arrays
 description: Given two integer arrays nums1 and nums2, return an array of their intersection. Each element in the result must be unique and you may return the result in any order.
-keywords: [LeetCode, 349. Intersection of Two Arrays, Easy,Array,Hash Table,Two Pointers,Binary Search,Sorting]
+keywords:
+  [
+    LeetCode,
+    349. Intersection of Two Arrays,
+    Easy,
+    Array,
+    Hash Table,
+    Two Pointers,
+    Binary Search,
+    Sorting,
+  ]
+tags: [LeetCode, Easy, Array, Hash Table, Two Pointers, Binary Search, Sorting]
 ---
 
 # [{frontMatter.title}](https://leetcode.com/problems/intersection-of-two-arrays/)
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
 import DifficultyBadge from "@site/src/components/Badges/DifficultyBadge";
+import Solution from "!!raw-loader!./solution.js";
+import Description from "./_Description.md";
+import Examples from "./_Examples.md";
 
 <DifficultyBadge difficulty="Easy" />
 
 <Tabs>
   <TabItem value="description" label="題目描述" default>
-    ## Description
-
-Given two integer arrays nums1 and nums2, return an array of their 
-intersection. Each element in the result must be unique and you may return the result in any order.
-
-#### Example 1:
-Input: nums1 = [1,2,2,1], nums2 = [2,2]
-Output: [2]
-
-#### Example 2:
-Input: nums1 = [4,9,5], nums2 = [9,4,9,8,4]
-Output: [9,4]
-Explanation: [4,9] is also accepted.
-
-#### Constraints:
-```
-1 <= nums1.length, nums2.length <= 1000
-0 <= nums1[i], nums2[i] <= 1000
-```  
-
+    <details open>
+      <summary>Description</summary>
+        <Description />
+        <Examples />
+    </details> 
   </TabItem>
+
   <TabItem value="solution" label="解答">
    ## Solution
-```js
-/**
- * @param {number[]} nums1
- * @param {number[]} nums2
- * @return {number[]}
- */
-var intersection = function (nums1, nums2) {
-  const set1 = new Set(nums1);
-  const set2 = new Set(nums2);
-
-  return [...set1].filter((num) => set2.has(num));
-};
-```
+    <CodeBlock language="js">{Solution}</CodeBlock>
   </TabItem>
 </Tabs>
 
-
 ## 解題思路
-原本想用 Counter 之類的做法，但看到 `Set 的特色是有 has() 這個方法，可以快速判斷該 Set 中是否包含某個元素` 就直接用這個特性來大幅簡化了。
+
+原本想用 Counter 之類的做法，但看到：
+
+> `Set 的特色是有 has() 這個方法，可以快速判斷該 Set 中是否包含某個元素`
+
+就直接用這個特性來大幅簡化了。
 
 ## 心得
-謝謝PJ大佬的筆記 [[JS] JavaScript 集合（Set）](https://pjchender.dev/javascript/js-set/), 只要熟練語法基本就能秒解開一堆 easy 了。
+
+謝謝 PJ 大佬的筆記 [[JS] JavaScript 集合（Set）](https://pjchender.dev/javascript/js-set/), 只要熟練語法基本就能秒解開一堆 easy 了。

docs/LeetCode/349. Intersection of Two Arrays/_Description.md

@@ -0,0 +1,2 @@
+Given two integer arrays nums1 and nums2, return an array of their
+intersection. Each element in the result must be unique and you may return the result in any order.