code style

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,6 +6,7 @@
 ==================== STOP ====
 
 ⚠️ Before opening this pull request please review the guidelines in the checklist below.
+
 If this PR does not meet those guidelines it will not be accepted, and everyone will be sad.
 -->
 
@@ -14,9 +15,6 @@ If this PR does not meet those guidelines it will not be accepted, and everyone
 <!--
 Please include a summary of the change. Screenshots and/or videos can also be helpful if appropriate.
 
-*** Please see the development guidelines for new widgets: https://gethomepage.dev/more/development/#service-widget-guidelines
-*** If you do not follow these guidelines your PR will likely be closed without review.
-
 New service widgets should include example(s) of relevant API output as well as updates to the docs for the new widget.
 -->
 
@@ -30,13 +28,13 @@ What type of change does your PR introduce to Homepage?
 
 - [ ] New service widget
 - [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
+- [ ] New feature or enhancement (non-breaking change which adds functionality)
 - [ ] Documentation only
 - [ ] Other (please explain)
 
 ## Checklist:
 
 - [ ] If applicable, I have added corresponding documentation changes.
-- [ ] If applicable, I have reviewed the [feature](https://gethomepage.dev/more/development/#new-feature-guidelines) and / or [service widget guidelines](https://gethomepage.dev/more/development/#service-widget-guidelines).
+- [ ] If applicable, I have reviewed the [feature / enhancement](https://gethomepage.dev/more/development/#new-feature-guidelines) and / or [service widget guidelines](https://gethomepage.dev/more/development/#service-widget-guidelines).
 - [ ] I have checked that all code style checks pass using [pre-commit hooks](https://gethomepage.dev/more/development/#code-formatting-with-pre-commit-hooks) and [linting checks](https://gethomepage.dev/more/development/#code-linting).
 - [ ] If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.

docs/installation/source.md

@@ -23,3 +23,5 @@ Finally, run the server:
 ```bash
 pnpm start
 ```
+
+When updating homepage versions you will need to re-build the static files i.e. repeat the process above.

docs/widgets/authoring/getting-started.md

@@ -46,9 +46,9 @@ See the [pre-commit documentation](https://pre-commit.com/#install) to get start
 In general, homepage is meant to be a dashboard for 'self-hosted' services and we believe it is a small way we can help showcase this kind of software. While exceptions are made, mostly when there is no viable
 self-hosted / open-source alternative, we ask that any widgets, etc. are developed primarily for a self-hosted tool.
 
-## New Feature Guidelines
+## New Feature or Enhancement Guidelines {#new-feature-guidelines}
 
-- New features should be linked to an existing feature request. The purpose of this requirement is to avoid the addition (and maintenance) of features that might only benefit a small number of users.
+- New features or enhancements, **no matter how small**, must be linked to an existing feature request. The purpose of this requirement is to avoid the addition (and maintenance) of features that might only benefit a small number of users.
 - If you have ideas for a larger feature you may want to open a discussion first.
 
 ## Service Widget Guidelines

docs/widgets/services/customapi.md

@@ -62,10 +62,12 @@ widget:
       format: size
 ```
 
-Supported formats for the values are `text`, `number`, `float`, `percent`, `bytes`, `bitrate`, `size`, `date` and `relativeDate`.
+Supported formats for the values are `text`, `number`, `float`, `percent`, `duration`, `bytes`, `bitrate`, `size`, `date` and `relativeDate`.
 
 The `dateStyle` and `timeStyle` options of the `date` format are passed directly to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) and the `style` and `numeric` options of `relativeDate` are passed to [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat).
 
+The `duration` format expects the duration to be specified in seconds. The `scale` transformation tool can be used if a conversion is required.
+
 The `size` format will return the length of the array or string, or the number of keys in an object. This is then formatted as `number`.
 
 ## Example

docs/widgets/services/gluetun.md

@@ -11,7 +11,7 @@ Learn more about [Gluetun](https://github.com/qdm12/gluetun).
 
 Allowed fields: `["public_ip", "region", "country"]`.
 
-To setup authentication, follow [the official Gluetun documentation](https://github.com/qdm12/gluetun-wiki/blob/main/setup/advanced/control-server.md#authentication).
+To setup authentication, follow [the official Gluetun documentation](https://github.com/qdm12/gluetun-wiki/blob/main/setup/advanced/control-server.md#authentication). Note that to use the api key method, you must add the route `GET /v1/publicip/ip` to the `routes` array in your Gluetun config.toml.
 
 ```yaml
 widget:

package.json

@@ -32,11 +32,11 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.6",
-    "react-icons": "^4.12.0",
+    "react-icons": "^5.4.0",
     "recharts": "^2.12.6",
     "rrule": "^2.8.1",
     "swr": "^1.3.0",
-    "systeminformation": "^5.23.8",
+    "systeminformation": "^5.24.3",
     "tough-cookie": "^4.1.3",
     "urbackup-server-api": "^0.52.1",
     "winston": "^3.11.0",
@@ -52,12 +52,12 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "postcss": "^8.4.47",
     "prettier": "^3.2.5",
     "tailwind-scrollbar": "^3.0.5",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3"
   },
   "optionalDependencies": {

src/pages/index.jsx

@@ -166,6 +166,18 @@ const headerStyles = {
   boxedWidgets: "m-5 mb-0 sm:m-9 sm:mb-0 sm:mt-1",
 };
 
+function getAllServices(services) {
+  function getServices(group) {
+    let nestedServices = [...group.services];
+    if (group.groups.length > 0) {
+      nestedServices = [...nestedServices, ...group.groups.map(getServices).flat()];
+    }
+    return nestedServices;
+  }
+
+  return [...services.map(getServices).flat()];
+}
+
 function Home({ initialSettings }) {
   const { i18n } = useTranslation();
   const { theme, setTheme } = useContext(ThemeContext);
@@ -182,10 +194,9 @@ function Home({ initialSettings }) {
   const { data: bookmarks } = useSWR("/api/bookmarks");
   const { data: widgets } = useSWR("/api/widgets");
 
-  const servicesAndBookmarks = [
-    ...services.map((sg) => sg.services).flat(),
-    ...bookmarks.map((bg) => bg.bookmarks).flat(),
-  ].filter((i) => i?.href);
+  const servicesAndBookmarks = [...bookmarks.map((bg) => bg.bookmarks).flat(), ...getAllServices(services)].filter(
+    (i) => i?.href,
+  );
 
   useEffect(() => {
     if (settings.language) {
@@ -459,7 +470,7 @@ function Home({ initialSettings }) {
 }
 
 export default function Wrapper({ initialSettings, fallback }) {
-  const { theme } = useContext(ThemeContext);
+  const { themeContext } = useContext(ThemeContext);
   const wrappedStyle = {};
   let backgroundBlur = false;
   let backgroundSaturate = false;
@@ -490,9 +501,9 @@ export default function Wrapper({ initialSettings, fallback }) {
       id="page_wrapper"
       className={classNames(
         "relative",
-        theme && theme,
+        initialSettings.theme && initialSettings.theme,
         initialSettings.color && `theme-${initialSettings.color}`,
-        theme === "dark" ? "scheme-dark" : "scheme-light",
+        themeContext === "dark" ? "scheme-dark" : "scheme-light",
       )}
     >
       <div

src/widgets/customapi/component.jsx

@@ -78,6 +78,9 @@ function formatValue(t, mapping, rawValue) {
     case "percent":
       value = t("common.percent", { value });
       break;
+    case "duration":
+      value = t("common.duration", { value });
+      break;
     case "bytes":
       value = t("common.bytes", { value });
       break;

src/widgets/glances/metrics/fs.jsx

@@ -46,7 +46,7 @@ export default function Component({ service }) {
         <div className="absolute -top-2 -left-2 -right-2 -bottom-2">
           <div
             style={{
-              height: `${Math.max(20, fsData.size / fsData.free)}%`,
+              height: `${Math.max(20, (140 * (fsData.size - fsData.free)) / fsData.size)}px`,
             }}
             className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full"
           />