made footer links customizable

src/content/links.json

@@ -125,6 +125,31 @@
       "href": "https://youtube.com/@brulijam",
       "icon": "https://simpleicons.org/icons/youtube.svg",
       "group": 2
+    },
+    {
+      "name": "source code",
+      "href": "https://git.brulijam.com/brulijam/introduction-website",
+      "group": "footer"
+    },
+    {
+      "name": "links json",
+      "href": "content/links.json",
+      "group": "footer"
+    },
+    {
+      "name": "status",
+      "href": "https://status.brulijam.com/status/brulijam",
+      "group": "footer"
+    },
+    {
+      "name": "files",
+      "href": "https://brulijam.com/files",
+      "group": "footer"
+    },
+    {
+      "name": "music",
+      "href": "https://brulijam.com/music",
+      "group": "footer"
     }
   ],
   "groupNames": {

src/css/main.css

@@ -82,15 +82,24 @@ h2 {
     }
 }
 
+.text-link::before {
+    content: "[";
+}
+
+.text-link::after {
+    content: "]";
+}
+
 .text-link {
     color: var(--secondary-color);
-    text-decoration: underline solid var(--secondary-color2) 1px;
+    text-decoration: none;
     position: relative;
-    padding: 0 2px;
+    padding: 5px;
+    white-space: nowrap;
+    display: inline-block;
 }
 
 .text-link:hover {
-    text-decoration: underline solid var(--secondary-color) 1px;
     filter: drop-shadow(0 0 5px var(--secondary-color2)) brightness(1.02);
     top: -2px;
 }

src/index.html

@@ -61,13 +61,7 @@
         </noscript>
     </section>
     <br>
-    <footer>
+    <footer></footer>
-        <a class="text-link" href="https://git.brulijam.com/brulijam/introduction-website" target="_blank">source code</a>
-        <a class="text-link" href="content/links.json" target="_blank">links.json</a>
-        <a class="text-link" href="https://status.brulijam.com/status/brulijam">status</a>
-        <a class="text-link" href="https://brulijam.com/files" target="_blank">files</a>
-        <a class="text-link" href="https://brulijam.com/music" target="_blank">music</a>
-    </footer>
 </main>
 </body>
 </html>

src/js/links.js

@@ -13,31 +13,51 @@ function createLinkDiv(link) {
     return linkDiv;
 }
 
+function createFooterLink(link) {
+    const footerLink = document.createElement('a');
+    footerLink.className = 'text-link';
+    footerLink.href = link.href;
+    footerLink.target = '_blank';
+    footerLink.textContent = link.name;
+    return footerLink;
+}
+
 function createGroups(linksData, groupNames) {
     const container = document.querySelector('.links');
+    const footer = document.querySelector('footer');
 
     const groups = [...new Set(linksData.map(link => link.group))].sort((a, b) => a - b);
 
     groups.forEach((group, index) => {
-        const groupContainer = document.createElement('div');
+        if (group === "footer") {
-        groupContainer.className = 'linkGroup';
+            linksData
+                .filter(link => link.group === "footer")
+                .forEach(link => {
+                    const footerLink = createFooterLink(link);
+                    footer.appendChild(footerLink);
+                });
+        } else {
+            // Handle regular links
+            const groupContainer = document.createElement('div');
+            groupContainer.className = 'linkGroup';
 
-        const groupHeader = document.createElement('h2');
+            const groupHeader = document.createElement('h2');
-        groupHeader.textContent = `${groupNames[group]}`;
+            groupHeader.textContent = `${groupNames[group]}`;
-        groupContainer.appendChild(groupHeader);
+            groupContainer.appendChild(groupHeader);
 
-        linksData
+            linksData
-            .filter(link => link.group === group)
+                .filter(link => link.group === group)
-            .forEach(link => {
+                .forEach(link => {
-                const linkElement = createLinkDiv(link);
+                    const linkElement = createLinkDiv(link);
-                groupContainer.appendChild(linkElement);
+                    groupContainer.appendChild(linkElement);
-            });
+                });
 
-        container.appendChild(groupContainer);
+            container.appendChild(groupContainer);
 
-        if (index < groups.length - 1) {
+            if (index < groups.length - 1) {
-            const br = document.createElement('br');
+                const br = document.createElement('br');
-            container.appendChild(br);
+                container.appendChild(br);
+            }
         }
     });
 }