📈 Add umami analytics using homarr.dev

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -8,6 +8,7 @@ import { useStyles } from './styles';
 
 interface GenericAvailableElementTypeProps {
   name: string;
+  id: string;
   handleAddition: () => Promise<void>;
   description?: string;
   image: string | Icon;
@@ -16,6 +17,7 @@ interface GenericAvailableElementTypeProps {
 
 export const GenericAvailableElementType = ({
   name,
+  id,
   description,
   image,
   disabled,

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -1,4 +1,4 @@
-import { Grid, Text } from '@mantine/core';
+import { Container, Grid, Text } from '@mantine/core';
 import { IconCursorText } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
@@ -21,12 +21,13 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
       </Text>
 
       <Grid grow>
+        {/*
         <GenericAvailableElementType
           name="Static Text"
           description="Display a fixed string on your dashboard"
           image={IconCursorText}
-          handleAddition={/* TODO: add something? */ async () => {}}
-        />
+          handleAddition={async () => {}}
+        /> */}
       </Grid>
     </>
   );

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -3,10 +3,10 @@ import { showNotification } from '@mantine/notifications';
 import { Icon, IconChecks } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { v4 as uuidv4 } from 'uuid';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { IWidget, IWidgetDefinition } from '~/widgets/widgets';
+
 import { useEditModeStore } from '../../../../Views/useEditModeStore';
 import { GenericAvailableElementType } from '../Shared/GenericElementType';
 
@@ -97,6 +97,7 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
       icon: <IconChecks stroke={1.5} />,
       color: 'teal',
     });
+    umami.track('Add widget', { id: widget.id });
   };
 
   return (
@@ -104,6 +105,7 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
       name={t('descriptor.name')}
       description={t('descriptor.description') ?? undefined}
       image={image}
+      id={widget.id}
       disabled={disabled}
       handleAddition={handleAddition}
     />

src/components/Manage/Board/create-board.modal.tsx

@@ -58,7 +58,9 @@ export const CreateBoardModal = ({ id }: ContextModalProps<{}>) => {
           </Button>
           <Button
             type="submit"
-            onClick={async () => {}}
+            onClick={async () => {
+              umami.track('Create new board')
+            }}
             disabled={isLoading}
             variant="light"
             color="green"

src/components/Manage/Tools/Docker/docker-select-board.modal.tsx

@@ -117,4 +117,5 @@ export const openDockerSelectBoardModal = (innerProps: InnerProps) => {
     ),
     innerProps,
   });
+  umami.track('Add to homarr modal')
 };

src/components/Manage/User/Create/review-input-step.tsx

@@ -106,6 +106,7 @@ export const ReviewInputStep = ({ values, prevStep, nextStep }: ReviewInputStepP
               password: values.security.password,
               email: values.account.eMail === '' ? undefined : values.account.eMail,
             });
+            umami.track('Create user', { username: values.account.username});
           }}
           loading={isLoading}
           rightIcon={<IconCheck size="1rem" />}

src/components/Manage/User/Create/security-step.tsx

@@ -66,6 +66,7 @@ export const CreateAccountSecurityStep = ({
                 onClick={async () => {
                   const randomPassword = await mutateAsync();
                   form.setFieldValue('password', randomPassword);
+                  umami.track('Generate random password');
                 }}
                 loading={isLoading}
                 variant="default"

src/components/Onboarding/step-create-account.tsx

@@ -59,6 +59,7 @@ export const StepCreateAccount = ({
       <Text>
         Your administrator account <b>must be secure</b>, that's why we have so many rules surrounding it.
        <br/>Try not to make it adminadmin this time...
+       <br/>Note: these password requirements <b>are not forced</b>, they are just recommendations.
       </Text>
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack>

src/components/layout/Templates/BoardLayout.tsx

@@ -23,6 +23,7 @@ import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { api } from '~/utils/api';
 
 import { MainLayout } from './MainLayout';
+import { env } from 'process';
 
 type BoardLayoutProps = {
   dockerEnabled: boolean;

src/env.js

@@ -36,6 +36,7 @@ const env = createEnv({
    */
   client: {
     // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
+    NEXT_PUBLIC_DISABLE_ANALYTICS: z.string(),
     NEXT_PUBLIC_PORT: portSchema,
     NEXT_PUBLIC_NODE_ENV: envSchema,
     NEXT_PUBLIC_DEFAULT_COLOR_SCHEME: z
@@ -46,7 +47,6 @@ const env = createEnv({
       .default('light'),
     NEXT_PUBLIC_DOCKER_HOST: z.string().optional(),
   },
-
   /**
    * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
    * middlewares) or client-side so we need to destruct manually.
@@ -55,6 +55,7 @@ const env = createEnv({
     DATABASE_URL: process.env.DATABASE_URL,
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+    NEXT_PUBLIC_DISABLE_ANALYTICS: process.env.NEXT_PUBLIC_DISABLE_ANALYTICS,
     DOCKER_HOST: process.env.DOCKER_HOST,
     DOCKER_PORT: process.env.DOCKER_PORT,
     VERCEL_URL: process.env.VERCEL_URL,

src/pages/_app.tsx

@@ -13,27 +13,28 @@ import { Session } from 'next-auth';
 import { SessionProvider, getSession } from 'next-auth/react';
 import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
+import Script from 'next/script';
 import { useEffect, useState } from 'react';
 import 'video.js/dist/video-js.css';
 import { CommonHead } from '~/components/layout/Meta/CommonHead';
+import { ConfigProvider } from '~/config/provider';
 import { env } from '~/env.js';
 import { ColorSchemeProvider } from '~/hooks/use-colorscheme';
 import { modals } from '~/modals';
+import { ColorTheme } from '~/tools/color';
 import { getLanguageByCode } from '~/tools/language';
+import {
+  ServerSidePackageAttributesType,
+  getServiceSidePackageAttributes,
+} from '~/tools/server/getPackageVersion';
+import { theme } from '~/tools/server/theme/theme';
 import { ConfigType } from '~/types/config';
 import { api } from '~/utils/api';
 import { colorSchemeParser } from '~/validations/user';
 
 import { COOKIE_COLOR_SCHEME_KEY, COOKIE_LOCALE_KEY } from '../../data/constants';
 import nextI18nextConfig from '../../next-i18next.config.js';
-import { ConfigProvider } from '~/config/provider';
 import '../styles/global.scss';
-import { ColorTheme } from '~/tools/color';
-import {
-  ServerSidePackageAttributesType,
-  getServiceSidePackageAttributes,
-} from '~/tools/server/getPackageVersion';
-import { theme } from '~/tools/server/theme/theme';
 
 dayjs.extend(locale);
 dayjs.extend(utc);
@@ -92,6 +93,13 @@ function App(
   return (
     <>
       <CommonHead />
+      {env.NEXT_PUBLIC_DISABLE_ANALYTICS !== 'true' && (
+        <Script
+          src="https://umami.homarr.dev/script.js"
+          data-website-id="f133f10c-30a7-4506-889c-3a803f328fa4"
+          strategy="lazyOnload"
+        />
+      )}
       <SessionProvider session={pageProps.session}>
         <ColorSchemeProvider {...pageProps}>
           {(colorScheme) => (