Add List View (#13)

* Update Config

* Add Theme Switcher

* Update Table

* Add datalist

* Update DT Language Options

Author: smashedr

src/_layouts/default.html

@@ -10,6 +10,8 @@
         <meta name="robots" content="noindex, nofollow">
     {% endif %}
 
+    <meta name="darkreader-lock">
+
     <meta name="author" content="{{ site.author }}"/>
     <meta name="title" content="{{ site.site_name }} - {{ page.title }}"/>
     <meta name="description" content="{{ site.site_name }} - {{ page.description }}"/>
@@ -37,7 +39,7 @@
     {% if page.title == 'Home' %}
         <link rel="stylesheet" href="{{ "/css/index.css" | relative_url }}">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/devicon/2.16.0/devicon.min.css" integrity="sha512-BlFCHJWngPEHme4TwlEob6dPLfoNaQBTTISPwr4344nxR353w2vgGZ7GiSadbbeR20cJeeM0u1I2lAZuIZ1aOQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-        {% comment %}<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />{% endcomment %}
+        <link rel="stylesheet" href="https://cdn.datatables.net/2.1.2/css/dataTables.bootstrap5.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     {% endif %}
     {% if page.title == 'Feedback' %}
         <link rel="stylesheet" href="{{ "/css/feedback.css" | relative_url }}">
@@ -49,16 +51,16 @@
 <div id="tsparticles"></div>
 
 <header>
-    <nav class="navbar navbar-expand-sm bg-body-tertiary mb-2" aria-label="Primary Navigation">
+    <nav aria-label="Primary Navigation" class="navbar navbar-expand-sm bg-body-tertiary mb-2">
         <div class="container-fluid">
             <a class="px-2" href="{{ "/" | relative_url }}">
-                <img src="{{ "/media/logo.png" | relative_url }}" width="30" height="30" alt="logo" class="my-auto"></a>
+                <img alt="logo" src="{{ "/media/logo.png" | relative_url }}" width="30" height="30" class="my-auto"></a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                     aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <div class="collapse navbar-collapse me-auto " id="navbarSupportedContent">
+            <div class="collapse navbar-collapse me-auto" id="navbarSupportedContent">
                 <ul class="navbar-nav me-auto">
                     {% for item in site.menu %}
                         <li class="nav-item">
@@ -67,19 +69,35 @@
                                 {{ item.name }}{% if item.external %} <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i>{% endif %}</a>
                         </li>
                     {% endfor %}
-                </ul>
+                </ul> <!-- main navigation -->
                 <ul class="navbar-nav nav-icons d-flex flex-row">
+
                     <li class="nav-item">
                         <a class="nav-link hvr-grow-lg" href="{{ site.discord_invite }}" target="_blank" rel="noopener">
                             <i class="fa-brands fa-discord fa-xl"></i></a>
                     </li>
+
                     <li class="nav-item">
                         <a class="nav-link hvr-grow-lg" href="{{ site.github_url }}" target="_blank" rel="noopener">
                             <i class="fa-brands fa-github fa-xl"></i></a>
                     </li>
-                </ul>
-            </div>
-        </div>
+
+                    <li class="nav-item dropdown">
+                        <a class="nav-link hvr-grow ms-1" id="bd-theme-disabled" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="min-width: 56px;">
+                            <i id="theme-icon" class="fa-solid fa-circle-half-stroke fa-lg" style="min-width: 20px;"></i> <i class="fa-solid fa-caret-down fa-xs mx-1"></i></a>
+                        <ul class="dropdown-menu auto dropdown-menu-end" aria-labelledby="bd-theme-disabled">
+                            <li><button class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
+                                    <i class="fa-regular fa-moon" style="min-width: 16px;"></i> <span class="ms-3">Dark</span></button></li>
+                            <li><button class="dropdown-item" data-bs-theme-value="light" aria-pressed="false">
+                                    <i class="fa-solid fa-sun" style="min-width: 16px;"></i> <span class="ms-3">Light</span></button></li>
+                            <li><button class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
+                                    <i class="fa-solid fa-circle-half-stroke" style="min-width: 16px;"></i> <span class="ms-3">Auto</span></button></li>
+                        </ul>
+                    </li>
+
+                </ul> <!-- icons -->
+            </div> <!-- navbar -->
+        </div> <!-- container -->
     </nav>
 </header>
 

src/css/feedback.css

@@ -14,27 +14,31 @@ body {
 }
 
 [data-bs-theme='dark'] #content-wrapper {
-    background-color: rgba(0 0 0 / 50%);
+    background-color: rgba(var(--bs-black-rgb), 0.5);
     filter: drop-shadow(15px 15px 12px #000000);
 }
 [data-bs-theme='light'] #content-wrapper {
-    background-color: rgba(255 255 255 / 60%);
+    background-color: rgba(var(--bs-white-rgb), 0.5);
 }
 
 [data-bs-theme='dark'] .form-control {
-    background-color: rgba(0 0 0 / 50%);
+    background-color: rgba(var(--bs-black-rgb), 0.5);
 }
 [data-bs-theme='light'] .form-control {
-    background-color: rgba(255 255 255 / 50%);
+    background-color: rgba(var(--bs-white-rgb), 0.5);
 }
 
 [data-bs-theme='dark'] .navbar,
