#Anyone very familiar with using GitHub API

194 messages · Page 1 of 1 (latest)

twin finch
#

I'm working on a project where I'd like to get a lot of dependencies information and other repo information from this API. But beyond this '/repos/{owner}/{repo}/' call, I haven't really been able to find the information I'm looking for. If you have any interest for more info about what I'm looking for leave me your @ so I can reach out to you. Thanks.

sonic tide
twin finch
#

Hey @sonic tide ,
I looked at this specifically, https://docs.github.com/en/rest/packages/packages?apiVersion=2022-11-28#list-packages-for-a-user

But seems harder than it should be. If I try this call

await octokit.request('GET /users/{username}/packages', {
  username: 'USERNAME',
  headers: {
    'X-GitHub-Api-Version': '2022-11-28'
  }
})

It says I can't do that call with just a personal access token. Then I tried to create a Github app connect it to my github account. Make that call and it says bad credentials.

I was making this call work with just my personal access token. So I know I can sort of do stuff with the API

await octokit.request("GET /repos/{owner}/{repo}", {
  owner: 'RawleJuglal',
  repo:'glampers'
}).then(res => console.log(res))
GitHub Docs
Packages - GitHub Docs
sonic tide
twin finch
#

Yeah I’ve never used scopes so I’ll have to read more to be on the same page as you but you are welcome to clone any just a sec I’ll get you a link to one

#

This is the final project in advanced react with Bob

#

Or do you need one pushed to MetLife

#

Netlify

sonic tide
# twin finch Or do you need one pushed to MetLife

Oh I mean do you have a repo with the code you are currently using with the github api project? I can just make a very basic one of my own.

They have two different options. They have the personal access token (classic) which has access to certain endpoints that a fine-grained access token doesn't have. I assume the fine grained token is the one you set scopes on. But from what I'm reading it is more for your own personal accounts, or organizations you are a part of. There is a mention of availability for open source projects assuming that don't restrict token access for their repository.

twin finch
#

This project is the one I want to use it on, and yeah I used a fine grain token, maybe should have used classic

sonic tide
#

So are you just essentially trying to use it for access to your own repo/s to list dependencies from it/them?

twin finch
#

Yeah I want my portfolio to be able to filter projects by dependencies which I thought maybe I could use the API to get that info then sort

#

Rather than just hard code and add projects each time I make a new one

sonic tide
#

That's actually pretty neat! Great idea! So there is a read:packages scope let me send you the link for it... just a minute...

#

there was no hash, it's about halfway down to show the scopes you can use

twin finch
sonic tide
#

rather the page is a table of scopes to use

twin finch
#

here is the figma file for what I"m after

sonic tide
#

These scopes are used to have dine grain access so that someone can't manipulate data in your repo. You would likely only want to set read-only scopes rather than write scopes (can modify things in your repo and delete things).

twin finch
#

so I was setting a lot of that to read only when I went to right click portfolio > settings > Developer Settings > Personal Access Token > Fine Grain

Do you think I should have done classic instead and that's why I couldn't get to the endpoints I'm after

#

Or the OAuth above that

sonic tide
#

That's actually a good question. I'm not terribly sure. But I guess we can always find out lol. Though they do have a list of endpoints for the fine-grained api... https://docs.github.com/en/rest/overview/endpoints-available-for-fine-grained-personal-access-tokens?apiVersion=2022-11-28. Though classic might not provide what you think it does. It might be worth a shot to see if it's easier. https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#fine-grained-personal-access-tokens one of the bullet points here for fine-grained is that they only allow access to specific repositories under a user or organization. So I wonder if that means you have to have a token for each repo or if it should be admin scoped to allow access to all repos? I'm not sure.

#

it also states that fine-grained access tokens are in beta and are subject to change

#

It also says that when creating the access token, that you should select the repos that the token should have access to. I'm sorry if i'm going over what you've already went through...

twin finch
#

