Update Links and Build

cssnr · Aug 5, 2024 · 4c986f0 · 4c986f0
1 parent b4ea447
commit 4c986f0
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 57 deletions.
diff --git a/.github/workflows/pages.yaml b/.github/workflows/pages.yaml
@@ -39,6 +39,12 @@ jobs:
         run: |
           npm install
 
+      - name: "Update Cache Version"
+        run: |
+          echo "Updating Cache to Version: v${GITHUB_RUN_NUMBER}"
+          sed -i "0,/v1/s//v${GITHUB_RUN_NUMBER}/" src/sw.js
+          head src/sw.js -n 4
+
       - name: "Configure Pages"
         uses: actions/configure-pages@v5
 

diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -108,22 +108,22 @@
     <div class="container-fluid py-2">
         <div class="d-flex flex-column flex-md-row">
             <div class="me-md-auto mb-2 mb-md-0">
-                <a class="text-decoration-none" href="{{ site.github_url }}" target="_blank" rel="noopener">
+                <a class="link-body-emphasis text-decoration-none" href="{{ site.github_url }}" target="_blank" rel="noopener">
                     <i class="fab fa-github"></i> {{ site.site_name }}</a>
             </div>
             <div class="ms-md-auto">
                 <nav aria-label="Secondary Navigation">
                     <ol class="list-inline mb-1 d-flex flex-column flex-sm-row">
                         {% for item in site.menu %}
                             <li class="list-inline-item mb-2 mb-sm-0">
-                                <a class="text-decoration-none {% if page.title == item.name %}fw-bold{% endif %}"
+                                <a class="link-body-emphasis text-decoration-none {% if page.title == item.name %}fw-bold{% endif %}"
                                    href="{{ item.link | relative_url }}" {% if item.external %}target="_blank"{% endif %}>
                                     {{ item.name }}{% if item.external %} <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i>{% endif %}</a>
                             </li>
                         {% endfor %}
                         <li class="list-inline-item">
-                            <a class="text-decoration-none" href="{{ site.discord_invite }}" target="_blank">
-                                Discord <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a>
+                            <a class="link-body-emphasis text-decoration-none" href="{{ site.discord_invite }}" target="_blank">
+                                Discord <i class="fa-solid fa-arrow-up-right-from-square fa-xs"></i></a>
                         </li>
                     </ol>
                 </nav>

diff --git a/src/css/bootstrap.scss b/src/css/bootstrap.scss
@@ -3,15 +3,15 @@ $primary: #7289da;
 
 @import '../../node_modules/bootstrap/scss/bootstrap';
 
-// Set default links to emulate link-body-emphasis
-a {
-    color: rgba(var(--bs-emphasis-color-rgb), 1);
-    //text-decoration: none;
-    text-decoration-color: rgba(var(--bs-emphasis-color-rgb), 0.4);
-
-    &:hover {
-        color: rgba(var(--bs-emphasis-color-rgb), 0.75);
-        //text-decoration: underline;
-        text-decoration-color: rgba(var(--bs-emphasis-color-rgb), 0.75);
-    }
-}
+//// Set default links to emulate link-body-emphasis
+//a {
+//    color: rgba(var(--bs-emphasis-color-rgb), 1);
+//    //text-decoration: none;
+//    text-decoration-color: rgba(var(--bs-emphasis-color-rgb), 0.4);
+//
+//    &:hover {
+//        color: rgba(var(--bs-emphasis-color-rgb), 0.75);
+//        //text-decoration: underline;
+//        text-decoration-color: rgba(var(--bs-emphasis-color-rgb), 0.75);
+//    }
+//}
diff --git a/src/css/main.css b/src/css/main.css
@@ -37,6 +37,20 @@ a {
     }
 }
 
