Update Template (#3)

smashedr · web-flow · commit 0e340d521c80 · 2024-04-26T14:00:57.000-07:00
* Update Template

* Update Template Add Copy Button
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 .idea/
 *.iml
 .vscode/
+.jekyll-cache/
+_site/
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -11,7 +11,7 @@
       }
     },
     {
-      "files": ["**/*.json"],
+      "files": ["**/*.json", "**/*.yaml"],
       "options": {
         "tabWidth": 2
       }
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,10 +1,14 @@
 <!doctype html>
-<html lang="en" class="h-100">
+<html lang="en" class="h-100" {% if page.dark %}data-bs-theme="dark"{% endif %}>
 <head>
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Django Files - {{ page.title }}</title>
+    <title>{{ site.site_name }} - {{ page.title }}</title>
+
+    {% if page.noindex %}
+        <meta name="robots" content="noindex, nofollow">
+    {% endif %}
 
     <meta name="author" content="{{ site.author }}"/>
     <meta name="title" content="{{ site.site_name }} - {{ page.title }}"/>
@@ -17,10 +21,13 @@
     <meta property="og:url" content="{{ site.site_url }}">
     <meta property="og:image" content="{{ site.site_url }}/media/logo.png">
 
-    <script type="text/javascript" src="/js/theme.js"></script>
+    {% if page.dark != true %}
+        <script type="text/javascript" src="/js/theme.js"></script>
+    {% endif %}
 
-    <link rel="icon" href="favicon.ico" sizes="any">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
+    <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="/css/main.css">
 
     {% if page.title == 'Screen Shots' %}
@@ -32,9 +39,9 @@
 <body class="d-flex flex-column h-100">
 
 <header>
-    <nav class="navbar navbar-expand-sm bg-dark border-bottom" data-bs-theme="dark">
+    <nav class="navbar navbar-expand-sm">
         <div class="container-fluid">
-            <a class="navbar-brand" href="{{ site.github_url }}">
+            <a class="navbar-brand" href="/">
                 <img src="/images/logo.png" width="30" height="30" alt="logo"></a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
@@ -43,41 +50,47 @@
             </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav me-auto mb-2 mb-sm-0">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/docs/">Docs</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/screenshots/" target="_blank">Screen Shots</a></li>
+                    <li class="nav-item"><a class="nav-link {% if page.title == 'Home' %}active{% endif %}" href="/">
+                            Home</a></li>
+                    <li class="nav-item"><a class="nav-link {% if page.title == 'Docs' %}active{% endif %}" href="/docs/">
+                            Docs</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/screenshots/" target="_blank">
+                            Screen Shots <i class="fa-solid fa-arrow-up-right-from-square"></i></a></li>
+                    <li class="nav-item"><a class="nav-link" href="{{ site.github_url }}" target="_blank" rel="noopener">
+                            GitHub <i class="fa-solid fa-arrow-up-right-from-square"></i></a></li>
                 </ul>
             </div>
         </div>
     </nav>
 </header>
 
-<main class="flex-shrink-0 p-3">
-{{ content }}
+<main class="flex-grow-1 p-3">
+    {{ content }}
+    <div class="clearfix"></div>
 </main>
 
-<footer class="footer mt-auto p-2">
+<footer class="footer mt-auto p-2 flex-shrink-0">
     <div class="container-fluid">
         <div class="row">
             <div class="col-12 col-sm-4">
-                <p><a class="text-decoration-none" href="{{ site.github_url }}" target="_blank">
-                    <i class="fab fa-github"></i> Django Files</a></p>
+                <p><a class="link-body-emphasis text-decoration-none" href="{{ site.github_url }}#readme" target="_blank" rel="noopener">
+                        <i class="fab fa-github"></i> {{ site.site_name }}</a></p>
             </div>
             <div class="col-12 col-sm-8 text-sm-end">
                 <ul class="list-inline">
-                    <li class="list-inline-item"><a href="/">Home</a></li>
+                    <li class="list-inline-item"><a class="link-body-emphasis text-decoration-none {% if page.title == 'Home' %}fw-bold{% endif %}" href="/">Home</a></li>
                     <li class="list-inline-item">|</li>
-                    <li class="list-inline-item"><a href="/docs/">Docs</a></li>
+                    <li class="list-inline-item"><a class="link-body-emphasis text-decoration-none {% if page.title == 'Docs' %}fw-bold{% endif %}" href="/docs/">Docs</a></li>
                     <li class="list-inline-item">|</li>
-                    <li class="list-inline-item"><a href="/screenshots/" target="_blank">Screen Shots</a></li>
+                    <li class="list-inline-item"><a class="link-body-emphasis text-decoration-none" href="/screenshots/" target="_blank">Screen Shots <i class="fa-solid fa-arrow-up-right-from-square"></i></a></li>
                 </ul>
             </div>
         </div>
     </div>
 </footer>
 
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
+<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>
+<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>
 
 </body>
diff --git a/docs.html b/docs.html
@@ -5,9 +5,9 @@
 description: Brief Documentation for Django Files, a feature Packed Self-Hosted Django/Docker File Manager for Sharing Files.
 ---
 
-<h1>Django Files - {{ page.title }}</h1>
+<h1>{{ site.site_name }} - {{ page.title }}</h1>
 
 <p class="lead">Coming Soon...</p>
 
-<p>Please see the <a href="{{ site.github_url }}#table-of-contents" target="_blank">
+<p>Please see the <a href="{{ site.github_url }}#table-of-contents" target="_blank" rel="noopener">
     README.md</a> for more information.</p>
diff --git a/index.html b/index.html
@@ -5,24 +5,26 @@
 description: A Feature Packed Self-Hosted Django/Docker File Manager for Sharing Files with ShareX, Flameshot and Much more...
 ---
 
-<h1>Django Files</h1>
+<h1>{{ site.site_name }}</h1>
 
 <p>A Self-Hosted Django File Manager for Uploading and Sharing;
-    designed to work with client apps such as <a href="https://github.com/ShareX/ShareX" target="_blank">ShareX</a> and
-    <a href="https://github.com/flameshot-org/flameshot" target="_blank">Flameshot</a>. Django Files is currently
+    designed to work with client apps such as <a href="https://github.com/ShareX/ShareX" target="_blank" rel="noopener">ShareX</a> and
+    <a href="https://github.com/flameshot-org/flameshot" target="_blank" rel="noopener">Flameshot</a>. Django Files is currently
     functional but <strong>Under Active Development</strong>. Expect breaking changes until an official
-    <a href="{{ site.github_url }}/releases" target="_blank">release</a> is made.</p>
+    <a href="{{ site.github_url }}/releases" target="_blank" rel="noopener">release</a> is made.</p>
 
-<p>Please open a <a href="{{ site.github_url }}/discussions/new?category=feature-requests" target="_blank">
-    Feature Request</a> or submit an <a href="https://github.com/cssnr/zipline-cli/issues/new" target="_blank">Issue</a> for any bugs.</p>
+<p>Please open a <a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">
+    Feature Request</a> or submit an <a href="{{ site.github_url }}/issues" target="_blank" rel="noopener">Issue</a> for any bugs.</p>
 
 <h2>Running</h2>
 
 <p>Django Files is designed to run with Docker.</p>
 
-<h3>Docker Run</h3>
-
-<pre class="border border-success rounded-3 px-3"><code id="docker-run-inline">
+<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>
+</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  \
   -p 80:80  -v /data/django-files:/data/media  \
   -e SECRET=07Y5uGMWF8icYIJXsKPpbdMm  \
@@ -31,9 +33,11 @@ <h3>Docker Run</h3>
     ghcr.io/django-files/django-files:latest
 </code></pre>
 
-<h3>Docker Compose</h3>
-
-<pre class="border border-success rounded-3 px-3"><code id="docker-compose-inline">
+<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>
+</h3>
+<pre class="border border-success rounded-3 px-3 pb-3"><code id="docker-compose-inline">
 version: '3'
 
 services:
diff --git a/js/main.js b/js/main.js
@@ -1,12 +1 @@
-// $(document).ready(function () {
-//
-//     // // Open Links in New Window
-//     // $('a').each(function() {
-//     //     $(this).click(function (event) {
-//     //         event.preventDefault();
-//     //         event.stopPropagation();
-//     //         window.open(this.href, '_blank');
-//     //     });
-//     // });
-//
-// })
+new ClipboardJS('.clip')
diff --git a/js/screenshots.js b/js/screenshots.js
@@ -1,7 +1,5 @@
 // JS for screenshots.html
 
-// const baseDir = '/screenshots/'
-
 const shotsEl = document.getElementById('swiper-shots')
 const thumbsEl = document.getElementById('swiper-thumbs')
 
@@ -28,7 +26,7 @@ const swiper = new Swiper('.mySwiper', {
     watchSlidesProgress: true,
 })
 
-const swiper2 = new Swiper('.mySwiper2', {
+new Swiper('.mySwiper2', {
     grabCursor: true,
     effect: 'fade',
     loop: true,
diff --git a/screenshots.html b/screenshots.html
@@ -10,7 +10,7 @@
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Django Files - {{ page.title }}</title>
+    <title>{{ site.site_name }} - {{ page.title }}</title>
 
     <meta name="author" content="{{ site.author }}"/>
     <meta name="title" content="{{ site.site_name }} - {{ page.title }}"/>
@@ -20,7 +20,7 @@
     <meta property="og:title" content="{{ site.site_name }} - {{ page.title }}">
     <meta property="og:description" content="{{ site.site_name }} - {{ page.description }}">
     <meta property="og:type" content="website">
-    <meta property="og:url" content="{{ site.site_url }}">
+    <meta property="og:url" content="{{ site.site_url }}{{ page.dir }}">
     <meta property="og:image" content="{{ site.site_url }}/media/logo.png">
 
     <link rel="icon" href="favicon.ico" sizes="any">
@@ -32,15 +32,15 @@
 
 <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
     <div class="swiper-wrapper" id="swiper-shots">
-<!--        <div class="swiper-slide"><img src="screenshots/01_Login.png" alt="01_Login.png"></div>-->
+        {% comment %}<div class="swiper-slide"><img src="01_Login.png" alt="01_Login.png"></div>{% endcomment %}
     </div>
     <div class="swiper-button-next"></div>
     <div class="swiper-button-prev"></div>
     <div class="swiper-pagination"></div>
 </div>
 <div thumbsSlider="" class="swiper mySwiper">
     <div class="swiper-wrapper" id="swiper-thumbs">
-<!--        <div class="swiper-slide"><img src="screenshots/01_Login.png" alt="01_Login.png"></div>-->
+        {% comment %}<div class="swiper-slide"><img src="01_Login.png" alt="01_Login.png"></div>{% endcomment %}
     </div>
 </div>
 

-Original file line number
+Diff line change
@@ @@ -1,3 +1,5 @@ @@
 .idea/
 *.iml
 .vscode/
 +.jekyll-cache/
 +_site/
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`}`
`12`	`12`	`},`
`13`	`13`	`{`
`14`		`- "files": ["*/.json"],`
	`14`	`+ "files": ["*/.json", "*/.yaml"],`
`15`	`15`	`"options": {`
`16`	`16`	`"tabWidth": 2`
`17`	`17`	`}`