Make it configurable to name and brand the fdm-app

.changeset/all-schools-lay.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add titles and descriptions to pages

.changeset/fluffy-hotels-switch.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add a message at signin page that the app is still in development

.changeset/warm-dryers-start.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Make fdm-app configurable for various settings, including the name

fdm-app/.env.example

@@ -1,85 +1,90 @@
-# NodeJS Configuration
-# Sets the environment for the application (development, production).
-# Example: development, production
+# -------------------------------------
+# General Application Configuration
+# -------------------------------------
+# Sets the environment (development, production). Affects logging, error handling, etc.
+# Required: Yes
 NODE_ENV=
 
-# Secret key used to sign session cookies.
-# Must be a strong, randomly generated string.  Do not hardcode or commit this value to version control.  Use a secure secret management system.
-# Rotate this key periodically. Compromising this secret can allow attackers to hijack user sessions.
-FDM_SESSION_SECRET=
+# Public name of the application displayed in the UI.
+# Required: Yes
+VITE_FDM_NAME=
 
-# DB configuration
-# The hostname or IP address of the PostgreSQL database server.
-POSTGRES_HOST=
+# Port the application server will listen on.
+# Required: Yes (Defaults may exist in deployment environment)
+PORT=
 
-# The port number on which the PostgreSQL database server is listening.  Defaults to 5432 if not specified.
-POSTGRES_PORT=
+# -------------------------------------
+# Session Management
+# -------------------------------------
+# Secret key used to sign session cookies. MUST be a strong, random string.
+# Keep this secret and rotate periodically.
+# Required: Yes
+FDM_SESSION_SECRET=
 
-# The name of the PostgreSQL database to connect to.
+# -------------------------------------
+# Database Configuration (PostgreSQL)
+# -------------------------------------
+# Required: Yes
+POSTGRES_HOST=
+POSTGRES_PORT=5432 # Default PostgreSQL port
 POSTGRES_DB=
-
-# The username used to authenticate with the PostgreSQL database server.
 POSTGRES_USER=
-
-# The password used to authenticate with the PostgreSQL database server.  Ensure this is stored securely and not exposed in version control.
 POSTGRES_PASSWORD=
 
-# Mapbox configuration
-# API token for Mapbox services.  Required to use Mapbox features.
-# Obtain your token from the Mapbox website.  Keep this token secure and do not expose it in version control.
-MAPBOX_TOKEN=
-
-# Authentication configuration
-# Secret key used BY better-auth
+# -------------------------------------
+# Authentication (Better Auth & OAuth Providers)
+# -------------------------------------
+# Secret key used BY the better-auth library.
+# Required: Yes
 BETTER_AUTH_SECRET=
 
-# URL of application used by better-auth
+# Full base URL of this application (used for redirects by better-auth).
+# Example: http://localhost:5173 or https://yourdomain.com
+# Required: Yes
 BETTER_AUTH_URL=
 
+# Google OAuth Credentials (Optional: Leave empty to disable Google Sign-In)
+# Required: No
 GOOGLE_CLIENT_ID=
-
 GOOGLE_CLIENT_SECRET=
 
-# Microsoft OAuth2 client ID obtained from Azure Portal
+# Microsoft OAuth Credentials (Optional: Leave empty to disable Microsoft Sign-In)
+# Required: No
 MS_CLIENT_ID=
-
-# Microsoft OAuth2 client secret obtained from Azure Portal. Keep this secure and never commit to version control.
 MS_CLIENT_SECRET=
 
-# URL of .fgb file that contains the fields available to be selected
-AVAILABLE_FIELDS_URL=
+# -------------------------------------
+# Map & Data Configuration
+# -------------------------------------
+# Mapbox API token for displaying maps.
+# Required: Yes (for map functionality)
+MAPBOX_TOKEN=
 
+# URL to the FlatGeobuf (.fgb) file containing selectable field geometries.
+# Required: Yes (for field selection functionality)
+AVAILABLE_FIELDS_URL=
 
-# Sentry configuration
-# Sentry organization
+# -------------------------------------
+# Analytics & Error Tracking (Optional)
+# -------------------------------------
+# To enable Sentry error tracking and performance monitoring, fill in ALL VITE_SENTRY_* variables below.
+# Leave them empty to disable Sentry integration.
+# Required: No
 VITE_SENTRY_ORG=
-
-# Sentry project
 VITE_SENTRY_PROJECT=
-
-# Sentry DSN
 VITE_SENTRY_DSN=
-
-# Sentry auth token
+VITE_SENTRY_TRACE_SAMPLE_RATE=1.0 # Sample rate for performance monitoring (0.0 to 1.0)
+VITE_SENTRY_REPLAY_SAMPLE_RATE=0.1 # Sample rate for session replay (0.0 to 1.0)
+VITE_SENTRY_REPLAY_SAMPLE_RATE_ON_ERROR=1.0 # Sample rate for session replay when errors occur (0.0 to 1.0)
+VITE_SENTRY_PROFILE_SAMPLE_RATE=1.0 # Sample rate for profiling (0.0 to 1.0)
+VITE_SENTRY_SECURITY_REPORT_URI= # Used for CSP reporting
+
+# Sentry Auth Token (Required ONLY for uploading source maps during build, not for runtime)
+# Required: No (for runtime)
 SENTRY_AUTH_TOKEN=
 
