Astro-blog记录(7) - 小修小改和 Status Cafe组件

2025-08-08

前言

不知道是我经常在互联网冲浪还是运气好, 总是能在冒出一些想法的时候找到需要的工具…最近在玩Warframe, 有一些奖励丰厚任务是随机出现的, 我就调API简单用Discord Webhook进行推送:

于是我又想到, 能不能用写一个Discord的bot, 我把一些零碎的实时状态发过去, bot会读取然后更新blog的repo, 实时显示到blog上. 但前段时间Alanone发消息更新blog的时候, 我顺便去串门看了一下, 发现了Status Cafe这个网站.

Status Cafe & 小组件

Status Cafe是一个发布实时状态的网站/组件，用户发布的状态可以RSS订阅，用网站提供的代码也可以显示到自己的网页中. 这类似于自部署的博客点赞小组件Openheart, 在curl的时候额外带上了文本. 省去了折腾的功夫. 使用过程中唯一遇到的问题就是从注册到收到成功邮件约1天时间, 看样子是站长亲自审核的, 吓得我以为是Cloudflare的邮件转发(博客的主要沟通邮箱通过Cloudflare部署)宕机了, 连着换邮箱注册了3个账户…

这个网站有一个Status stream, 你可以在上面看到所有人的status, 就像一个大型的博客聚合, 偶尔会发现让人感叹的网站. (大家怎么能这么会设计? 博客大装修再次提上日程). 闲逛过程也是发现鲜有中文的status, 不过也逛到了小鱼老师的博客, 点进去发现果然有写status的文章. Status cafe提供了一些badge, 例如:Status Cafe Profile和Status Cafe, 不过被我嫌丑所以没有打算用这个. 之后装修博客的时候计划为这些组件画一些像素badge(inspired by LMNT).

此外, Status cafe提供了一个显示最新状态的小组件, 通过这个小组件你就可以把最新的status显示在网页中. 自带的css略微复古, 就手搓了一个.

易于使用的小组件页面
易于使用的小组件页面

<div
  id="statuscafe"
  class="ml-auto w-fit rounded-md border-bgdefault dark:border-fontdefault p-3 transition-colors duration-300"
>
  <div class="text-center">
    <div
      id="statuscafe-content"
      class="inline text-sm font-mono leading-relaxed text-zinc-900 dark:text-zinc-100"
    >
      Loading...
    </div>
    <span class="mx-1 text-xs text-zinc-500 dark:text-zinc-500">(</span>
    <div
      id="statuscafe-username"
      class="inline text-xs font-mono tracking-wide text-zinc-500 dark:text-zinc-500"
    >
      Loading...
    </div>
    <span class="mx-1 text-xs text-zinc-500 dark:text-zinc-500">)</span>
  </div>
</div>

PS: 因为Status cafe的主页还没装修, 目前并不打算很显式地公布link, 所以当我发现这个小组件会请求远程的js来进行渲染, 就把js嵌入到本地进一步修改了:

document.writeln(`
  <div id="statuscafe">
    <div id="statuscafe-username"></div>
    <div id="statuscafe-content"></div>
  </div>
`);
fetch("https://status.cafe/users/asyncx/status.json")
  .then((r) => r.json())
  .then((r) => {
    if (!r.content.length) {
      document.getElementById("statuscafe-content").innerHTML = "No status yet.";
      return;
    }
    document.getElementById("statuscafe-username").innerHTML = r.timeAgo;
    document.getElementById("statuscafe-content").innerHTML = r.content;
  });

效果就像在主页看到的一样:

Astro的ViewTransition

Astro v5 把 <ViewTransitions /> 组件改名成了 <ClientRouter />， 已手动修改. 但还是有一些bug没有解决, 例如整个网站对某些外部资源的请求只进行一次, 如果请求内容发生变化仍有几率不会重新请求, 进而导致显示异常, 比如Twiiko评论, 这个bug我会尽可能的修复.

发布本文2h后已修复. 解决方法为在<head>添加相应外部资源进行持久化

添加Solana赞赏

V2EX的站长Livid上线了一些加密货币的功能, 出发点是好的, 但站内充斥的乞讨信息令人厌烦. 个人建议加一个分区叫Begging. 我一直对去中心化和联邦宇宙等比中心化自由的架构形态充满兴趣, 所以买了60$的V2EX币, 也顺手给blog加上了赞赏链接, 不过为了不影响观感, 添加到了某个不显眼的地方.

移除/recent

最近做了什么这个页面我并不经常更新, 可见性没有Status cafe高, 互动性没有Mastodon强, 趁着这次更新干脆就暂时移除掉了, 后续如果有更好的想法或装修好Status cafe会再次开放.

Random Read