feat: add a link to the copy url & title chrome extension

Author: isqua

src/components/ExtensionPromo.astro

@@ -0,0 +1,49 @@
+<section class="extension-promo">
+  <p class="banner-text">
+    Love these Copy Title & URL bookmarklets? Get the Chrome extension with
+    customizable hotkeys to speed up your workflow!
+  </p>
+  <a
+    href="https://chromewebstore.google.com/detail/copy-url-and-title-of-cur/fgbholfmconpcpilaibkfakecpplekff?utm_source=isqua_github&utm_medium=website&utm_campaign=bookmarklets_promo"
+    target="_blank"
+    class="bookmarklet install-btn"
+  >
+    Add to Chrome
+  </a>
+</section>
+
+<style>
+  .extension-promo {
+    padding: 1rem 1.5rem;
+    margin: 1.5rem 0;
+    border-radius: 0.25rem;
+    position: relative;
+    background-color: #fff;
+  }
+
+  .extension-promo::before {
+    content: "";
+    position: absolute;
+    inset: -0.25rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(
+      to left bottom,
+      rgb(198, 255, 221),
+      rgb(251, 215, 134),
+      rgb(247, 121, 125)
+    );
+    opacity: 0.5;
+    z-index: -1;
+  }
+
+  .banner-text {
+    font-size: 20px;
+    margin: 0 0 0.5rem;
+  }
+
+  a.install-btn {
+    cursor: pointer;
+    background-color: #1abef1;
+    color: #fff;
+  }
+</style>

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import ExtensionPromo from "../components/ExtensionPromo.astro";
 import Layout from "../components/Layout.astro";
 
 import { getCollection } from "astro:content";
@@ -51,6 +52,7 @@ const sections = (await getCollection("sections")).map((s) => ({
                   </button>
                 </dt>
                 <dd>{bookmarklet.text}</dd>
+                {bookmarklet.id === 'copy-title-url-md' && <ExtensionPromo />}
               </>
             ))}
           </dl>