-# Sentry trace sample rate
-VITE_SENTRY_TRACE_SAMPLE_RATE=
-
-# Sentry replay sample rate
-VITE_SENTRY_REPLAY_SAMPLE_RATE=
-
-# Sentry replay sample rate on error
-VITE_SENTRY_REPLAY_SAMPLE_RATE_ON_ERROR=
-
-# Sentry profile sample rate
-VITE_SENTRY_PROFILE_SAMPLE_RATE=
-
-# Sentry security report URI for CSP reporting
-VITE_SENTRY_SECURITY_REPORT_URI=
-
-# Posthog configuration
-# Posthog public key
-VITE_PUBLIC_POSTHOG_KEY=
-# Posthog host
-VITE_PUBLIC_POSTHOG_HOST=
+# To enable PostHog product analytics, fill in BOTH variables below.
+# Leave them empty to disable PostHog integration.
+# Required: No
+VITE_PUBLIC_POSTHOG_KEY= # Example: phc_...
+VITE_PUBLIC_POSTHOG_HOST= # Example: https://eu.i.posthog.com

fdm-app/README.md

@@ -24,9 +24,25 @@ The `fdm-app` is a React application providing a user-friendly interface for vis
    pnpm add @svenvw/fdm-app
 ```
 
-3. **Configuration:** Set the required environment variables, including the database URL, API keys, and other relevant settings. Create a `.env` file in the root directory of your application and copy the values from the `.env.example` file.
+3.  **Configuration:**
+    Configure the application by setting environment variables. Create a `.env` file in the `fdm-app` directory by copying the provided `.env.example` file:
 
-4. **Running the App:** 
+    ```bash
+    cp .env.example .env
+    ```
+
+    Edit the `.env` file and provide values for the necessary variables. Key configuration areas include:
+    *   **General:** Application name (`VITE_FDM_NAME`), environment (`NODE_ENV`).
+    *   **Session:** A strong secret key (`FDM_SESSION_SECRET`).
+    *   **Database:** Connection details for your PostgreSQL database.
+    *   **Authentication:** Secrets and URLs for `better-auth` and optionally OAuth providers (Google, Microsoft).
+    *   **Mapbox:** API token for map rendering (`MAPBOX_TOKEN`).
+    *   **Data URLs:** Paths to external data files (`AVAILABLE_FIELDS_URL`).
+    *   **Analytics (Optional):** Configuration for Sentry and/or PostHog. These services are disabled by default. To enable them, provide the relevant keys/DSNs as described in `.env.example`.
+
+    Refer to the comments within the `.env.example` file for detailed explanations of each variable and whether it's required. **Never commit your `.env` file to version control.**
+
+4.  **Running the App:**
 ```bash
     # Development mode
     pnpm dev

fdm-app/app/components/blocks/farm.tsx

@@ -2,25 +2,24 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { Form } from "react-router"
 import { RemixFormProvider, useRemixForm } from "remix-hook-form"
 import type { z } from "zod"
