fix: change the size of the svg

plugins/images.ts

@@ -13,33 +13,8 @@ type ImageNode = Parent & {
   attributes: (Literal & { name: string })[];
 };
 
-type MdxJsxAttribute = {
-  type: 'mdxJsxAttribute';
-  name: string;
-  value: string;
-};
-
-type MdxJsxFlowElement = Parent & {
-  name: string;
-  attributes: MdxJsxAttribute[];
-};
-
 export const astroImage = () => {
   return async (tree: Node) => {
-    // Find all the img node.
-    const imgs = selectAll('mdxJsxFlowElement', tree)
-      .map((node) => node as MdxJsxFlowElement)
-      .filter((node) => node.name === 'img');
-    for (const img of imgs) {
-      const srcAttribute = img.attributes.find((attribute) => attribute.name === 'src');
-      if (srcAttribute) {
-        const src = srcAttribute.value;
-        if (src.startsWith('/')) {
-          srcAttribute.value = urlJoin(options.assetsPrefix(), src);
-        }
-      }
-    }
-
     // Find all the image node.
     const imageNodes = selectAll('image', tree)
       .map((node) => node as ImageNode)

public/images/recaps/algo-minimal-costs/step1.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="1203px" height="1201px" viewBox="0 0 1203 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="400px" height="400px" viewBox="0 0 1203 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>64x64</title>
     <g id="64x64" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group" transform="translate(94, 96.5)" stroke="#979797" stroke-linecap="square">
             <line x1="0.5" y1="103" x2="1006.5" y2="103" id="Line"></line>

public/images/recaps/algo-minimal-costs/step2.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="1203px" height="1201px" viewBox="0 0 1203 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="400px" height="400px" viewBox="0 0 1203 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>64x64</title>
     <g id="64x64" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group" transform="translate(94, 96.5)" stroke="#979797" stroke-linecap="square">
             <line x1="0.5" y1="103" x2="1006.5" y2="103" id="Line"></line>

public/images/recaps/algo-minimal-costs/step3.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="1203px" height="1201px" viewBox="0 0 1203 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="400px" height="400px" viewBox="0 0 1203 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>64x64</title>
     <g id="64x64" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group" transform="translate(94, 96.5)" stroke="#979797" stroke-linecap="square">
             <line x1="0.5" y1="103" x2="1006.5" y2="103" id="Line"></line>

public/images/recaps/algo-minimal-costs/step4.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="2402px" height="1201px" viewBox="0 0 2402 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="800px" height="400px" viewBox="0 0 2402 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>128x128</title>
     <g id="128x128" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group" transform="translate(1296, 97.5)" stroke="#979797" stroke-linecap="square">
             <line x1="0.5" y1="103" x2="1006.5" y2="103" id="Line"></line>

public/images/recaps/algo-minimal-costs/step5.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="2402px" height="1201px" viewBox="0 0 2402 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="800px" height="400px" viewBox="0 0 2402 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>128x128</title>
     <g id="128x128" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group" transform="translate(1296, 97.5)" stroke="#979797" stroke-linecap="square">
             <line x1="0.5" y1="103" x2="1006.5" y2="103" id="Line"></line>

public/images/recaps/algo-minimal-costs/step6.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="2215px" height="1008px" viewBox="0 0 2215 1008" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="800px" height="400px" viewBox="0 0 2215 1008" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Untitled</title>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="step6" transform="translate(0.5, 1)">
             <g id="Group" stroke-linecap="square" transform="translate(1202, 1)" stroke="#979797">

public/images/recaps/algo-minimal-costs/step7.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="2402px" height="1201px" viewBox="0 0 2402 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="800px" height="400px" viewBox="0 0 2402 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>128x128</title>
     <g id="128x128" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group" transform="translate(1296, 97.5)" stroke="#979797" stroke-linecap="square">
             <line x1="0.5" y1="103" x2="1006.5" y2="103" id="Line"></line>

public/images/recaps/algo-minimal-costs/step8.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="2402px" height="1201px" viewBox="0 0 2402 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="800px" height="400px" viewBox="0 0 2402 1201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>128x128</title>
     <g id="128x128" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group" transform="translate(1296, 97.5)" stroke="#979797" stroke-linecap="square">
             <line x1="0.5" y1="103" x2="1006.5" y2="103" id="Line"></line>

src/content/posts/2024/2024-04-12-algo-find-the-lowest-costs.mdx

@@ -46,28 +46,28 @@ cover: /images/2024/04/2024041405050511.png
 
 这也使得这道题在弄懂原理后相当无趣，但考虑我这朋友确实经验尚浅，所以我还是给他继续讲下去，顺带着给了代码实现。这篇博客便是当时内容的摘录整理。
 
-<img src='/images/recaps/algo-minimal-costs/step1.svg' width='400px' height='400px' alt='Step 1' />
+![Step 1](/images/recaps/algo-minimal-costs/step1.svg)
 
 <center>
 	做任何算法题，第一步是理解题意，第二步是设想最简单的情况，再慢慢推导到复杂情况。首先，我们先不考虑存在阻塞的情况。最简单场景里，顾客和维修点在一个
 	1 x 1 的格子的一条边上，这个时候他们间的最短距离为 1。
 </center>
 
-<img src='/images/recaps/algo-minimal-costs/step2.svg' width='400px' height='400px' alt='Step 2' />
+![Step 2](/images/recaps/algo-minimal-costs/step2.svg)
 
 <center>然后我们更进一步，如果他们在一个格子的对角线上呢？他们间的最短路径有两条，为 2。</center>
 
-<img src='/images/recaps/algo-minimal-costs/step3.svg' width='400px' height='400px' alt='Step 3' />
+![Step 3](/images/recaps/algo-minimal-costs/step3.svg)
 
 <center>
 	结合初中的几何学知识，我们首先知道一个基本知识，两点之间，直线最短。所以，维修点和顾客在同一条直线上时，他们之间的距离就是直线距离。
 </center>
 
-<img src='/images/recaps/algo-minimal-costs/step4.svg' width='800px' height='400px' alt='Step 4' />
+![Step 4](/images/recaps/algo-minimal-costs/step4.svg)
 
 <center>然后我们再稍微复杂一点，此时顾客和维修点之间是田字格，最短路径就有三条，距离为 3。</center>
 
-<img src='/images/recaps/algo-minimal-costs/step5.svg' width='800px' height='400px' alt='Step 5' />
+![Step 5](/images/recaps/algo-minimal-costs/step5.svg)
 
 <center>
 	等到田字格的时候，相信聪明的你已经发现了规律。那就是顾客到维修点的最短距离，等于他们所形成的矩形的横纵两条边边长的总和。按照上面右侧图片所示的箭头所行走的距离都等于这个最短路径。
@@ -75,7 +75,7 @@ cover: /images/2024/04/2024041405050511.png
 
 一般情况下，面试场景的编码题已经可以开始写了。对应的编程思路就是，从维修点出发，在与顾客构成的矩形边界里面，不断逼近，只要能走通那么我们之间就有了最短距离。再把不同维修点到顾客的最短距离排序，选出最小的距离来进行计算费用。
 
-<img src='/images/recaps/algo-minimal-costs/step6.svg' width='800px' height='400px' alt='Step 6' />
+![Step 6](/images/recaps/algo-minimal-costs/step6.svg)
 
 倘若以上面的推论作为最终编码的方式，虽然不能说完全错误，但是在当下这个面试很卷的时代，还是有可能被 PASS，为什么呢？因为我们还没有引入阻塞的概念。我们随便画两种阻塞的情况，并且假定这里都属于在当时条件下的最短路径，那么阁下又该如何应对？😆
 
@@ -88,11 +88,11 @@ cover: /images/2024/04/2024041405050511.png
 
 以此为基础，我们就可以稍微来复习一下大学的算法知识了，贪心算法（贪婪算法）。贪心算法的定义网上随随便便都能找到，这里就不再复述，我们更多地是需要去思考在这个场景的贪心算法如何使用。
 
-<img src='/images/recaps/algo-minimal-costs/step7.svg' width='800px' height='400px' alt='Step 7' />
+![Step 7](/images/recaps/algo-minimal-costs/step7.svg)
 
 贪心算法的第一步，就是找寻从顾客开始，所有可能能行走方向距离为 1 的点有哪些（图中蓝色的点）。接着，我们可以以这些距离为 1 的点为基础，去找寻所有距离为 2 的点（图中绿色的点）。以此类推，直到所有的点都没有下一个可以行走的点了。而每计算一次距离为 N 的点的时候，都可以尝试看看里面是否有对应的维修点，如果有，那么终止检索，这个 N 便是最短距离。
 
-<img src='/images/recaps/algo-minimal-costs/step8.svg' width='800px' height='400px' alt='Step 8' />
+![Step 8](/images/recaps/algo-minimal-costs/step8.svg)
 
 如上图所示，在我们查找距离为 4 的点的时候，我们就能找到目标维修店，那么我们可以认定，起最短距离就是 4。