syhily/yufan.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: change the size of the svg

Browse Source
This commit is contained in:
Yufan Sheng 2024-06-21 05:17:29 +08:00
parent 232d9eb19b
commit da1c6fefb5
Signed by: syhily
GPG Key ID: 9D18A22A7DCD5A9B
10 changed files with 24 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
plugins/images.ts
View File

@ -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)

5
public/images/recaps/algo-minimal-costs/step1.svg
View File

@ -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">
<title>64x64</title>
<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">
<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>
@ -18,4 +17,4 @@
<circle id="Oval" stroke="#79A3F8" fill="#9BD0FD" cx="205" cy="600" r="19.5"></circle>
<circle id="Oval" stroke="#FF8D8D" fill="#FD9B9B" cx="205" cy="397" r="19.5"></circle>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

5
public/images/recaps/algo-minimal-costs/step2.svg
View File

@ -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">
<title>64x64</title>
<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">
<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>
@ -21,4 +20,4 @@
<circle id="Oval" stroke="#79A3F8" fill="#9BD0FD" cx="407" cy="601" r="19.5"></circle>
<circle id="Oval" stroke="#FF8D8D" fill="#FD9B9B" cx="205" cy="397" r="19.5"></circle>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

5
public/images/recaps/algo-minimal-costs/step3.svg
View File

@ -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">
<title>64x64</title>
<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">
<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>
@ -21,4 +20,4 @@
<circle id="Oval" stroke="#46DDB7" fill="#5CDC8C" cx="205" cy="1005" r="19.5"></circle>
<circle id="Oval" stroke="#FF8D8D" fill="#FD9B9B" cx="205" cy="397" r="19.5"></circle>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

5
public/images/recaps/algo-minimal-costs/step4.svg
View File

@ -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">
<title>128x128</title>
<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">
<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>
@ -38,4 +37,4 @@
<circle id="Oval" stroke="#FF8D8D" fill="#FD9B9B" cx="205" cy="397" r="19.5"></circle>
<circle id="Oval" stroke="#FF8D8D" fill="#FD9B9B" cx="1412" cy="399" r="19.5"></circle>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

5
public/images/recaps/algo-minimal-costs/step5.svg
View File

@ -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">
<title>128x128</title>
<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">
<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>
@ -47,4 +46,4 @@
<circle id="Oval" stroke="#FF8D8D" fill="#FD9B9B" cx="205" cy="397" r="19.5"></circle>
<circle id="Oval" stroke="#FF8D8D" fill="#FD9B9B" cx="1412" cy="399" r="19.5"></circle>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

5
public/images/recaps/algo-minimal-costs/step6.svg
View File

@ -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">
<title>Untitled</title>
<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">
<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">
@ -54,4 +53,4 @@
<circle id="Oval" stroke="#FF8D8D" fill="#FD9B9B" fill-rule="nonzero" cx="1311.5" cy="109" r="19.5"></circle>
</g>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

5
public/images/recaps/algo-minimal-costs/step7.svg
View File

@ -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">
<title>128x128</title>
<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">
<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>
@ -47,4 +46,4 @@
<polygon id="Star" fill="#FF0B0B" points="1002.5 1027.25 980.458053 1038.83814 984.66769 1014.29407 966.835381 996.911863 991.479027 993.330931 1002.5 971 1013.52097 993.330931 1038.16462 996.911863 1020.33231 1014.29407 1024.54195 1038.83814"></polygon>
<polygon id="Star" fill="#FF0B0B" points="2208.5 1027.25 2186.45805 1038.83814 2190.66769 1014.29407 2172.83538 996.911863 2197.47903 993.330931 2208.5 971 2219.52097 993.330931 2244.16462 996.911863 2226.33231 1014.29407 2230.54195 1038.83814"></polygon>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

5
public/images/recaps/algo-minimal-costs/step8.svg
View File

@ -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">
<title>128x128</title>
<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">
<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>
@ -77,4 +76,4 @@
<path id="Line-3" d="M2205.9943,594.994312 L2205.99999,597.494305 L2206.434,788.494 L2218.43504,788.467044 L2204.00114,817.499999 L2189.43512,788.533103 L2201.434,788.506 L2201.00001,597.505695 L2200.99431,595.005701 L2205.9943,594.994312 Z" fill="#979797" fill-rule="nonzero"></path>
<path id="Line-3" d="M2209.4943,804.494312 L2209.49999,806.994305 L2209.934,997.994 L2221.93504,997.967044 L2207.50114,1027 L2192.93512,998.033103 L2204.934,998.006 L2204.50001,807.005695 L2204.49431,804.505701 L2209.4943,804.494312 Z" fill="#979797" fill-rule="nonzero"></path>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

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

@ -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。