feat: [#101] footer component

* feat: footer component

Author: cd-bash

src/components/footer/index.ts

@@ -0,0 +1,33 @@
+import { insertAllSocials } from "../socials";
+
+export type FooterLinkItem = [
+    name: string,
+    path: string,
+]
+
+const copyrightText = `© All rights reserved ${new Date().getFullYear()} / cd-labs`;
+
+//-----------------------------------------------------------------------
+
+export function buildFooter(links: FooterLinkItem[] = []) {
+    const footer = document.createElement("footer");
+    footer.id = "main-footer";
+
+    // Create a container for socials and copyrights on the same line
+    const footerContent = document.createElement("div");
+    footerContent.className = "footer-content";
+
+    const socials = insertAllSocials();
+    socials.classList.add('footer-socials');
+
+    const copyrights = document.createElement("p");
+    copyrights.className = "copyrights";
+    copyrights.textContent = copyrightText;
+
+    // Add socials first (left side), then copyrights
+    footerContent.appendChild(socials);
+    footerContent.appendChild(copyrights);
+    footer.appendChild(footerContent);
+
+    return footer;
+}

src/components/socials/assets/github-icon.svg

@@ -0,0 +1,53 @@
+import GITHUB_ICON from './assets/github-icon.svg';
+import LINKEDIN_ICON from './assets/linkedin-icon.svg';
+import INSTAGRAM_ICON from './assets/instagram-icon.svg';
+
+type social = {
+    name: string;
+    url: string;
+    iconSrc: string;
+}
+
+export const socials: social[] = [
+    {
+        name: 'GitHub',
+        url: 'https://github.com/cd-bash',
+        iconSrc: GITHUB_ICON,
+    },
+    {
+        name: 'LinkedIn',
+        url: 'https://www.linkedin.com/in/charlesdouc/',
+        iconSrc: LINKEDIN_ICON,
+    },
+    {
+        name: 'Instagram',
+        url: 'https://www.instagram.com/cd.oucet/',
+        iconSrc: INSTAGRAM_ICON,
+    },
+]
+
+//-----------------------------------------------------------------------
+
+export function insertAllSocials() {
+    const container = document.createElement('ul');
+    container.className = 'social-icons';
+
+    socials.forEach(social => {
+        const li = document.createElement('li');
+        const a = document.createElement('a');
+        a.href = social.url;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+
+        const img = document.createElement('img');
+        img.src = social.iconSrc;
+        img.alt = `${social.name} Icon`;
+        img.className = 'social-icon';
+
+        a.appendChild(img);
+        li.appendChild(a);
+        container.appendChild(li);
+    });
+    
+    return container;
+}

src/components/socials/assets/instagram-icon.svg

@@ -1,13 +1,15 @@
 import { router } from "./core/router";
-import {homeView, aboutView, buildViewBase, renderView, logArticleView } from "./views";
+import {homeView, aboutView, buildViewBase, renderView, logArticleView, contactView} from "./views";
 import {buildNavigation} from "./components/navigation";
 import {changeLogoOnScroll} from "./components/navigation/logo";
+import { buildFooter } from "./components/footer";
 
 
 const routes = [
     { path: '', handler: () => renderView(homeView()) },
     { path: '/about', handler: () => renderView(aboutView()) },
-    { path: '/logs', handler: () => renderView(logArticleView()) }
+    { path: '/logs', handler: () => renderView(logArticleView()) },
+    { path: '/contact', handler: () => renderView(contactView()) } 
 ];
 
 routes.forEach(route => router.registerRoute(route.path, route.handler));
@@ -18,12 +20,13 @@ function init() {
     const body = document.getElementsByTagName("body")[0];
     const contentPage = buildViewBase();
     const nav = buildNavigation();
+    const footer = buildFooter();
 
     body.appendChild(nav);
     window.addEventListener('scroll', changeLogoOnScroll);
 
     body.appendChild(contentPage);
-    
+    body.appendChild(footer);
 
     router.handleRoute(window.location.pathname);
 }

src/components/socials/assets/linkedin-icon.svg

@@ -18,6 +18,8 @@
   --font-secondary: 'Handjet', serif;
 
   /* Font Sizes */
+  --text-3xs: clamp(0.6rem, 1vw, 0.7rem);
+  --text-2xs: clamp(0.7rem, 1.5vw, 0.8rem);
   --text-xs: clamp(0.8rem, 2vw, 0.9rem);
   --text-sm: clamp(0.9rem, 2.5vw, 1.1rem);
   --text-base: clamp(1.1rem, 3vw, 1.5rem);

src/components/socials/index.ts

@@ -18,7 +18,7 @@
 .cta-banner article {
   position: relative;
   z-index: var(--z-content);
-  padding: var(--space-md) var(--space-lg);
+  padding: var(--space-md) 0;
   background-color: white;
   width: fit-content;
   display: grid;
@@ -49,10 +49,12 @@
 /* -------------------------------------------------------------------------- */
 .cta-banner article.right {
   margin-left: auto;
+  padding-left: var(--space-lg);
 }
 
 .cta-banner article.left {
   margin-right: auto;
+  padding-right: var(--space-lg);
 }
 
 /* -------------------------------------------------------------------------- */
@@ -97,6 +99,8 @@
   .cta-banner article.right, .cta-banner article.left {
     margin-left: 0;
     margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .cta-banner ul {

src/index.ts

@@ -0,0 +1,33 @@
+/* ==========================================================================
+   Footer Component
+   ========================================================================== */
+
+#main-footer {
+    min-height: 75px;
+    width: 85%;
+    margin: 0 auto;
+    
+    .footer-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-md) 0;
+        border-top: 1px solid var(--color-border);
+        gap: var(--space-md);
+    }
+    
+    .footer-socials {
+        order: 1; /* Ensures socials come first */
+        flex-shrink: 0; /* Prevents shrinking */
+    }
+    
+    .copyrights {
+        order: 2; /* Ensures copyrights come second */
+        margin: 0;
+        font-size: var(--text-3xs);
+        text-transform: uppercase;
+        color: var(--color-text-secondary);
+        text-align: left;
+        flex-grow: 1; /* Takes remaining space */
+    }
+}

src/styles/base/variables.css

@@ -0,0 +1,20 @@
+/* ==========================================================================
+   Socials Component
+   ========================================================================== */
+
+.social-icons {
+    list-style: none;
+    display: flex;
+    gap: var(--space-sm);
+
+    img {
+        width: 30px;
+        height: 30px;
+        filter: var(--filter-icon);
+        transition: filter var(--transition-base);
+
+        &:hover {
+            filter: var(--filter-icon-hover);
+        }
+    }
+}