chore: allow for empty icon with a default fallback

index.html

@@ -88,20 +88,6 @@ <h3 class="font-bold text-lg mb-4 dark:text-white">
           <div>
             <h3 class="font-bold text-lg mb-4 dark:text-white">Community</h3>
             <ul class="space-y-2">
-              <li>
-                <a
-                  href="https://communityinviter.com/apps/developerfriendly/join-our-slack"
-                  class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
-                  >Join our Slack!</a
-                >
-              </li>
-              <li>
-                <a
-                  href="https://stackoverflow.com/users/8282345/meysam"
-                  class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
-                  >Stack Overflow</a
-                >
-              </li>
               <li>
                 <a
                   href="https://github.com/meysam81/listings-directory/discussions"

mkdocs.yml

@@ -123,10 +123,13 @@ markdown_extensions:
   - markdown.extensions.md_in_html
   - markdown.extensions.tables
   - md_in_html
+  - footnotes
   - pymdownx.betterem
   - pymdownx.blocks.caption
   - pymdownx.details
   - pymdownx.superfences
+  - pymdownx.snippets:
+      url_download: !ENV [URL_DOWNLOAD, true]
   - pymdownx.highlight:
       use_pygments: true
       pygments_lang_class: true

public/listings.json

@@ -1,16 +1,20 @@
 {
-  "dev": [
+  "code": [
     {
-      "icon_url": "https://static-00.iconduck.com/assets.00/prometheus-icon-511x512-1vmxbcxr.png",
-      "label": "Prometheus dev",
-      "url": "https://prometheus.dev.example.com"
+      "icon_url": "https://github.com/fluidicon.png",
+      "label": "Source Code",
+      "url": "https://github.com/meysam81/listings-directory"
+    },
+    {
+      "label": "Author",
+      "url": "https://github.com/meysam81"
     }
   ],
-  "prod": [
+  "docs": [
     {
-      "icon_url": "https://static-00.iconduck.com/assets.00/prometheus-icon-511x512-1vmxbcxr.png",
-      "label": "Prometheus prod",
-      "url": "https://prometheus.example.com"
+      "icon_url": "/favicon.ico",
+      "label": "Documentation",
+      "url": "https://meysam81.github.io/listings-directory/"
     }
   ]
 }

src/index.js

@@ -9,7 +9,7 @@ function toggleDarkMode() {
 function createEnvironmentTabs(environments) {
   var tabContainer = document.getElementById("tabContainer");
   var tabsHtml = environments
-    .map(function (env, index) {
+    .map(function renderEnvironmentButton(env, index) {
       return (
         '<button class="tab-button px-4 py-2 rounded-md ' +
         (index == 0
@@ -28,9 +28,9 @@ function createEnvironmentTabs(environments) {
   tabContainer.classList.remove("hidden");
 
   var tabButtons = tabContainer.querySelectorAll(".tab-button");
-  tabButtons.forEach(function (button) {
-    button.addEventListener("click", function () {
-      tabButtons.forEach(function (btn) {
+  tabButtons.forEach(function tabButtonEventListener(button) {
+    button.addEventListener("click", function tabButtonHandler() {
+      tabButtons.forEach(function renderTabButton(btn) {
         btn.classList.remove("bg-blue-500", "text-white");
         btn.classList.add(
           "bg-gray-200",
@@ -53,21 +53,31 @@ function createEnvironmentTabs(environments) {
   });
 }
 
+function imageHtml(item) {
+  if (!item.icon_url) {
+    item.icon_url = "/default.png"
+  }
+  var iconHtml =
+    '<img src="' +
+    item.icon_url +
+    '" alt="' +
+    item.label +
+    '" class="w-12 h-12 rounded-full">';
+
+  return iconHtml;
+}
+
 function renderListings(listings) {
   var listingsContainer = document.getElementById("listingsContainer");
 
   var listingsHtml = listings
-    .map(function (item) {
+    .map(function renderListing(item) {
       return (
         '<a href="' +
         item.url +
         '" target="_blank" class="block">' +
         '<div class="flex items-center space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">' +
-        '<img src="' +
-        item.icon_url +
-        '" alt="' +
-        item.label +
-        '" class="w-12 h-12 rounded-full">' +
+        imageHtml(item) +
         "<div>" +
         '<h3 class="text-lg font-semibold text-gray-800 dark:text-white">' +
         item.label +