It’s.. just a list?
Just guessing based on 1990’s era sites since I don’t do web dev. Tiled series of images, descriptions, and links that CSS could probably handle. Clicking one generates a page with a list of stuff on one side and something for exploration on the right similar to frames I used ages ago. There’s delays for the text on the left appearing. Unless the sources change fast, this could be done statically where each source is periodically scraped, results turned into standard HTML/CSS file for each, and main tiles link to that. It would likely load and render faster, esp from caches, with server-side utilization being lower.
Again, it’s just me guessing based on stuff I did in DHTML days combined what this page looks like it’s trying to achieve. Some web dev people I read say they use JS frameworks for things like making it look right across all devices/OS’s. I don’t know how far vanilla CSS or CSS frameworks take you these days.
Yes @nickpsecurity, what you say makes perfect sense.
I implemented it this way simply because I didn’t want to have to maintain the jobs necessary to keep the website updated. I also wanted to be able to pick any GitHub link and replace “github.com” with “list.community” and get the page rendered with TOC, search and star/fork counters (which are the features I added).
So for me, the advantage of having this hosted for free on GitHub Pages, not having to maintain a server, and being able to render any GitHub readme, is worth the delay of having to do everything on the client. But I’m sure many people disagree and would prefer a different implementation.
Thanks for your thoughtful response.
Those advantages make sense in your position. You’re also not going to see me gripe much since it’s volunteer work on your part. ;)
How did you implement this?
I used create-react-app, which is a tool that bootstraps the code necessary to use React for static websites. It’s simple but comes with some limitations that they highlight here. For the styling, I used TailwindCSS which is what’s called an utility-first CSS framework. It provides simple CSS classes that you can build upon.
All the content comes from GitHub. The lists are curated by people and each one lives in its own repository. The descriptions and logos come from GitHub Explore which is also open source. The categories come from the “official” metalist.
The client uses the GitHub API directly. I started by getting readmes in markdown and processing them with remark. There’s lot of plugins for it, including to generate TOCs and render using React components. There were some limitations that prevented the output to look 100% equal to GitHub so I ended up fetching already rendered HTML from GitHub instead (the GitHub API provides that option) and using htmr to convert to React components. That way I can for example pass a custom React component for rendering links, so I can easily show the number of stars and forks, convert relative links to absolute, etc.. It’s not the most performant solution for sure, but the code becomes simpler.
That’s basically it, the source is available on GitHub: https://github.com/listcommunity/support
There is a metalist on github: https://github.com/sindresorhus/awesome already.
Yes, that’s where these initial lists come from, but only a few were added yet. Some information also comes from GitHub Explore. The point of this basic website was simply to add:
I like it but I hate sticky headers.
That makes sense, thanks. I’ll implement that behavior that hides the header until you start scrolling up again.
Can you make it so that you can press down arrow when searching to pick through the results. Currently it’s really annoying as you are forced to use the mouse for that.
Sure, that’s an important improvement. I’ll create an issue for it. Thanks for the suggestion.
No C++ under Languages :(
Thank you for the invite @emrox! Yes, and also added Perl during the lunch break :) Feel free to suggest other lists on GitHub: https://github.com/listcommunity/support
Thank you @binarymax @nickpsecurity. I’ve been reading Lobsters for a while but it’s nice to be able to contribute :)
This is really nice. Thank you for putting this together. And welcome to Lobsters :)
Welcome to Lobsters! Good idea trying to integrate and organize the lists. :)
the author of list.community contacted me on Twitter to let you know he added the C++ section to the page
No Perl either!
I stand corrected, thanks! I didn’t find it on the linked front page.
You are both correct, it wasn’t there at the time @gerikson :) https://github.com/listcommunity/support/commit/f089e50d32a559ed846553a6e243840e87e7ba6d