no your fine, I'm gonna have to stop for the evening so dont work any further I'll try again tomorrow

sonic tide
#

This is the query you are looking for.

#

It is a dependency graph. The only issue is that it lists ALL dependencies including peer dependencies. This works with fine-grained.... just tried it.

The other one that queries packages are for repos that are npm packages and such. So that is why that didn't work. Wrong query lol... sorry for leading you astray. Hopefully this gets you what you need. Lot's packages to sift through though.

#

there is one other quick option to let you know... give me just a second

twin finch
#

Not bothered by the stray route I’d really like to learn a lot more on this API think I’d use it more than here so no worries

#

Oh yeah that is pretty good so then I could just take my fetch of all repos then replace Glampers with other repo names, nice

sonic tide
#

Yeah, that way it's a little less to deal with... you can focus on getting done with simplicity and work on adding complexity as you go lol. Once you get the request,

data.dependencies

will be what you need and then you can grab each dependency

const deps = Object.keys(data.dependencies) //Array of dependency names

Not to stop you from adding stuff to your tool belt, but to get a quick solution for this one.

#

Ok lol I'll leave you alone for the evening! Let me know if I can help you with anything else though lol

twin finch
#

Thanks Ray! What you can help me with is letting me cashapp at some point for always being helpful!

sonic tide
#

I live in the stone age man 🤣 I've never had one! But thank you for the offer! However, I did find a GH api solution that is much better than the dependency graph solution, so last one lol!

 octokit.request('GET /repos/{owner}/{repo}/contents/{path}', {
    owner: 'RawleJuglal',
    repo: 'glampers',
    //specify the file path that you want the content of
    path: 'package.json',
    headers: {
      'X-GitHub-Api-Version': '2022-11-28',
      //set the accept header for raw content
      //similar to the url for the quick solution
      //otherwise it is base64 encoded and requires a little
      //more code
      'accept': 'application/vnd.github.raw'
    }
  }).then(response => {
      //response.data is going to be the stringified json...
      //we need to parse it to turn into an object
      const packageJson = JSON.parse(response.data)

      //log the dependencies
      //same solution as the raw url solution
      console.log(packageJson.dependencies)

      //and if still interested we can do the same thing
      //as above
      const deps = Object.keys(packageJson.dependencies) //array of deps names
    //...do what you need to with them

    })

This assumes that you want to stick with the api and not do the raw url string provided. Path in this example can be any file path in the repo... readme's or whatever....

url for that query https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28

Ok lol I promise that was the last one... I just happened to stumble across this and tried it with my repo... it works. I just replaced the repo and owner properties with yours so you could just copy the code and run it locally to see if it works for you. Just remove the comments whenever. Happy coding!

twin finch
#

Ok I may try this one and the raw tomorrow thanks man

stuck sequoia
#

I skimmed read through this thread and it seems you just want it for your personal use which means you likely don't need to make repeated calls.
So instead of using the octokit package for it, you can simply use the old REST API which is still available (less reliable)

https://api.github.com/users/{username}/

your list of repos https://api.github.com/users/RawleJuglal/repos

#

I see you need specific packages from each project. then the above endpoint won't work.

A simpler not so intricate way could be just to add topics/tags to your repos and the REST api will have that.

twin finch
#

Right on, @stuck sequoia , I did make my call for the repos like that but then I started trying to get more infomation out of it so then it said I was reaching a limit because I wasn't authenticated. So I've gone for the octokit route which I'm slowly understanding these calls

#

@sonic tide ,
Any idea how I go about finding info I put in this section to call for it. I added that screengrab then looked at the call to see if I could find anything like social image or other keyword and I did not. Not sure how to go about searching for it in the API docs. Below is the call that I filter just the repos and then look through all the keys so far I've found the usuable things like: id, name, createdAt, homepage, languages