+a.body-link {
+    color: rgba(var(--bs-emphasis-color-rgb), 1);
+    /*text-decoration-color: rgba(var(--bs-emphasis-color-rgb), 0.4);*/
+    border-bottom: dotted 1px rgba(var(--bs-emphasis-color-rgb), 0.5);
+    text-decoration: none;
+}
+
+a.body-link:hover {
+    color: rgba(var(--bs-emphasis-color-rgb), 0.75);
+    /*text-decoration-color: rgba(var(--bs-emphasis-color-rgb), 0.75);*/
+    border-bottom: dotted 1px rgba(var(--bs-emphasis-color-rgb), 0.75);
+    text-decoration: none;
+}
+
 /* Grow */
 .hvr-grow-lg,
 .hvr-grow {
@@ -57,7 +71,3 @@ a {
 .hvr-grow-lg:hover {
     transform: scale(1.2);
 }
-
-.badges img {
-    min-width: 120px;
-}
diff --git a/src/html/docs.html b/src/html/docs.html
@@ -9,10 +9,10 @@
     <h1 class="animate__animated animate__zoomIn"><i class="fa-regular fa-file-lines me-2"></i> {{ page.title }}</h1>
 
     <p class="lead">
-        <a href="#configure">Configure</a> &bull;
-        <a href="#usage">Usage</a> &bull;
-        <a href="#options">Options</a> &bull;
-        <a href="#links">Link Results</a>
+        <a class="body-link" href="#configure">Configure</a> &bull;
+        <a class="body-link" href="#usage">Usage</a> &bull;
+        <a class="body-link" href="#options">Options</a> &bull;
+        <a class="body-link" href="#links">Link Results</a>
     </p>
 
     <div id="feedback" class="alert alert-success alert-dismissible d-none animate__animated animate__zoomInDown" role="alert">
@@ -22,10 +22,10 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-regular fa-file-lines
         </p>
         <p>
             If you would like feedback from the developer you can open an
-            <a href="{{ site.github_url }}/issues" class="alert-link" target="_blank" rel="noopener">Issue</a> on GitHub.
+            <a class="alert-link" href="{{ site.github_url }}/issues" target="_blank" rel="noopener">Issue</a> on GitHub.
         </p>
         <p class="mb-0">
-            You may also request support and get help on the <a href="{{ site.discord_invite }}" class="alert-link" target="_blank" rel="noopener">Discord Server</a>.
+            You may also request support and get help on the <a class="alert-link" href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord Server</a>.
         </p>
     </div>
 
@@ -52,7 +52,7 @@ <h2 id="configure">Configure</h2>
         <span class="d-none chromium">clicking the Pin icon.</span>
     </p>
     <p class="d-inline-flex gap-1">
-        <a class="text-decoration-none animate__animated animate__headShake animate__delay-1s" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+        <a class="body-link text-decoration-none animate__animated animate__headShake animate__delay-1s" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
             <i class="fa-solid fa-angles-down"></i>
             Click to Expand <i class="fa-solid fa-thumbtack mx-1"></i> Pin Instructions
             <i class="fa-solid fa-angles-down"></i>
@@ -68,8 +68,8 @@ <h4>Host Permissions</h4>
     <p>
         In order to extract links from multiple tabs, the web extension needs host permissions granted.<br>
         This can be granted from popup window or on the Options page.<br>
-        <a href="{{ "/screenshots/02.jpg" | relative_url }}" target="_blank">
-            View Screen Shot of Host Permissions. <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a>
+        <a class="body-link" href="{{ "/screenshots/02.jpg" | relative_url }}" target="_blank">
+            View Screen Shot of Host Permissions. <i class="fa-solid fa-arrow-up-right-from-square fa-xs"></i></a>
     </p>
     <p>
         <span class="text-warning-emphasis">Important:</span> To extract links from multiple tabs, first select the tabs by holding the
@@ -152,7 +152,7 @@ <h5><i class="fa-regular fa-keyboard"></i> Keyboard Shortcuts</h5>
         <br>
         <span class="d-none firefox">
         Instructions for Firefox:
-        <a href="https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox" target="_blank" rel="noopener">
+        <a class="body-link" href="https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox" target="_blank" rel="noopener">
             https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox</a>
         </span>
         <span class="d-none edge">
@@ -177,14 +177,14 @@ <h5><i class="fa-solid fa-filter"></i> Filters</h5>
     <h5><i class="fa-solid fa-code"></i> Regex Flags</h5>
     <p class="ms-4">
         This is the default flags used when filtering links via quick filter or a saved filter. For more information
-        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags"
+        <a class="body-link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags"
            target="_blank" rel="noopener">read this document</a>.
     </p>
 
     <h2 id="links">Link Results</h2>
     <hr class="mt-0">
     <p>
-        The Link Results Page utilizes <a href="https://datatables.net/" target="_blank" rel="noopener">
+        The Link Results Page utilizes <a class="body-link" href="https://datatables.net/" target="_blank" rel="noopener">
             DataTables.net</a> to display, sort, page, and filter the results.
     </p>
     <p>
@@ -228,8 +228,8 @@ <h5><i class="fa-solid fa-i-cursor"></i> Filter</h5>
     </p>
     <p>
         For more information view the
-        <a href="{{ site.github_url }}?tab=readme-ov-file#readme" target="_blank" rel="noopener">README.md</a>
-        on GitHub or join the <a href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord Server</a>.
+        <a class="body-link" href="{{ site.github_url }}?tab=readme-ov-file#readme" target="_blank" rel="noopener">README.md</a>
+        on GitHub or join the <a class="body-link" href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord Server</a>.
     </p>
 </div> <!-- container -->
 

diff --git a/src/html/index.html b/src/html/index.html
@@ -75,52 +75,52 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-solid fa-link me-2"><
         <li>Activate from Icon, Context Menu, or Keyboard Shortcuts</li>
     </ul>
 
-    <p>To see more, view the <a href="{{ "/screenshots/" | relative_url }}">Screen Shot Gallery</a>.</p>
+    <p>To see more, view the <a class="body-link" href="{{ "/screenshots/" | relative_url }}">Screen Shot Gallery</a>.</p>
 
     <h2>Install</h2>
 
     <p class="ms-3 lead">
         <i class="fa-brands fa-chrome fa-lg me-1"></i>
-        <a href="{{ site.chrome_url }}" target="_blank" rel="noopener">Google Chrome Web Store</a>
+        <a class="body-link" href="{{ site.chrome_url }}" target="_blank" rel="noopener">Google Chrome Web Store</a>
         <br>
         <i class="fa-brands fa-firefox-browser fa-lg me-1"></i>
-        <a href="{{ site.firefox_url }}" target="_blank" rel="noopener">Mozilla Firefox Add-ons</a>
+        <a class="body-link" href="{{ site.firefox_url }}" target="_blank" rel="noopener">Mozilla Firefox Add-ons</a>
     </p>
 
     <p>
         All <b>Chromium</b> based browsers can install the extension from the
-        <a href="{{ site.chrome_url }}" target="_blank" rel="noopener">Chrome Web Store</a>.
+        <a class="body-link" href="{{ site.chrome_url }}" target="_blank" rel="noopener">Chrome Web Store</a>.
     </p>
 
     <p>
         <b>Mobile</b> browser support available for
-        <a href="{{ site.firefox_url }}" target="_blank" rel="noopener">Firefox</a> and
-        <a href="{{ site.chrome_url }}" target="_blank" rel="noopener">Yandex</a>.
+        <a class="body-link" href="{{ site.firefox_url }}" target="_blank" rel="noopener">Firefox</a> and
+        <a class="body-link" href="{{ site.chrome_url }}" target="_blank" rel="noopener">Yandex</a>.
     </p>
 
     <h2 id="support">Support</h2>
 
     <p class="lead">
         For usage instructions, head over to the
-        <a href="{{ "/docs/" | relative_url }}">Documentation</a>.
+        <a class="body-link" href="{{ "/docs/" | relative_url }}">Documentation</a>.
     </p>
 
     <p>
         If you find any bugs please
-        <a href="{{ site.github_url }}/issues" target="_blank" rel="noopener">Open an Issue</a>.
+        <a class="body-link" href="{{ site.github_url }}/issues" target="_blank" rel="noopener">Open an Issue</a>.
         <br>
         If you have any ideas, suggestions, or requests; submit a
-        <a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">Feature Request</a>.
+        <a class="body-link" href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">Feature Request</a>.
         <br>
         You may also get support on the
-        <a href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord Server</a>.
+        <a class="body-link" href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord Server</a>.
     </p>
 
     <p>
         You can find additional apps on the
-        <a href="https://cssnr.github.io/" target="_blank" rel="noopener">CSSNR Website</a>
+        <a class="body-link" href="https://cssnr.github.io/" target="_blank" rel="noopener">CSSNR Website</a>
         as well as submit
-        <a href="{{ site.feedback_link }}" target="_blank" rel="noopener">
+        <a class="body-link" href="{{ site.feedback_link }}" target="_blank" rel="noopener">
             General Feedback</a>.
     </p>
 </div> <!-- container -->
diff --git a/src/html/uninstall.html b/src/html/uninstall.html
@@ -15,11 +15,11 @@ <h1 class="align-middle mb-0">{{ site.site_name }}</h1>
         <div class="text-center">
             <p class="mb-0">Please let us know why you uninstalled {{ site.site_name }}.</p>
             <p id="bug-report" class="mb-1 fs-3 animate__animated animate__delay-1s">
-                All <a href="{{ site.github_url }}/issues" target="_blank" rel="noopener">bugs that get reported</a> <span class="d-inline-block fw-bold">will be fixed!</span>
+                All <a class="body-link" href="{{ site.github_url }}/issues" target="_blank" rel="noopener">bugs that get reported</a> <span class="d-inline-block fw-bold">will be fixed!</span>
             </p>
             <p class="mb-2">
-                Any <a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">Feature Requests</a> are appreciated.
-                Support is also available on <a href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord</a>.
+                Any <a class="body-link" href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">Feature Requests</a> are appreciated.
+                Support is also available on <a class="body-link" href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord</a>.
             </p>
         </div>
         {% include alerts.html %}

diff --git a/src/js/docs.js b/src/js/docs.js
@@ -13,10 +13,13 @@ function domContentLoaded() {
         const pinNotice = document.getElementById('pin-notice')
         pinNotice.classList.remove('d-none')
         pinNotice.addEventListener('click', pinClick)
-        window.addEventListener('scroll', () => setTimeout(pinClick, 5000), {
+        document.getElementById('new-install').classList.remove('d-none')
+        window.addEventListener('focus', () => setTimeout(pinClick, 5000), {
             once: true,
         })
-        document.getElementById('new-install').classList.remove('d-none')
+        if (document.hasFocus()) {
+            setTimeout(pinClick, 5000)
+        }
     }
     if (navigator.userAgent.includes('Firefox/')) {
         console.log('Detected Browser: Firefox')
@@ -42,6 +45,6 @@ function domContentLoaded() {
  */
 function pinClick() {
     const pinNotice = document.getElementById('pin-notice')
-    console.log('pinNotice:', pinNotice)
+    // console.debug('pinNotice:', pinNotice)
     pinNotice.classList.add('d-none')
 }
diff --git a/src/js/uninstall.js b/src/js/uninstall.js
@@ -40,11 +40,11 @@ contentWrapper.addEventListener(
     { once: true }
 )
 
-window.addEventListener('focus', function () {
-    if (!bugReport.classList.contains('animate__shakeX')) {
-        bugReport.classList.add('animate__shakeX')
-    }
-})
+window.addEventListener(
+    'focus',
+    () => bugReport.classList.add('animate__shakeX'),
+    { once: true }
+)
 
 document.addEventListener('DOMContentLoaded', async function () {
     if (version) {