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

Storybook 是一个重要的 UI 开发工具。在 Github 上有 5.8 万颗星，每月在 NPM 上有 1000 万次下载，每天被成千上万的工程师使用，拥有超过 1200 名贡献者。

我们取得的巨大进展证明了社区的活力。这就是为什么我们每周都会表彰杰出的贡献者，在更新日志中提及他们，并在发布时特别感谢他们。

最近，我们发现如何使用个人资料卡更好地展示社区。我们的 API 会拉取贡献者信息，并为每位贡献者生成一张独一无二的定制图片。它结合了 React、创意编程和 Netlify Functions。这篇博文将向您展示如何为您的项目构建类似的东西。

特别鸣谢

Storybook 是一个社区驱动的项目。我们感谢从讨论、文档、错误修复到功能改进等各种形式的贡献。我们通过在 Twitter 上特别感谢他们来强调这些贡献并说“谢谢！”。这能让他们的工作获得更多可见性，并增加他们的关注者。

我想把这个提升一个层次 ✨

每次特别鸣谢都附带一张个人资料卡，其中包含感谢信息、个人头像和轮廓背景。每个背景都是独一无二的，并从用户名生成。怎么做到的？稍后详细介绍。首先，让我们谈谈整体架构。

使用 Netlify Functions 生成图片

这一切都由一个图片生成 API 驱动。个人资料卡生成器被实现为一个 React 组件。Netlify Function 处理请求，使用 Playwright 启动一个无头浏览器来截图 DOM 📸，并返回一张图片。

Cloudinary 用作图片生成 Function 的写入缓存。这意味着您只需生成一次图片，后续请求将立即返回。

这项设置的大部分内容基于 Chris Biscardi 出色的构建 OpenGraph 图片生成 API 课程。

创意编程轮廓

使用无头浏览器的好处在于我可以使用 HTML 和 CSS 来创建布局。并使用 SVG 创建轮廓背景。这是一个动态生成的 SVG。

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

噪声

噪声 有点像 Math.random()，但生成的输出更加平滑和自然。

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

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

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

行进平方 🥁

与噪声函数返回相同值的所有点都将在轮廓线上，[行进平方算法](https://thecodingtrain.com/challenges/coding-in-the-cabana/005-marching-squares.html?ref=storybookblog.ghost.io) 为二维标量场的等值线生成近似值。换句话说，它会创建线，线上所有点的噪声函数值都相同。

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

SVG 轮廓

canvas-sketch-util 是一个用于在浏览器中进行创意编程的出色实用库。它提供了噪声函数和 pathsToSVGPaths 函数。我用后者将等值带转换为 SVGs。

现在，轮到您了！

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

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

通过结合一系列熟悉的 Web 技术，我们能够创造出独特的东西。我希望这能成为您探索的起点。在 Twitter 上与我们联系并分享您的作品。