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,7 +9,7 @@
 - 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
@@ -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"
     }
 }

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/index.jsx

@@ -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();