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>
+  );
+}

docs/src/css/custom.css

@@ -241,4 +241,50 @@
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
   border-left: 3px solid #ff000080;
+}
+
+/* ConfigTabs wrapper */
+.config-tabs-wrapper {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.config-tabs-wrapper .tabs-container {
+  margin-bottom: 0 !important;
+}
+
+.config-tabs-wrapper .tabs {
+  background: var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  margin-bottom: 0;
+  padding: 0 12px;
+}
+
+.config-tabs-wrapper .tabs__item {
+  padding: 8px 16px;
+  border-radius: 0;
+}
+
+.config-tabs-wrapper .tabs__item--active {
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+.config-tabs-wrapper .config-tab-ui {
+  padding: 4px 16px 16px;
+}
+
+.config-tabs-wrapper .config-tab-ui > :last-child {
+  margin-bottom: 0;
+}
+
+.config-tabs-wrapper div[class*="codeBlockContainer"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin: 0;
+}
+
+.config-tabs-wrapper .tabs-container > .margin-top--md:has(.config-tab-yaml:not([hidden])) {
+  margin-top: 0 !important;
 }