feat: 更新 pnpm-lock.yaml 版本并优化依赖项，同时为多个 JavaScript 文章添加描述，增强 SEO；修复 Search 组件的搜索占位符；新增 HTTP 核心知识体系文章；更新布局组件以支持 og:image 属性

Author: ameng404

pnpm-lock.yaml

@@ -98,7 +98,7 @@ top-20 left-4 md:left-[unset] right-4 shadow-2xl rounded-2xl p-2">
       dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10
   ">
         <Icon icon="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
-        <input placeholder="Search" bind:value={keywordMobile}
+        <input placeholder="{i18n(I18nKey.search)}" bind:value={keywordMobile}
                class="pl-10 absolute inset-0 text-sm bg-transparent outline-0
                focus:w-60 text-black/50 dark:text-white/50"
         >

src/components/Search.svelte

@@ -1,5 +1,6 @@
 ---
 title: ES2015新特性
+description: 深入探讨 ES2015（ES6）的 let/const、箭头函数、类、模板字符串等核心新特性
 published: 2020-05-02
 tags: [JavaScript]
 category: JavaScript
@@ -15,9 +16,11 @@ draft: false
 在 ES2015 之前，JavaScript 只有函数作用域和全局作用域，这有时会导致一些难以理解的变量作用域问题。ES2015 引入了`let`和`const`关键字，它们拥有块级作用域。`let`声明的变量在块级作用域内有效，避免了变量提升带来的潜在风险。例如：
 
 ```
-let a = 10;
-console.log(a); // 输出10
-console.log(a); // 报错，a未定义
+{
+  let a = 10;
+  console.log(a); // 输出 10
+}
+console.log(a); // 报错：a 未定义（a 仅在块内有效）
 ```
 
 `const`用于声明常量，一旦声明，其值就不能被改变，并且同样具有块级作用域。这在定义一些固定不变的值时非常有用，比如：

src/content/posts/javascript/ES2015.md

@@ -1,5 +1,6 @@
 ---
 title: ES2016新特性
+description: 介绍 ES2016 的 Array.prototype.includes 方法及指数运算符 ** 的用法
 published: 2020-05-02
 tags: [JavaScript]
 category: JavaScript

src/content/posts/javascript/ES2016.md

@@ -1,5 +1,6 @@
 ---
 title: ES2017新特性
+description: 详解 ES2017 的 async/await、Object.values/entries、padStart/padEnd 等新特性
 published: 2020-05-02
 tags: [JavaScript]
 category: JavaScript
@@ -22,7 +23,7 @@ async function getData() {
         const data = await response.json();
         return data;
     } catch (error) {
-        onsole.error('Error fetching data:', error);
+        console.error('Error fetching data:', error);
     }
 }
 

src/content/posts/javascript/ES2017.md

@@ -1,5 +1,6 @@
 ---
 title: ES2018新特性
+description: 探秘 ES2018 的异步迭代器、对象 rest/spread、正则 dotAll 与后行断言
 published: 2022-07-01
 tags: [JavaScript]
 category: JavaScript
@@ -80,18 +81,16 @@ console.log(pattern1.test(text)); // false
 console.log(pattern2.test(text)); // true
 ```
 
-另外，后行断言（lookbehind assertions）也是正则表达式的一个强大新特性。它允许我们在匹配模式的前面或后面添加条件，以更精确地控制匹配结果。例如，正向先行断言`(?=...)`和反向后行断言`(?<=...)`：
+另外，后行断言（lookbehind assertions）也是正则表达式的一个强大新特性。它允许我们在匹配模式的前面或后面添加条件，以更精确地控制匹配结果。例如，正向先行断言`(?=...)`和正向后行断言`(?<=...)`：
 
 ```
-const price = "Price: \$10";
+const price = "Price: $10";
 
-const pattern3 = /\d+(?=\\\$)/; // 正向先行断言，匹配后面跟着美元符号的数字
+const pattern3 = /\d+(?=\$)/;  // 正向先行断言，匹配后面跟着美元符号的数字
+const pattern4 = /(?<=\$)\d+/;  // 正向后行断言，匹配前面是美元符号的数字
 
-const pattern4 = /(?<=\\\$)\d+/; // 反向后行断言，匹配前面是美元符号的数字
-
-console.log(price.match(pattern3)\[0]); // 10
-
-console.log(price.match(pattern4)\[0]); // 10
+console.log(price.match(pattern3)[0]); // 10
+console.log(price.match(pattern4)[0]); // 10
 ```
 
 ES2018 的这些新特性在异步编程、对象操作以及正则表达式等方面提供了更强大的功能和更灵活的处理方式。它们使得 JavaScript 在处理复杂业务逻辑和多样化的开发需求时更加游刃有余。如果你还想了解 ES2018 新特性在实际项目中的应用案例，或者对其他 JavaScript 版本特性感兴趣，欢迎随时告诉我。

src/content/posts/javascript/ES2018.md

@@ -1,5 +1,6 @@
 ---
 title: ES2019新特性
+description: 了解 ES2019 的可选 catch、Object.fromEntries、trimStart/trimEnd、flat/flatMap 等特性
 published: 2022-12-01
 tags: [JavaScript]
 category: JavaScript
@@ -15,7 +16,7 @@ JavaScript 不断演变，每次迭代都会得到一些新的内部更新。让
 ```js
 // 原先的代码可能长这样：
 try {
-  // do  something
+  // do something
 } catch (e) {
   console.log(e);
 }
