index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repositories</title>
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0 5% 0 7%;
        }

        .gh-avatar-top {
            margin: 2% auto -2.5% auto;
            zoom: 35%;
            display: block;
            /* display: none;  /* disable element, override other 'display' opt */
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 10px;
            padding-top: 2%;
        }

        /* GH avatar left of the title */
        h1::before
        {
            content:'';
            background-image: url(favicon.png); /*use tree here*/
            width: 270px;
            height: 270px;
            zoom: 20%;
            vertical-align: middle;
            margin: 0px 4rem 20px 0px;
            display: inline-block;
            display: none;  /* disable element, override other 'display' opt */
        }


        .button-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            gap: 10px;
        }

        .button-container button {
            flex: 1 1 auto; /* split horizontal space equally*/
            min-width: 2rem; 
            max-width: 12rem; 
            padding: 10px 20px;
            font-size: 16px;
            white-space: nowrap;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background-color: #6a737d; /* Softer background color */
            color: white;
            transition: background-color 0.1s;
            text-align: center;
        }


        .button-container button.active {
            background-color: #3e4e5d; /* Darker shade for active button */
        }

        .button-container button:hover {
            background-color: #5c6f77;
        }

        .search-bar-container {
            display: flex;
            justify-content: center;
            margin-top: 32px;
            margin-bottom: 24px;
            padding: 16px 10px;
        }

        #search-bar {
            max-width: 1200px;
            min-width: 20rem; 
            width: 55%;
            padding: 12px 20px; /* bar space around text */
            justify: center; 
            box-sizing: border-box;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* Style for the container holding the repository list */
        #repo-wrapper {
            display: flex;
            justify-content: center;
            padding: 0 10px; /* Adjust as needed to add horizontal padding */
        }

        #repo-container {
            max-width: 1200px; /* Set the maximum width you want for the container */
            min-width: 20rem; 
            width: 55%; /* Make the container responsive */
            box-sizing: border-box; /* Include padding and border in the element's total width and height */
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        .repo-item {
            background-color: #fff;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 1px 3px rgba(27,31,35,0.12), 0 8px 24px rgba(27,31,35,0.08);
            transition: transform 0.2s;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .repo-item:hover {
            transform: translateY(-3px);
        }

        .repo-item h2 {
            font-size: 20px;
            margin: 0;
            color: #0366d6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .repo-item .repo-type {
            font-size: 16px;
            color: #586069;
        }

        .repo-item p {
            margin: 10px 0;
            color: #586069;
            font-size: 14px;
        }

        .repo-item .language-topics {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .repo-item .language {
            color: #586069;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .repo-item .language .language-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        .repo-item .topics {
            text-align: right;
            font-size: 12px;
            color: #586069;
        }

        .repo-item .topics span {
            background-color: #e1e4e8;
            border-radius: 3px;
            padding: 2px 6px;
            margin-left: 5px;
            white-space: nowrap;
        }

        .topic-title {
            font-size: 24px;
            margin-top: 30px;
            color: #333;
        }

        /* Style for the sticky footer text */
        #sticky-footer-text {
            position: fixed;
            bottom: 1%;
            left: 1%;
            color: #333;
            font-size: 14px;
            z-index: 1000; /* Ensure it stays on top */
        }

        #sticky-footer-text a {
            color: #0366d6;
            text-decoration: none;
        }

        /* Style for the sticky index */
        #sticky-index {
            position: fixed;
            bottom: 10%;
            left: 1%;
            background: #fff;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            padding: 10px;
            font-size: 18px;
            width: 12%;
            color: #333;
            font-style: bolder;
            box-shadow: 0 1px 2px rgba(27,31,35,0.12), 0 4px 12px rgba(27,31,35,0.08);
            z-index: 1000; /* Ensure it stays on top */
            max-height: 70%; /* Limit the height to ensure it doesn't overflow */
            overflow-y: auto; /* Add scrolling if the content is too long */
        }

        #sticky-index a {
            display: block;
            color: #0366d6;
            text-decoration: none;
            margin-bottom: 8px;
        }

        #sticky-index a:hover {
            text-decoration: underline;
        }

        .sticky-index-item {
            font-size: 18px;
            line-height: 1.4;
        }

		/* Mobile changes: layouts spread vertically */ 
        @media (max-width: 600px) {
            .button-container { flex-direction: column; align-items: stretch; margin: 0 10px 0 10px; }
            .button-container button { max-width: none; width: 100%; box-sizing: border-box; }
			#search-bar { max-width: 100%; width: 100%; box-sizing: border-box; }
			#repo-container { max-width: none; width: 100%; }
			#sticky-index { display: none !important; }
        }

    </style>