const repos = await octokit.request('GET /users/{username}/repos', {
    username: 'RawleJuglal',
    per_page:100,
    headers: {
      'X-GitHub-Api-Version': '2022-11-28'
    }
  })
  .then(res => {
   return res.data.filter(ele => !ele.archived)
  })
Screenshot_89.png
sonic tide
#

@twin finch I'm not sure, but let me see if I can find something. My initial thought is that these would be repo specific settings. So you might have to make additional calls for each specific repo and find the settings. Let me see if I can find something in the api docs that might be useful.

#

What information, specifically, are you trying to grab?

twin finch
#

really just that screenshot

#

in the social preview

#

i was thinking I could fill in that info for each project then I would be able to pull it for each repository rather than write some code to add a screenshot to each one

sonic tide
#

Ok. Looking now

twin finch
#

ok I guess I could look closer at that path thing right and put an image in my src folder somewhere and reference that...

that seem right?

sonic tide
#

Yeah, I was literally here typing out a long-winded explanation that that could be an option 😆 I re-read your question and it's literally what I was about to explain! You could certainly try it! Let me see if there is a raw url option for it as well.

twin finch
#

oh sorry haha, you can do the long winded thing...jk

sonic tide
#

added the raw url to an image element for this... this was the vite/react logo from your repo

Screenshot_82.png
#

it show up just above welcome

Screenshot_81.png
#

if you go to any of your repos, go to one that has an image. open the file with the image. Once you do, there is a button in the markdown with the code in it. It says raw. Click on it. It will open whatever you have in the browser as raw content. Copy the url and use that... I have an idea for that as well if you'd like to hear.

twin finch
#

ok let me test that but then yeah tell me the idea too, because wouldn't I need to get the raw for everyone and then hardcode that call into each repo object

#

this is me saying that w/o having looked up at that path thing yet

sonic tide
#

Yes, if you have no other option than to go that route 👀 no pun intended

#

so what you could do if you have to hard code it... is make a map of each repo name and have the value as the url....

since you are likely gonig to have to restructure some data coming in from the api call, you could do something like this...

const repoImageUrls = {
   "glampers": "https://raw.githubusercontent.com/RawleJuglal/glampers/master/public/vite.svg",
  "HomeReadyRenovations": "some-other-raw-url/<path>"
}

Then from the data coming back you could look it up like so,

octokit('GET whatever/path/it/was/repos', {/*options*/})
  .then(response => {
    //whatever the property name is for the repo name, i'll just assume 'name'
      const repoInfo = response.data.map(repo => {
          return {
            name: repo.name,
            //other info
            imageUrl: repoImageUrls[repo.name]
            //etc
          }
       })
    })

Just shape the data whatever way you want, but this is just a rough draft idea lol

#

I don't really remember the queries that come back, so this code is just psuedo

twin finch
#

yeah I get this, yeah this is probably what I'll have to do then. And just remember to go back any time I add a new repo/project

sonic tide
#

that just assumes path doesn't work for this too. It may be a bit tedious to type out, but in the long run, it will save you some api calls for each repo found. And possibly some headache in code timing for the calls.

#

Ok, and one last thing to save a few minutes lol you could do this to get a list of all repo names and copy past from the console into a file and just replace the values with the urls.

octokit('GET whatever/path/it/was/repos', {/*options*/})
  .then(response => {
    //whatever the property name is for the repo name, i'll just assume 'name'
      const repoImageUrls = {}
      const repoInfo = response.data.forEach(repo => {
          repoImageUrls[repo.name] = repo.name
       })
      console.log(repoImageUrls)
    })

That will ensure that there won't be any typos when looking up the url in the map because it will be based on the data returned from the api.

twin finch
#

Ok this is what returned in path, would that html url work or probably not thats just to the github page not the raw image

