Skip to content

Latest commit

 

History

History
88 lines (59 loc) · 2.74 KB

README.md

File metadata and controls

88 lines (59 loc) · 2.74 KB

Preview iOS Shortcut

Build with Vite License Version

iOS 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.

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
});

Result

Screenshot 2023-06-24 at 18 45 06

Dark Mode Support

Screenshot 2023-06-24 at 19 08 58

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.
  • A lot of the code is a rough draft and needs refactoring.
  • 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.
  • Plans to display metadata about the Shortcut, like what inputs it accepts, etc.
  • 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 or pulled from the official Apple color palette.

Icons

This package uses Framework7 Icons to achieve somewhat similar icons to what is available in iOS, as the official icons (SF Symbols) can only be used under 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.