xiaoluoboding (xiaoluoboding)

tech-stack.tools 创造者的技术栈工具库

xiaoluoboding — Thu, 30 Jun 2022 09:41:29 +0800

《前端技术栈月刊》又鸽了一天，坚持了 41 个月，终于写不下去了，原因不是有多难，而是该转型了。

于是决定于 2022-06-29 停刊啦，四年多以来收获的是一直坚持着保持记录的习惯。

所以《周刊》还在坚持着，保持每周记录的习惯。

而今月刊中的内容，我将他们整理为一个 list 甚至是 database，记录了不少有用的工具，以一个站点的形式重现，我把它命名为 tech-stack.tools（技术栈工具库）

动机

有一个读者在发现了我的 monthly 之后，尝试自荐他的工具，说实话这是自运行以来第一次自荐，而我还没准备好接受任何的自荐形式。所以这也是我考虑到重构转型的一个原因。

设计

没什么设计，完全 copy 了 Nuxt Modules

色彩

主色调想用一款紫色，选用了 Tailwind CSS 中的 violet，你懂的

字体

有意思的是在选择字体的时候，一款叫 Share Tech 的字体出现在我眼前，名字很贴合站点的理念。所以选择了它，随了缘吧。

Logo

确实是自己瞎画的，就花了不到一小时时间（没咋用心），源自字母 tech stack tools 的缩写 TST，想表现出 Stack 这个词，层叠的感觉，自行脑补😂

开发

脚手架

本次用到了自己搭建的一个模版 self-hosted-app-starter，一个可以帮助你快速实现一个自部署应用的全栈脚手架。

后端：Docker + Go + SQLite
前端：Vite + Vue 3 + Tailwind CSS

后端实现

技术栈

Go
SQLite
Docker

简单设计了一个 bookmark 表存储工具信息，后续可能扩展用户表。

CREATE TABLE bookmark (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  created_ts BIGINT NOT NULL DEFAULT (strftime('%s', 'now')),
  updated_ts BIGINT NOT NULL DEFAULT (strftime('%s', 'now')),

  link TEXT NOT NULL,
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  author TEXT NOT NULL,
  publisher TEXT NOT NULL,
  image TEXT NOT NULL,
  logo TEXT NOT NULL,
  tag JSONB NOT NULL DEFAULT '{}'
);

CREATE UNIQUE INDEX idx_bookmark_link ON bookmark(link);

前端实现

技术栈

Nuxt 3 RC
Vue 3
Vite
UnoCSS
Pinia

最后使用的是 Nuxt 3 来写的，因为要用到一点点 Server 端技术实现获取基于 Notion 的 database 数据。

站点统计

使用的是 umami ，搭建起来很容易，后续可以讲讲如何免费搭建（baipiao）一个站点统计服务。

数据表现像这样

部署服务

这里使用的是 Railway，可以部署 Docker、Static Web Site、PostgreSQL、MySQL 等服务，类似 render、vercel、netlify 等。

贡献 / 自荐

欢迎自荐你的 or 你发现的好用的工具，一起武装我们的技术栈工具库，传送门

贡献采取的是提 issue 的方式，采纳优秀的工具在下一周加入到工具库中。

支持

希望这个工具集合能帮助你更快找到你想要的工具，提升你的工作效率。

如果喜欢这个工具库，可以支持给个🌟 Star，是对我的最大的认可。或者分享给你的朋友。

BTW，站点中有一些小彩蛋等你发现！！

参考资料

[1]《前端技术栈月刊》: https://github.com/xiaoluoboding/monthly
[2] tech-stack.tools: http://tech-stack.tools/
[3] monthly: https://github.com/xiaoluoboding/monthly
[4] Nuxt Modules: https://modules.nuxtjs.org/
[5] Share Tech: https://fonts.google.com/specimen/Share+Tech?query=share
[6] self-hosted-app-starter: https://github.com/xiaoluoboding/self-hosted-app-starter
[7] umami: https://umami.is/
[8] Railway: https://railway.app/
[9] 传送门: https://github.com/xiaoluoboding/tech-stack.tools/issues/new/choose
[10] Star: https://github.com/xiaoluoboding/tech-stack.tools

