preview-shortcut v1.1.3
Preview Siri Shortcut
Siri Shortcut cross-framework preview for the web.
- Accepts JSON or Property List (.plist) data.
- Agnostic to any framework, written in vanilla TypeScript.
- Displays Shortcut metadata like the icon and name.
- Dark mode support.
Sites that use it:
Usage
Install
NPM:
npm i preview-shortcut
Yarn:
yarn add preview-shortcut
HTML
<div id="shortcut-preview"></div>
Load a Shortcut
import 'preview-shortcut/css';
import {ShortcutPreview} from 'preview-shortcut';
const preview = new ShortcutPreview({
selector? : string // default: #shortcut-preview
name? : string
url? : string
data? : object
header? : boolean // default: true
meta? : boolean // default: true
});
Screenshots
Dark Mode Support
Work in Progress
Framework7 needs to be bundled: instead of borrowing only what we need, we need to bundle and purge what we don't use.Inline variables are not properly handled.Plans to display more metadata about the Shortcut, like what inputs it accepts, etc.- Most actions are not defined, meaning raw action data shows up instead, or they do not look exactly like what they look like in the Shortcuts app.
- Optional components for JS frameworks instead of having to use a DOM selector.
These are growing pains and are planned to be resolved by version 1.0.
Dependencies
Colors
Colors are either picked from the Shortcuts app on Mac, pulled from the official Apple color palette, or from Framework7.
Icons
This package uses Framework7 Icons to achieve somewhat similar icons to what is available on Apple Platforms, as the official icons (SF Symbols) can only be used under license. The glyphs for Shortcut icons are provided by atnbueno/shortcut-icons under the MIT license.
Styling
This package includes CSS from Framework7 to make it look as close to iOS as possible with some custom styling added on top to make sure it also looks as close to the Shortcuts app as possible.
15 days ago
15 days ago
17 days ago
17 days ago
2 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago