feat: document locale url (#18409)

* feat: document locale url

* fix: remove debug code

* fix readme_cn line

* feat: add menu document locale url

web/src/views/settings/CameraSettingsView.tsx

@@ -31,6 +31,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { useAlertsState, useDetectionsState, useEnabledState } from "@/api/ws";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 
 type CameraSettingsViewProps = {
   selectedCamera: string;
@@ -47,6 +48,7 @@ export default function CameraSettingsView({
   setUnsavedChanges,
 }: CameraSettingsViewProps) {
   const { t } = useTranslation(["views/settings"]);
+  const { getLocaleDocUrl } = useDocDomain();
 
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
@@ -352,7 +354,7 @@ export default function CameraSettingsView({
               </p>
               <div className="flex items-center text-primary">
                 <Link
-                  to="https://docs.frigate.video/configuration/review"
+                  to={getLocaleDocUrl("configuration/review")}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline"

web/src/views/settings/EnrichmentsSettingsView.tsx

@@ -32,6 +32,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { buttonVariants } from "@/components/ui/button";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 
 type EnrichmentsSettings = {
   search: {
@@ -57,6 +58,7 @@ export default function EnrichmentsSettingsView({
   setUnsavedChanges,
 }: EnrichmentsSettingsViewProps) {
   const { t } = useTranslation("views/settings");
+  const { getLocaleDocUrl } = useDocDomain();
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
   const [changedValue, setChangedValue] = useState(false);
@@ -256,7 +258,7 @@ export default function EnrichmentsSettingsView({
 
             <div className="flex items-center text-primary">
               <Link
-                to="https://docs.frigate.video/configuration/semantic_search"
+                to={getLocaleDocUrl("configuration/semantic_search")}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline"
@@ -402,7 +404,7 @@ export default function EnrichmentsSettingsView({
 
               <div className="flex items-center text-primary">
                 <Link
-                  to="https://docs.frigate.video/configuration/face_recognition"
+                  to={getLocaleDocUrl("configuration/face_recognition")}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline"
@@ -503,7 +505,9 @@ export default function EnrichmentsSettingsView({
 
               <div className="flex items-center text-primary">
                 <Link
-                  to="https://docs.frigate.video/configuration/license_plate_recognition"
+                  to={getLocaleDocUrl(
+                    "configuration/license_plate_recognition",
+                  )}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline"
@@ -549,7 +553,9 @@ export default function EnrichmentsSettingsView({
 
               <div className="flex items-center text-primary">
                 <Link
-                  to="https://docs.frigate.video/configuration/license_plate_recognition"
+                  to={getLocaleDocUrl(
+                    "configuration/license_plate_recognition",
+                  )}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline"

web/src/views/settings/FrigatePlusSettingsView.tsx

@@ -22,6 +22,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "@/components/ui/select";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 
 type FrigatePlusModel = {
   id: string;
@@ -49,6 +50,7 @@ export default function FrigatePlusSettingsView({
   setUnsavedChanges,
 }: FrigateSettingsViewProps) {
   const { t } = useTranslation("views/settings");
+  const { getLocaleDocUrl } = useDocDomain();
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
   const [changedValue, setChangedValue] = useState(false);
@@ -451,7 +453,7 @@ export default function FrigatePlusSettingsView({
                   </p>
                   <div className="mt-2 flex items-center text-primary-variant">
                     <Link
-                      to="https://docs.frigate.video/plus/faq"
+                      to={getLocaleDocUrl("plus/faq")}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="inline"

web/src/views/settings/MasksAndZonesView.tsx

@@ -41,6 +41,8 @@ import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { useTranslation } from "react-i18next";
 
+import { useDocDomain } from "@/hooks/use-doc-domain";
+
 type MasksAndZoneViewProps = {
   selectedCamera: string;
   selectedZoneMask?: PolygonType[];
@@ -53,6 +55,7 @@ export default function MasksAndZonesView({
   setUnsavedChanges,
 }: MasksAndZoneViewProps) {
   const { t } = useTranslation(["views/settings"]);
+  const { getLocaleDocUrl } = useDocDomain();
   const { data: config } = useSWR<FrigateConfig>("config");
   const [allPolygons, setAllPolygons] = useState<Polygon[]>([]);
   const [editingPolygons, setEditingPolygons] = useState<Polygon[]>([]);
@@ -513,7 +516,7 @@ export default function MasksAndZonesView({
                               <p>{t("masksAndZones.zones.desc.title")}</p>
                               <div className="flex items-center text-primary">
                                 <Link
-                                  to="https://docs.frigate.video/configuration/zones"
+                                  to={getLocaleDocUrl("configuration/zones")}
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   className="inline"
@@ -579,7 +582,9 @@ export default function MasksAndZonesView({
                               <p>{t("masksAndZones.motionMasks.desc.title")}</p>
                               <div className="flex items-center text-primary">
                                 <Link
-                                  to="https://docs.frigate.video/configuration/masks#motion-masks"
+                                  to={getLocaleDocUrl(
+                                    "configuration/masks#motion-masks",
+                                  )}
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   className="inline"
@@ -649,7 +654,9 @@ export default function MasksAndZonesView({
                               <p>{t("masksAndZones.objectMasks.desc.title")}</p>
                               <div className="flex items-center text-primary">
                                 <Link
-                                  to="https://docs.frigate.video/configuration/masks#object-filter-masks"
+                                  to={getLocaleDocUrl(
+                                    "configuration/masks#object-filter-masks",
+                                  )}
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   className="inline"

web/src/views/settings/MotionTunerView.tsx

@@ -22,6 +22,7 @@ import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import { Trans, useTranslation } from "react-i18next";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 
 type MotionTunerViewProps = {
   selectedCamera: string;
@@ -39,6 +40,7 @@ export default function MotionTunerView({
   setUnsavedChanges,
 }: MotionTunerViewProps) {
   const { t } = useTranslation(["views/settings"]);
+  const { getLocaleDocUrl } = useDocDomain();
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
   const [changedValue, setChangedValue] = useState(false);
@@ -198,7 +200,7 @@ export default function MotionTunerView({
 
           <div className="flex items-center text-primary">
             <Link
-              to="https://docs.frigate.video/configuration/motion_detection"
+              to={getLocaleDocUrl("configuration/motion_detection")}
               target="_blank"
               rel="noopener noreferrer"
               className="inline"

web/src/views/settings/NotificationsSettingsView.tsx

@@ -45,6 +45,7 @@ import FilterSwitch from "@/components/filter/FilterSwitch";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 
 const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js";
 
@@ -61,6 +62,7 @@ export default function NotificationView({
   setUnsavedChanges,
 }: NotificationsSettingsViewProps) {
   const { t } = useTranslation(["views/settings"]);
+  const { getLocaleDocUrl } = useDocDomain();
 
   const { data: config, mutate: updateConfig } = useSWR<FrigateConfig>(
     "config",
@@ -316,7 +318,7 @@ export default function NotificationView({
                 <p>{t("notification.notificationSettings.desc")}</p>
                 <div className="flex items-center text-primary">
                   <Link
-                    to="https://docs.frigate.video/configuration/notifications"
+                    to={getLocaleDocUrl("configuration/notifications")}
                     target="_blank"
                     rel="noopener noreferrer"
                     className="inline"
@@ -338,7 +340,7 @@ export default function NotificationView({
                 </Trans>
                 <div className="mt-3 flex items-center">
                   <Link
-                    to="https://docs.frigate.video/configuration/authentication"
+                    to={getLocaleDocUrl("configuration/authentication")}
                     target="_blank"
                     rel="noopener noreferrer"
                     className="inline"
@@ -371,7 +373,7 @@ export default function NotificationView({
                   <p>{t("notification.notificationSettings.desc")}</p>
                   <div className="flex items-center text-primary">
                     <Link
-                      to="https://docs.frigate.video/configuration/notifications"
+                      to={getLocaleDocUrl("configuration/notifications")}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="inline"

web/src/views/settings/ObjectSettingsView.tsx

@@ -28,6 +28,7 @@ import DebugDrawingLayer from "@/components/overlay/DebugDrawingLayer";
 import { Separator } from "@/components/ui/separator";
 import { isDesktop } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 
 type ObjectSettingsViewProps = {
   selectedCamera?: string;
@@ -42,6 +43,8 @@ export default function ObjectSettingsView({
 }: ObjectSettingsViewProps) {
   const { t } = useTranslation(["views/settings"]);
 
+  const { getLocaleDocUrl } = useDocDomain();
+
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -258,7 +261,9 @@ export default function ObjectSettingsView({
                               {t("debug.objectShapeFilterDrawing.tips")}
                               <div className="mt-2 flex items-center text-primary">
                                 <Link
-                                  to="https://docs.frigate.video/configuration/object_filters#object-shape"
+                                  to={getLocaleDocUrl(
+                                    "configuration/object_filters#object-shape",
+                                  )}
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   className="inline"