🎤 构建最大的实用开源库列表 🎉🥳😎

TL;DR

TL;DR

我们每天都会看到一些“很棒的” GitHub 列表。它们确实很棒。
主要问题是，它们有时需要更新。
维护人员需要更多时间，否则就会离开公司。
它们也需要体现实用性。

我决定列一个清单来做两件事

• 帮助新图书馆获得一些关注。
• 让人们投票选出他们最喜欢的图书馆。

动图

在我们开始之前

我非常乐意告诉您我是如何构建它的。
但首先，如果您有 GitHub 代码库，请将其添加到我们的网站。
稍后您可以在这里找到它：
https://github.com/github-20k/awesome-opensource

动图

我想省钱🤑💰

我具备构建自己的 CMS 并将其托管在 AWS 上的技术水平，并负责扩展和 CI/CD。但这会花费我大量的时间和金钱。

因此我从DreamHost购买了每月 2 美元的 WordPress 主机。

别从椅子上摔下来——没错，它很慢，而且它无法承受巨大的流量。所以我用了它，并且缓存了网站上几乎所有可能的结果（包括搜索）。

WordPress 的优点在于您可以通过 GET - 使用其开箱即用的 API /wp-json/wp/v2/posts；此外，添加高级自定义字段插件会自动反映在结果中。

限制🙅🏻‍♂️

• 速度慢；所有内容都必须缓存。
• 无法执行“搜索”。
• 构建时间长（所有内容都被缓存）。
• 没有实时更新。
• 几乎不可能实现无限滚动（必须基于分页）

NextJS 来拯救你

我选择了NextJS。他们有一个很棒的 SSG 机制来缓存所有页面。我没有使用新的应用路由器方法，我觉得它运行得不太好，但我看过一个关于的教程。

我已经缓存了所有内容🤣
我们有七条路线

• 热门榜单 (/页/1)
• 新列表 (/new/1)
• 类别列表 (/productivity/1)
• 语言列表（/language/javascript/1）
• 类别 + 语言列表 (/language/javascript/category/productivity/1)
• 站点信息
• 常规搜索（我将解释如何实现它）
• 并生成推文（我们稍后会讨论）

您可能可以想象“类别+语言”列表是最大的，这是真的；如果我再添加一个这样的过滤器，我就会有数千页。

Vercel免费计划，当您不进行后台处理时可以很好地发挥作用。

但如果您确实需要后台进程，您将遇到 API 问题。

无服务器功能 - 免费版限制 10 秒，专业版限制 60 秒。

如果所有内容都已缓存，为什么还需要 API

谢谢你，Nevo，提出这个问题。

我想让人们添加他们自己的库。

为此，我需要做多件事：

• 使用 GitHub GraphQL 获取存储库信息 - 头像、所有者和主页 URL。
• 使用 README.md 文件上的 ChatGPT 😉 进行总结。
• 将所有内容插入 WordPress。

您可能已经猜到，使用 ChatGPT 处理长文本需要花费一些时间。

所以我决定做两件事：

• 执行第一项作业（GitHub GraphQL）与其中一个 /API 路径同步。（大约 10 秒）
• 使用Serverlessq将所有信息推送到运行另一个 API 路由的队列中。如果失败，它将重试三次（大约 40 秒）。

点赞机制👆🏻⬆️

我把点赞数保存在 WordPress 上；这只是一个简单的 API 请求，会在记录上 +1。
我知道——这是一个原子操作，没有队列，而且可能会导致死锁。等我到时候网站流量会很大，我会把它移到队列里。
目前，我还有一个更重要的问题。

如何在不重新渲染页面的情况下显示新的赞成票数？

我开始尝试复杂的缓存和 API。但后来我突然想到了Supabase。

苏帕贝斯

我做了一件天才的事——至今仍为自己感到自豪。
我在 Supabase 上创建了一个名为“votes”的新表，并添加了计票日期。
我还在 NextJS getStaticProps 中添加了一个名为 date 的附加属性，并将当前日期设置为该属性。

所以每次我有新的缓存构建，页面都会获取新的日期。但如果没有新的构建，我就直接使用旧日期。

剩下要做的就是要求 Supabase 把这个日期之后的所有投票都给我。

然后我只显示缓存投票 + Supabase 投票。

当有新版本时，我可能会从 Supabase 获得最近投票数为 0 的信息。

获得推文！

最近，我看到许多技术影响者列出了十大最佳图书馆的名单；我认为我可以通过让有影响力的人在网站上建立名单并发布推文来帮助有影响力的人和图书馆所有者。

构建右侧的 HTML 很容易；我面临的问题是最终如何制作图片。

我正在研究Remotion，但问题是它与 Vercel 配合得不太好。

我决定使用html2canvas并让用户渲染图像来节省一些计算能力。

问题是，如果你渲染图像并且它位于不同的域中，则会遇到 CORS 问题，因此我对所有照片进行了轻微的重写：

就是这样！希望对你有帮助！

你能幫我嗎？

为 GitHub 存储库加注星标，以便更多人能够看到优秀的新工具😎

https://github.com/github-20k/awesome-opensource

另请参阅如何获得 GitHub 星标