-[data-bs-theme='dark'] .footer {
+[data-bs-theme='dark'] .footer,
+[data-bs-theme='dark'] .dropdown-menu {
     backdrop-filter: blur(6px);
-    background-color: rgba(0 0 0 / 50%) !important;
+    background-color: rgba(var(--bs-black-rgb), 0.5) !important;
+    z-index: 1;
 }
 [data-bs-theme='light'] .navbar,
-[data-bs-theme='light'] .footer {
+[data-bs-theme='light'] .footer,
+[data-bs-theme='light'] .dropdown-menu {
     backdrop-filter: blur(6px);
-    background-color: rgba(255 255 255 / 50%) !important;
+    background-color: rgba(var(--bs-white-rgb), 0.5) !important;
+    z-index: 1;
 }

src/css/index.css

@@ -10,22 +10,12 @@
 
     pointer-events: none;
     user-select: none;
-}
-
-[data-bs-theme='dark'] #scroll-down {
-    text-shadow:
-        0 0 3px #000,
-        0 0 6px #000,
-        0 0 9px #000,
-        0 0 12px #000;
-}
 
-[data-bs-theme='light'] #scroll-down {
     text-shadow:
-        0 0 3px #f8f9fa,
-        0 0 6px #f8f9fa,
-        0 0 9px #f8f9fa,
-        0 0 12px #f8f9fa;
+        0 0 3px var(--bs-body-bg),
+        0 0 6px var(--bs-body-bg),
+        0 0 9px var(--bs-body-bg),
+        0 0 12px var(--bs-body-bg);
 }
 
 .bounce {
@@ -43,3 +33,9 @@
         bottom: 0;
     }
 }
+
+@media (min-width: 768px) {
+    .dt-paging {
+        margin-right: 30px !important;
+    }
+}

src/html/about.html

@@ -36,29 +36,29 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-regular fa-address-ca
             <a href="https://github.com/smashedr" class="text-decoration-none" target="_blank" rel="noopener">
                 <picture>
                     <source
-                            srcset="https://github-readme-stats.vercel.app/api?username=smashedr&theme=dark&show_icons=true&hide_rank=true&show=reviews&card_width=350"
+                            srcset="https://github-readme-stats.cssnr.com/?username=smashedr&theme=dark&show_icons=true&hide_rank=true&show=reviews&card_width=350"
                             media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
                     />
                     <source
-                            srcset="https://github-readme-stats.vercel.app/api?username=smashedr&theme=default&show_icons=true&hide_rank=true&show=reviews&card_width=350"
+                            srcset="https://github-readme-stats.cssnr.com/?username=smashedr&theme=default&show_icons=true&hide_rank=true&show=reviews&card_width=350"
                             media="(prefers-color-scheme: light)"
                     />
