/* eslint-disable react/no-array-index-key */ import useSWR from "swr"; import Head from "next/head"; import dynamic from "next/dynamic"; import { useTranslation } from "react-i18next"; import { useEffect, useContext } from "react"; import ServicesGroup from "components/services/group"; import BookmarksGroup from "components/bookmarks/group"; import Widget from "components/widget"; import Revalidate from "components/revalidate"; import { getSettings } from "utils/config"; import { ColorContext } from "utils/color-context"; import { ThemeContext } from "utils/theme-context"; const ThemeToggle = dynamic(() => import("components/theme-toggle"), { ssr: false, }); const ColorToggle = dynamic(() => import("components/color-toggle"), { ssr: false, }); const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"]; export async function getStaticProps() { const settings = await getSettings(); return { props: { settings, }, }; } export default function Home({ settings }) { const { i18n } = useTranslation(); const { theme, setTheme } = useContext(ThemeContext); const { color, setColor } = useContext(ColorContext); const { data: services } = useSWR("/api/services"); const { data: bookmarks } = useSWR("/api/bookmarks"); const { data: widgets } = useSWR("/api/widgets"); const wrappedStyle = {}; if (settings.background) { wrappedStyle.backgroundImage = `url(${settings.background})`; wrappedStyle.backgroundSize = "cover"; } useEffect(() => { if (settings.language) { i18n.changeLanguage(settings.language); } if (settings.theme && theme !== settings.theme) { setTheme(settings.theme); } if (settings.color && color !== settings.color) { setColor(settings.color); } }, [i18n, settings, color, setColor, theme, setTheme]); return ( <> {settings.title || "Homepage"} {settings.base && } {settings.favicon && }
{widgets && ( <> {widgets .filter((widget) => !rightAlignedWidgets.includes(widget.type)) .map((widget, i) => ( ))}
{widgets .filter((widget) => rightAlignedWidgets.includes(widget.type)) .map((widget, i) => ( ))}
)}
{services && (
{services.map((group) => ( ))}
)} {bookmarks && (
{bookmarks.map((group) => ( ))}
)}
{!settings?.color && } {!settings?.theme && }
); }