fix: readme svg

pd93 · pd93 · commit 2275c9827fc6 · 2024-08-04T13:08:33.000Z
diff --git a/README.md b/README.md
@@ -1,10 +1,11 @@
-<p style="width:100%;text-align:center;font-size:40px;margin-bottom:30px;letter-spacing:5px;font-family:consolas;">
-<span style="color:#ad7fa8;">\x1b</span><span style="color:#729fcf;">[</span><span style="color:#8ae234;">1;43</span><span style="color:#ef2929;">m</span><span style="font-weight:bold;background-color:#fce94f;color:#555753;">ANSI</span><span style="color:#ad7fa8;">\x1b</span><span style="color:#729fcf;">[</span><span style="color:#8ae234;">0</span><span style="color:#ef2929;">m</span>
-</p>
+<div style="width: 100%;">
+  <img src="res/title.svg" style="width: 100%;" alt="Click to see the source">
+</div>
 
-<p style="width:100%;text-align:center;margin-bottom:30px;font-style:italic;">
-A simple, lightweight Golang package for working with ANSI escape codes.
+<p align="center">
+  <i>A simple, lightweight Golang package for working with ANSI escape codes.</i>
 </p>
+<br>
 
 If you've ever worked on a CLI application before, you probably know the
 struggle of working with ANSI escape codes. Often, you just want to quickly
@@ -18,9 +19,7 @@ dependencies :package: It allows you to quickly apply styles to strings using
 need to call a function for each style, making it easy to apply/reset multiple
 styles to a single string.
 
-With `ansi`, the mess at the top of this page becomes: <span style="font-size:20px;letter-spacing:2px;font-family:consolas;">
-<span style="color:#ad7fa8;">[</span><span style="color:#8ae234;">bold:bg-yellow</span><span style="color:#ad7fa8;">]</span><span style="font-weight:bold;background-color:#fce94f;color:#555753;">ANSI</span><span style="color:#ad7fa8;">[</span><span style="color:#ef2929;">/</span><span style="color:#ad7fa8;">]</span>
-</span>
+With `ansi`, the mess at the top of this page becomes: <img src="res/ansi.svg" alt="Click to see the source">
 
 ## Usage
 
@@ -66,11 +65,11 @@ For more info, check out the [style reference](#style-reference) below or take a
 
 ### Formatting
 
-| Code           | ANSI Code | Example                                                                                                       |
+| Code           | ANSI Code | Description                                                                                                   |
 | -------------- | --------: | ------------------------------------------------------------------------------------------------------------- |
-| `bold`         |       `1` | <span style="font-weight:bold;">Sets the font weight to bold</span>                                           |
+| `bold`         |       `1` | **Sets the font weight to bold**                                                                              |
 | `faint`, `dim` |       `2` | <span style="color:#d3d7cf;">Sets the text brightness to its faint/dim variant</span> \*                      |
-| `italic`       |       `3` | <span style="font-style:italic;">Sets the font style to italic</span>                                         |
+| `italic`       |       `3` | _Sets the font style to italic_                                                                               |
 | `underline`    |       `4` | <span style="text-decoration:underline;">Sets the text decoration to underline</span>                         |
 | `blink`        |       `5` | <span style="text-decoration:blink;">Sets the text to blink in and out</span>                                 |
 | `invert`       |       `7` | <span style="backdrop-filter:invert(1);filter:invert(1);">Inverts the foreground and background colors</span> |
@@ -79,7 +78,7 @@ For more info, check out the [style reference](#style-reference) below or take a
 
 > \* `faint` and `dim` do not work when using 8-bit (256) or 24-bit (RGB) color modes.
 
-| Code             | ANSI Code | Example                                 |
+| Code             | ANSI Code | Description                             |
 | ---------------- | --------: | --------------------------------------- |
 | `/bold`          |      `22` | Resets the font weight \*\*             |
 | `/faint`, `/dim` |      `22` | Resets the text brightness \*\*         |
@@ -95,7 +94,7 @@ For more info, check out the [style reference](#style-reference) below or take a
 
 ### Foreground Colors
 
-| Code      |    ANSI Code | Reset Code                                                                                                                                                                     |
+| Code      |    ANSI Code | Description                                                                                                                                                                    |
 | --------- | -----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `black`   |         `30` | <span style="color:#555753;">Sets the text foreground to black</span>                                                                                                          |
 | `red`     |         `31` | <span style="color:#ef2929;">Sets the text foreground to red</span>                                                                                                            |
@@ -111,7 +110,7 @@ For more info, check out the [style reference](#style-reference) below or take a
 
 ### Background Colors
 
-| Code         |    ANSI Code | Reset Code                                                                                                                                                                     |
+| Code         |    ANSI Code | Description                                                                                                                                                                    |
 | ------------ | -----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `bg-black`   |         `40` | <span style="background-color:#555753;">Sets the text background to black</span>                                                                                               |
 | `bg-red`     |         `41` | <span style="background-color:#ef2929;">Sets the text background to red</span>                                                                                                 |
diff --git a/go.sum b/go.sum
diff --git a/res/ansi.svg b/res/ansi.svg
@@ -0,0 +1,41 @@
+<svg fill="none" viewBox="0 0 300 22" width="300" height="22" xmlns="http://www.w3.org/2000/svg">
+  <foreignObject width="100%" height="100%">
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <style>
+        .container {
+          font-size: 20px;
+          letter-spacing: 2px;
+          font-family: consolas;
+        }
+
+        .escape {
+          color: #ad7fa8;
+        }
+
+        .bracket {
+          color: #729fcf;
+        }
+
+        .style {
+          color: #8ae234;
+        }
+
+        .lastByte {
+          color: #ef2929;
+        }
+
+        .text {
+          font-weight: bold;
+          background-color: #fce94f;
+          color: #555753;
+        }
+      </style>
+
+      <span class="container">
+        <span class="escape">[</span><span class="style">bold:bg-yellow</span><span class="escape">]</span><span
+          class="text">ANSI</span><span class="escape">[</span><span class="lastByte">/</span><span
+          class="escape">]</span>
+      </span>
+    </div>
+  </foreignObject>
+</svg>
diff --git a/res/title.svg b/res/title.svg
@@ -0,0 +1,43 @@
+<svg fill="none" viewBox="0 0 600 50" width="600" height="80" xmlns="http://www.w3.org/2000/svg">
+  <foreignObject width="100%" height="100%">
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <style>
+        .container {
+          width: 100%;
+          text-align: center;
+          font-size: 22px;
+          letter-spacing: 5px;
+          font-family: consolas;
+        }
+
+        .escape {
+          color: #ad7fa8;
+        }
+
+        .bracket {
+          color: #729fcf;
+        }
+
+        .style {
+          color: #8ae234;
+        }
+
+        .lastByte {
+          color: #ef2929;
+        }
+
+        .text {
+          font-weight: bold;
+          background-color: #fce94f;
+          color: #555753;
+        }
+      </style>
+
+      <p class="container">
+        <span class="escape">\x1b</span><span class="bracket">[</span><span class="style">1;43</span><span
+          class="lastByte">m</span><span class="text">ANSI</span><span class="escape">\x1b</span><span
+          class="bracket">[</span><span class="style">0</span><span class="lastByte">m</span>
+      </p>
+    </div>
+  </foreignObject>
+</svg>
