homepage/res/index.js

let selectedButtonId = 'button-home';

const changeSelected = (buttonId) => {
    A(`#${selectedButtonId}`).removeClass('button-selected');
    A(`#${buttonId}`).addClass('button-selected');
    selectedButtonId = buttonId;
};

const stripTrailingSlash = (str) => {
    return str.endsWith('/') ? str.slice(0, -1) : str;
};

const peformRouteAction = (pathname) => {
    const route = stripTrailingSlash(pathname);

    switch (route) {
        case '': {
            A('#content-container').load('/pages/home.html');
            break;
        }
        case '/upload': {
            A('#content-container').load('/pages/upload.html');
            break;
        }
        case '/git': {
            window.location.href = 'https://git.hippoz.xyz/';
            break;
        }
        case '/about': {
            A('#content-container').load('/pages/about.html');
            break;
        }
        case '/contact': {
            A('#content-container').load('/pages/contact.html');
            break;
        }
        case '/404': {}
        default: {
            A('#content-container').html('<h2>page not found</h2><p>i think</p>');
            break;
        }
    }
};

const buttonMap = {
    'button-home': '/',
    'button-file-server': '/upload',
    'button-git-server': '/git',
    'button-about-me': '/about',
    'button-contact-me': '/contact',
    '__NOT_FOUND': '/404'
}

const onButtonClick = (buttonId) => {
    if (selectedButtonId === buttonId) {
        return;
    }
    changeSelected(buttonId);

    let route = buttonMap[buttonId];
    if (!route) {
        route = buttonMap['__NOT_FOUND'];
    }

    peformRouteAction(route);

    history.pushState({ route }, '', route);
};

const getButtonFromPathname = (pathname) => {
    let button = 'button-home';
    for (const [k, v] of Object.entries(buttonMap)) {
        if (v === pathname) {
            button = k;
            break;
        }
    }
    return button;
}

const updateFromCurrentPathname = () => {
    let pathname = window.location.pathname;
    if (!pathname || pathname === '' || pathname === ' ') {
        pathname = '/';
    }

    const buttonId = getButtonFromPathname(pathname);
    changeSelected(buttonId);
    peformRouteAction(pathname);
}

A(() => {
    A('.navigation-buttons .button-default').each((el) => {
        A(el).on('click', () => {
            onButtonClick(el.id);
        });
    });
    updateFromCurrentPathname();
});