homepage/src/pages/index.jsx

/* 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 { BiError } from "react-icons/bi";

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 function getStaticProps() {
  let logger;
  try {
    logger = createLogger("index");
    const { providers, ...settings } = getSettings();

    return {
      props: {
        initialSettings: settings,
      },
    };
  } catch (e) {
    if (logger) {
      logger.error(e);
    }
    return {
      props: {
        initialSettings: {},
      },
    };
  }
}

export default function Index({ initialSettings }) {
  const { data: errorsData } = useSWR("/api/validate");

  if (errorsData && errorsData.length > 0) {
    return (
      <div className="w-full container m-auto justify-center p-10">
        <div className="flex flex-col">
          {errorsData.map((error, i) => (
            <div
              className="basis-1/2 bg-theme-500 dark:bg-theme-600 text-theme-600 dark:text-theme-300 m-2 rounded-md font-mono shadow-md border-4 border-transparent"
              key={i}
            >
              <div className="bg-amber-200 text-amber-800 dark:text-amber-200 dark:bg-amber-800 p-2 rounded-md font-bold">
                <BiError className="float-right w-6 h-6" />
                {error.config}
              </div>
              <div className="p-2 text-theme-100 dark:text-theme-200">
                <pre className="opacity-50 font-bold pb-2">{error.reason}</pre>
                <pre className="text-sm">{error.mark.snippet}</pre>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return <Home initialSettings={initialSettings} />;
}

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 (
    <>
      <Head>
        <title>{settings.title || "Homepage"}</title>
        {settings.base && <base href={settings.base} />}
        {settings.favicon && <link rel="icon" href={settings.favicon} />}
      </Head>
      <div className="fixed w-full h-full m-0 p-0" style={wrappedStyle} />
      <div className="relative w-full container m-auto flex flex-col h-screen justify-between">
        <div className="flex flex-row flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
          {widgets && (
            <>
              {widgets
                .filter((widget) => !rightAlignedWidgets.includes(widget.type))
                .map((widget, i) => (
                  <Widget key={i} widget={widget} />
                ))}

              <div className="ml-4 flex flex-wrap basis-full grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
                {widgets
                  .filter((widget) => rightAlignedWidgets.includes(widget.type))
                  .map((widget, i) => (
                    <Widget key={i} widget={widget} />
                  ))}
              </div>
            </>
          )}
        </div>

        {services && (
          <div className="flex flex-wrap p-8 items-start">
            {services.map((group) => (
              <ServicesGroup key={group.name} services={group} layout={settings.layout?.[group.name]} />
            ))}
          </div>
        )}

        {bookmarks && (
          <div className="grow flex flex-wrap pt-0 p-8">
            {bookmarks.map((group) => (
              <BookmarksGroup key={group.name} group={group} />
            ))}
          </div>
        )}

        <div className="flex p-8 pb-0 w-full justify-end">
          {!settings?.color && <ColorToggle />}
          <Revalidate />
          {!settings?.theme && <ThemeToggle />}
        </div>

        <div className="flex p-8 pt-4 w-full justify-end">
          <Version />
        </div>
      </div>
    </>
  );
}
revert to array key indexes, it’s the only option 2022-09-08 11:47:21 +03:00			`/* eslint-disable react/no-array-index-key */`
first public source commit 2022-08-24 10:44:35 +03:00			`import useSWR from "swr";`
			`import Head from "next/head";`
			`import dynamic from "next/dynamic";`
allow changing language from settings.yaml 2022-09-15 05:17:30 +03:00			`import { useTranslation } from "react-i18next";`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`import { useEffect, useContext } from "react";`
yaml validation 2022-09-18 16:41:01 +03:00			`import { BiError } from "react-icons/bi";`
first public source commit 2022-08-24 10:44:35 +03:00
			`import ServicesGroup from "components/services/group";`
			`import BookmarksGroup from "components/bookmarks/group";`
			`import Widget from "components/widget";`
background images, document title 2022-09-09 06:45:43 +03:00			`import Revalidate from "components/revalidate";`
Patch console object to instead use winston for logging - Allow setting labels via new createLogger method - Make logger initialization more robust 2022-09-21 23:37:17 -07:00			`import createLogger from "utils/logger";`
background images, document title 2022-09-09 06:45:43 +03:00			`import { getSettings } from "utils/config";`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`import { ColorContext } from "utils/color-context";`
			`import { ThemeContext } from "utils/theme-context";`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`import { SettingsContext } from "utils/settings-context";`
first public source commit 2022-08-24 10:44:35 +03:00
			`const ThemeToggle = dynamic(() => import("components/theme-toggle"), {`
			`ssr: false,`
			`});`

add theme switcher 2022-08-25 11:14:17 +03:00			`const ColorToggle = dynamic(() => import("components/color-toggle"), {`
			`ssr: false,`
			`});`

add version information 2022-09-24 01:18:37 +03:00			`const Version = dynamic(() => import("components/version"), {`
			`ssr: false,`
			`});`

add greeting and datetime info widgets 2022-09-16 10:53:12 +03:00			`const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search", "datetime"];`
updates to handle more than one weather widget 2022-08-27 15:26:00 +03:00
yaml validation 2022-09-18 16:41:01 +03:00			`export function getStaticProps() {`
Patch console object to instead use winston for logging - Allow setting labels via new createLogger method - Make logger initialization more robust 2022-09-21 23:37:17 -07:00			`let logger;`
yaml validation 2022-09-18 16:41:01 +03:00			`try {`
add version information 2022-09-24 01:18:37 +03:00			`logger = createLogger("index");`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`const { providers, ...settings } = getSettings();`

