feat: modernize dashboard widgets
This commit is contained in:
Thomas Camlong authored and ajnart committed
1 parent
1a5e083fd0
commit
6f2cd7fc2b
270 files changed
+10189
-3544
No files matched your search
@@ -1,19 +1,17 @@
|
||||
---
|
||||
title: 'iFrame'
|
||||
description: 'Embed any content from the internet. Some websites may restrict access.'
|
||||
title: "iFrame"
|
||||
description: "Embed any content from the internet. Some websites may restrict access."
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
import { AddingWidget } from '@site/src/components/widgets/adding';
|
||||
import { WidgetConfig } from '@site/src/components/widgets/configuration';
|
||||
import { WidgetHeader } from '@site/src/components/widgets/header';
|
||||
import { iframeWidget } from '.';
|
||||
import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
|
||||
|
||||
import { AddingWidget } from "@site/src/components/widgets/adding";
|
||||
import { WidgetConfig } from "@site/src/components/widgets/configuration";
|
||||
import { WidgetHeader } from "@site/src/components/widgets/header";
|
||||
import { iframeWidget } from ".";
|
||||
|
||||
<WidgetHeader
|
||||
widget={iframeWidget}
|
||||
categories={['Embed']}
|
||||
/>
|
||||
<WidgetHeader widget={iframeWidget} categories={["Embed"]} />
|
||||
|
||||
If your application is not supported natively by Homarr, you can integrate it using the iframe widget.
|
||||
It uses the [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe),
|
||||
@@ -22,14 +20,16 @@ This means, no traffic is routed through Homarr (and the URL must be reachable f
|
||||
|
||||
### Screenshots
|
||||
|
||||
import wikipediaHomepage from './img/wikipedia.png';
|
||||
import youtubeStream from './img/nasa-iss-stream.png';
|
||||
import wikipediaHomepage from "./img/wikipedia.png";
|
||||
import youtubeStream from "./img/nasa-iss-stream.png";
|
||||
|
||||
<div>
|
||||
<img src={wikipediaHomepage} alt="iframe wikipedia-homepage" width={128 * 3} />
|
||||
<img src={youtubeStream} alt="iframe youtube-iss-stream" width={128 * 3} />
|
||||
</div>
|
||||
|
||||
<WidgetInteractionGuide />
|
||||
|
||||
### Adding the widget
|
||||
|
||||
<AddingWidget />
|
||||
@@ -50,12 +50,14 @@ the appropriate headers (such as `X-Frame-Options` or `Content-Security-Policy`)
|
||||
For example, to allow your site to be embedded in iframes from specific domains:
|
||||
|
||||
**Apache (.htaccess or httpd.conf):**
|
||||
|
||||
```apache
|
||||
Header set Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com"
|
||||
Header set X-Frame-Options "ALLOW-FROM https://trusted-domain.com"
|
||||
```
|
||||
|
||||
**Nginx:**
|
||||
|
||||
```nginx
|
||||
add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com";
|
||||
add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
|
||||
@@ -67,6 +69,7 @@ add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
|
||||
- **Any YouTube video or stream:** https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla_Ni
|
||||
|
||||
### Configuration
|
||||
|
||||
<WidgetConfig configuration={iframeWidget.configuration} />
|
||||
|
||||
### Transparent iframes
|
||||
@@ -75,15 +78,16 @@ To create a transparent iframe like below you can use the following html code an
|
||||
|
||||
```html
|
||||
<html style="color-scheme: dark;">
|
||||
<body style="background: none; display: flex; justify-content: center; align-items: center;">
|
||||
<body style="background: none; display: flex; justify-content: center; align-items: center;">
|
||||
<img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg" width="90" height="90" />
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Third party content
|
||||
|
||||
:::warning
|
||||
|
||||
The content below is an overview of third party projects. All support requests/problems must be redirected to the appropriate repository.
|
||||
@@ -92,11 +96,12 @@ We cannot guarantee the functionality nor security of these tools.
|
||||
:::
|
||||
|
||||
### homarr-iframes from Diogo Valentim
|
||||
|
||||
The project [homarr-iframes](https://github.com/diogovalentte/homarr-iframes) has iframes designed to be used with Homarr, these iframes offer a minimalist view of other systems:
|
||||
|
||||
- [Vikunja](https://github.com/go-vikunja/vikunja): overview of your tasks with links to them.
|
||||
- [Linkwarden](https://github.com/linkwarden/linkwarden): overview of your bookmarks with links to them.
|
||||
- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (*only in Brazil*).
|
||||
- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (_only in Brazil_).
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user