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)].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: 13,13;
    }
    text {
      font: system-ui, 11;
      minimum-scale-factor: 0.3;
    }
    .title {
      font: system-ui, 13;
      align-text: center;
    }
    .bottom-bar {
      align-content: center;
    }
    .bottom-bar > text {
      line-limit: 1
    }
  </style>
  <text class="title">Showerthoughts</text>
  <spacer space="5"/>
  <text>${title}</text>
  <text>${body}</text>
  <stack class="bottom-bar">
    <symbol>arrow.up.circle.fill</symbol>
    <spacer space="2"/>
    <text>${ups}</text>
    <spacer/>
    <symbol>star.circle.fill</symbol>
    <spacer space="2"/>
    <text>${upsRatio}</text>
    <spacer/>
    <symbol>message.circle.fill</symbol>
    <spacer space="2"/>
    <text>${comments}</text>
  </stack>
</widget>
`,
  true,
  addons
);
Script.setWidget(widget);
widget.presentSmall();
Script.complete();

Widget

reddit widget