Fix and Update Site (#7)

Author: smashedr

_config.yml

@@ -6,6 +6,7 @@ site_name: Django Files
 site_url: https://django-files.github.io/
 github_url: https://github.com/django-files/django-files
 
+extension_github: https://github.com/django-files/web-extension
 chrome_url: https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej
 firefox_url: https://addons.mozilla.org/en-US/firefox/addon/django-files/
 chrome_id: abpbiefojfkekhkjnpakpekkpeibnjej

_layouts/default.html

@@ -26,8 +26,8 @@
     {% endif %}
 
     <link rel="icon" href="/favicon.ico" sizes="any">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/css/main.css">
 
     {% if page.title == 'Screen Shots' %}
@@ -93,7 +93,21 @@
     </div>
 </footer>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js" integrity="sha512-X/YkDZyjTf4wyc2Vy16YGCPHwAY8rZJY+POgokZjQB2mhIRFJCckEGc6YyX9eNsPfn0PzThEuNs+uaomE5CO6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<button type="button" class="btn btn-outline-primary" id="back-to-top">
+    <i class="fa-regular fa-square-caret-up"></i>
+</button> <!-- back-to-top -->
+
+<div aria-live="polite" aria-atomic="true" class="">
+    <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
+</div> <!-- toast-container -->
+
+<div class="d-none">
+    <div class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
+        <div class="toast-body small"></div>
+    </div>
+</div> <!-- d-none -->
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js" integrity="sha512-7O5pXpc0oCRrxk8RUfDYFgn0nO1t+jLuIOQdOMRp4APB7uZ4vSjspzp5y6YDtDs4VzUSTbWzBFZ/LKJhnyFOKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script type="text/javascript" src="/js/main.js"></script>
 

css/main.css

@@ -0,0 +1,14 @@
+/* CSS for global */
+
+#back-to-top {
+    position: fixed;
+    bottom: 64px;
+    right: 20px;
+    display: none;
+    z-index: 3;
+}
+
+.toast-container {
+    max-width: 260px;
+    width: 100%;
+}

extension.html

@@ -12,15 +12,18 @@ <h1>{{ site.site_name }} - {{ page.title }}</h1>
         <img src="https://img.shields.io/chrome-web-store/users/{{ site.chrome_id }}?logo=google&logoColor=white&label=google%20users" alt="Chrome Web Store Users" style="max-width: 100%;"></a>
     <a href="{{ site.firefox_url }}" rel="nofollow" target="_blank">
         <img src="https://img.shields.io/amo/users/{{ site.firefox_id }}?logo=mozilla&label=mozilla%20users" alt="Mozilla Add-on Users" style="max-width: 100%;"></a>
+    <a href="{{ site.chrome_url }}" rel="nofollow" target="_blank">
         <img src="https://img.shields.io/chrome-web-store/v/{{ site.chrome_id }}?label=chrome&logo=googlechrome" alt="Chrome Web Store Version" style="max-width: 100%;"></a>
     <a href="{{ site.firefox_url }}" rel="nofollow" target="_blank">
         <img src="https://img.shields.io/amo/v/{{ site.firefox_id }}?label=firefox&logo=firefox" alt="Mozilla Add-on Version" style="max-width: 100%;"></a>
-    <a href="{{ site.github_url }}/releases/latest" rel="nofollow" target="_blank">
+    <a href="{{ site.extension_github }}/releases/latest" rel="nofollow" target="_blank">
         <img src="https://img.shields.io/github/v/release/{{ site.github_name }}?logo=github" alt="GitHub Release Version" style="max-width: 100%;"></a>
-    <a href="{{ site.github_url }}/blob/master/manifest.json" rel="nofollow" target="_blank">
+    <a href="{{ site.extension_github }}/blob/master/manifest.json" rel="nofollow" target="_blank">
         <img src="https://img.shields.io/github/manifest-json/v/{{ site.github_name }}?filename=manifest.json&logo=json&label=manifest" alt="Manifest Version" style="max-width: 100%;"></a>
 </div>
 
+<p class="lead" data-nosnippet><a href="#configure">Configure</a> | <a href="#setup">Setup</a> | <a href="#usage">Usage</a></p>
+
 <p class="lead">
     Modern Chrome Web Extension and Firefox Browser Addon for Django Files to view recent uploads, shorten URLs, and upload Images, Video or Audio files with a right click.
 </p>
@@ -85,7 +88,7 @@ <h2 id="configure">Configure</h2>
     <img src="/images/extension/pin-firefox.jpg" class="img-thumbnail" alt="Chrome Pin Extension" width="320">
 </div>
 
-<h2>Setup</h2>
+<h2 id="setup">Setup</h2>
 <p>
     To automatically configure the web extension to work with your Django Files instance do the following:
 </p>
