add greeting and datetime info widgets

Currently translated at 100.0% (100 of 100 strings)

Translation: Homepage/Homepage
Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/es/

README.md

@@ -9,15 +9,15 @@
 - Images built for AMD64 (x86_64), ARM64, ARMv7 and ARMv6
   - Supports all Raspberry Pi's, most SBCs & Apple Silicon
 - Full i18n support with automatic language detection
-  - Translations for Chinese, Dutch, French, German, Norwegian Bokmål, Portuguese, Russian and Spanish
+  - Translations for Chinese, Dutch, French, German, Norwegian Bokmål, Polish, Portuguese, Russian and Spanish
   - Want to help translate? [Join the Weblate project](https://hosted.weblate.org/engage/homepage/)
 - Service & Web Bookmarks
 - Docker Integration
   - Container status (Running / Stopped) & statistics (CPU, Memory, Network)
   - Automatic service discovery (via labels)
 - Service Integration
-  - Sonarr, Radarr, Readarr, Prowlarr, Emby, Jellyfin, Tautulli (Plex)
-  - Ombi, Overseerr, Jellyseerr, NZBGet, SABnzbd, ruTorrent, Transmission
+  - Sonarr, Radarr, Readarr, Prowlarr, Bazarr, Lidarr, Emby, Jellyfin, Tautulli (Plex)
+  - Ombi, Overseerr, Jellyseerr, Jackett, NZBGet, SABnzbd, ruTorrent, Transmission
   - Portainer, Traefik, Speedtest Tracker, PiHole, Nginx Proxy Manager, Gotify
 - Information Providers
   - Coin Market Cap
@@ -132,6 +132,7 @@ Huge thanks to the all the contributors who have helped make this project what i
 - [modem7](https://github.com/benphelps/homepage/commits?author=modem7) - Impvoed Docker Image
 - [nicedc](https://github.com/benphelps/homepage/commits?author=nicedc) - Chinese Translation
 - [Nonoss117](https://github.com/benphelps/homepage/commits?author=Nonoss117) - French Translation
+- [psychodracon](https://github.com/benphelps/homepage/commits?author=psychodracon) - Polish Translation
 - [quod](https://github.com/benphelps/homepage/commits?author=quod) - Fixed Typos
 - [schklom](https://github.com/benphelps/homepage/commits?author=schklom) - ARM64, ARMv7 and ARMv6
 - [xicopitz](https://github.com/benphelps/homepage/commits?author=xicopitz) - Gotify & Prowlarr Integration

public/locales/es/common.json

@@ -14,37 +14,37 @@
         "load": "Carga"
     },
     "docker": {
-        "rx": "Recibido",
-        "tx": "Transmitido",
-        "mem": "Memoria",
-        "cpu": "Procesador",
+        "rx": "RX",
+        "tx": "TX",
+        "mem": "MEM",
+        "cpu": "CPU",
         "offline": "Desconectado"
     },
     "emby": {
-        "playing": "En ejecución",
+        "playing": "Reproduciendo",
         "transcoding": "Transcodificando",
-        "bitrate": "Tasa de Bits",
-        "no_active": "No hay streams activos"
+        "bitrate": "Tasa de bits",
+        "no_active": "Sin transmisiones activas"
     },
     "tautulli": {
-        "playing": "En ejecución",
-        "transcoding": "Transcodificación",
+        "playing": "Reproduciendo",
+        "transcoding": "Transcodificando",
         "bitrate": "Tasa de bits",
-        "no_active": "No hay streams activos"
+        "no_active": "Sin transmisiones activas"
     },
     "rutorrent": {
         "active": "Activo",
-        "upload": "Subida",
+        "upload": "Carga",
         "download": "Descarga"
     },
     "sonarr": {
-        "wanted": "Más deseado",
-        "queued": "Puesto en cola",
+        "wanted": "Querido",
+        "queued": "En cola",
         "series": "Series"
     },
     "radarr": {
-        "wanted": "Más deseado",
-        "queued": "Puesto en cola",
+        "wanted": "Querido",
+        "queued": "En cola",
         "movies": "Películas"
     },
     "readarr": {
@@ -88,7 +88,7 @@
         "total": "Total"
     },
     "weather": {
-        "current": "Ubicación Actual",
+        "current": "Ubicación actual",
         "allow": "Haga clic para permitir",
         "updating": "Actualizando",
         "wait": "Espere, por favor"
@@ -99,12 +99,12 @@
         "available": "Disponible"
     },
     "sabnzbd": {
-        "rate": "Tasa de descarga",
-        "queue": "Puesto en cola",
-        "timeleft": "Tiempo Restante"
+        "rate": "Tasa",
+        "queue": "Cola",
+        "timeleft": "Tiempo restante"
     },
     "nzbget": {
-        "rate": "Tasa de descarga",
+        "rate": "Tasa",
         "remaining": "Restante",
         "downloaded": "Descargado"
     },
@@ -129,21 +129,21 @@
     },
     "transmission": {
         "download": "Descarga",
-        "upload": "Subida",
-        "leech": "Egoístas (Leech)",
+        "upload": "Carga",
+        "leech": "Compañeros",
         "seed": "Semillas"
     },
     "jackett": {
-        "configured": "Configured",
-        "errored": "Errored"
+        "configured": "Configurado",
+        "errored": "Errores"
     },
     "bazarr": {
-        "missingEpisodes": "Missing Episodes",
-        "missingMovies": "Missing Movies"
+        "missingEpisodes": "Episodios perdidos",
+        "missingMovies": "Películas perdidas"
     },
     "lidarr": {
-        "queued": "Queued",
-        "wanted": "Wanted",
-        "albums": "Albums"
+        "queued": "Puesto en cola",
+        "wanted": "Más deseado",
+        "albums": "Álbumes"
     }
 }

public/locales/fr/common.json

@@ -149,12 +149,12 @@
         "errored": "En erreur"
     },
     "bazarr": {
-        "missingEpisodes": "Missing Episodes",
-        "missingMovies": "Missing Movies"
+        "missingEpisodes": "Épisodes manquants",
+        "missingMovies": "Films manquants"
     },
     "lidarr": {
-        "wanted": "Wanted",
-        "queued": "Queued",
+        "wanted": "Demandé",
+        "queued": "En queue",
         "albums": "Albums"
     }
 }

public/locales/pl/common.json

@@ -0,0 +1,149 @@
+{
+    "weather": {
+        "allow": "Kliknij, aby zezwolić",
+        "updating": "Aktualizacja",
+        "wait": "Proszę czekać",
+        "current": "Aktualna lokalizacja"
+    },
+    "search": {
+        "placeholder": "Szukaj…"
+    },
+    "resources": {
+        "used": "Użyte",
+        "load": "Obciążenie",
+        "total": "Całkowite",
+        "free": "Wolne"
+    },
+    "emby": {
+        "no_active": "Brak aktywnych strumieni",
+        "playing": "Odtwarzanie",
+        "transcoding": "Transkodowanie",
+        "bitrate": "Bitrate"
+    },
+    "tautulli": {
+        "playing": "Odtwarzanie",
+        "transcoding": "Transkodowanie",
+        "bitrate": "Bitrate",
+        "no_active": "Brak aktywnych strumieni"
+    },
+    "speedtest": {
+        "download": "Pobieranie",
+        "ping": "Ping",
+        "upload": "Wysyłanie"
+    },
+    "portainer": {
+        "running": "Działające",
+        "stopped": "Zatrzymane",
+        "total": "Ogólnie"
+    },
+    "coinmarketcap": {
+        "1day": "1 dzień",
+        "7days": "7 dni",
+        "30days": "30 dni",
+        "1hour": "1 godzina",
+        "configure": "Wybierz jedną lub więcej kryptowalut do śledzenia"
+    },
+    "gotify": {
+        "apps": "Aplikacje",
+        "clients": "Klienci",
+        "messages": "Wiadomości"
+    },
+    "widget": {
+        "missing_type": "Brakujący typ widżetu: {{type}}",
+        "api_error": "Błąd API",
+        "status": "Stan"
+    },
+    "docker": {
+        "rx": "RX",
+        "tx": "TX",
+        "mem": "MEM",
+        "cpu": "CPU",
+        "offline": "Offline"
+    },
+    "nzbget": {
+        "rate": "Szybkość",
+        "remaining": "Pozostało",
+        "downloaded": "Pobrano"
+    },
+    "sabnzbd": {
+        "rate": "Szybkość",
+        "queue": "Kolejka",
+        "timeleft": "Pozostało"
+    },
+    "rutorrent": {
+        "active": "Aktywny",
+        "upload": "Wysyłanie",
+        "download": "Pobieranie"
+    },
+    "transmission": {
+        "download": "Pobieranie",
+        "upload": "Wysyłanie",
+        "leech": "Leech",
+        "seed": "Seed"
+    },
+    "sonarr": {
+        "wanted": "Poszukiwane",
+        "queued": "W kolejce",
+        "series": "Seriale"
+    },
+    "radarr": {
+        "wanted": "Poszukiwane",
+        "queued": "W kolejce",
+        "movies": "Filmy"
+    },
+    "lidarr": {
+        "wanted": "Poszukiwane",
+        "queued": "W kolejce",
+        "albums": "Albumy"
+    },
+    "readarr": {
+        "wanted": "Poszukiwane",
+        "queued": "W kolejce",
+        "books": "Książki"
+    },
+    "bazarr": {
+        "missingEpisodes": "Brakujące odcinki",
+        "missingMovies": "Brakujące filmy"
+    },
+    "ombi": {
+        "pending": "Oczekiwane",
+        "approved": "Zaakceptowane",
+        "available": "Dostępne"
+    },
+    "jellyseerr": {
+        "pending": "Oczekiwane",
+        "approved": "Zaakceptowane",
+        "available": "Dostępne"
+    },
+    "overseerr": {
+        "pending": "Oczekiwane",
+        "approved": "Zaakceptowane",
+        "available": "Dostępne"
+    },
+    "pihole": {
+        "queries": "Zapytania",
+        "blocked": "Zablokowane",
+        "gravity": "Gravity"
+    },
+    "traefik": {
+        "routers": "Routery",
+        "services": "Serwisy",
+        "middleware": "Pośrednicy"
+    },
+    "npm": {
+        "enabled": "Włączone",
+        "disabled": "Wyłączone",
+        "total": "Ogólnie"
+    },
+    "prowlarr": {
+        "enableIndexers": "Indeksery",
+        "numberOfGrabs": "Pochwycenia",
+        "numberOfQueries": "Zapytania",
+        "numberOfFailGrabs": "Nieudane pochwycenia",
+        "numberOfFailQueries": "Nieudane zapytania"
+    },
+    "jackett": {
+        "configured": "Skonfigurowane",
+        "errored": "Błędne"
+    }
+}

src/components/color-toggle.jsx

@@ -61,6 +61,7 @@ export default function ColorToggle() {
                 {colors.map((color) => (
                   <button type="button" onClick={() => setColor(color)} key={color}>
                     <div
+                      title={color}
                       className={classNames(
                         active === color ? "border-2" : "border-0",
                         `rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-400`

src/components/services/group.jsx

@@ -1,15 +1,18 @@
+import classNames from "classnames";
+
 import List from "components/services/list";
 
-export default function ServicesGroup({ services }) {
+export default function ServicesGroup({ services, layout }) {
   return (
     <div
       key={services.name}
-      className="basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4 flex-1 p-1"
+      className={classNames(
+        layout?.style === "row" ? "basis-full" : "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">
-        {services.name}
-      </h2>
-      <List services={services.services} />
+      <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+      <List services={services.services} layout={layout} />
     </div>
   );
 }

src/components/services/list.jsx

@@ -1,8 +1,27 @@
+import classNames from "classnames";
+
 import Item from "components/services/item";
 
-export default function List({ services }) {
+const columnMap = [
+  "grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
+  "grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-2",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-5",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-6",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-7",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-8",
+];
+
+export default function List({ services, layout }) {
   return (
-    <ul className="mt-3 flex flex-col">
+    <ul
+      className={classNames(
+        layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
+        "mt-3"
+      )}
+    >
       {services.map((service) => (
         <Item key={service.name} service={service} />
       ))}

src/components/services/widgets/service/emby.jsx

@@ -1,6 +1,7 @@
 import useSWR from "swr";
 import { useTranslation } from "react-i18next";
-import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill } from "react-icons/bs";
+import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
+import { MdOutlineSmartDisplay } from "react-icons/md";
 
 import Widget from "../widget";
 
@@ -27,24 +28,35 @@ function ticksToString(ticks) {
 }
 
 function SingleSessionEntry({ playCommand, session }) {
-  console.log(session);
   const {
     NowPlayingItem: { Name, SeriesName, RunTimeTicks },
     PlayState: { PositionTicks, IsPaused, IsMuted },
   } = session;
+
+  const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {
+    IsVideoDirect: true,
+    VideoDecoderIsHardware: true,
+    VideoEncoderIsHardware: true,
+  };
+
   const percent = (PositionTicks / RunTimeTicks) * 100;
 
   return (
     <>
       <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
-        <div className="text-xs z-10 self-center ml-2">
-          <span>
+        <div className="grow text-xs z-10 self-center ml-2 relative w-full h-4 mr-2">
+          <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
             {Name}
             {SeriesName && ` - ${SeriesName}`}
-          </span>
+          </div>
+        </div>
+        <div className="self-center text-xs flex justify-end mr-1.5 pl-1">
+          {IsVideoDirect && <MdOutlineSmartDisplay className="opacity-50" />}
+          {!IsVideoDirect && (!VideoDecoderIsHardware || !VideoEncoderIsHardware) && <BsCpu className="opacity-50" />}
+          {!IsVideoDirect && VideoDecoderIsHardware && VideoEncoderIsHardware && (
+            <BsFillCpuFill className="opacity-50" />
+          )}
         </div>
-        <div className="grow" />
-        <div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</div>
       </div>
 
       <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
@@ -73,7 +85,12 @@ function SingleSessionEntry({ playCommand, session }) {
           )}
         </div>
         <div className="grow " />
-        <div className="self-center text-xs flex justify-end mr-2">{ticksToString(PositionTicks)}</div>
+        <div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
+        <div className="self-center text-xs flex justify-end mr-2 z-10">
+          {ticksToString(PositionTicks)}
+          <span className="mx-0.5 text-[8px]">/</span>
+          {ticksToString(RunTimeTicks)}
+        </div>
       </div>
     </>
   );
@@ -84,6 +101,9 @@ function SessionEntry({ playCommand, session }) {
     NowPlayingItem: { Name, SeriesName, RunTimeTicks },
     PlayState: { PositionTicks, IsPaused, IsMuted },
   } = session;
+
+  const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {};
+
   const percent = (PositionTicks / RunTimeTicks) * 100;
 
   return (
@@ -111,14 +131,20 @@ function SessionEntry({ playCommand, session }) {
             className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
           />
         )}
-        <span>
+      </div>
+      <div className="grow text-xs z-10 self-center relative w-full h-4">
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
           {Name}
           {SeriesName && ` - ${SeriesName}`}
-        </span>
+        </div>
+      </div>
+      <div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
+      <div className="self-center text-xs flex justify-end mr-1 z-10">{ticksToString(PositionTicks)}</div>
+      <div className="self-center items-center text-xs flex justify-end mr-1.5 pl-1 z-10">
+        {IsVideoDirect && <MdOutlineSmartDisplay className="opacity-50" />}
+        {!IsVideoDirect && (!VideoDecoderIsHardware || !VideoEncoderIsHardware) && <BsCpu className="opacity-50" />}
+        {!IsVideoDirect && VideoDecoderIsHardware && VideoEncoderIsHardware && <BsFillCpuFill className="opacity-50" />}
       </div>
-      <div className="grow " />
-      <div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</div>
-      <div className="self-center text-xs flex justify-end mr-2">{ticksToString(PositionTicks)}</div>
     </div>
   );
 }

src/components/services/widgets/service/tautulli.jsx

@@ -1,7 +1,8 @@
 /* eslint-disable camelcase */
 import useSWR from "swr";
 import { useTranslation } from "react-i18next";
-import { BsFillPlayFill, BsPauseFill } from "react-icons/bs";
+import { BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
+import { MdOutlineSmartDisplay } from "react-icons/md";
 
 import Widget from "../widget";
 
@@ -27,16 +28,19 @@ function millisecondsToString(milliseconds) {
 }
 
 function SingleSessionEntry({ session }) {
-  const { full_title, duration, view_offset, progress_percent, state, year, grandparent_year } = session;
+  const { full_title, duration, view_offset, progress_percent, state, video_decision, audio_decision } = session;
 
   return (
     <>
       <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
-        <div className="text-xs z-10 self-center ml-2">
-          <span>{full_title}</span>
+        <div className="text-xs z-10 self-center ml-2 relative w-full h-4 grow mr-2">
+          <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">{full_title}</div>
+        </div>
+        <div className="self-center text-xs flex justify-end mr-1.5 pl-1">
+          {video_decision === "copy" && audio_decision === "copy" && <MdOutlineSmartDisplay className="opacity-50" />}
+          {video_decision !== "copy" && audio_decision !== "copy" && <BsFillCpuFill className="opacity-50" />}
+          {video_decision === "copy" && audio_decision !== "copy" && <BsCpu className="opacity-50" />}
         </div>
-        <div className="grow" />
-        <div className="self-center text-xs flex justify-end mr-2">{year || grandparent_year}</div>
       </div>
 
       <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
@@ -55,8 +59,10 @@ function SingleSessionEntry({ session }) {
           )}
         </div>
         <div className="grow " />
-        <div className="self-center text-xs flex justify-end mr-2">
-          {millisecondsToString(view_offset)} / {millisecondsToString(duration)}
+        <div className="self-center text-xs flex justify-end mr-2 z-10">
+          {millisecondsToString(view_offset)}
+          <span className="mx-0.5 text-[8px]">/</span>
+          {millisecondsToString(duration)}
         </div>
       </div>
     </>
@@ -64,7 +70,7 @@ function SingleSessionEntry({ session }) {
 }
 
 function SessionEntry({ session }) {
-  const { full_title, view_offset, progress_percent, state } = session;
+  const { full_title, view_offset, progress_percent, state, video_decision, audio_decision } = session;
 
   return (
     <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
@@ -81,10 +87,16 @@ function SessionEntry({ session }) {
         {state !== "paused" && (
           <BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
         )}
-        <span>{full_title}</span>
       </div>
-      <div className="grow " />
-      <div className="self-center text-xs flex justify-end mr-2">{millisecondsToString(view_offset)}</div>
+      <div className="text-xs z-10 self-center ml-2 relative w-full h-4 grow mr-2">
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">{full_title}</div>
+      </div>
+      <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10">
+        {video_decision === "copy" && audio_decision === "copy" && <MdOutlineSmartDisplay className="opacity-50" />}
+        {video_decision !== "copy" && audio_decision !== "copy" && <BsFillCpuFill className="opacity-50" />}
+        {video_decision === "copy" && audio_decision !== "copy" && <BsCpu className="opacity-50" />}
+      </div>
+      <div className="self-center text-xs flex justify-end mr-2 z-10">{millisecondsToString(view_offset)}</div>
     </div>
   );
 }

src/components/widget.jsx

@@ -2,6 +2,8 @@ import WeatherApi from "components/widgets/weather/weather";
 import OpenWeatherMap from "components/widgets/openweathermap/weather";
 import Resources from "components/widgets/resources/resources";
 import Search from "components/widgets/search/search";
+import Greeting from "components/widgets/greeting/greeting";
+import DateTime from "components/widgets/datetime/datetime";
 
 const widgetMappings = {
   weather: WeatherApi, // This key will be deprecated in the future
@@ -9,13 +11,15 @@ const widgetMappings = {
   openweathermap: OpenWeatherMap,
   resources: Resources,
   search: Search,
+  greeting: Greeting,
+  datetime: DateTime,
 };
 
 export default function Widget({ widget }) {
-  const ServiceWidget = widgetMappings[widget.type];
+  const InfoWidget = widgetMappings[widget.type];
 
-  if (ServiceWidget) {
-    return <ServiceWidget options={widget.options} />;
+  if (InfoWidget) {
+    return <InfoWidget options={widget.options} />;
   }
 
   return (

src/components/widgets/datetime/datetime.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+const textSizes = {
+  "4xl": "text-4xl",
+  "3xl": "text-3xl",
+  "2xl": "text-2xl",
+  xl: "text-xl",
+  lg: "text-lg",
+  md: "text-md",
+  sm: "text-sm",
+  xs: "text-xs",
+};
+
+export default function DateTime({ options }) {
+  const { text_size: textSize, format } = options;
+  const { i18n } = useTranslation();
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [setDate]);
+
+  const dateFormat = new Intl.DateTimeFormat(i18n.language, { ...format });
+
+  return (
+    <div className="flex flex-row items-center grow justify-end">
+      <span className={`text-theme-800 dark:text-theme-200 ${textSizes[textSize || "lg"]}`}>
+        {dateFormat.format(date)}
+      </span>
+    </div>
+  );
+}

src/components/widgets/greeting/greeting.jsx

@@ -0,0 +1,22 @@
+const textSizes = {
+  "4xl": "text-4xl",
+  "3xl": "text-3xl",
+  "2xl": "text-2xl",
+  xl: "text-xl",
+  lg: "text-lg",
+  md: "text-md",
+  sm: "text-sm",
+  xs: "text-xs",
+};
+
+export default function Greeting({ options }) {
+  if (options.text) {
+    return (
+      <div className="flex flex-row items-center justify-start">
+        <span className={`text-theme-800 dark:text-theme-200 ${textSizes[options.text_size || "xl"]}`}>
+          {options.text}
+        </span>
+      </div>
+    );
+  }
+}

src/pages/_app.jsx

@@ -6,6 +6,8 @@ import "styles/weather-icons.css";
 import "styles/theme.css";
 
 import "utils/i18n";
+import { ColorProvider } from "utils/color-context";
+import { ThemeProvider } from "utils/theme-context";
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -14,7 +16,11 @@ function MyApp({ Component, pageProps }) {
         fetcher: (resource, init) => fetch(resource, init).then((res) => res.json()),
       }}
     >
-      <Component {...pageProps} />
+      <ColorProvider>
+        <ThemeProvider>
+          <Component {...pageProps} />
+        </ThemeProvider>
+      </ColorProvider>
     </SWRConfig>
   );
 }

src/pages/index.jsx

@@ -3,15 +3,15 @@ import useSWR from "swr";
 import Head from "next/head";
 import dynamic from "next/dynamic";
 import { useTranslation } from "react-i18next";
-import { useEffect } from "react";
+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 { ColorProvider } from "utils/color-context";
-import { ThemeProvider } from "utils/theme-context";
+import { ColorContext } from "utils/color-context";
+import { ThemeContext } from "utils/theme-context";
 
 const ThemeToggle = dynamic(() => import("components/theme-toggle"), {
   ssr: false,
@@ -21,7 +21,7 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
   ssr: false,
 });
 
-const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"];
+const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search", "datetime"];
 
 export async function getStaticProps() {
   const settings = await getSettings();
@@ -35,6 +35,8 @@ export async function getStaticProps() {
 
 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");
@@ -50,61 +52,67 @@ export default function Home({ settings }) {
     if (settings.language) {
       i18n.changeLanguage(settings.language);
     }
-  }, [i18n, 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 (
-    <ColorProvider>
-      <ThemeProvider>
-        <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 && (
-              <>
+    <>
+      <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))
+                  .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} />
-              ))}
-            </div>
+              </div>
+            </>
           )}
-
-          {bookmarks && (
-            <div className="grow flex flex-wrap pt-0 p-8">
-              {bookmarks.map((group) => (
-                <BookmarksGroup key={group.name} group={group} />
-              ))}
-            </div>
-          )}
-
-          <div className="rounded-full flex p-8 w-full justify-between">
-            <ColorToggle />
-            <Revalidate />
-            <ThemeToggle />
-          </div>
         </div>
-      </ThemeProvider>
-    </ColorProvider>
+
+        {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="rounded-full flex p-8 w-full justify-end">
+          {!settings?.color && <ColorToggle />}
+          <Revalidate />
+          {!settings?.theme && <ThemeToggle />}
+        </div>
+      </div>
+    </>
   );
 }