diff --git a/src/components/bookmarks/list.jsx b/src/components/bookmarks/list.jsx
index 06001c232..3b3774c95 100644
--- a/src/components/bookmarks/list.jsx
+++ b/src/components/bookmarks/list.jsx
@@ -1,10 +1,10 @@
import Item from "components/bookmarks/item";
-export default function List({ bookmarks, target }) {
+export default function List({ bookmarks }) {
return (
{bookmarks.map((bookmark) => (
-
+
))}
);
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 222e908c1..daae19094 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
import List from "components/services/list";
-export default function ServicesGroup({ services, target, layout }) {
+export default function ServicesGroup({ services, layout }) {
return (
{services.name}
-
+
);
}
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 4a06b1145..82f3741c8 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -1,10 +1,13 @@
import Image from "next/future/image";
+import { useContext } from "react";
import { Disclosure } from "@headlessui/react";
import Status from "./status";
import Widget from "./widget";
import Docker from "./widgets/service/docker";
+import { SettingsContext } from "utils/settings-context";
+
function resolveIcon(icon) {
if (icon.startsWith("http")) {
return `/api/proxy?url=${encodeURIComponent(icon)}`;
@@ -21,8 +24,9 @@ function resolveIcon(icon) {
return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
}
-export default function Item({ service, target = "_blank" }) {
+export default function Item({ service }) {
const hasLink = service.href && service.href !== "#";
+ const { settings } = useContext(SettingsContext);
return (
@@ -37,7 +41,7 @@ export default function Item({ service, target = "_blank" }) {
(hasLink ? (
@@ -52,7 +56,7 @@ export default function Item({ service, target = "_blank" }) {
{hasLink ? (
diff --git a/src/components/services/list.jsx b/src/components/services/list.jsx
index 9093ba0a0..80b45592a 100644
--- a/src/components/services/list.jsx
+++ b/src/components/services/list.jsx
@@ -14,7 +14,7 @@ const columnMap = [
"grid-cols-1 md:grid-cols-2 lg:grid-cols-8",
];
-export default function List({ services, target, layout }) {
+export default function List({ services, layout }) {
return (
{services.map((service) => (
-
+
))}
);
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 32c9c23ff..cb9dd1a69 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -8,6 +8,7 @@ import "styles/theme.css";
import "utils/i18n";
import { ColorProvider } from "utils/color-context";
import { ThemeProvider } from "utils/theme-context";
+import { SettingsProvider } from "utils/settings-context";
function MyApp({ Component, pageProps }) {
return (
@@ -18,7 +19,9 @@ function MyApp({ Component, pageProps }) {
>
-
+
+
+
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 7f170a6f3..207b2e6ac 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -13,6 +13,7 @@ import Revalidate from "components/revalidate";
import { getSettings } from "utils/config";
import { ColorContext } from "utils/color-context";
import { ThemeContext } from "utils/theme-context";
+import { SettingsContext } from "utils/settings-context";
const ThemeToggle = dynamic(() => import("components/theme-toggle"), {
ssr: false,
@@ -26,22 +27,23 @@ const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"
export function getStaticProps() {
try {
- const settings = getSettings();
+ const { providers, ...settings } = getSettings();
+
return {
props: {
- settings,
+ initialSettings: settings,
},
};
} catch (e) {
return {
props: {
- settings: {},
+ initialSettings: {},
},
};
}
}
-export default function Index({ settings }) {
+export default function Index({ initialSettings }) {
const { data: errorsData } = useSWR("/api/validate");
if (errorsData && errorsData.length > 0) {
@@ -68,20 +70,25 @@ export default function Index({ settings }) {
);
}
- return ;
+ return ;
}
-function Home({ settings }) {
+function Home({ initialSettings }) {
const { i18n } = useTranslation();
const { theme, setTheme } = useContext(ThemeContext);
const { color, setColor } = useContext(ColorContext);
+ const { settings, setSettings } = useContext(SettingsContext);
+
+ if (initialSettings) {
+ setSettings(initialSettings);
+ }
const { data: services } = useSWR("/api/services");
const { data: bookmarks } = useSWR("/api/bookmarks");
const { data: widgets } = useSWR("/api/widgets");
const wrappedStyle = {};
- if (settings.background) {
+ if (settings && settings.background) {
wrappedStyle.backgroundImage = `url(${settings.background})`;
wrappedStyle.backgroundSize = "cover";
wrappedStyle.opacity = settings.backgroundOpacity ?? 1;
@@ -133,12 +140,7 @@ function Home({ settings }) {
{services && (
{services.map((group) => (
-
+
))}
)}
@@ -146,7 +148,7 @@ function Home({ settings }) {
{bookmarks && (
{bookmarks.map((group) => (
-
+
))}
)}
diff --git a/src/utils/settings-context.jsx b/src/utils/settings-context.jsx
new file mode 100644
index 000000000..d6993b14b
--- /dev/null
+++ b/src/utils/settings-context.jsx
@@ -0,0 +1,15 @@
+import { createContext, useState, useMemo } from "react";
+
+export const SettingsContext = createContext();
+
+export function SettingsProvider({ initialSettings, children }) {
+ const [settings, setSettings] = useState({});
+
+ if (initialSettings) {
+ setSettings(initialSettings);
+ }
+
+ const value = useMemo(() => ({ settings, setSettings }), [settings]);
+
+ return {children};
+}