hanzoai/esbuild
2
0
Fork 0
mirror of https://github.com/hanzoai/esbuild.git synced 2026-09-24 16:58:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

readme: use new light/dark mode feature

Browse Source
This commit is contained in:
Evan Wallace
2022-04-21 23:26:10 -04:00
parent f3e7430dd1
commit aa36c23b2c
5 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+4 -2
View File
@@ -1,5 +1,6 @@
<p align="center">
<img src="./images/wordmark.svg" alt="esbuild: An extremely fast JavaScript bundler">
<img src="./images/wordmark-light.svg#gh-light-mode-only" alt="esbuild: An extremely fast JavaScript bundler">
<img src="./images/wordmark-dark.svg#gh-dark-mode-only" alt="esbuild: An extremely fast JavaScript bundler">
<br>
<a href="https://esbuild.github.io/">Website</a> |
<a href="https://esbuild.github.io/getting-started/">Getting started</a> |
@@ -13,7 +14,8 @@
Our current build tools for the web are 10-100x slower than they could be:
<p align="center">
<img src="images/benchmark.svg" alt="Bar chart with benchmark results">
<img src="images/benchmark-light.svg#gh-light-mode-only" alt="Bar chart with benchmark results">
<img src="images/benchmark-dark.svg#gh-dark-mode-only" alt="Bar chart with benchmark results">
</p>
The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.
images/benchmark-dark.svg
+24
View File
@@ -0,0 +1,24 @@
<svg width="800" height="130" fill="black" font-family="sans-serif" font-size="13px" xmlns="http://www.w3.org/2000/svg">
<rect x="120" y="20" width="1" height="80" fill="#7F7F7F" fill-opacity="0.25"/>
<rect x="259.6580784974717" y="20" width="1" height="80" fill="#7F7F7F" fill-opacity="0.25"/>
<rect x="399.3161569949434" y="20" width="1" height="80" fill="#7F7F7F" fill-opacity="0.25"/>
<rect x="538.9742354924151" y="20" width="1" height="80" fill="#7F7F7F" fill-opacity="0.25"/>
<rect x="678.6323139898868" y="20" width="1" height="80" fill="#7F7F7F" fill-opacity="0.25"/>
<rect x="120" y="23" width="4.608716590416567" height="14" fill="#FFCF00"/>
<text x="112" y="30" text-anchor="end" dominant-baseline="middle" font-weight="bold" fill="#C9D1D9">esbuild</text>
<text x="132.60871659041658" y="30" dominant-baseline="middle" font-weight="bold" fill="#C9D1D9">0.33s</text>
<rect x="120" y="43" width="453.60943895978806" height="14" fill="#FFCF00"/>
<text x="112" y="50" text-anchor="end" dominant-baseline="middle" fill="#C9D1D9">parcel 2</text>
<text x="581.6094389597881" y="50" dominant-baseline="middle" fill="#C9D1D9">32.48s</text>
<rect x="120" y="63" width="488.10498434866366" height="14" fill="#FFCF00"/>
<text x="112" y="70" text-anchor="end" dominant-baseline="middle" fill="#C9D1D9">rollup + terser</text>
<text x="616.1049843486637" y="70" dominant-baseline="middle" fill="#C9D1D9">34.95s</text>
<rect x="120" y="83" width="580" height="14" fill="#FFCF00"/>
<text x="112" y="90" text-anchor="end" dominant-baseline="middle" fill="#C9D1D9">webpack 5</text>
<text x="708" y="90" dominant-baseline="middle" fill="#C9D1D9">41.53s</text>
<text x="120" y="104" text-anchor="middle" dominant-baseline="hanging" fill="#C9D1D9">0s</text>
<text x="259.6580784974717" y="104" text-anchor="middle" dominant-baseline="hanging" fill="#C9D1D9">10s</text>
<text x="399.3161569949434" y="104" text-anchor="middle" dominant-baseline="hanging" fill="#C9D1D9">20s</text>
<text x="538.9742354924151" y="104" text-anchor="middle" dominant-baseline="hanging" fill="#C9D1D9">30s</text>
<text x="678.6323139898868" y="104" text-anchor="middle" dominant-baseline="hanging" fill="#C9D1D9">40s</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

images/benchmark.svg → images/benchmark-light.svg
-7
View File
@@ -1,11 +1,4 @@
<svg width="800" height="130" fill="black" font-family="sans-serif" font-size="13px" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
#bg { fill: #0D1116; }
text { fill: #C9D1D9; }
}
</style>
<rect id="bg" width="800" height="130" fill="#FFFFFF"/>
<rect x="120" y="20" width="1" height="80" fill="#7F7F7F" fill-opacity="0.25"/>
<rect x="259.6580784974717" y="20" width="1" height="80" fill="#7F7F7F" fill-opacity="0.25"/>
<rect x="399.3161569949434" y="20" width="1" height="80" fill="#7F7F7F" fill-opacity="0.25"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

images/wordmark-dark.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="640" height="250" fill="black" font-family="sans-serif" xmlns="http://www.w3.org/2000/svg">
<circle cx="125" cy="125" r="75" fill="#FFCF00"/>
<path d="M85.625 89.375L121.25 125L85.625 160.625M130.625 89.375L166.25 125L130.625 160.625" fill="none" stroke="#191919" stroke-width="18"/>
<text x="241" y="152" font-size="100" font-weight="bold" fill="#C9D1D9">esbuild</text>
<text x="241" y="184" font-size="21" font-style="italic" fill="#C9D1D9">An extremely fast JavaScript bundler</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 514 B

images/wordmark.svg → images/wordmark-light.svg
-7
View File
@@ -1,11 +1,4 @@
<svg width="640" height="250" fill="black" font-family="sans-serif" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
#bg { fill: #0D1116; }
text { fill: #C9D1D9; }
}
</style>
<rect id="bg" width="640" height="250" fill="white"/>
<circle cx="125" cy="125" r="75" fill="#FFCF00"/>
<path d="M85.625 89.375L121.25 125L85.625 160.625M130.625 89.375L166.25 125L130.625 160.625" fill="none" stroke="#191919" stroke-width="18"/>
<text x="241" y="152" font-size="100" font-weight="bold">esbuild</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 668 B

After

Width:  |  Height:  |  Size: 484 B