Bluscream/generator.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Github Compare Link Generator


http://minopia.de/gh/compare/?base=https://github.com/IKennyAgain/iw4x_waypoints/tree/master&compare=https://github.com/xlabs-mirror/iw4x-bot-waypoints/tree/master


## generator.html
<!DOCTYPE html>
<html>
<!-- Example: http://minopia.de/gh/compare/?base=https://github.com/IKennyAgain/iw4x_waypoints/tree/master&compare=https://github.com/xlabs-mirror/iw4x-bot-waypoints/tree/master -->
<head>
    <meta charset="UTF-8">
    <title>GitHub Compare URL Generator</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        .dark-mode {
            background-color: rgb(71, 71, 71);
            color: white;
            /* Add additional CSS properties for dark mode */
        }
    </style>
    <script>
        function init() {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('base')) {
                baseBranch = urlParams.get('base');
                document.getElementById("baseBranch").value = baseBranch;
            }
            if (urlParams.has('compare')) {
                compareBranch = urlParams.get('compare');
                document.getElementById("compareBranch").value = compareBranch;
            }

            document.body.classList.add('dark-mode');
            // Add additional elements to apply dark mode class to by default
            document.querySelector('.navbar').classList.add('dark-mode');
            document.querySelector('.container').classList.add('dark-mode');
            // Add more elements as needed

            // Toggle dark mode when the button is clicked
            document.getElementById('darkModeToggle').addEventListener('click', function() {
                document.body.classList.toggle('dark-mode');
                // Toggle dark mode on additional elements
                document.querySelector('.navbar').classList.toggle('dark-mode');
                document.querySelector('.container').classList.toggle('dark-mode');
                // Add more elements as needed
            });
        }
    </script>
</head>