</head>
<body>

    <a href="https://github.com/pabsan-0/">
        <img class="gh-avatar-top" src="favicon.png"></img>
    </a>
            
    <h1>Repositories of pabsan-0</h1>
    <div class="button-container">
        <button id="group-by-category" class="active">Group by Category</button>
        <button id="group-by-topic">Group by Topic</button>
        <button id="group-by-language">Group by Language</button>
    </div>

    <div class="search-bar-container">
        <input type="text" id="search-bar" placeholder="Search repositories..." autofocus />
    </div>
        
    <div id="repo-wrapper">
        <div id="repo-container"></div>
    </div>
    <div id="sticky-index"></div> <!-- Sticky index container -->
    <div id="sticky-footer-text">
        Showing <span id="repo-count">0</span> public repositories. <a href="https://github.com/pabsan-0/repos" target="_blank">View source on GitHub</a>.
    </div>

    <script>

        // Utility function to get GitHub language color
        function getLanguageColor(language) {
            const colors = {
                'JavaScript': '#f1e05a',
                'Python': '#3572A5',
                'HTML': '#e34c26',
                'CSS': '#563d7c',
                'Ruby': '#701516',
                'Java': '#b07219',
                'PHP': '#4F5D95',
                'C++': '#f34b7d',
                'C#': '#178600',
                'C': '#555555',
                'Shell': '#89e051',
                'Go': '#00ADD8',
                'TypeScript': '#2b7489',
                'Other': '#ccc'
            };
            return colors[language] || colors['Other'];
        }

        // Utility function to get the appropriate icon for repo type
        function getRepoIcon(repo) {
            if (repo.fork) {
                return '<i class="fas fa-code-branch" title="Fork"></i>';
            } else if (repo.is_template) {
                return '<i class="far fa-file-code" title="Template"></i>';
            } else {
                return '<i class="fa fa-book" title="Source"></i>';
            }
        }

        // Function to generate HTML for a single repository
        function generateRepoHtml(repo) {
            const language = repo.language || 'Other';
            const languageColor = getLanguageColor(language);
            const repoIcon = getRepoIcon(repo);

            return `
                <li>
                    <a href="${repo.html_url}" class="repo-item" target="_blank">
                        <h2 id="${repo.name}">${repo.name} <span class="repo-type">${repoIcon}</span></h2>
                        <p>${repo.description || 'No description available'}</p>
                        <div class="language-topics">
                            <span class="language">
                                <span class="language-color" style="background-color: ${languageColor};"></span>
                                ${language}
                            </span>
                            <span class="topics">${repo.topics.map(topic => `<span>${topic.replace('repos-', '.')}</span>`).join('')}</span>
                        </div>
                    </a>
                </li>
            `;
        }

        // Function to generate the HTML for a list of repositories
        function generateRepoListHtml(repos) {
            return `<ul>${repos.map(generateRepoHtml).join('')}</ul>`;
        }

        // Function to group repositories by a specific property
        function groupReposBy(repos, groupByFunc) {
            return repos.reduce((groups, repo) => {
                const groupKey = groupByFunc(repo);
                if (!groups[groupKey]) groups[groupKey] = [];
                groups[groupKey].push(repo);
                return groups;
            }, {});
        }

        // Function to append a group of repositories to the container
        function appendGroup(container, groupName, repos) {
            const groupHtml = `
                <div id="${groupName}" class="repo-group">
                    <h2 class="topic-title">${groupName}</h2>
                    ${generateRepoListHtml(repos)}
                </div>
            `;
            container.innerHTML += groupHtml;
        }

        // Function to update sticky index
        function updateStickyIndex(groups) {
            const stickyIndex = document.getElementById('sticky-index');
            stickyIndex.innerHTML = ''; // Clear the current index
            stickyIndex.style.display = 'block' // enable visualization

            if (groups.length > 0) {
                const indexHtml = groups.map(group => `<a href="#${group}" class="sticky-index-item">${group}</a>`).join(' ');
                stickyIndex.innerHTML = indexHtml;
            }

        }

        // Function to render repositories grouped by category
        function renderGroupedRepos(groupedRepos) {
            const repoContainer = document.getElementById('repo-container');
            repoContainer.innerHTML = ''; // Clear the container

            const sortedKeys = Object.keys(groupedRepos).filter(key => key !== 'Other');
            const otherRepos = groupedRepos['Other'] || [];

            updateStickyIndex(sortedKeys.concat('Other')); // Update sticky index

            sortedKeys.forEach(group => {
                appendGroup(repoContainer, group, groupedRepos[group]);
            });

            if (otherRepos.length > 0) {
                appendGroup(repoContainer, 'Other', otherRepos);
            }

        }

        // Function to display repositories grouped by category
        function displayReposByCategory(repos) {
            const groupedByCategory = groupReposBy(repos, (repo) => {
                const relevantTopics = repo.topics.filter(topic => topic.startsWith('repos-'));
                return relevantTopics.length > 0 ? relevantTopics.join(', ').replace(/^repos-/, '') : 'Other';
            });
            renderGroupedRepos(groupedByCategory);
        }

        // Function to display repositories grouped by language
        function displayReposByLanguage(repos) {
            const groupedByLanguage = groupReposBy(repos, (repo) => repo.language || 'Other');
            renderGroupedRepos(groupedByLanguage);
        }

        // Function to display repositories grouped by topic
        function displayReposByTopic(repos) {
            const groupedByTopic = groupReposBy(repos, (repo) => {
                const relevantTopics = repo.topics.filter(topic => !topic.startsWith('repos-'));
                return relevantTopics.length > 0 ? relevantTopics.join(', ') : 'Other';
            });
            renderGroupedRepos(groupedByTopic);
        }

        // Function to display repositories without grouping
        function displayReposNoGroups(repos) {
            const repoContainer = document.getElementById('repo-container');
            repoContainer.innerHTML = generateRepoListHtml(repos);

            // hide sticky index, must be cleared when brought up again
            document.getElementById('sticky-index').style.display = 'none';
        }

        // Function to update button styles
        function updateButtonStyles(activeButtonId) {
            const buttons = document.querySelectorAll('.button-container button');
            buttons.forEach(button => {
                button.classList.toggle('active', button.id === activeButtonId);
            });
        }

        // Function to fetch and display repositories
        async function getRepos() {
            try {
                const urlParams = new URLSearchParams(window.location.search);
                const initialGrouping = urlParams.get('groupby') || 'category';
                const argumentUser = urlParams.get('user') || null;


				// Seek username target for github API requests
				// User name priority: argument, github io url, or fallback 
				let user = null;
				if (argumentUser) {
					user = argumentUser;
				} else if (window.location.href.includes("github.io")) {
					user = new URL(window.location.href).host.split('.')[0];
				} else {
					console.warn("Are you testing locally? Falling back to hardcoded user");
					user = 'pabsan-0';
				}
				document.querySelector("h1").textContent = `Repositories of ${user}`;

				/* 
				// TODO: not a priority, this yields square image rather than circle
				// Side request to handle user image
                const user_info_res = await fetch(`https://api.github.com/users/${user}`);
                if (!user_info_res.ok) throw new Error(`HTTP error! Status: ${user_info_res.status}`);
                const user_info = await user_info_res.json();
			 	if (user_info.avatar_url) {
					document.querySelector("img").src = user_info.avatar_url;
				}
				*/

				// Main request of repos and processing 
				const apiUrl = `https://api.github.com/users/${user}/repos?per_page=100`;

                const response = await fetch(apiUrl);
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                const repos = await response.json();

                document.getElementById('repo-count').textContent = repos.length;

				if (repos.length == 100) {
					console.warn("Repos number equals 100, some may be missing! Github API pagination still to be implemented.")
				}

                function handleButtonClick(buttonId, displayFunc) {
                    if (document.getElementById(buttonId).classList.contains('active')) {
                        displayReposNoGroups(repos);
                        updateButtonStyles('');
                    } else {
                        displayFunc(repos);
                        updateButtonStyles(buttonId);
                    }
                }

                document.getElementById('group-by-category').addEventListener('click', () => {
                    handleButtonClick('group-by-category', displayReposByCategory);
                });

                document.getElementById('group-by-topic').addEventListener('click', () => {
                    handleButtonClick('group-by-topic', displayReposByTopic);
                });

                document.getElementById('group-by-language').addEventListener('click', () => {
                    handleButtonClick('group-by-language', displayReposByLanguage);
                });

                switch (initialGrouping) {
                    case 'topic':
                        displayReposByTopic(repos);
                        updateButtonStyles('group-by-topic');
                        break;
                    case 'language':
                        displayReposByLanguage(repos);
                        updateButtonStyles('group-by-language');
                        break;
                    case 'none':
                        displayReposNoGroups(repos);
                        updateButtonStyles('group-no-groups');
                        break;
                    default:
                        displayReposByCategory(repos);
                        updateButtonStyles('group-by-category');
                }
            } catch (error) {
                console.error('Error fetching the repository data:', error);
            }
        }

        document.getElementById('search-bar').addEventListener('input', function() {
            const query = this.value.toLowerCase();
            const repos = document.querySelectorAll('.repo-item');

            repos.forEach(repo => {
                const name = repo.querySelector('h2').innerText.toLowerCase();
                const description = repo.querySelector('p').innerText.toLowerCase();
                const topics = repo.querySelector('.topics').innerText.toLowerCase();
                const language = repo.querySelector('.language').innerText.toLowerCase();

                if (name.includes(query) || description.includes(query) || topics.includes(query) || language.includes(query)) {
                    repo.style.display = '';
                } else {
                    repo.style.display = 'none';
                }
            });
        });

        getRepos();
    </script>
</body>
</html>