bookmark.style: 你的链接有了新的样式

xiaoluoboding — Thu, 19 May 2022 10:42:24 +0800

最近将一直自用的一款将任意链接转换生成分享图的工具 bookmark.style 发布到了 ProductHunt

bookmark.style 适用于开发者、创作者、公众号写手，它可以美化你的链接，让你的链接 “开口说话”，以下图片有 bookmark.style 生成，链接为：https://www.producthunt.com/posts/bookmark-style

需求

去年写了一篇文章《如何创建可视化的 Web Bookmark》

了解了一下 OG 协议，以及从搭建一个 Serveless 服务，到最终前端展现 Web Bookmark 样式。最终输出的内容有点类似 Twitter Card 或者 Notion 中的 Web Bookmark 的站点元信息。

这个需求也源自于我一直在维护的《前端技术栈月刊》，每次分享的工具、资源、教程链接好像很枯燥，所以我都会截取站点的图片加以说明，希望带给读者更好的体验，那么如何将一个链接自动就转变为带图文的卡片呢，实际上浏览器早就有了相关规范，就是 Open Graph 协议，只要遵循协议在站点中添加相关规则，即可让一个浏览器更好地去辨认，OG 协议是一种为社交分享而生的协议。

演进

Metafy

Metafy 是最底层的 Serveless 服务，基于 Vercel 搭建，它能够根据给定的 URL 输出相关 metadata 信息

比如：

输入：https://metafy.vercel.app/api?url=https://github.com/xiaoluoboding/metafy

输出：

{
  audio: false,
  author: "one-tab-group",
  date: false,
  description: "Easily scrape metadata from websites as a service. - GitHub - one-tab-group/metafy: Easily scrape metadata from websites as a service.",
  image: "https://opengraph.githubassets.com/e855dfcc905f5f459056c93be62b72fdf1f109124878a366a01a738f3d9921a8/one-tab-group/metafy",
  logo: "https://github.com/fluidicon.png",
  lang: null,
  publisher: "GitHub",
  title: "GitHub - one-tab-group/metafy: Easily scrape metadata from websites as a service.",
  video: false
}

抓取到的站点元信息可以用于可视化展示

Chrome Extension

于是有了 Web Visual Bookmark 插件的诞生，底层基于 metafy ，编写了可以一键将站点转化为一个可视化的 Web Bookmark 卡片的小插件，感兴趣的童鞋可以尝试下

其实到这里个人用着已经很爽了，可能我的技术栈刊物系列的读者会发现，我的很多配图都已经使用这个工具生成了，我也很少去分享链接，因为在微信公众号中打不开，你懂的，所以 Web Visual Bookmark 就厉害了，其特点是带一个二维码，可以在微信中可以长按二维码识别打开的，解决了这个痛点。

后来有几位童鞋问我你的图片生成工具是什么，我说自研的，又问我能否定制，额这个，🤔

Web APP

于是，能定制的来了，bookmark.style，下面是使用 bookmark.style 抓取的 bookmark.style

提供了一些简单的定制需求：

将任意链接转化为可视化 Web Bookmark 卡片
类似 Twitter Card 布局
类似 Notion Web bookmark 布局
美化渐变背景
开启磨砂效果
卡片圆角设置
二维码显隐
一键拷贝、下载图片（@2x）

生成的图片在公众号中展示的效果：参见文章

资源

最后顺手骗个 star，上述提到的工具均开源在 GitHub，如果你有什么需求，可以在仓库中以 issue 的形式提出

支持

如果 bookmark.style 帮助到了你，希望你也不要吝啬您的赞，在 ProductHunt 上帮忙投票支持，又或者 ☕️ 请我喝杯咖啡。