<body onload="init()">

    <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="#">GitHub Compare URL Generator</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
            aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="darkModeToggle" href="#">&#128526;</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <h1>GitHub Compare URL Generator</h1>
        <form id="compareForm">
            <div class="form-group">
                <label for="baseBranch">Base Branch URL:</label>
                <input type="text" class="form-control" id="baseBranch" placeholder="Enter base branch URL">
            </div>
            <div class="form-group">
                <label for="compareBranch">Compare Branch URL:</label>
                <input type="text" class="form-control" id="compareBranch" placeholder="Enter compare branch URL">
            </div>
            <button type="button" class="btn btn-primary" onclick="generateCompareURL()">Generate Compare URL</button>
        </form></br>
        <div id="compareURLContainer" style="display: none;">
            <h3>Generated Compare URL:</h3></br></br>
            <font size="+1"><a id="compareURL" target="_blank"></a></br></br>
            <a id="compareURLreversed" target="_blank"></a></font>
        </div>
    </div>

    <script>
        function generateCompareURL() {
            var baseURLinput = document.getElementById("baseBranch").value;
            console.log("baseURLinput:",baseURLinput);
            var base = extractInfoFromGitHubUrl(baseURLinput);
            console.log("baseUser:",base.user,"baseRepo:",base.repo,"baseBranch",base.branch);

            var compareURLinput = document.getElementById("compareBranch").value;
            console.log("compareURLinput:",compareURLinput);
            var compare = extractInfoFromGitHubUrl(compareURLinput);
            console.log("compareUser:",compare.user,"compareRepo:",compare.repo,"compareBranch",compare.branch);

            //https://github.com/xlabs-mirror/xlabs-dpmaster-py/compare/master...xlabs-mirror:xlabs-dpmaster-py:main?expand=1

            var compareURL = "https://github.com/" + base.user + "/" + base.repo + "/compare/" + base.branch + "..." + compare.user + ":" + compare.repo + ":" + compare.branch + "?expand=1";
            document.getElementById("compareURL").textContent = compareURL;
            document.getElementById("compareURL").href = compareURL;

            var compareURLreversed = "https://github.com/" + compare.user + "/" + compare.repo + "/compare/" + compare.branch + "..." + base.user + ":" + base.repo + ":" + base.branch + "?expand=1";
            document.getElementById("compareURLreversed").textContent = compareURLreversed;
            document.getElementById("compareURLreversed").href = compareURLreversed;

            document.getElementById("compareURLContainer").style.display = "block";
        }

        function extractInfoFromGitHubUrl(url) {
            // Remove the leading "https://" if it exists
            url = url.replace(/^https?:\/\//, '');

            // Remove the trailing slash if it exists
            url = url.replace(/\/$/, '');

            // Extract the user, repo, and branch using regular expressions
            const matches = url.match(/github\.com\/([^\/]+)\/([^\/]+)\/tree\/([^\/]+)/);

            if (matches && matches.length === 4) {
                const user = matches[1];
                const repo = matches[2];
                const branch = matches[3];

                return {
                    user,
                    repo,
                    branch
                };
            }

            // Return an object with null values if the URL format is not recognized
            return {
                user: null,
                repo: null,
                branch: null
            };
        }


    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<!-- Example: http://minopia.de/gh/compare/?base=https://github.com/IKennyAgain/iw4x_waypoints/tree/master&compare=https://github.com/xlabs-mirror/iw4x-bot-waypoints/tree/master -->
	<head>
	<meta charset="UTF-8">
	<title>GitHub Compare URL Generator</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<style>
	.dark-mode {
	background-color: rgb(71, 71, 71);
	color: white;
	/* Add additional CSS properties for dark mode */
	}
	</style>
	<script>
	function init() {
	const urlParams = new URLSearchParams(window.location.search);
	if (urlParams.has('base')) {
	baseBranch = urlParams.get('base');
	document.getElementById("baseBranch").value = baseBranch;
	}
	if (urlParams.has('compare')) {
	compareBranch = urlParams.get('compare');
	document.getElementById("compareBranch").value = compareBranch;
	}

	document.body.classList.add('dark-mode');
	// Add additional elements to apply dark mode class to by default
	document.querySelector('.navbar').classList.add('dark-mode');
	document.querySelector('.container').classList.add('dark-mode');
	// Add more elements as needed

	// Toggle dark mode when the button is clicked
	document.getElementById('darkModeToggle').addEventListener('click', function() {
	document.body.classList.toggle('dark-mode');
	// Toggle dark mode on additional elements
	document.querySelector('.navbar').classList.toggle('dark-mode');
	document.querySelector('.container').classList.toggle('dark-mode');
	// Add more elements as needed
	});
	}
	</script>
	</head>

	<body onload="init()">

	<nav class="navbar navbar-expand-lg">
	<a class="navbar-brand" href="#">GitHub Compare URL Generator</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
	aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
	<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
	<li class="nav-item active">
	<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="darkModeToggle" href="#">😎</a>
	</li>
	</ul>
	</div>
	</nav>

	<div class="container">
	<h1>GitHub Compare URL Generator</h1>
	<form id="compareForm">
	<div class="form-group">
	<label for="baseBranch">Base Branch URL:</label>
	<input type="text" class="form-control" id="baseBranch" placeholder="Enter base branch URL">
	</div>
	<div class="form-group">
	<label for="compareBranch">Compare Branch URL:</label>
	<input type="text" class="form-control" id="compareBranch" placeholder="Enter compare branch URL">
	</div>
	<button type="button" class="btn btn-primary" onclick="generateCompareURL()">Generate Compare URL</button>
	</form></br>
	<div id="compareURLContainer" style="display: none;">
	<h3>Generated Compare URL:</h3></br></br>
	<font size="+1"><a id="compareURL" target="_blank"></a></br></br>
	<a id="compareURLreversed" target="_blank"></a></font>
	</div>
	</div>

	<script>
	function generateCompareURL() {
	var baseURLinput = document.getElementById("baseBranch").value;
	console.log("baseURLinput:",baseURLinput);
	var base = extractInfoFromGitHubUrl(baseURLinput);
	console.log("baseUser:",base.user,"baseRepo:",base.repo,"baseBranch",base.branch);

	var compareURLinput = document.getElementById("compareBranch").value;
	console.log("compareURLinput:",compareURLinput);
	var compare = extractInfoFromGitHubUrl(compareURLinput);
	console.log("compareUser:",compare.user,"compareRepo:",compare.repo,"compareBranch",compare.branch);

	//https://github.com/xlabs-mirror/xlabs-dpmaster-py/compare/master...xlabs-mirror:xlabs-dpmaster-py:main?expand=1

	var compareURL = "https://github.com/" + base.user + "/" + base.repo + "/compare/" + base.branch + "..." + compare.user + ":" + compare.repo + ":" + compare.branch + "?expand=1";
	document.getElementById("compareURL").textContent = compareURL;
	document.getElementById("compareURL").href = compareURL;

	var compareURLreversed = "https://github.com/" + compare.user + "/" + compare.repo + "/compare/" + compare.branch + "..." + base.user + ":" + base.repo + ":" + base.branch + "?expand=1";
	document.getElementById("compareURLreversed").textContent = compareURLreversed;
	document.getElementById("compareURLreversed").href = compareURLreversed;

	document.getElementById("compareURLContainer").style.display = "block";
	}

	function extractInfoFromGitHubUrl(url) {
	// Remove the leading "https://" if it exists
	url = url.replace(/^https?:\/\//, '');

	// Remove the trailing slash if it exists
	url = url.replace(/\/$/, '');

	// Extract the user, repo, and branch using regular expressions
	const matches = url.match(/github\.com\/([^\/]+)\/([^\/]+)\/tree\/([^\/]+)/);

	if (matches && matches.length === 4) {
	const user = matches[1];
	const repo = matches[2];
	const branch = matches[3];

	return {
	user,
	repo,
	branch
	};
	}

	// Return an object with null values if the URL format is not recognized
	return {
	user: null,
	repo: null,
	branch: null
	};
	}


	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	</body>

	</html>