content: "iVBORw0KGgoAAAANSUhEUgAABQAAAAKACAYAAADD89WhAAABh
download_url: "https://raw.githubusercontent.com/RawleJuglal/ImOnIt/master/src/assets/screengrab/screengrab.png"
encoding: "base64"
git_url: "https://api.github.com/repos/RawleJuglal/ImOnIt/git/blobs/3b5b1d3958645060f7f9b56a2723c057b1f35a2e"
html_url: "https://github.com/RawleJuglal/ImOnIt/blob/master/src/assets/screengrab/screengrab.png"
name: "screengrab.png"
path: "src/assets/screengrab/screengrab.png"
sha: "3b5b1d3958645060f7f9b56a2723c057b1f35a2e"
size: 63336
type: "file"
url:"https://api.github.com/repos/RawleJuglal/ImOnIt/contents/src/assets/screengrab/screengrab.png?ref=m
sonic tide
#

ill paste it in... give me a sec

#

the content is actually the image

#

it is just base64 encoded

#

I'm not sure how it would work for that lol but i'm curios

twin finch
#

oh i did not know that I havent played with that but once on a file saving thing in some tutorial

sonic tide
#

you have to use the atob function

#

it's native in development

#

works out of the box

#

that url is for a commit that is associated with something, not usre what... it sends data not an image

#

you would have to do something like atob(content) this will decode base64.

#

I wonder what that would log lol

#

I grabbed the wrong url too. but the html one doesn't seem to work for me either.

#

maybe it would work in an iframe

twin finch
#

i did console.log(atob(imageEle.data.content)) it definetly was doing something. I'll make an hmtl div image and put it in there see what it looks like

sonic tide
#

ok

twin finch
#

Ah Ray I'm gonna have to work on this later. We've got game night with some friends so my time is up. But I'm way closer so thanks

sonic tide
#

No problem! Enjoy your evening!

sonic tide
#

So just appending the raw content to a img doesn't work. You get a crazy warning about headers being too large. I found that you need to fix it with a data uri scheme.

//after you get the response for the content
const imgSrc = "data:image/png;base64," + response.data.content

Couldn't tell you why this works... but it does lol

What I chose to do was this

//find the file type by splitting the name by . (png, jpg, etc...)
//allows you to apply the proper image extension.
//the previous code snippet will still work regardless of image type
const fileType = response.data.name.split(".")[1]

//find the encoding type (base64)
const encoding = response.data.encoding

//create a complete data uri with the proper structure based on image type and encoding
//then provide 'src' as your image src
const src = `data:image/${fileType};${encoding},${response.data.content}`

Here is a wikipedia explaining what a data uri is and why it works in html https://en.wikipedia.org/wiki/Data_URI_scheme if you feel like reading it.

The stackoverflow link that led me to that https://stackoverflow.com/questions/19696418/what-does-it-means-dataimage-png-in-the-source-of-an-image

sonic tide
#

I was looking at the data you got back. I didn't notice the download_url property. To make life easier, that is the url you will need for the img src. Fresh eyes today lol. So you don't really need to do all the other stuff with the base64 content.... it was fun to play around with though lol

twin finch
sonic tide
twin finch
#

It seem to cut it off, call those fetches and then return the data not the promises. When I export that usefulInformationArr out to do things like try to compare the dependencies to the skills. It can't do it because its still a promise.

sonic tide
#

Ok, what you are looking for is a method called Promise.all. The issue you are having is the fact that you are mapping before the promise is actually resolved. The promise does return an array. But it hasn't resolved yet. This is going to be a bit tacky, but let me see if I can write out with the code you have... We are going to move the structured data in the map call to the first .then of your repos const. Give me a few on the example....

twin finch
# 
0: 
createdAt: "2022-08-09T18:10:22Z"
dependencies: Promise {<fulfilled>: Array(7)}
githubLocation: "https://github.com/RawleJuglal/AirBnbClone"
id: 523060117
imageUrl: ""
languages: Promise {<fulfilled>: {…}}
liveAt: null
name: "AirBnbClone"
[[Prototype]]: Object
#

They all look like this right now

sonic tide
#

