Minor Updates

README.md

@@ -46,4 +46,4 @@ rebuild the site and refresh the site in your browser, happy coding...
 
 For more information see `jekyll help` and `jekyll serve --help` or visit: https://jekyllrb.com/docs/
 
-For production, this site is built with GitHub Actions: [.github/workflows/pages.yaml](.github%2Fworkflows%2Fpages.yaml)
+For production, this site is built with GitHub Actions: [.github/workflows/pages.yaml](.github/workflows/pages.yaml)

src/_includes/alerts.html

@@ -4,8 +4,8 @@ <h5>Old Version Warning</h5>
     <p class="mb-1">
         You were using an old version of the extension, which may have missing features or bugs.
         You should try updating to the latest version of the web extension
-        for <a href="{{ site.chrome_url }}" class="alert-link" target="_blank" rel="noopener">Chrome</a>
-        or <a href="{{ site.firefox_url }}" class="alert-link" target="_blank" rel="noopener">Firefox</a>.
+        for <a class="alert-link" href="{{ site.chrome_url }}" target="_blank" rel="noopener">Chrome</a>
+        or <a class="alert-link" href="{{ site.firefox_url }}" target="_blank" rel="noopener">Firefox</a>.
     </p>
     {% comment %}<h5>Known Issues:</h5>{% endcomment %}
     {% comment %}<ul class="mb-1">{% endcomment %}

src/css/bootstrap.scss

@@ -3,12 +3,6 @@ $primary: #7289da;
 
 @import '../../node_modules/bootstrap/scss/bootstrap';
 
-// Change info button text to white
-.btn-info {
-    --bs-btn-color: var(--bs-white);
-    --bs-btn-hover-color: var(--bs-white);
-}
-
 // Set default links to emulate link-body-emphasis
 a {
     color: rgba(var(--bs-emphasis-color-rgb), 1);

src/css/uninstall.css

@@ -15,7 +15,7 @@ body {
 
 [data-bs-theme='dark'] #content-wrapper {
     background-color: rgba(var(--bs-black-rgb), 0.5);
-    filter: drop-shadow(15px 15px 12px #000000);
+    filter: drop-shadow(15px 15px 12px var(--bs-black));
 }
 [data-bs-theme='light'] #content-wrapper {
     background-color: rgba(var(--bs-white-rgb), 0.5);

src/html/docs.html

@@ -2,7 +2,7 @@
 layout: default
 permalink: /docs/
 title: Documentation
-description: Documentation and instructions for configuring and using Link Extractor.
+description: Documentation and instructions for configuring and using the Link Extractor Web Extension.
 ---
 
 <div class="container-fluid">
@@ -29,6 +29,16 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-regular fa-file-lines
         </p>
     </div>
 
+    <div id="new-install" class="alert alert-success alert-dismissible d-none" role="alert">
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <h4 class="alert-heading">Thank You...</h4>
+        <p class="mb-0">
+            for installing {{ site.site_name }}. {{ site.site_name }}'s goal is to be the ultimate link extraction web extension.
+            <br>
+            If you run into any issues or want to see new features, please <a class="alert-link" href="{{ "/#support" | relative_url }}">let us know</a>.
+        </p>
+    </div>
+
     {% comment %}{% include alerts.html %}{% endcomment %}
 
     <h2 id="configure">Configure</h2>

src/html/index.html

@@ -98,7 +98,7 @@ <h2>Install</h2>
         <a href="{{ site.chrome_url }}" target="_blank" rel="noopener">Yandex</a>.
     </p>
 
-    <h2>Support</h2>
+    <h2 id="support">Support</h2>
 
     <p class="lead">
         For usage instructions, head over to the

src/js/docs.js

@@ -13,6 +13,10 @@ function domContentLoaded() {
         const pinNotice = document.getElementById('pin-notice')
         pinNotice.classList.remove('d-none')
         pinNotice.addEventListener('click', pinClick)
+        window.addEventListener('scroll', () => setTimeout(pinClick, 5000), {
+            once: true,
+        })
+        document.getElementById('new-install').classList.remove('d-none')
     }
     if (navigator.userAgent.includes('Firefox/')) {
         console.log('Detected Browser: Firefox')
@@ -35,10 +39,9 @@ function domContentLoaded() {
 /**
  * Pin Animation Click Callback
  * @function pinClick
- * @param {MouseEvent} event
  */
-function pinClick(event) {
-    const div = event.target.closest('div')
-    console.log('div:', div)
-    div.classList.add('d-none')
+function pinClick() {
+    const pinNotice = document.getElementById('pin-notice')
+    console.log('pinNotice:', pinNotice)
+    pinNotice.classList.add('d-none')
 }

src/js/main.js

@@ -3,6 +3,9 @@
 document
     .querySelectorAll('[data-clipboard-text]')
     .forEach((el) => el.addEventListener('click', (e) => e.preventDefault()))
+document
+    .querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach((el) => new bootstrap.Tooltip(el))
 
 const backToTop = document.getElementById('back-to-top')