yaml validation 2022-09-18 16:41:01 +03:00			`return {`
			`props: {`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`initialSettings: settings,`
yaml validation 2022-09-18 16:41:01 +03:00			`},`
			`};`
			`} catch (e) {`
add version information 2022-09-24 01:18:37 +03:00			`if (logger) {`
			`logger.error(e);`
			`}`
yaml validation 2022-09-18 16:41:01 +03:00			`return {`
			`props: {`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`initialSettings: {},`
yaml validation 2022-09-18 16:41:01 +03:00			`},`
			`};`
			`}`
			`}`

add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`export default function Index({ initialSettings }) {`
yaml validation 2022-09-18 16:41:01 +03:00			`const { data: errorsData } = useSWR("/api/validate");`

			`if (errorsData && errorsData.length > 0) {`
			`return (`
			`<div className="w-full container m-auto justify-center p-10">`
			`<div className="flex flex-col">`
			`{errorsData.map((error, i) => (`
			`<div`
			`className="basis-1/2 bg-theme-500 dark:bg-theme-600 text-theme-600 dark:text-theme-300 m-2 rounded-md font-mono shadow-md border-4 border-transparent"`
			`key={i}`
			`>`
			`<div className="bg-amber-200 text-amber-800 dark:text-amber-200 dark:bg-amber-800 p-2 rounded-md font-bold">`
			`<BiError className="float-right w-6 h-6" />`
			`{error.config}`
			`</div>`
			`<div className="p-2 text-theme-100 dark:text-theme-200">`
			`<pre className="opacity-50 font-bold pb-2">{error.reason}</pre>`
			`<pre className="text-sm">{error.mark.snippet}</pre>`
			`</div>`
			`</div>`
			`))}`
			`</div>`
			`</div>`
			`);`
			`}`
background images, document title 2022-09-09 06:45:43 +03:00
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`return <Home initialSettings={initialSettings} />;`
background images, document title 2022-09-09 06:45:43 +03:00			`}`
allow changing language from settings.yaml 2022-09-15 05:17:30 +03:00
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`function Home({ initialSettings }) {`
allow changing language from settings.yaml 2022-09-15 05:17:30 +03:00			`const { i18n } = useTranslation();`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`const { theme, setTheme } = useContext(ThemeContext);`
			`const { color, setColor } = useContext(ColorContext);`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`const { settings, setSettings } = useContext(SettingsContext);`

fix context state race 2022-09-21 17:39:46 +03:00			`useEffect(() => {`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`setSettings(initialSettings);`
fix context state race 2022-09-21 17:39:46 +03:00			`}, [initialSettings, setSettings]);`
allow changing language from settings.yaml 2022-09-15 05:17:30 +03:00
linting and cleanup 2022-09-07 16:53:24 +03:00			`const { data: services } = useSWR("/api/services");`
			`const { data: bookmarks } = useSWR("/api/bookmarks");`
			`const { data: widgets } = useSWR("/api/widgets");`
