A Scriptable iOS widget that displays a pinned card from Supernotes, including the card’s name, content, and modification date.

​
Features

  • Displays the first pinned card from Supernotes
  • Displays card name, content, and modification date
  • Modification date is formatted as a medium date and short time
  • Widget background features a linear gradient effect
  • Tap on the widget to open the card directly in Supernotes app

image

​
Setup

  1. Create a new script in the Scriptable app
  2. Set the contents of the script to the code below
  3. Create a Scriptable widget on your iOS home screen
  4. Configure the widget to run the script you created
  • Script: the one you just created in the Scriptable app
  • When Interacting: “Run Script”
  • Parameter: your Supernotes API key
  1. Save the widget and you should be good to go!

Please note: as this is a widget script, it cannot be run directly from within the Scriptable app. You must create a widget on the home screen to run the script.

image

Here’s the example script:

const widget = await pinnedCardWidget();
Script.setWidget(widget);
Script.complete();

function createCardUrl(cardId) {
  return `supernotes://card_id=${cardId}`;
}

async function createCardWidget(card) {
  const date = new Date(Date.parse(card.data.modified_when));
  const dateFormatter = new DateFormatter();
  dateFormatter.useMediumDateStyle();
  dateFormatter.useShortTimeStyle();
  const strDate = dateFormatter.string(date);
  const gradient = new LinearGradient();
  gradient.locations = [0, 1];
  gradient.colors = [new Color('#ff607e'), new Color('#ff6682')];
  const widget = new ListWidget();
  widget.backgroundColor = new Color('#ff6682');
  widget.backgroundGradient = gradient;
  // name
  const nameElement = widget.addText(card.data.name);
  nameElement.font = Font.boldSystemFont(16);
  nameElement.textColor = Color.white();
  nameElement.minimumScaleFactor = 0.75;
  widget.addSpacer(6);
  // content
  contentElement = widget.addText(card.data.markup);
  contentElement.font = Font.mediumSystemFont(12);
  contentElement.textColor = Color.white();
  widget.addSpacer(6);
  // date modified
  const footerStack = widget.addStack();
  const dateElement = footerStack.addText(strDate);
  dateElement.font = Font.mediumSystemFont(12);
  dateElement.textColor = Color.white();
  dateElement.textOpacity = 0.8;
  // open the card directly in Supernotes app when clicking
  widget.url = createCardUrl(card.data.id);
  return widget;
}

async function createErrorWidget(errorText) {
  const gradient = new LinearGradient();
  gradient.locations = [0, 1];
  gradient.colors = [new Color('#b92426'), new Color('#ad2527')];
  const widget = new ListWidget();
  widget.backgroundColor = new Color('#ff6682');
  widget.backgroundGradient = gradient;
  const errorTitleElement = widget.addText('Error');
  errorTitleElement.font = Font.boldSystemFont(14);
  errorTitleElement.textColor = Color.white();
  const errorMessageElement = widget.addText(errorText);
  errorMessageElement.font = Font.mediumSystemFont(12);
  errorMessageElement.textColor = Color.white();
  return widget;
}

async function pinnedCardWidget() {
  const req = new Request('https://api.supernotes.app/v1/user/pins');
  req.method = 'get';
  req.headers = { 'Content-Type': 'application/json', 'Api-Key': args.widgetParameter };
  const jsonBody = await req.loadJSON();
  if (req.response.statusCode !== 200) {
    return await createErrorWidget(jsonBody.detail);
  }
  const cards = Object.values(jsonBody)
  if (cards.length === 0) {
    return await createErrorWidget('No pinned cards');
  }
  return await createCardWidget(cards[0]);
}

​
Notes

  • Requires the Supernotes API key for authentication
  • Widget updates dynamically (but not instantly) with the most recently pinned card
Readwise to SupernotesRust client