I see... the solution might be a bit simpler.... give me a second...

# 

//make an array of promises...

let usefulInformationArr =repos.map( async ele => {
    return {
        id:ele.id,
        name: ele.name,
        createdAt: ele.created_at,
        githubLocation:ele.html_url,
        languages: await getLanguages(ele),
        liveAt:ele.homepage,
        imageUrl: '',
        dependencies: await getDependencies(ele)
    }
})
#

so now what you could do...

# 
const usefulInfo = async (arrayOfUsefulInfo) => { 

return await Promise.all(arrayOfUsefulInfo)

}

use usefulInfo function to await the array of promises. The return value in a .then should be an array of resolved promises with the values provided.

#

the argument to that function should beusefulInformationArray

twin finch
#

is this arrayOfUsefulInfo suppose to be my usefulInfomrationArr

sonic tide
#

oh, yes lol sorry... I misread that but yeah

twin finch
#

hmm, im not understanding something

const usefulInfo = async (usefulInformationArr) => { 

    return await Promise.all(usefulInformationArr)
    
}

const myData = usefulInfo().then(data => data)
console.log(myData)
sonic tide
#

That will return promises still.

#

data is what you need to use to update values...

#

console.log(data) inside of the .then

#

Is this a vanilla html project? Or is this with react?

twin finch
#

vanilla html but I've got that github access key so I couldn't get it out to netlify

#

cause i'm gonna have to go over netlify functions again

sonic tide
#

But right now you are just currently updating a dom node with the info right?

twin finch
#

this is the repo though and yeah

#

making DOM elements and putting that info in will be the end result of having that array of objects

sonic tide
#

Ok, so how are you initally going to load the content to the dom setting innerHTML with a string? Are you going to create elements with js?

twin finch
#

yeah this function

function buildSingleElement(fullElement){
  const {ele, id, classes, text, source, name,  } = {...fullElement}
  let newElement = document.createElement(ele);
  source == 'animateCSS' ? (newElement.src = `./images/${source}.png`) : (newElement.src = `./images/${source}.svg`);
  name && (newElement.alt = name)
  id && (newElement.id = id);
  classes && (newElement.classList.add(...classes))
  id=='percentage' && text ? (newElement.textContent = `${text.toUpperCase()}%`) : text && (newElement.textContent = text.toUpperCase());
  return newElement
}
#

which is being called like this

infoContainerEl.append(buildSingleElement({ele:'h2', classes:['pop', 'grid-center-item'], text:'Popularity'}))
#

but instead of text:'Popularity' I'd have the info saved in a variable inside the function this append is in

#

So more like

const popularity = usefulInfoEl.popularity

/*then later*/
infoContainerEl.append(buildSingleElement({ele:'h2', classes:['pop', 'grid-center-item'], text:popularity}))
sonic tide
#

ah ok..... so do something like this to see if it works...

 usefulInfo().then(data => {
    const myData = data.map(buildSingleElement)
    infoContainerEl.append(myData)
})
#

at least to give a sanity check

#

no const, just call usefulInfo

twin finch
#

so if these are in seperate files do i need to export userfulInfo to the other file

#

then do this in that function

sonic tide
#

Ah, that might be different then... You might have to hard code usefulInformationArr in the usefulInfo function and export it. But that could work. Oh and the other thing is myData isn't taking in the argument....

#

This would likely be easier to explain in a video call if you'd be willing

twin finch
#

yeah i think i haven't given you all the pieces

#

yeah i'm good

sonic tide
#

ok. Give me about 5-10 minutes and I would DM you

twin finch
#

ok thanks

sonic tide
#

You figure it out? I was reading and it disappeared 😆

twin finch
#

oh sorry it showed you offline

#

yes and no

