feat(docs): migrate documentation site into monorepo (#5912)

apps/docs/docs/widgets/iframe/index.mdx

@@ -0,0 +1,103 @@
+---
+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 '.';
+
+
+<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),
+which embeds the desired page in the browser.
+This means, no traffic is routed through Homarr (and the URL must be reachable from the client).
+
+### Screenshots
+
+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>
+
+### Adding the widget
+
+<AddingWidget />
+
+### Limitations
+
+Although you can integrate many websites, some may not work.
+This is because the administrators of those sites disallow iframes
+for security reasons, as users could easily be tricked
+by embeding the original site on a malicious page.
+
+Some proxies disallow iframes by default for this reason.
+You can use https://iframetest.com to check, if the site is allowing iframes.
+
+If you manage all of your own applications, you can usually change that by configuring
+the appropriate headers (such as `X-Frame-Options` or `Content-Security-Policy`) to allow iframes.
+
+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";
+```
+
+### Example URLs
+
+- **Wikipedia homepage:** https://en.wikipedia.org/wiki/Main_Page
+- **Any YouTube video or stream:** https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla_Ni
+
+### Configuration
+<WidgetConfig configuration={iframeWidget.configuration} />
+
+### Transparent iframes
+
+To create a transparent iframe like below you can use the following html code and load it into your iframe:
+
+```html
+<html style="color-scheme: dark;">
+<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>
+</html>
+```
+
+![transparent iframe](./img/transparent-iframe.png)
+
+### 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.
+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*).
+
+![Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard](./img/homarr-iframes-example.webp "Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard")
+
+You can [configure the iframes appearance and behavior](https://github.com/diogovalentte/homarr-iframes?tab=readme-ov-file#adding-to-homarr) using query arguments when adding them to your dashboard, like selecting the iframe theme and limit of items to show, and other options specific to each iframe.

apps/docs/docs/widgets/iframe/index.ts

@@ -0,0 +1,67 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconBrowser } from "@tabler/icons-react";
+
+export const iframeWidget: WidgetDefinition = {
+  icon: IconBrowser,
+  name: "iFrame",
+  description: "Embed any content from the internet. Some websites may restrict access.",
+  path: "../../widgets/iframe",
+  configuration: {
+    items: [
+      {
+        name: "Embed URL",
+        description: "The URL of the content to embed in the widget.",
+        values: "Any valid URL",
+        defaultValue: "-",
+      },
+      {
+        name: "Allow full screen",
+        description: "Whether to allow the embedded content to be displayed in full screen mode.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow scrolling",
+        description: "Whether to allow the embedded content to be scrolled.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Allow payment",
+        description: "Whether to allow the embedded content to process payments.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow auto play",
+        description: "Whether to allow the embedded content to auto play media.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow microphone",
+        description: "Whether to allow the embedded content to access the microphone.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow camera",
+        description: "Whether to allow the embedded content to access the camera.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow geolocation",
+        description: "Whether to allow the embedded content to access the geolocation.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow modals",
+        description: "Whether to allow the embedded content to open modal windows.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+    ],
+  },
+};