update documentation

docs/apps/standalones/gucker.mdx

@@ -5,6 +5,10 @@ sidebar_label: Gucker
 sidebar_position: 5
 ---
 
+import streamFiles from './stream_files.webm';
+import connectGucker from './connect_gucker.webm';
+import { GuckerGrid } from "/src/components/layout/GuckerGrid";
+
 # Gucker
 
 Gucker (from German: "gucken" / to watch) is a file watcher that can be used to watch files and directories for changes and can stream the new files to the
@@ -18,12 +22,19 @@ of the files in a workflow.
 ## Installation
 
 Gucker comes as a bundled application installable from its Github Releases [page](https://github.com/arkitektio-apps/gucker/releases/latest).
+
+<GuckerGrid/>
 Additionally you can install it via `pip`:
 
 ```bash
 pip install gucker
 ```
 
+:::info On Mac support
+
+Currently we provide no build for the Mac platform, but you can install it via pip on your Mac. We will add a Mac build in the future.
+:::
+
 ## Usage
 
 Currently gucker is only available as a GUI while we are working on also enabling
@@ -34,6 +45,18 @@ if you installed it via pip:
 gucker
 ```
 
+<video
+  autoPlay
+  muted
+  loop
+  controls
+  className="rounded rounded-md"
+  width={"100%"}
+>
+  <source src={connectGucker} />
+</video>
+
+
 
 ## Configuration
 
@@ -58,6 +81,18 @@ in regexp. Here are some common patterns:
 - `.*[.tif|.tiff]` - matches all jpg and png files
 
 
+<video
+  autoPlay
+  muted
+  loop
+  controls
+  className="rounded rounded-md"
+  width={"100%"}
+>
+  <source src={streamFiles} />
+</video>
+
+
 :::note
 
 Regular expressions are a powerful tool to match file patterns, but can also be quite complex.

src/components/layout/GuckerGrid.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { BsWindows } from "react-icons/bs";
+import { FaApple, FaLinux } from "react-icons/fa";
+
+export const GuckerGrid = ({ children }) => {
+  return (
+    <div className="grid grid-cols-3 md:grid-cols-3 gap-4 mb-3 ">
+      <a
+        target="_blank"
+        className="p-2 bg-gray-500 rounded px-3 py-2 rounded-lg text-white cursor-not-allowed hover:bg-gray-500 hover:text-white my-auto flex flex-col items-center my-auto "
+      >
+        <div className="my-auto mr-2">
+          <FaLinux size={"3em"} />
+        </div>{" "}
+        <div className="my-auto">Linux</div>
+      </a>
+      <a
+        href={
+          "https://github.com/arkitektio-apps/gucker/releases/latest/download/GuckerApp.zip"
+        }
+        target="_blank"
+        className="bg-primary-300 rounded px-3 py-2 rounded-lg text-white cursor-pointer hover:bg-primary-500 hover:text-white flex flex-col items-center my-auto"
+      >
+        <div className="my-auto mr-2">
+          <BsWindows size={"3em"} />
+        </div>{" "}
+        <div className="my-auto">Windows</div>
+      </a>
+      <a
+        target="_blank"
+        className="bg-gray-500 rounded px-3 py-2 rounded-lg text-white cursor-not-allowed hover:bg-gray-500 hover:text-white my-auto flex flex-col items-center my-auto"
+      >
+        <div className="my-auto mr-2">
+          <FaApple size={"3em"} />
+        </div>{" "}
+        <div className="my-auto">Mac</div>
+      </a>
+    </div>
+  );
+};