diff --git a/docs/widgets.md b/docs/widgets.md index f0740f7c..cfc60ef6 100644 --- a/docs/widgets.md +++ b/docs/widgets.md @@ -14,10 +14,11 @@ Dashy has support for displaying dynamic content in the form of widgets. There a - [Exchange Rates](#exchange-rates) - [Stock Price History](#stock-price-history) - [Joke of the Day](#joke) + - [Flight Data](#flight-data) - [Self-Hosted Services Widgets](#dynamic-widgets) - [Dynamic Widgets](#dynamic-widgets) - [Iframe Widget](#iframe-widget) - - [HTML Widget](#html-widget) + - [HTML Embed Widget](#html-embedded-widget) - [Build your own Widget](#build-your-own-widget) ## General Widgets @@ -330,12 +331,31 @@ Embed any webpage into your dashboard as a widget. --- | --- | --- | --- **`url`** | `string` | Required | The URL to the webpage to embed +### HTML Embedded Widget + +Many websites and apps provide their own embeddable widgets. These can be used with Dashy using the Embed widget, which lets you dynamically embed and HTML, CSS or JavaScript contents. + +⚠️ **NOTE:** Use with extreme caution. Embedding a script from an untrustworthy source may have serious unintended consequences. + +

+ +##### Options + +**Field** | **Type** | **Required** | **Description** +--- | --- | --- | --- +**`html`** | `string` | _Optional_ | HTML contents to render in the widget +**`script`** | `string` | _Optional_ | Raw JavaScript code to execute (caution) +**`scriptSrc`** | `string` | _Optional_ | A URL to JavaScript content (caution) +**`css`** | `string` | _Optional_ | Any stylings for widget contents + ##### Example ```yaml -- type: iframe - options: - url: https://fiatleak.com/ +- type: embed + options: + css: '.coinmarketcap-currency-widget { color: var(--widget-text-color); }' + html: '
' + scriptSrc: 'https://files.coinmarketcap.com/static/widget/currency.js' ``` --- diff --git a/src/components/Widgets/EmbedWidget.vue b/src/components/Widgets/EmbedWidget.vue new file mode 100644 index 00000000..949197ed --- /dev/null +++ b/src/components/Widgets/EmbedWidget.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue index 0e77e953..06fd29d7 100644 --- a/src/components/Widgets/WidgetBase.vue +++ b/src/components/Widgets/WidgetBase.vue @@ -102,6 +102,13 @@ @error="handleError" :ref="widgetRef" /> +
{{ handleError('No widget type was specified') }}
@@ -127,8 +134,9 @@ import XkcdComic from '@/components/Widgets/XkcdComic.vue'; import ExchangeRates from '@/components/Widgets/ExchangeRates.vue'; import StockPriceChart from '@/components/Widgets/StockPriceChart.vue'; import Jokes from '@/components/Widgets/Jokes.vue'; -import IframeWidget from '@/components/Widgets/IframeWidget.vue'; import Flights from '@/components/Widgets/Flights.vue'; +import IframeWidget from '@/components/Widgets/IframeWidget.vue'; +import EmbedWidget from '@/components/Widgets/EmbedWidget.vue'; export default { name: 'Widget', @@ -147,8 +155,9 @@ export default { ExchangeRates, StockPriceChart, Jokes, - IframeWidget, Flights, + IframeWidget, + EmbedWidget, }, props: { widget: Object,