https://github.com/Normal-Tangerine8609/Scriptable-HTML-Widget

Create Scriptable widgets with HTML-like syntax
https://github.com/Normal-Tangerine8609/Scriptable-HTML-Widget

apple html ios javascript scriptable scriptable-app widget

Last synced: 3 months ago
JSON representation

Create Scriptable widgets with HTML-like syntax

• Host: GitHub
• URL: https://github.com/Normal-Tangerine8609/Scriptable-HTML-Widget
• Owner: Normal-Tangerine8609
• License: mit
• Created: 2021-11-09T16:24:00.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-27T16:30:33.000Z (10 months ago)
• Last Synced: 2024-02-27T17:57:17.367Z (10 months ago)
• Topics: apple, html, ios, javascript, scriptable, scriptable-app, widget
• Language: JavaScript
• Homepage: https://normal-tangerine8609.gitbook.io/html-widget/
• Size: 1.67 MB
• Stars: 29
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: Changelog.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# HTML Widget

![Logo](/images/logo.jpeg) 

HTML Widget allows you to create [Scriptable](https://scriptable.app/) widgets in HTML-like syntax. HTML Widget is easy to use and supports all widget features.

## Documentation

[Link](https://normal-tangerine8609.gitbook.io/html-widget/)

## Example

![Small Reddit Widget](/images/RedditWidget.jpeg)

```javascript

const htmlWidget = importModule("html-widget")

const symbol = importModule("html-widget-symbol")

const addons = {symbol}

let json = await new Request("https://www.reddit.com/r/Showerthoughts.json").loadJSON()

let post = json["data"]["children"][Math.floor((Math.random() * 10) + 2)]["data"]

let title = post["title"].replace(//g,">")

let body = post["selftext"].replace(//g,">")

let ups = post["ups"]

let awards = post["all_awardings"].length

let comments = post["num_comments"]

let url = post["url"]

let widget = await htmlWidget(`

  

    symbol {

      image-size: 11,11;

    }

    .title {

      font: system-ui, 13;

      align-text: center;

    }

    .content {

      font: system-ui, 11;

      minimum-scale-factor: 0.3;

    }

  

  Showerthoughts

  

  ${title}

  ${body}

  

    arrow.up.circle.fill

    

    ${ups}

    

    star.circle.fill

    

    ${awards}

    

    message.circle.fill

    

    ${comments}

  

`, true, addons)

Script.setWidget(widget)

widget.presentSmall()

Script.complete()

```

## Module

If you would prefer to use a module instead of a function follow these steps:

1. Copy the file from the [html-widget.js](cody/html-widget.js) and paste it into a new Scriptable script 

2. Rename the script to `Scriptable-HTML-Widget`

3. Create a new script and paste `const htmlWidget = importModule("Scriptable-HTML-Widget")` at the top of the file

4. Start to create the widget as you would normally

## Bugs and Feedback 

If you find any bugs please message me. My preferred mode of communication is Reddit but fell free to post the issues to this respiratory.

 

[u/Normal-Tangerine8609](https://www.reddit.com/user/Normal-Tangerine8609)

## Support

Thanks for the support of the [r/Scriptable](https://www.reddit.com/r/Scriptable/) community.

Thanks for [u/TheLongConIsGone](https://www.reddit.com/user/TheLongConIsGone) and [u/Glassounds](https://www.reddit.com/user/Glassounds) for answering some of my scriptable questions.

Thanks for [henryluki](https://github.com/henryluki), the creator of the  [HTML parser](https://github.com/henryluki/html-parser) once used in the script.

Thanks for you visiting or trying out HTML Widget!