-                    <img alt="GitHub Stats Dynamic Display" src="https://github-readme-stats.vercel.app/api?username=smashedr&show_icons=true&hide_rank=true&show=reviews&card_width=350" />
+                    <img alt="GitHub Stats Dynamic Display" src="https://github-readme-stats.cssnr.com/?username=smashedr&show_icons=true&hide_rank=true&show=reviews&card_width=350" />
                 </picture>
             </a>
         </div><!-- flex item -->
         <div class="me-md-3">
             <a href="https://github.com/smashedr" class="text-decoration-none" target="_blank" rel="noopener">
                 <picture>
                     <source
-                            srcset="https://github-readme-stats.vercel.app/api/top-langs/?username=smashedr&theme=dark&layout=donut"
+                            srcset="https://github-readme-stats.cssnr.com/top-langs/?username=smashedr&theme=dark&layout=donut"
                             media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
                     />
                     <source
-                            srcset="https://github-readme-stats.vercel.app/api/top-langs/?username=smashedr&theme=default&layout=donut"
+                            srcset="https://github-readme-stats.cssnr.com/top-langs/?username=smashedr&theme=default&layout=donut"
                             media="(prefers-color-scheme: light)"
                     />
-                    <img alt="Top Languages Dynamic Display" src="https://github-readme-stats.vercel.app/api/top-langs/?username=smashedr&layout=donut" />
+                    <img alt="Top Languages Dynamic Display" src="https://github-readme-stats.cssnr.com/top-langs/?username=smashedr&layout=donut" />
                 </picture>
             </a>
         </div><!-- flex item -->

src/html/feedback.html

@@ -13,19 +13,23 @@
                 <h1 class="align-middle mb-0">{{ site.site_name }} {{ page.title }}</h1>
         </div>
         <p class="text-center lead">
-            Provide General Feedback or Ask a Question.
+            Provide General Feedback or Suggestions.
         </p>
         <form id="uninstall-form">
             <input type="hidden" value="{{ site.relay_url }}" id="relay-url" hidden="hidden">
 
-            <select id="app-list" class="form-select form-select-lg form-control mb-3" aria-label="Select Feedback Reason">
-                <option value="General Feedback" selected>Select an Application (Optional)</option>
-            </select>
+            <label for="selected-app" class="form-label visually-hidden">Datalist example</label>
+            <input id="selected-app" class="form-control" list="app-list" placeholder="Subject or Application. Type to Search...">
+            <datalist id="app-list"></datalist>
+
+            {% comment %}<select id="app-list" class="form-select form-select-lg form-control mb-3" aria-label="Select Feedback Reason">{% endcomment %}
+                {% comment %}<option value="General Feedback" selected>Select an Application (Optional)</option>{% endcomment %}
+            {% comment %}</select>{% endcomment %}
 
             <div class="my-2">
                 <label for="feedback-text" class="form-label visually-hidden">Uninstall Feedback</label>
                 <textarea class="form-control" id="feedback-text" rows="5" maxlength="1000"
-                          placeholder="Questions, Comments, Concerns, etc..." autofocus></textarea>
+                          placeholder="Feedback, Comments, Concerns, etc..." autofocus></textarea>
                 <span id="inputCounter" class="float-end label label-default"><span id="input-count">0</span> / 1000</span>
             </div>
             <button id="submit-btn" class="btn btn-success w-100" type="submit">

src/html/index.html

@@ -6,6 +6,18 @@
 ---
 
 <div class="container-fluid">