# 
createdAt: "2022-08-09T18:10:22Z"
dependencies: (12) ['bootstrap', 'react', 'react-dom', '@types/react', '@types/react-dom', '@vitejs/plugin-react', 'vite', 'html5', 'css', 'javascript', 'git', 'figma']
githubLocation:"https://github.com/RawleJuglal/AirBnbClone"
id: 523060117
imageUrl:"�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0
languages: {JavaScript: 11561, CSS: 1713, HTML: 775}
liveAt: null
name : "AirBnbClone"
#

through the promise all i'm this far w/ the response. I was undefined then i found the missing return

#

problem is I can't get this imageUrl into the source. I'm trying this

const base64Data = item.imageUrl;
    const base64Response = await fetch(`data:image/png;base64, ${base64Data}`);
    const blob = base64Response.blob()
#

the end goal is really just to get that png data into the return of this

 return ` <div id="project-name-card" class="--project-card flex flex-wrap">
                <div id="project-image-div" class="--project-image-div">
                  <a href='${item.liveAt}'>
                    <img id="project-image" class="--project-image" src="${blob}" alt="thumbnail for ${item.name} project">
                  </a>
                </div>
<-- more not necessary to show -->
sonic tide
# twin finch oh sorry it showed you offline

So, I think this is because item.imgUrl isn't actually base64 encoded yet. You have to convert it. And you can just use that as the img src instead of running another fetch. Of course appending data:image/png... to the base64 encoding. Use that atob function and pass item.imgUrl to it for your base64 variable.

#

Though if you'd like to make it a blob, continue as you were and just pass it to atob for the variable.

twin finch
#

no not really that was just me researching the imageUrl thing I had and trying to figure out how to get it in the return.

So tell them this before I just tried this

 return ` <div id="project-name-card" class="--project-card flex flex-wrap">
                <div id="project-image-div" class="--project-image-div">
                  <a href='${item.liveAt}'>
                    <img id="project-image" class="--project-image" src="data: image/png;base64${item.imageUrl}" alt="thumbnail for ${item.name} project">
                  </a>
                </div>
#

but i'm getting this

Screenshot_142.png
sonic tide
#

So when you fetch the data from octokit, you return return octokit.whatever
Or do you await it

return await octokit.whatever ?

twin finch
# 
async function getScreenGrab(ele){
    const screengrabData = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}', {
        owner: 'RawleJuglal',
        repo: ele.name,
        //specify the file path that you want the content of
        path: 'src/assets/screengrab/screengrab.png',
        headers: {
          'X-GitHub-Api-Version': '2022-11-28',
          //set the accept header for raw content
          //similar to the url for the quick solution
          //otherwise it is base64 encoded and requires a little
          //more code
          'accept': 'application/vnd.github.raw'
        }
      }).then(response => {
          //response.data is going to be the stringified json...
          //we need to parse it to turn into an object
            return response.data;
        })
    return screengrabData;
}

and that was return the first code up there

#

and I used ur promiseAll

const usefulInfo = async () => { 

    return await Promise.all(usefulInformationArr)
    
}
#

to fill in all those fetches

sonic tide
#

Are all of those fetches returning the same thing? Or is this just the image that's the issue?

twin finch
#

just the image. I've been able to get all the other data to the main.js like this

sonic tide
#

And did you await getScreenGrab in the array?

twin finch
# 
const projectsArr = await usefulInfo().then(data => data)
#

yeah heres that one

let usefulInformationArr = repos.map(async ele => {
    return {
        id:ele.id,
        name: ele.name,
        createdAt: ele.created_at,
        githubLocation:ele.html_url,
        languages: await getLanguages(ele),
        liveAt:ele.homepage,
        imageUrl: await getScreenGrab(ele),
        dependencies: await getDependencies(ele)
    }
})
#

Here is how i'm using the projectsArr and getting all that info to render except the image right now

📎 message.txt
sonic tide
#

I wonder if it's the .then in the screenGrab getter.

Shouldn't it just resolve to the response awaiting octokit? And then just return screenGrabData.data?

#

Instead of chaining a .then to it?