-
-import { Button } from "@/components/ui/button"
+import { Button } from "~/components/ui/button"
 import {
     Card,
     CardContent,
     CardDescription,
     CardFooter,
     CardHeader,
     CardTitle,
-} from "@/components/ui/card"
+} from "~/components/ui/card"
 import {
     FormControl,
     FormDescription,
     FormField,
     FormItem,
     FormLabel,
     FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
+} from "~/components/ui/form"
+import { Input } from "~/components/ui/input"
 import { LoadingSpinner } from "../custom/loadingspinner"
 
 export interface fertilizersListType {

fdm-app/app/components/blocks/fields.tsx

@@ -1,44 +1,42 @@
+import { useToast } from "@/hooks/use-toast"
 import type { FeatureCollection } from "geojson"
+import { Check, ChevronsUpDown } from "lucide-react"
 import { useEffect, useState } from "react"
 import { Form, useNavigation } from "react-router"
-
-import { FieldMap } from "@/components/blocks/field-map"
-// Components
-import { Button } from "@/components/ui/button"
+import { ClientOnly } from "remix-utils/client-only"
+import { FieldMap } from "~/components/blocks/field-map"
+import { Button } from "~/components/ui/button"
 import {
     Card,
     CardContent,
     CardDescription,
     CardFooter,
     CardHeader,
     CardTitle,
-} from "@/components/ui/card"
+} from "~/components/ui/card"
 import {
     Command,
     CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
     CommandList,
-} from "@/components/ui/command"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from "~/components/ui/command"
+import { Input } from "~/components/ui/input"
+import { Label } from "~/components/ui/label"
 import {
     Popover,
     PopoverContent,
     PopoverTrigger,
-} from "@/components/ui/popover"
+} from "~/components/ui/popover"
 import {
     Select,
     SelectContent,
     SelectItem,
     SelectTrigger,
     SelectValue,
-} from "@/components/ui/select"
-import { useToast } from "@/hooks/use-toast"
-import { cn } from "@/lib/utils"
-import { Check, ChevronsUpDown } from "lucide-react"
-import { ClientOnly } from "remix-utils/client-only"
+} from "~/components/ui/select"
+import { cn } from "~/lib/utils"
 import { Skeleton } from "../ui/skeleton"
 
 interface CultivationOption {

fdm-app/app/components/custom/atlas/atlas-panels.tsx

@@ -1,22 +1,22 @@
-import { LoadingSpinner } from "@/components/custom/loadingspinner"
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import { Button } from "@/components/ui/button"
+import type { FeatureCollection } from "geojson"
+import throttle from "lodash.throttle"
+import { Check, Info } from "lucide-react"
+import { useEffect, useState } from "react"
+import { useMap } from "react-map-gl"
+import type { MapBoxZoomEvent, MapEvent, MapMouseEvent } from "react-map-gl"
+import { data, useFetcher } from "react-router"
+import { LoadingSpinner } from "~/components/custom/loadingspinner"
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert"
+import { Button } from "~/components/ui/button"
 import {
     Card,
     CardContent,
     CardDescription,
     CardFooter,
     CardHeader,
     CardTitle,
-} from "@/components/ui/card"
-import { cn } from "@/lib/utils"
-import type { FeatureCollection } from "geojson"
-import throttle from "lodash.throttle"
-import { Check, Info } from "lucide-react"
-import { useEffect, useState } from "react"
-import { useMap } from "react-map-gl"
-import type { MapBoxZoomEvent, MapEvent, MapMouseEvent } from "react-map-gl"
-import { useFetcher } from "react-router"
+} from "~/components/ui/card"
+import { cn } from "~/lib/utils"
 
 export function FieldsPanelHover({
     zoomLevelFields,

fdm-app/app/components/custom/atlas/atlas-sources.tsx

@@ -4,7 +4,7 @@ import throttle from "lodash.throttle"
 import { type Dispatch, type SetStateAction, useEffect, useState } from "react"
 import { Source, useMap } from "react-map-gl"
 import { generateFeatureClass } from "./atlas-functions"
-import type { fieldsAvailableUrlType } from "./atlas.d"
+import type { FieldsAvailableUrlType } from "./atlas.d"
 
 export function FieldsSourceNotClickable({
     id,
@@ -108,7 +108,7 @@ export function FieldsSourceAvailable({
     children,
 }: {
     id: string
-    url: fieldsAvailableUrlType
+    url: FieldsAvailableUrlType
     zoomLevelFields: number
     children: JSX.Element
 }) {

fdm-app/app/components/custom/atlas/atlas.d.tsx

@@ -7,7 +7,7 @@ export interface MapFieldsProps {
     mapboxToken: string
     mapStyle: "mapbox://styles/mapbox/satellite-streets-v12"
     fieldsSelected: FeatureCollection | null
-    fieldsAvailableUrl: fieldsAvailableUrlType
+    fieldsAvailableUrl: FieldsAvailableUrlType
     fieldsSaved: FeatureCollection | null
 }
 

fdm-app/app/components/custom/banner.tsx

@@ -1,7 +1,8 @@
-import { Button } from "@/components/ui/button"
-import { Cookie, CookieIcon, X } from "lucide-react"
+import { Cookie, X } from "lucide-react"
 import posthog from "posthog-js"
 import { useEffect, useState } from "react"
+import { Button } from "~/components/ui/button"
+import { clientConfig } from "~/lib/config"
 
 type ConsentType = "yes" | "no" | "undecided"
 
@@ -36,7 +37,8 @@ export function Banner() {
     }, [])
 
     useEffect(() => {
-        if (consentGiven !== "undecided") {
+        // Set PostHog persistence based on consent, if PostHog is configured
+        if (clientConfig.analytics.posthog && consentGiven !== "undecided") {
             try {
                 posthog.set_config({
                     persistence:
@@ -116,7 +118,7 @@ export function Banner() {
                         <div className="grid gap-2">
                             <div className="border-b border-border h-14 flex items-center justify-between p-4">
                                 <h1 className="text-lg font-medium">
-                                    Cookies op FDM
+                                    {`Cookies op ${clientConfig.name}`}
                                 </h1>
                                 <div className="flex gap-2">
                                     <Cookie className="h-[1.2rem] w-[1.2rem]" />
@@ -132,9 +134,9 @@ export function Banner() {
                             </div>
                             <div className="p-4">
                                 <p className="text-sm font-normal text-start">
-                                    Wij gebruiken cookies enkel om FDM te
+                                    {`Wij gebruiken cookies enkel om ${clientConfig.name} te
                                     verbeteren, zodat we weten wat er goed en
-                                    fout gaat.
+                                    fout gaat.`}
                                     <br />
                                     Geen zorgen, we gebruiken ze niet voor
                                     advertenties en ook niet om je online te