first public source commit 2022-08-24 10:44:35 +03:00
background images, document title 2022-09-09 06:45:43 +03:00			`const wrappedStyle = {};`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`if (settings && settings.background) {`
background images, document title 2022-09-09 06:45:43 +03:00			wrappedStyle.backgroundImage = `url(${settings.background})`;
			`wrappedStyle.backgroundSize = "cover";`
add backgroundOpacity option 2022-09-16 15:31:13 +03:00			`wrappedStyle.opacity = settings.backgroundOpacity ?? 1;`
background images, document title 2022-09-09 06:45:43 +03:00			`}`

allow changing language from settings.yaml 2022-09-15 05:17:30 +03:00			`useEffect(() => {`
			`if (settings.language) {`
			`i18n.changeLanguage(settings.language);`
			`}`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00
			`if (settings.theme && theme !== settings.theme) {`
			`setTheme(settings.theme);`
			`}`

			`if (settings.color && color !== settings.color) {`
			`setColor(settings.color);`
			`}`
			`}, [i18n, settings, color, setColor, theme, setTheme]);`
allow changing language from settings.yaml 2022-09-15 05:17:30 +03:00
first public source commit 2022-08-24 10:44:35 +03:00			`return (`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`<>`
			`<Head>`
			`<title>{settings.title \|\| "Homepage"}</title>`
			`{settings.base && <base href={settings.base} />}`
			`{settings.favicon && <link rel="icon" href={settings.favicon} />}`
			`</Head>`
			`<div className="fixed w-full h-full m-0 p-0" style={wrappedStyle} />`
			`<div className="relative w-full container m-auto flex flex-col h-screen justify-between">`
			`<div className="flex flex-row flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">`
			`{widgets && (`
			`<>`
			`{widgets`
			`.filter((widget) => !rightAlignedWidgets.includes(widget.type))`
			`.map((widget, i) => (`
			`<Widget key={i} widget={widget} />`
			`))}`

			`<div className="ml-4 flex flex-wrap basis-full grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">`
refactor information widgets 2022-08-27 00:55:13 +03:00			`{widgets`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`.filter((widget) => rightAlignedWidgets.includes(widget.type))`
revert to array key indexes, it’s the only option 2022-09-08 11:47:21 +03:00			`.map((widget, i) => (`
			`<Widget key={i} widget={widget} />`
refactor information widgets 2022-08-27 00:55:13 +03:00			`))}`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`</div>`
			`</>`
first public source commit 2022-08-24 10:44:35 +03:00			`)}`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`</div>`
first public source commit 2022-08-24 10:44:35 +03:00
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`{services && (`
			`<div className="flex flex-wrap p-8 items-start">`
			`{services.map((group) => (`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`<ServicesGroup key={group.name} services={group} layout={settings.layout?.[group.name]} />`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`))}`
			`</div>`
			`)}`
first public source commit 2022-08-24 10:44:35 +03:00
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`{bookmarks && (`
			`<div className="grow flex flex-wrap pt-0 p-8">`
			`{bookmarks.map((group) => (`
add global settings context will be useful going forward, and simplify widget props being passed around all over the place 2022-09-21 09:00:57 +03:00			`<BookmarksGroup key={group.name} group={group} />`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`))}`
first public source commit 2022-08-24 10:44:35 +03:00			`</div>`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`)}`

add version information 2022-09-24 01:18:37 +03:00			`<div className="flex p-8 pb-0 w-full justify-end">`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`{!settings?.color && <ColorToggle />}`
			`<Revalidate />`
			`{!settings?.theme && <ThemeToggle />}`
first public source commit 2022-08-24 10:44:35 +03:00			`</div>`
add version information 2022-09-24 01:18:37 +03:00
			`<div className="flex p-8 pt-4 w-full justify-end">`
			`<Version />`
			`</div>`
add options for layout, theme and color settings 2022-09-15 19:58:41 +03:00			`</div>`
			`</>`
first public source commit 2022-08-24 10:44:35 +03:00			`);`
			`}`