Встраивание Github Search на веб-сайт для поиска в определенном репозитории ⇐ Jquery

[Anonymous]

Я надеюсь, что смогу получить некоторую ясность по использованию поиска на GitHub. У меня есть сайт, на который я встроил репозиторий из GitHub. В дополнение к этому, я хотел бы создать панель поиска, где люди могли бы искать только в моем репозитории по всему моему коду и находить любые ключевые слова, которые они вводят и выполняют поиск.
В качестве доказательства концепция Я написал этот HTML-код, который функционально работает именно так, как мне хотелось бы; однако он невероятно неэффективен, поскольку весь код хранится в памяти, что требует чрезвычайно больших ресурсов. Теперь я понимаю, что это, вероятно, ужасная практика; однако это первый фрагмент кода, который я написал самостоятельно, поскольку я не очень хорошо знаком с JavaScript, поэтому я был очень рад, что он у меня заработал. Поскольку большинство, если не все мои проекты, довольно небольшие по размеру, все работает гладко, и когда я что-то ищу, он мгновенно выдает точные результаты. Теперь, несмотря на это, мне интересно, есть ли лучший способ выполнить ту же задачу лучше/более эффективно.
Еще одно препятствие, которое я хотел бы добавить, — это то, что я знаю, что можно попробовать использовать API поиска GitHub, но, к сожалению, у человека, ищущего информацию, должна быть учетная запись GitHub, чтобы иметь возможность выполнять поиск по моему коду, что не будет хорошим решением для моих нужд. Я хотел бы, чтобы результаты поиска возвращали что-то независимо от того, есть ли у кого-то учетная запись GitHub или нет.
Ниже приведено мое POC для кода, который я написал.

Код: Выделить всё

.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);"
}




















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($('[*]' + myDictionary["URL"] +''))
}
});
}
});
},
error : function(response){
if(console && console.log)
console.log('Request Error:', response);
}
});
}
return false;
}

Заранее спасибо!


Подробнее здесь: https://stackoverflow.com/questions/785 ... repository