+
+    <div class="float-end" style="z-index: 9; position: relative;">
+        <button type="button" class="btn btn-outline-secondary view-toggle" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-trigger="hover"
+                data-bs-title="Card View" id="cards-view" data-view="cards">
+            <i class="fa-solid fa-table"></i>
+        </button>
+        <button type="button" class="btn btn-outline-secondary view-toggle" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-trigger="hover"
+                data-bs-title="List View<br>(Beta)" data-bs-html="true" id="list-view" data-view="list">
+            <i class="fa-solid fa-table-list"></i>
+        </button>
+    </div>
+
     <h1 class="animate__animated animate__zoomIn"><i class="fa-brands fa-github me-2"></i> {{ site.site_name }}</h1>
 
     <p class="lead">
@@ -28,28 +40,51 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-brands fa-github me-2
         </p>
     </div>
 
-    <p>
-        <a href="#web-extensions" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
-            Web Extensions</a> &bull;
-        <a href="#web-apps" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
-            Web Apps</a> &bull;
-        <a href="#github-actions" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
-            GitHub Actions</a> &bull;
-        <a href="#other-software" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
-            Other Software</a>
-    </p>
+    <div id="cards" class="d-none">
+        <p>
+            <a href="#web-extensions" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
+                Web Extensions</a> &bull;
+            <a href="#web-apps" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
+                Web Apps</a> &bull;
+            <a href="#github-actions" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
+                GitHub Actions</a> &bull;
+            <a href="#other-software" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
+                Other Software</a>
+        </p>
 
-    <h2 id="web-extensions">Web Extensions</h2>
-    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4" id="webExtensions"></div>
+        <h2 id="web-extensions">Web Extensions</h2>
+        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4" id="webExtensions"></div>
 
-    <h2 id="web-apps" class="" data-aos="zoom-in">Web Apps</h2>
-    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4" id="webApps"></div>
+        <h2 id="web-apps" class="" data-aos="zoom-in">Web Apps</h2>
+        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4" id="webApps"></div>
 
-    <h2 id="github-actions" class="" data-aos="zoom-in">GitHub Actions</h2>
-    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4" id="githubActions"></div>
+        <h2 id="github-actions" class="" data-aos="zoom-in">GitHub Actions</h2>
+        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4" id="githubActions"></div>
 
-    <h2 id="other-software" class="" data-aos="zoom-in">Other Software</h2>
-    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4" id="otherSoftware"></div>
+        <h2 id="other-software" class="" data-aos="zoom-in">Other Software</h2>
+        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4" id="otherSoftware"></div>
+    </div>
+    <div id="table" class="d-none mb-1">
+        <table class="table" id="data-table">
+            <thead>
+            <tr>
+                <th scope="col"></th>
+                <th scope="col">Name</th>
+                <th scope="col">Description</th>
+                <th scope="col"></th>
+                <th scope="col"></th>
+            </tr>
+            </thead>
+            <tbody>
+            {% comment %}<tr>{% endcomment %}
+                {% comment %}<th scope="row">1</th>{% endcomment %}
+                {% comment %}<td>Mark</td>{% endcomment %}
+                {% comment %}<td>Otto</td>{% endcomment %}
+                {% comment %}<td>@mdo</td>{% endcomment %}
+            {% comment %}</tr>{% endcomment %}
+            </tbody>
+        </table>
+    </div>
 
 </div> <!-- container -->
 
@@ -81,10 +116,19 @@ <h4 class="card-title">
     <i class="devicon-python-plain colored" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Python"></i>
     <i class="devicon-javascript-plain colored" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="JavaScript"></i>
     <i class="devicon-typescript-plain colored" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="TypeScript"></i>
+    <i class="devicon-docker-plain" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Docker"></i>
+
 </div> <!-- clone -->
 
 {% comment %}<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>{% endcomment %}
 {% comment %}<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>{% endcomment %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+{% comment %}<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>{% endcomment %}
+<script type="text/javascript" src="https://cdn.datatables.net/2.1.2/js/dataTables.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/2.1.2/js/dataTables.bootstrap5.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/responsive/3.0.2/js/responsive.dataTables.js"></script>
 
 <script type="text/javascript" src="{{ "/js/config.js" | relative_url }}"></script>
 <script type="text/javascript" src="{{ "/js/index.js" | relative_url }}"></script>