Convert website to GIF
7flash opened this issue · 11 comments
That would be incredibly useful for learning experience.. consider converting some framework documentation.. then see it looping it in background.. while coding..
In this example I had to manually capture all screenshots from StencilJS documentation.. then recorded myself sliding the pictures..
thanks for checking it out, and sorry for the late reply,
so let me see if i got this right, u mean like pass urls and convert them into screenshots/gif, or just one page that will be converted into a gif ?
Ideally a root URL is passed.. and then all linked pages are fetched.. and glued up into a gif..
hmm this might be tricky to get working, to get all linked pages insied the root URL, will resolve in enxepected results, but i think i'll add the option to let the user add multiple URLs and they'll be fetched and converted into a GIf, sounds good ?
That would be perfect.. then I could run a script on the documentation root page.. then copy the list of links into app..
excalidraw/excalidraw#5299 once I have GIFs.. I would place them into my excalidraw document.. a dream workspace..
In the context of this github repository.. I would have extracted links to all code files.. and have pictures generated.. to see this whole repository at once.. that would be already awesome.. just to convert all these links into pictures.. no GIFS..
Example code to extract links:
links = [];
codeFilePrefix = document.location.href.replace(document.location.origin, '')
for (const link of document.querySelectorAll('.Details a.Link--primary')) {
if (link.getAttribute('href').replace('blob', 'tree').startsWith(codeFilePrefix)) {
links.push(link.getAttribute('href'));
};
};
okay got it,i'll try to add this feature as soon as i have time to do so 🙏
so here how its going to be, and i would like ur feedback on this, before i close it, if u have any.
after u add the links and press the button, it'll download a zip file automaticly
the zip file will contain the screenshots, like this:
Ideally looking for a way to download all screenshots of code files from repository.. organized into directories following the original structure.. then I can make a script to generate excalidraw document showing all the code.. following the nesting structure of directories..
Ill try to add an option to get the screenshots inside the same folder structure, but the getting urls process will have to be manual, as shown in the Gif above
