我们如何为 Storybook 构建个人资料卡生成器

Storybook 是 UI 开发的必备工具。在 Github 上有 58k 颗星，NPM 上每月下载量达 1000 万次，每天被数千名工程师使用，并有超过 1200 名贡献者。

我们取得的惊人进步证明了社区的活力。因此，我们每周都会表彰杰出的贡献者，在更新日志中提及他们，并在发布时向他们致谢。

最近，我们发现如何使用个人资料卡更进一步地展示社区。我们的 API 拉取贡献者信息，并生成每个贡献者独有的自定义图像。它结合了 React、创意编码和 Netlify 函数。这篇文章将向您展示如何为您的项目构建类似的功能。

特别鸣谢

Storybook 是一个社区驱动的项目。我们感谢各种形式的贡献，从讨论到文档，再到错误修复和功能改进。我们通过在 Twitter 上公开表扬的方式来突出这些贡献并表示“感谢！”。这提高了他们的工作的可见性，并让他们获得更多关注者。

我想更进一步 ✨

每次特别鸣谢都附带一张个人资料卡，其中包含感谢信息、个人资料图片和轮廓背景。每个背景都是独一无二的，并且从用户名派生而来。如何实现的？稍后会详细介绍。首先，让我们谈谈整体架构。

使用 Netlify 函数生成图像

整个系统由图像生成 API 驱动。个人资料卡生成器实现为一个 React 组件。Netlify 函数处理请求，使用 Playwright 启动无头浏览器以截取 DOM 的屏幕截图 📸 并返回图像。

Cloudinary 用作图像生成器函数的直写缓存。这意味着您只需生成一次图像，后续请求都是即时的。

此设置的大部分内容都基于 Chris Biscardi 的精彩课程“使用 Cloudinary、Netlify 函数和 React 构建 OpenGraph 图像生成 API”。

创意编码轮廓

使用无头浏览器的优点是我可以使用 HTML 和 CSS 来创建布局。并使用 SVG 作为轮廓背景。一个动态生成的 SVG。

轮廓是两种生成艺术概念的结合：噪声和行进正方形算法。

噪声

噪声有点像 Math.random()，但会产生更平滑和更有机的输出。

我将画布分割成一个带有 (x,y) 坐标的 2D 网格。噪声函数为每个坐标返回一个介于 0 和 1 之间的值。输出看起来像这样

它有什么用？用于生成自然的纹理，如云和风景。哦，还能赢得奥斯卡奖 🏆

在我的例子中，我将其用作轮廓的源数据。

行进正方形 🥁

行进正方形算法生成二维标量场的轮廓线的近似值。换句话说，它将创建线条，其中线条上的所有点都具有来自噪声函数的相同值。

MarchingSquares.js 是此算法的 JavaScript 实现。您为其提供噪声数据的二维数组，它会为您计算等值带。输出是路径数组。其中每个路径都是 [x, y] 坐标的数组。

SVG 轮廓

canvas-sketch-util 是一个很棒的实用程序库，用于在浏览器中进行创意编码。它同时提供噪声函数和 pathsToSVGPaths 函数。后者是我用来将等值带转换为 SVG 的方法。

现在，轮到你了！

在我们的 Storybook 中查看 ShoutOut 组件。尝试更改用户名，看看它如何影响轮廓。

使用此一键部署启动您自己的个人资料卡生成器服务。

通过结合许多熟悉的 Web 技术，我们能够创造出独特的东西。我希望这可以作为您探索的起点。在 Twitter 上向我们打招呼并分享您的作品。