twin finch
#

without that then i'd be return an object with status:200 data: that png data and two other things

#

so used the .then to just return the response.data

#

oh but you thing remove that and just return that instead of screengrabData at the end of the function

sonic tide
#

So screengrabdata should resolve to the entire response. Then just return screengrabData.data and see if it helps.

twin finch
#

no that's still showing the same thing [object Promise].

No errors in the console. but before doing this image (when I just has a placeholder source there) all the other data would fill and then append to the DOM

#

oh hold on i had an async in the main that may have been doing that

sonic tide
twin finch
#

ok so it's like trying to process those and then becomes unresponsive

Screenshot_143.png
#

looks like it never converts either its just trying to put all that string in there

Screenshot_144.png
sonic tide
#

Yes, because you still have to convert it to base 64

#

It's a lot of data to process as well.

twin finch
#

ok i was about to say im not doing that right i think

#

atob(item.imageUrl) <-- or no

sonic tide
#

That should do it

twin finch
#

ah new error
Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range.

sonic tide
#

Interesting... though true lol

twin finch
#

quick google
btoa(unescape(encodeURIComponent(str)))

sonic tide
#

Let's try it

twin finch
#

nope

data: image/png;bas…:1

   Failed to load resource: net::ERR_INVALID_URL
sonic tide
#

Hmmmm

#

Let me see if I can find something

twin finch
#

Heres what I did any of this look wrong

 const finalImgUrl = btoa(unescape(encodeURIComponent(item.imageUrl)))
    return ` <div id="project-name-card" class="--project-card flex flex-wrap">
                <div id="project-image-div" class="--project-image-div">
                  <a href='${item.liveAt}'>
                    <img id="project-image" class="--project-image" src="data: image/png;base64${finalImgUrl}" alt="thumbnail for ${item.name} project">
                  </a>
                </div>
sonic tide
#

It doesn't. But I'm trying to figure out what data actually is.

#

So that it can be properly converted

twin finch
sonic tide
twin finch
#

ok that didn't work but I'll keep researching. Thanks for look. I'll let you know if I solve it in between

sonic tide
#

Try this one

#

It's binary you have to create an array buffer. It's a bit of magic it looks like lol

twin finch
#

i'm a little confused where does my response or item.imageUrl go in that. And is the top the function and the second calling the function? is my uri my 'GET /repos/{owner}/{repo}/contents/{path}'

I dont think it is

sonic tide
#

Try this

btoa(decodURI(encodeURIComponent(item.imageUrl)
#

@twin finch apparently unescape is deprecated.

twin finch
#

yeah I read that made the change but that actually just caused it to say the previous error of not having the characters to decode

sonic tide
#

What's different?

twin finch
#

holding on reading that again. i didn't see that today when I started working

#

I dont remember what that url was because this time I was going to through path example

'GET /repos/{owner}/{repo}/contents/{path}'

which response only has data key, not an object with key content.

I don't remember what the call was that even got that other one

#

maybe this, this is just me changing the dependecies fetch to match what I think it would be trying to get raw content instead. Try this?

        const imgSrc = await fetch(`https://raw.githubusercontent.com/RawleJuglal/${ele.name}/master/${path}`
#

Blocked by CORS

async function getScreenGrab(ele){
    const screengrabData = await fetch(`https://raw.githubusercontent.com/RawleJuglal/${ele.name}/master/src/assets/screengrab/screengrab.png`, {
        headers: {
          'X-GitHub-Api-Version': '2022-11-28',
          //set the accept header for raw content
          //similar to the url for the quick solution
          //otherwise it is base64 encoded and requires a little
          //more code
          'accept': 'application/vnd.github.raw'
        }
      })
      .then(response => {
          //response.data is going to be the stringified json...
          //we need to parse it to turn into an object
            console.log(response)
        })
    return screengrabData.data;
}
sonic tide
twin finch
#

okay yeah i'm confused sorry