homepage/res/index.js

let selectedButtonId = 'button-home';
const loadedScripts = [];

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 = async (pathname) => {
    const route = stripTrailingSlash(pathname);

    switch (route) {
        case '': {
            A('#content-container').load('/pages/home.html');
            break;
        }
        case '/blog': {
            A('meta[name="description"]').attr('content', "hippoz's blog");
            await loadScript('https://cdn.jsdelivr.net/npm/marked/marked.min.js');
            await loadScript('/res/blog.js');
            A('#content-container').load('/pages/blog/blog.html');
            break;
        }
        case '/upload': {
            A('meta[name="description"]').attr('content', "hippoz's upload server");
            A('#content-container').load('/pages/upload.html');
            break;
        }
        case '/git': {
            window.location.href = 'https://git.hippoz.xyz/';
            break;
        }
        case '/about': {
            A('meta[name="description"]').attr('content', "hippoz's about page. i'm hippoz");
            A('#content-container').load('/pages/about.html');
            break;
        }
        case '/contact': {
            A('meta[name="description"]').attr('content', "you can contact hippoz");
            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-blog': '/blog',
    '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);
}

const loadScript = (src) => {
    if (loadedScripts.includes(src)) {
        return;
    }
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.onload = () => {
            loadedScripts.push(src);
            resolve();
        };
        script.onerror = reject;
        script.src = src;
        document.head.appendChild(script);
    });
}

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