@@ -123,13 +126,13 @@ <h2>Support</h2>
 
 <p>
     Please submit an
-    <a href="{{ site.github_url }}/issues" target="_blank">Issue</a>
+    <a href="{{ site.extension_github }}/issues" target="_blank">Issue</a>
     if you find bugs and open a
-    <a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank">Feature Request</a>
+    <a href="{{ site.extension_github }}/discussions/categories/feature-requests" target="_blank">Feature Request</a>
     if you have any ideas, suggestions, or requests.
 </p>
 
 <p>
-    More information can be found on GitHub,
-    <a href="https://github.com/django-files/web-extension" target="_blank" rel="noopener">django-files/web-extension</a>.
+    More information can be found on GitHub:
+    <a href="https://github.com/django-files/web-extension" target="_blank" rel="noopener">django-files/web-extension</a>
 </p>

index.html

@@ -22,7 +22,8 @@ <h2>Running</h2>
 
 <h3>
     Docker Run
-    <small class="text-body-secondary"><a href="#" onclick="return false;" class="clip" data-clipboard-target="#docker-run-inline"><i class="fa-solid fa-copy"></i></a></small>
+    <a href="#" class="small clip" data-clipboard-target="#docker-run-inline">
+        <i class="fa-solid fa-copy"></i></a>
 </h3>
 <pre class="border border-success rounded-3 px-3 pb-3"><code id="docker-run-inline">
 docker run --name "django-files" -d --restart unless-stopped  \
@@ -35,7 +36,8 @@ <h3>
 
 <h3>
     Docker Compose
-    <small class="text-body-secondary"><a href="#" onclick="return false;" class="clip" data-clipboard-target="#docker-compose-inline"><i class="fa-solid fa-copy"></i></a></small>
+    <a href="#" class="small clip" data-clipboard-target="#docker-compose-inline">
+        <i class="fa-solid fa-copy"></i></a>
 </h3>
 <pre class="border border-success rounded-3 px-3 pb-3"><code id="docker-compose-inline">
 version: '3'

js/main.js

@@ -1 +1,83 @@
-new ClipboardJS('.clip')
+// JS Main
+
+const backToTop = document.getElementById('back-to-top')
+if (backToTop) {
+    window.addEventListener('scroll', debounce(onScroll))
+    backToTop.addEventListener('click', () => {
+        document.body.scrollTop = 0
+        document.documentElement.scrollTop = 0
+    })
+}
+
+document
+    .querySelectorAll('.clip')
+    .forEach((el) => el.addEventListener('click', (e) => e.preventDefault()))
+
+if (typeof ClipboardJS !== 'undefined') {
+    const clipboard = new ClipboardJS('.clip')
+    clipboard.on('success', function (event) {
+        // console.debug('clipboard.success:', event)
+        // const text = event.text
+        // console.debug(`text: "${text}"`)
+        if (event.trigger.dataset.toast) {
+            showToast(event.trigger.dataset.toast)
+        } else {
+            showToast('Copied to Clipboard')
+        }
+    })
+    clipboard.on('error', function (event) {
+        // console.debug('clipboard.error:', event)
+        showToast('Clipboard Copy Failed', 'warning')
+    })
+}
+
+/**
+ * On Scroll Callback
+ * @function onScroll
+ */
+function onScroll() {
+    if (
+        document.body.scrollTop > 20 ||
+        document.documentElement.scrollTop > 20
+    ) {
+        backToTop.style.display = 'block'
+    } else {
+        backToTop.style.display = 'none'
+    }
+}
+
+/**
+ * Show Bootstrap Toast
+ * @function showToast
+ * @param {String} message
+ * @param {String} type
+ */
+function showToast(message, type = 'success') {
+    console.debug(`showToast: ${type}: ${message}`)
+    const clone = document.querySelector('.d-none .toast')
+    const container = document.getElementById('toast-container')
+    if (!clone || !container) {
+        return console.warn('Missing clone or container:', clone, container)
+    }
+    const element = clone.cloneNode(true)
+    element.querySelector('.toast-body').innerHTML = message
+    element.classList.add(`text-bg-${type}`)
+    container.appendChild(element)
+    const toast = new bootstrap.Toast(element)
+    element.addEventListener('mousemove', () => toast.hide())
+    toast.show()
+}
+
+/**
+ * DeBounce Function
+ * @function debounce
+ * @param {Function} fn
+ * @param {Number} timeout
+ */
+function debounce(fn, timeout = 250) {
+    let timeoutID
+    return (...args) => {
+        clearTimeout(timeoutID)
+        timeoutID = setTimeout(() => fn(...args), timeout)
+    }
+}