littlesheepラムです212 次阅读1,492 字 · 约 4 分钟

斯是陋室,唯吾德馨|Devlog · 32

使用 Solar Network 和 SunkenLand 修缮 Goatshed 和你的网站

在 Solar Network 查看

Goatshed 的近期更新重做了整个网站的样式,当然这不是重点,今天的重点是补齐之前承诺的但是缺失很久关于如何利用 Solar Network APIs 来扩充你的网站。

总之先看看翻修过后的 Goatshed 吧~

Goatshed 新版很大一部分以来 Solar Network 的能力,包括登陆到帖子内容(你可以很明显的发现这些帖子就是小羊平时在 SN 上发的帖子,通过一些比较特别的能力在 Goatshed 上有更特别的呈现方式),而本期 devlog 这会告诉你这些东西具体是怎么工作的,而且你也做得到。

How does it works?

你可能知道 /sphere/posts?pub=<publisher name> 和 /sphere/posts/<id> 来获取帖子内容。利用这两个 API 你的确可以做出一个很简单的“第三方客户端”来显示帖子。但是对于博客来说只是显示内容还是太简陋了,我们需要 Interaction。

你可能接下来就想到通过 OAuth 的方式来让用户登录一个自己的 Solarpass 账号,在获取对应的 scopes 的时候就可以重新打造一个留言区了。但是考虑到 Solar Network 的多发布者以及 OAuth 的 setup 之类的这些东西还是太繁琐了。

但是没有关系,让我们隆重介绍本期的重点,SunkenLand~

忽略那个 This package is on GitHub Packages, 现在它也在 npmjs.com 上可用了

SunkenLand(沉岛)和 FloatLand(浮岛)对应,其提供了一系列 Web Components 可以在任何网页、任何框架上使用的实用小组件,来帮助你快速,准确地构建基于 Solar Network 的第三方 App 或者网站。

Web Components 是浏览器原生功能,让用户可以使用原版 JS 创建一系列自定义元素(虽然 SunkenLand 是基于 Vue 但是编译出来可以兼容任何的 Web 框架),每个元素都在自己的 #shadow-root 里面来作答样式隔离等,基本上就是现代前段框架的 Components,同样提供 props、slots 等,但是是浏览器原生的,提供了一个强力的跨框架能力。详见:https://developer.mozilla.org/en-US/docs/Web/API/Web_components

注意在使用 SunkenLand 的时候因为其强依赖于 Web Components API 所以还请检查一下浏览器兼容性:

虽然其已经是广泛支持的了,但是注意一点还是好的。虽然我也可以使用一些 old fashion 的方式让用户提供一个 container 然后 vue app mount 到那个 container 去,但是这个技术实现不够好玩,也不够优雅,不能写一个 devlog 的说(

Getting Started

要使用 SunkenLand,首先你需要安装它,使用包管理器或者 CDN 都可以。SK 的设计是一切从简,其默认提供不写任何样式的组件,给你提供自由度来让 SK 的组件完美的融入你的网站中。

$ bun add @solsynth/sunkenland
<script src="https://unpkg.com/@solsynth/sunkenland/dist/sunkenland.iife.js"></script>
<script>
  SunkenLand.configure({ css: "https://unpkg.com/@solsynth/sunkenland/dist/presets/replies-list.css" });
</script>

SunkenLand 的 .configure 方法十分重要,其为所有 sk- 组件提供了全局的配置,包括样式,行为各个方面。

Into It

SunkenLand 提供了一系列 sk-* 的组件供你使用,从帖子预览到评论区再到反应的列表以及 Sign in with Solarpass。具体的使用文档就不再这里赘述了,还请参见 https://sk.solsynth.dev 的 Storybook 提供的可互动例子以及文档。

Authentication

授权是非常重要也非常复杂的环节,如果你想要你的用户能直接在留言区留言的话,你需要正确的配置 SK 的授权配置。SK 内部提供了 sk-login 组件,一个小按钮,简单配置一下就可以完成授权的 setup。但是这些所有资料都是保存在本地 localStorage 的,虽然不是 best practise 但是兼容性最好也最简单。如果说你的服务比较复杂像 Goatshed 一样可以自己管理授权相关的实现,然后用 SunkenLand.configure 把用户的令牌传递给 SK 组件。

不管怎么说,你都需要一个 OAuth app。那么现在就转到 Solar Network for Developers 创建一个吧!

到 https://solian.app/developers 里简单配置一下就可以了~关于这里的每个配置到底是什么意思你可以自行查看 kb.solsynth.dev 了解。

获取完 client info 到 SK 的文档中的 sk-login 部分跟着配置就好了,应该很简单的。

Examples

如果你不知道这些组件有什么用,你可以参考看 Goatshed


↑ 基于 sk-post 的行内帖子链接预览(会于近期也在 Solian 和 FloatLand 上登陆)


↑ 基于 sk-replies-list 和 Blog Link 实现的留言板

当然,这些都是一些很简单的利用,我相信你可以利用这套系统做出更厉害的创意或者实现。如果你有任何想要的组件但是 SK 目前没有提供可以到 SK 的 GitHub 提 FR 哦

A Step Further

你可能想着用 SK 和 SN 相关的东西做互动就一定要把帖子原文发到 SN 上。当然这是最佳实践,但是如果你处于一些顾虑,或者单纯想自己写 CMS 什么的那也是完全可以用 SK 以及 SN 配套服务的。这就要讲到前一段时间推出的 Link Blog Post 了。

你可以通过这种方式把你的博客原文在 Solar Network 上发出来,同时还能获得一个 Post ID 获得完整的反应、回复等功能,是不是很棒?

同时再通过一些延伸,你可以创建一个 API Key 然后在你的博客发布内容的时候自动 Post 一个链接帖子到 SN 上,不过这些都是后话了,相信你可以自己探索的。

当然我还是希望你可以把帖子原文 Post 在 SN 上,因为为什么不呢?你还可以拿到免费图床,你说是吧?


基本上就是这样了
Thanks for you reading, and happy developing!