diff --git a/docs/widgets/services/xkcd.md b/docs/widgets/services/xkcd.md new file mode 100644 index 00000000..0509a8df --- /dev/null +++ b/docs/widgets/services/xkcd.md @@ -0,0 +1,11 @@ +--- +title: XKCD +description: XKCD Latest Comic Widget Configuration +--- + +Add this widget to your services.yaml + +```yaml +widget: + type: xkcd +``` diff --git a/src/widgets/components.js b/src/widgets/components.js index 0a5a815c..83ce15ba 100644 --- a/src/widgets/components.js +++ b/src/widgets/components.js @@ -128,6 +128,7 @@ const components = { watchtower: dynamic(() => import("./watchtower/component")), wgeasy: dynamic(() => import("./wgeasy/component")), whatsupdocker: dynamic(() => import("./whatsupdocker/component")), + xkcd: dynamic(() => import("./xkcd/component")), xteve: dynamic(() => import("./xteve/component")), zabbix: dynamic(() => import("./zabbix/component")), }; diff --git a/src/widgets/widgets.js b/src/widgets/widgets.js index 3334e47e..918195dc 100644 --- a/src/widgets/widgets.js +++ b/src/widgets/widgets.js @@ -118,6 +118,7 @@ import uptimerobot from "./uptimerobot/widget"; import watchtower from "./watchtower/widget"; import wgeasy from "./wgeasy/widget"; import whatsupdocker from "./whatsupdocker/widget"; +import xkcd from "./xkcd/widget"; import xteve from "./xteve/widget"; import urbackup from "./urbackup/widget"; import romm from "./romm/widget"; @@ -249,6 +250,7 @@ const widgets = { watchtower, wgeasy, whatsupdocker, + xkcd, xteve, zabbix, }; diff --git a/src/widgets/xkcd/component.jsx b/src/widgets/xkcd/component.jsx new file mode 100644 index 00000000..e10517a6 --- /dev/null +++ b/src/widgets/xkcd/component.jsx @@ -0,0 +1,57 @@ +import Image from "next/image"; + +import useWidgetAPI from "utils/proxy/use-widget-api"; +import Container from "components/services/widget/container"; + +export default function Component({ service }) { + const { widget } = service; + const { data: apiData, error: apiError } = useWidgetAPI(widget); + const { fit = "contain" } = widget; + + if(apiError || !apiData) { + return ; + } + return ( +
+ +
+ {apiData.alt} { + e.target.parentElement.parentElement.className = "tv-static"; + }} + /> + +
+
+
{apiData.title}
+
+ ); +} \ No newline at end of file diff --git a/src/widgets/xkcd/widget.js b/src/widgets/xkcd/widget.js new file mode 100644 index 00000000..bf02291e --- /dev/null +++ b/src/widgets/xkcd/widget.js @@ -0,0 +1,8 @@ +import genericProxyHandler from "utils/proxy/handlers/generic"; + +const widget = { + api: "https://xkcd.com/info.0.json", // Correct URL (2024): https://xkcd.com/info.0.json + proxyHandler: genericProxyHandler, +}; + +export default widget; \ No newline at end of file