Docs refactor (#22703)

* add generation script

a script to read yaml code blocks from docs markdown files and generate corresponding "Frigate UI" tab instructions based on the json schema, i18n, section configs (hidden fields), and nav mappings

* first pass

* components

* add to gitignore

* second pass

* fix broken anchors

* fixes

* clean up tabs

* version bump

* tweaks

* remove role mapping config from ui

docs/src/components/ConfigTabs/index.jsx

@@ -0,0 +1,34 @@
+import React, { Children, cloneElement } from "react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+export default function ConfigTabs({ children }) {
+  const wrapped = Children.map(children, (child) => {
+    if (child?.props?.value === "ui") {
+      return cloneElement(child, {
+        className: "config-tab-ui",
+      });
+    }
+    if (child?.props?.value === "yaml") {
+      return cloneElement(child, {
+        className: "config-tab-yaml",
+      });
+    }
+    return child;
+  });
+
+  return (
+    <div className="config-tabs-wrapper">
+      <Tabs
+        groupId="config-method"
+        defaultValue="ui"
+        values={[
+          { label: "Frigate UI", value: "ui" },
+          { label: "YAML", value: "yaml" },
+        ]}
+      >
+        {wrapped}
+      </Tabs>
+    </div>
+  );
+}

docs/src/components/NavPath/index.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function NavPath({ path }) {
+  const segments = path.split(" > ");
+  return (
+    <span
+      style={{
+        display: "inline",
+        fontSize: "inherit",
+        lineHeight: "inherit",
+      }}
+    >
+      {segments.map((seg, i) => (
+        <span key={i}>
+          {i > 0 && (
+            <span
+              style={{
+                margin: "0 4px",
+                color: "var(--ifm-color-emphasis-800)",
+              }}
+            >
+              →
+            </span>
+          )}
+          <strong>{seg}</strong>
+        </span>
+      ))}
+    </span>
+  );
+}