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: 24 days 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 (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-27T16:30:33.000Z (over 1 year ago)
- Last Synced: 2024-10-02T09:53:40.966Z (about 1 year 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: 34
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML Widget
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/)
## Features
* Simplifies gradients: `to top left, #134E5E, #71B280`.
* Supports HSL, HSLA, RGB, RGBA, hex or CSS colour names like `red`.
* Style elemnts with a CSS-like syntax or attributes.
* Easily share styles between elements with classes.
* Use addons like `symbol` to simplify adding SFSymbols to widgets.
## Example
```javascript
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, ">");
const body = post.selftext.replace(//g, ">");
const ups = post.ups;
const upsRatio = post.upvote_ratio;
const comments = post.num_comments;
const url = post.url;
const widget = await htmlWidget(
`
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
}
Showerthoughts
${title}
${body}
arrow.up.circle.fill
${ups}
star.circle.fill
${upsRatio}
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!