I’m hoping I can get some clarity on using github search. I have a site where I embedded my repository from github on my site. In addition to this, I would like to create a search bar where people can search just my repository across all my code and pull up any keywords they type in and search.
As a proof of concept I wrote this HTML that functionally works exactly as I would like it to; however, it is incredibly inefficient because it stores all the code into memory which is extremely resource intensive. Now I realize this is probably terrible practice; however this is the first piece of code I did on my own since I’m not super familiar with JavaScript, so I was thrilled that I got it working. Since most, if not all of my projects are fairly small in size, everything runs smoothly and when I do a search for something it pulls up accurate results instantly. Now despite this, I’m wondering if there is a better way of performing the same task in a better/more efficient way.
Another hurdle I’d like to add is I know I can try to use github’s search API, unfortunately the person searching would have to have a github account for them to be able to search my code, which wouldn’t be a good solution for my needs. I would like the search results to return something regardless of whether or not someone has a github account.
Below is my POC for the code I wrote.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.gitHubSearch
{
padding: 20px 3% 20px 3%;
}
.SearchBarContainer
{
width: 100%;
display: flex;
-webkit-box-align: center;
align-items: center;
flex-direction: column;
}
.SearchBar
{
padding: 20px 8px 20px 8px;
width: 100%;
max-width: 600px;
text-align: center;
}
@media (min-width: 768px)
{
.TextInput-wrapper
{
font-size: 14px;
}
}
.SearchResults
{
width: 100%;
}
.TextInput-wrapper
{
font-size: 14px;
line-height: 20px;
color: var(--fgColor-default, var(--color-fg-default, #1F2328));
vertical-align: middle;
background-color: var(--bgColor-default, var(--color-canvas-default, #ffffff));
border: 1px solid var(--control-borderColor-rest, var(--borderColor-default, var(--color-border-default, #d0d7de)));
border-radius: 6px;
outline: none;
box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset, inset 0 1px 0 rgba(208, 215, 222, 0.2)));
display: inline-flex;
-webkit-box-align: stretch;
align-items: stretch;
min-height: 32px;
overflow: hidden;
width: 100%;
height: 42px;
background-repeat: no-repeat;
background-position: right 8px center;
padding-left: 12px;
padding-right: 12px;
width: 100%;
height: 42px;
}
svg
{
display: inline-block;
user-select: none;
vertical-align: text-bottom;
overflow: visible;
}
.svgicon
{
color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
width: 16px;
height: 16px;
}
@media screen and (min-width: 544px)
{
.svgicon
{
width: 20px;
height: 20px;
}
}
.TextInput-wrapper > input, .TextInput-wrapper > select
{
padding-left: 2%;
padding-right: 2%;
}
.TextBox
{
border: 0px;
font-size: inherit;
font-family: inherit;
background-color: transparent;
appearance: none;
color: inherit;
width: 100%;
}
button, input, select, textarea
{
font: inherit;
margin: 0;
}
button, input
{
overflow: visible;
}
input, select, textarea, button
{
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.TextInput-wrapper .TextInput-icon, .TextInput-wrapper .TextInput-action
{
align-self: center;
color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
flex-shrink: 0;
}
input#Search_Code:focus
{
outline: none;
}
li.SearchResults
{
padding: 3px;
}
li::marker
{
content: "";
}
li.SearchResults:nth-child(even)
{
background-color:rgba(0, 0, 0, 0.25);"
}
</style>
</head>
<body>
<div class="gitHubSearch">
<div class="SearchBarContainer">
<div class="SearchBar">
<span class="TextInput-wrapper" aria-busy="false">
<span class="TextInput-icon">
<svg aria-hidden="true" focusable="false" role="img" class="svgicon" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
</svg>
</span>
<input ID="Search_Code" type="text" aria-label="Search Repository" autofocus="" placeholder="Search Repository" data-component="input" class="TextBox" value="" onkeypress="handle(event)">
</span>
</div>
<div class="SearchResults"></div>
</div>
<script>
function handle(e)
{
var Search_Code = document.getElementById("Search_Code").value;
//Reset the results each time you Search
jQuery('div[class="SearchResults"]').empty();
if((e.keyCode === 13) && (Search_Code))
{
//Initialize our new dictionary variable
var myDictionary = {};
var Search = new RegExp(Search_Code, 'gi');
var _this = this
$.ajax({
url: 'https://api.github.com/repos/jkulikowski84/Code/git/trees/main?recursive=1',
type: 'GET',
data: {},
dataType: 'jsonp',
success: function(response){
//For each branch do stuff
$.each(response.data.tree, function(i){
//We only want files
if(this.type == 'blob')
{
//Initialize our variables
var link = null, content = null;
//Our link to pull data from
link = "https://raw.githubusercontent.com/jkulikowski84/Code/main/" + (this.path).replace(/ /g,"%20");
//Get the content from link above
fetch(link)
.then(function(response) {
return response.text();
}).then(function(data) {
// This is the meat of the code logic
//Store the data in our Content variable
content = data;
//Populate our dictionary with all of our file URL's and the content of each file
myDictionary["URL"] = link;
myDictionary["Content"] = content;
//Print to Console for Debugging purposes.
//console.log(myDictionary);
//Check if our dictionary has the search we're looking For
if((myDictionary["URL"]).match(Search) || (myDictionary["Content"]).match(Search))
{
//Append to body of html
$("div.SearchResults").append($('<li class="SearchResults">' + myDictionary["URL"] +'</li>'))
}
});
}
});
},
error : function(response){
if(console && console.log)
console.log('Request Error:', response);
}
});
}
return false;
}
</script>
</div>
</body>
</html>
Thanks in advance!