custom.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600" rel="stylesheet">
<meta name='zd-site-verification' content='xj9koofr1crilmoclgxsjd' />

<script type="text/javascript">


    function setActiveClassForCurrentUrl() {
        // Find all links in the navbarCollapse div where the href attribute is set to the current URL
        let anchorTag = document.querySelector('#navbarCollapse a[href="' + window.location.href + '"]');

        if (anchorTag) {

            // Find the closest parent of the navigation
            let parentUl = anchorTag.closest('li.nav-item')?.querySelector('a.nav-link');

            if (parentUl) {
                // Add active class to both the anchor tag and the parent ul
                anchorTag.classList.add('active');
                parentUl.classList.add('active');
            }
        }
    }

    window.addEventListener('popstate', setActiveClassForCurrentUrl);
    window.addEventListener('hashchange', setActiveClassForCurrentUrl);

    document.addEventListener("DOMContentLoaded", function () {
        const badges = Array.from(document.querySelectorAll(".tag-filter-badge"));
        const items = Array.from(document.querySelectorAll(".tag-filter-item"));
        if (badges.length === 0 || items.length === 0) return;

        const getTags = (item) => {
            const fromDataAttr = (item.getAttribute("data-tags") || "")
            .toLowerCase()
            .split(/\s+/)
            .filter(Boolean);

            if (fromDataAttr.length > 0) {
            return new Set(fromDataAttr);
            }

            const fromBadges = Array.from(item.querySelectorAll(".badge"))
            .flatMap((el) => Array.from(el.classList))
            .filter((cls) => cls.startsWith("badge-"))
            .map((cls) => cls.replace("badge-", "").toLowerCase());

            return new Set(fromBadges);
        };

        const applyFilter = () => {
            const activeBadges = badges.filter((b) => b.classList.contains("active"));
            const selectedTags = new Set(activeBadges.map((b) => b.getAttribute("data-tag")));

            items.forEach((item) => {
            const tags = getTags(item);
            const visible = Array.from(selectedTags).some((tag) => tags.has(tag));
            item.hidden = !visible;
            });
        };

        badges.forEach((badge) => {
            badge.addEventListener("click", function (e) {
            e.preventDefault();
            this.classList.toggle("active");
            this.classList.toggle("inactive");
            applyFilter();
            });
        });

        applyFilter();
        });



    window.onload = () => {
        const elems = document.getElementsByClassName('navbar-title');
        if (elems.length > 0) {
            const title = elems[0];
            title.parentElement.href = '/index.html'
        }
        setActiveClassForCurrentUrl();
    }

 
</script>