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
We’re starting some new data analysis projects. Right now it’s just in the research phase, which means I get to spend a bunch of time looking at a bunch of infrastructure stuff and forming completely unfounded opinions. May favorite way to spend my time :D
The thing I’m more excited about is we’re in talks with a charity to see if we can do some pro-bono software work for them. It fits our company mission, is good publicity, and makes me feel a little less bad about not giving enough to charity.
I’m giving a TLA+ talk on Friday!
I also have this blog post on how Vim keystrokes (not VimL, just the keystrokes) are Turing complete. I have the example and everything already done, but I’ve been slacking on actually writing the article and stuff. I probably won’t get around to it this week, either, but I’ll tell myself I will and then feel bad when Friday rolls around.
I’m now looking forward to the post on how Vim keystrokes are Turing complete.
What is the stack behind this, and what was the road to get this working with Facebook Messenger?