Add Devicon (#11)

* Add Devicon

* Cleanup

Author: smashedr

src/_layouts/default.html

@@ -36,6 +36,8 @@
 
     {% 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 %}
     {% endif %}
     {% if page.title == 'Feedback' %}
         <link rel="stylesheet" href="{{ "/css/feedback.css" | relative_url }}">

src/css/main.css

@@ -6,8 +6,8 @@ body {
 
 #back-to-top {
     position: fixed;
-    bottom: 64px;
-    right: 20px;
+    bottom: 50px;
+    right: 10px;
     display: none;
     z-index: 3;
 }

src/html/index.html

@@ -68,9 +68,13 @@ <h4 class="card-title">
             <div class="card-footer"></div>
         </div>
     </div>
-    <i class="fa-brands fa-js" title="JavaScript"></i>
-    <i class="fa-brands fa-python" title="Python"></i>
-    <i class="fa-solid fa-terminal" title="Shell Script"></i>
+    {% comment %}<i class="fa-brands fa-js" title="JavaScript"></i>{% endcomment %}
+    {% comment %}<i class="fa-brands fa-python" title="Python"></i>{% endcomment %}
+    {% comment %}<i class="fa-solid fa-terminal" title="Shell Script"></i>{% endcomment %}
+    <i class="devicon-powershell-plain" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Shell Script"></i>
+    <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>
 </div> <!-- d-none clone -->
 
 <div class="text-center bounce d-none" id="scroll-down">

src/js/config.js

@@ -330,6 +330,33 @@ const githubActions = [
         },
         fa: 'faPython',
     },
+    {
+        name: 'JavaScript Template Action',
+        url: 'https://github.com/smashedr/js-test-action',
+        description: 'Template for JavaScript Actions.',
+        links: {
+            GitHub: 'https://github.com/smashedr/js-test-action',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'TypeScript Template Action',
+        url: 'https://github.com/smashedr/ts-test-action',
+        description: 'Template for TypeScript Actions.',
+        links: {
+            GitHub: 'https://github.com/smashedr/ts-test-action',
+        },
+        fa: 'faTs',
+    },
+    {
+        name: 'Python Template Action',
+        url: 'https://github.com/smashedr/py-test-action',
+        description: 'Template for Python Actions.',
+        links: {
+            GitHub: 'https://github.com/smashedr/py-test-action',
+        },
+        fa: 'faPython',
+    },
 ]
 const otherSoftware = [
     {

src/js/index.js

@@ -9,9 +9,10 @@ const actionsContainer = document.getElementById('actions-container')
 const otherContainer = document.getElementById('other-container')
 
 const faIcons = {
-    faPython: document.querySelector('.clone .fa-python'),
-    faJs: document.querySelector('.clone .fa-js'),
-    faShell: document.querySelector('.clone .fa-terminal'),
+    faPython: document.querySelector('.clone .devicon-python-plain'),
+    faJs: document.querySelector('.clone .devicon-javascript-plain'),
+    faTs: document.querySelector('.clone .devicon-typescript-plain'),
+    faShell: document.querySelector('.clone .devicon-powershell-plain'),
 }
 
 // // Scroll Handlers
@@ -74,6 +75,13 @@ async function domContentLoaded() {
         checkScroll()
     }
 
+    document
+        .querySelectorAll('[data-bs-toggle="tooltip"]')
+        .forEach((el) => new bootstrap.Tooltip(el))
+    // document
+    //     .querySelectorAll('[data-bs-toggle="popover"]')
+    //     .forEach((el) => new bootstrap.Popover(el))
+
     AOS.init({ disable: 'mobile' })
     // AOS.init()