@@ -29,9 +30,9 @@ try {
 
 虽然新的语言规范提供了吞掉错误参数的机制，不过个人建议在实际代码中还是要看情况选择性地使用。
 
-## JSON.superset 超集
+## JSON 超集
 
-之前如果 JSON 字符串中包含有行分隔符 (\u2028) 和段落分隔符 (\u2029)，那么在解析过程中会报错:SyntaxError: Invalid or unexpected token。es2019 中新增了对它们的支持。
+之前如果 JSON 字符串中包含有行分隔符（\u2028）和段落分隔符（\u2029），那么在解析过程中会报错：`SyntaxError: Invalid or unexpected token`。ES2019 中新增了对它们的支持。
 
 ## Symbol.prototype.description
 
@@ -60,7 +61,7 @@ foo.toString(); // "function /* foo comment */ foo() {}"
 
 ## Object.fromEntries
 
-这是一个全新的方法：根据提供的键值对生成对象。它是我们熟悉的函数 Object.Entries 的逆向操作。（Object.Entries 将对象转换为数组，以便更容易地进行操作。）在转换之后，我们会得到一个数组，但是现在我们可以将调整过后的数组返回到一个对象中。让我们试着用一个例子，我们想平方所有对象属性的值:
+这是一个全新的方法：根据提供的键值对生成对象。它是我们熟悉的 `Object.entries()` 的逆向操作。（`Object.entries()` 将对象转换为数组，以便更容易地进行操作。）在转换之后，我们会得到一个数组，但是现在我们可以将调整过后的数组返回到一个对象中。让我们试着用一个例子，我们想平方所有对象属性的值:
 
 ```js
 const obj = { prop1: 2, prop2: 10, prop3: 15 };
@@ -100,16 +101,14 @@ JSON.stringify("\uDEAD");
 
 ## String.trimStart() 和 String.trimEnd()
 
-除了同时删除字符串两边的空格的 String.Trim()之外，现在还出现了另一个方法只删除字符串两边任意一边的空格:
+除了同时删除字符串两边的空格的 `String.prototype.trim()` 之外，ES2019 还新增了 `trimStart()` 和 `trimEnd()`，可分别只删除字符串开头或结尾的空格：
 
 ```js
 const str = " hello ";
 
-str.trim(); // "hello";
-
-str.trimStart(); // "hello ";
-
-str.trimEnd(); // " hello";
+str.trim();      // "hello"
+str.trimStart(); // "hello "（仅删除开头空格）
+str.trimEnd();   // " hello"（仅删除结尾空格）
 ```
 
 ## Array.prototype.{flat,flatMap}

src/content/posts/javascript/ES2019.md

@@ -1,5 +1,6 @@
 ---
 title: ES2020新特性
+description: 全面介绍 ES2020 的 matchAll、Promise.allSettled、可选链、空值合并、BigInt、globalThis 等九大特性
 published: 2022-12-01
 tags: [JavaScript]
 category: JavaScript
@@ -15,7 +16,7 @@ ES2020 已经发布了，一共出 9 个新特性，下面让我们一起来了
 ```javascript
 let str = "<text>JS</text><text>正则</text>";
 
-let reg = /<\w+>(.*?)<\/\w+>/; // 注意这里没有全局搜素标示符“g”
+let reg = /<\w+>(.*?)<\/\w+>/; // 注意这里没有全局搜索标识符“g”
 
 str.match(reg);
 /*
@@ -79,7 +80,7 @@ for (const match of allMatchs) {
 el.onclick = () => {
   import(`/path/current-logic.js`)
     .then((module) => {
-      module.doSomthing();
+      module.doSomething();
     })
     .catch((err) => {
       // load error;
@@ -150,7 +151,7 @@ Promise.allSettled([
 
 ## globalThis
 
-Javascript 在不同的环境获取全局对象有不通的方式，node 中通过 global, web 中通过 window, self 等，有些甚至通过 this 获取，但通过 this 是及其危险的，this 在 js 中异常复杂，它严重依赖当前的执行上下文，这些无疑增加了获取全局对象的复杂性。
+JavaScript 在不同的环境获取全局对象有不同的方式，node 中通过 global, web 中通过 window, self 等，有些甚至通过 this 获取，但通过 this 是极其危险的，this 在 js 中异常复杂，它严重依赖当前的执行上下文，这些无疑增加了获取全局对象的复杂性。
 过去获取全局对象，可通过一个全局函数
 
 ```javascript
@@ -221,18 +222,15 @@ let level =
   user.level !== undefined && user.level !== null ? user.level : "暂无等级";
 ```
 
+用空值合并运算符可以这样处理：
+
 ```javascript
-来看看用空值合并运算符如何处理;
-// {
-//   "level": 0
-// }
+// user = { "level": 0 }
 let level = user.level ?? "暂无等级"; // level -> 0
 ```
 
 ```javascript
-// {
-//   "an_other_field": 0
-// }
+// user = { "an_other_field": 0 }，即 level 为 undefined
 let level = user.level ?? "暂无等级"; // level -> '暂无等级'
 ```
 

src/content/posts/javascript/ES2020.md

@@ -1,5 +1,6 @@
 ---
 title: ES2021新特性
+description: 介绍 ES2021 的 replaceAll、Promise.any、逻辑赋值运算符、数值分隔符、WeakRef 等特性
 published: 2022-12-01
 tags: [JavaScript]
 category: JavaScript
@@ -51,7 +52,7 @@ Promise.any([p1, p2, p3])
 
 相似的 API
 
-| 名字               | 描述                                  |        |
+| 名字               | 描述                                  | 版本   |
 | ------------------ | ------------------------------------- | ------ |
 | Promise.allSettled | 不会短路                              | ES2020 |
 | Promise.all        | 当有一个 rejected 就短路              | ES2015 |
@@ -98,9 +99,9 @@ const token = {};
 
 /**
  * @function 注册监听
- * @param 需要监听的对象
- * @param 需要合并的Grid
- * @param 取消监听用的标识符
+ * @param obj 需要监听的对象
+ * @param heldValue 传递给回调的值（对象被回收时作为参数传入）
+ * @param token 取消监听用的标识符
  */
 fr.register(obj, "obj deleted!", token);
 
@@ -120,18 +121,19 @@ fr.unregister(token);
 
 ```javascript
 let num1 = 1000000000; // 1000000000
-
-let num2 = 1_000_000_000; // 🆕  1000000000
-
+let num2 = 1_000_000_000; // 🆕 1000000000
 console.log(num1 === num2); // true
 
+// 正确用法
 let a = 1_1; // 11
-let a = 1__1 // 错误，只允许一个下划线作为数字分隔符
-let a = 1_;  // 错误，分隔符不能在尾部
-let a = _1;  // 错误，分隔符不能在头部
 
-Number(1_1); // 11
-Number('1_1'); // NaN
+// 以下为错误示例（会报错）：
+// let b = 1__1;  // 错误：只允许一个下划线作为数字分隔符，不可连续
+// let c = 1_;    // 错误：分隔符不能在尾部
+// let d = _1;    // 错误：分隔符不能在头部
+
+Number(1_1);      // 11
+Number('1_1');    // NaN（字符串转数值时无法识别分隔符）
 ```
 
 :::caution
@@ -147,18 +149,18 @@ Number('1_1'); // NaN
 ```javascript
 a ||= b;
 // 等效于以下两种写法
-// a || (a = b); a为false时执行右边
+// a || (a = b); a 为假值时执行右边
 // if(!a) a = b;
 
 a &&= b;
 // 等效于以下两种写法
-// a && (a = b); a为truth时执行右边
+// a && (a = b); a 为真值时执行右边
 // if(a) a = b
 
 a ??= b;
 // 等效于以下两种写法
-// a ?? (a = b); a为undefined或null时执行右边
-// if(a === nudefined || a === null) a = b;
+// a ?? (a = b); a 为 undefined 或 null 时执行右边
+// if (a === undefined || a === null) a = b;
 ```
 
 其中`??` 运算符只有左边是 undefined 或 null 才返回右边。

src/content/posts/javascript/ES2021.md

@@ -1,5 +1,6 @@
 ---
 title: ES2022新特性
+description: 详解 ES2022 的类字段、静态块、顶级 await、逻辑赋值操作符等新特性
 published: 2022-07-01
 tags: [JavaScript]
 category: JavaScript
@@ -149,13 +150,13 @@ let e;
 
 let f = 40;
 
-e??= f; // 由于e为undefined，执行赋值操作，e = f
+e ??= f; // 由于 e 为 undefined，执行赋值操作，e = f
 
 console.log(e); // 输出 40
 
 e = 50;
 
-e??= f; // 由于e不为null和undefined，不会执行赋值操作
+e ??= f; // 由于 e 不为 null 和 undefined，不会执行赋值操作
 
 console.log(e); // 输出 50
 ```