add global settings context

will be useful going forward, and simplify widget props being passed around all over the place
pull/230/head^2
Ben Phelps 2 years ago
parent 244a76de0b
commit a677fbefbf

@ -1,10 +1,10 @@
import List from "components/bookmarks/list";
export default function BookmarksGroup({ group, target }) {
export default function BookmarksGroup({ group }) {
return (
<div key={group.name} className="basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4 flex-1 p-1">
<h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
<List bookmarks={group.bookmarks} target={target} />
<List bookmarks={group.bookmarks} />
</div>
);
}

@ -1,12 +1,17 @@
export default function Item({ bookmark, target = "_blank" }) {
import { useContext } from "react";
import { SettingsContext } from "utils/settings-context";
export default function Item({ bookmark }) {
const { hostname } = new URL(bookmark.href);
const { settings } = useContext(SettingsContext);
return (
<li key={bookmark.name}>
<a
href={bookmark.href}
title={bookmark.name}
target={target}
target={settings.target ?? "_blank"}
className="block w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/10 dark:bg-white/10 dark:hover:bg-white/20"
>
<div className="flex">

@ -1,10 +1,10 @@
import Item from "components/bookmarks/item";
export default function List({ bookmarks, target }) {
export default function List({ bookmarks }) {
return (
<ul className="mt-3 flex flex-col">
{bookmarks.map((bookmark) => (
<Item key={bookmark.name} bookmark={bookmark} target={target} />
<Item key={bookmark.name} bookmark={bookmark} />
))}
</ul>
);

@ -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 (
<div
key={services.name}
@ -12,7 +12,7 @@ export default function ServicesGroup({ services, target, layout }) {
)}
>
<h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
<List services={services.services} target={target} layout={layout} />
<List services={services.services} layout={layout} />
</div>
);
}

@ -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 (
<li key={service.name}>
@ -37,7 +41,7 @@ export default function Item({ service, target = "_blank" }) {
(hasLink ? (
<a
href={service.href}
target={target}
target={settings.target ?? "_blank"}
rel="noreferrer"
className="flex-shrink-0 flex items-center justify-center w-12 "
>
@ -52,7 +56,7 @@ export default function Item({ service, target = "_blank" }) {
{hasLink ? (
<a
href={service.href}
target={target}
target={settings.target ?? "_blank"}
rel="noreferrer"
className="flex-1 flex items-center justify-between rounded-r-md "
>

@ -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 (
<ul
className={classNames(
@ -23,7 +23,7 @@ export default function List({ services, target, layout }) {
)}
>
{services.map((service) => (
<Item key={service.name} target={target} service={service} />
<Item key={service.name} service={service} />
))}
</ul>
);

@ -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 }) {
>
<ColorProvider>
<ThemeProvider>
<Component {...pageProps} />
<SettingsProvider>
<Component {...pageProps} />
</SettingsProvider>
</ThemeProvider>
</ColorProvider>
</SWRConfig>

@ -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 <Home settings={settings} />;
return <Home initialSettings={initialSettings} />;
}
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 && (
<div className="flex flex-wrap p-8 items-start">
{services.map((group) => (
<ServicesGroup
key={group.name}
services={group}
target={settings?.target}
layout={settings.layout?.[group.name]}
/>
<ServicesGroup key={group.name} services={group} layout={settings.layout?.[group.name]} />
))}
</div>
)}
@ -146,7 +148,7 @@ function Home({ settings }) {
{bookmarks && (
<div className="grow flex flex-wrap pt-0 p-8">
{bookmarks.map((group) => (
<BookmarksGroup key={group.name} group={group} target={settings?.target} />
<BookmarksGroup key={group.name} group={group} />
))}
</div>
)}

@ -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 <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
}
Loading…
Cancel
Save