Reddit Widget

Code

const htmlWidget = importModule("html-widget");
const symbol = importModule("html-widget-symbol");
const addons = { symbol };

const json = await new Request(
  "https://www.reddit.com/r/Showerthoughts.json"
).loadJSON();
const post = json.data.children[Math.floor(Math.random() * 10 + 2)].data;
const title = post.title.replace(/</g, "&lt;").replace(/>/g, "&gt;");
const body = post.selftext.replace(/</g, "&lt;").replace(/>/g, "&gt;");
const ups = post.ups;
const upsRatio = post.upvote_ratio;
const comments = post.num_comments;
const url = post.url;
const widget = await htmlWidget(
  `
<widget refresh-after-date="15" url="${url}">
  <style>
    symbol {
      image-size: 11,11;
    }
    .title {
      font: system-ui, 13;
      align-text: center;
    }
    .content {
      font: system-ui, 11;
      minimum-scale-factor: 0.3;
    }
  </style>
  <text class="title">Showerthoughts</text>
  <spacer space="5"/>
  <text class="content">${title}</text>
  <text class="content">${body}</text>
  <stack align-content="center">
    <symbol tint-color="blue">arrow.up.circle.fill</symbol>
    <spacer space="2"/>
    <text class="content">${ups}</text>
    <spacer/>
    <symbol tint-color="yellow">star.circle.fill</symbol>
    <spacer space="2"/>
    <text class="content">${upsRatio}</text>
    <spacer/>
    <symbol tint-color="green">message.circle.fill</symbol>
    <spacer space="2"/>
    <text class="content">${comments}</text>
  </stack>
</widget>
`,
  true,
  addons
);
Script.setWidget(widget);
widget.presentSmall();
Script.complete();

Widget

reddit widget