如果您足够努力，一切都是钥匙值商店。 ðρ
我们很高兴地宣布Open Previews beta现在可用。
在这篇博客文章中，我们将解释如何构建开放预览以及如何在GitHub讨论中使用DIV作为钥匙值商店。您可以在https://www.openpreviews.com/，source code is available on Github中实时尝试。
什么是开放预览？
Open Previews允许您在预览/登台环境或您想要收集反馈的任何其他网站（例如文档页面）中添加评论功能。这是收集非技术团队成员，客户或其他利益相关者的反馈的好方法。
预览评论不是一个新颖的想法，诸如Vercel和Netlify之类的服务已经支持了一段时间，但是我们想构建开源的东西，可以自托管。
我们如何建立开放预览
在构建开放预览之前，我们有一些要求：
- 无数据库
- 后端必须无状态
- 尽可能多地利用wundergraph
- 可使用单个脚本标签嵌入
我们提出的解决方案是受Giscus的启发，它使用github讨论来存储评论。
这是一个很好的解决方案，允许我们在没有数据库的情况下构建开放预览。
在GitHub讨论中将元数据存储的问题
有一个问题，我们必须将其他信息存储在评论中，例如位置，选择和其他元数据。
我们如何将此信息存储在GitHub讨论中？
但不仅如此，用户也不能看到元数据不分散他们的注意力，
当我们呈现评论时，我们需要从讨论中从讨论中获取它。
解决方案：在HTML注释中使用DIVS作为键值商店
github评论support basic HTML，
那么，如果我们可以简单地将JSON嵌入到空的Div中的数据属性中怎么办？
经过一个简单的实验，我们发现这很棒。
在数据属性中直接添加JSON，但是由于报价和其他逃避问题，
因此，我们使用encodeURIComponent编码JSON。
现在，我们使用Divs拥有了一个功能性的键值商店，可以存储所需的所有信息。 ð¥³
这是代码中的外观：
export const constructComment = ({
body,
meta,
}: {
meta: {
timestamp: number
x: number
y: number
path: string
href: string
resolved?: boolean
selection?: string
}
body: string
}) => {
const jsonMeta = JSON.stringify(meta)
const encodedJsonMeta = encodeURIComponent(jsonMeta)
return `${body}
<div data-comment-meta="${encodedJsonMeta}" />`
}
现在，当我们检索评论时，我们可以简单地从DIV获取编码数据，解码，解析JSON并在页面上渲染注释。
可能性是无尽的ð
为什么GitHub讨论是一家很棒的钥匙值商店
github讨论作为钥匙值商店，这是惊人的，因为它具有许多强大功能：
- 我们的申请是无状态的
- GitHub讨论几乎是免费的，并且无限地扩展
- 内置身份验证：我们可以使用GitHubs身份验证来验证用户
- 建筑授权：您只能在讨论中发表评论，如果您可以访问存储库
- 内置通知：当某人回复其评论 时，用户收到通知
- 内置版本管理：您可以看到讨论的历史
- 内置垃圾邮件保护：GitHub讨论具有垃圾邮件保护
无状态身份验证
下一个挑战是建立无状态身份验证。使用built-in Github Oauth provider添加身份验证很容易，但是我们必须安全地存储访问令牌。由于预览通常托管在与WunderGraph服务器不同的域上，因此我们也不能使用安全的cookie。
您可能会认为我们可以将访问令牌存储在新的Github讨论中，但这是一个非常糟糕的主意。取而代之的是，我们提出了一种解决方案，该解决方案使用JSON Web Encryption将访问令牌存储在浏览器中。 JWT使用仅在后端所知的秘密进行加密。这使我们能够验证JWT并从JWT有效载荷中提取访问令牌。然后使用访问令牌用GitHub来验证用户。
登录后，在WunderGraph服务器和预览之间进行了加密的JWT。我们通过在弹出窗口中启动身份验证流来做到这一点，该流程使我们能够使用postMessage API将JWT传递到预览中。另外，紧凑的令牌也可以附加到重定向的URI。 JWT使用localStorage API存储在浏览器中。
这种方法的唯一限制是JWT仅在有限的时间内有效，并且用户在JWT过期后需要再次登录。
下一步是什么？
我们仍在进行开放预览，我们对新功能有很多想法。我们希望添加一些功能：
- 支持PR评论和GitHub检查
- 乐观的更新（使UI Snappier）
- 喜欢＆repy评论
- Markdown / Emoji支持< / li>
- 上传图像