/* eslint-disable react/no-array-index-key */ import useSWR from "swr"; import Head from "next/head"; import dynamic from "next/dynamic"; import { useTranslation } from "next-i18next"; import { useEffect, useContext } from "react"; import { BiError } from "react-icons/bi"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import ServicesGroup from "components/services/group"; import BookmarksGroup from "components/bookmarks/group"; import Widget from "components/widget"; import Revalidate from "components/revalidate"; import createLogger from "utils/logger"; 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, }); const ColorToggle = dynamic(() => import("components/color-toggle"), { ssr: false, }); const Version = dynamic(() => import("components/version"), { ssr: false, }); const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search", "datetime"]; export async function getStaticProps() { let logger; try { logger = createLogger("index"); const { providers, ...settings } = getSettings(); return { props: { initialSettings: settings, ...(await serverSideTranslations(settings.language ?? "en")), }, }; } catch (e) { if (logger) { logger.error(e); } return { props: { initialSettings: {}, ...(await serverSideTranslations("en")), }, }; } } export default function Index({ initialSettings }) { const { data: errorsData } = useSWR("/api/validate"); if (errorsData && errorsData.length > 0) { return (
{errorsData.map((error, i) => (
{error.config} 
{error.reason}
{error.mark.snippet}
))}
); } return ; } function Home({ initialSettings }) { const { i18n } = useTranslation(); const { theme, setTheme } = useContext(ThemeContext); const { color, setColor } = useContext(ColorContext); const { settings, setSettings } = useContext(SettingsContext); useEffect(() => { setSettings(initialSettings); }, [initialSettings, setSettings]); const { data: services } = useSWR("/api/services"); const { data: bookmarks } = useSWR("/api/bookmarks"); const { data: widgets } = useSWR("/api/widgets"); const wrappedStyle = {}; if (settings && settings.background) { wrappedStyle.backgroundImage = `url(${settings.background})`; wrappedStyle.backgroundSize = "cover"; wrappedStyle.opacity = settings.backgroundOpacity ?? 1; } 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 && }
); }