### Next.js App Initialization Script

Source: https://context7_llms

This JavaScript snippet represents a part of the Next.js application's client-side bootstrapping process. It includes logic for managing a banner's visibility based on user interaction and local storage, and initializes application-wide context providers.

```javascript
self.__next_f.push([
  1,
  "14:[\"$\",\"$L5\",null,{\"docsConfig\":{\"theme\":\"maple\",\"$schema\":\"https://mintlify.com/docs.json\",\"name\":\"Quill\",\"colors\":{\"primary\":\"#212121\",\"light\":\"#FFFFFF\",\"dark\":\"#212121\"},\"logo\":{\"light\":\"https://mintlify.s3.us-west-1.amazonaws.com/quill/logo/light.png\",\"dark\":\"https://mintlify.s3.us-west-1.amazonaws.com/quill/logo/dark.png\",\"href\":\"https://quill.co\"},\"favicon\":\"/favicon.png\",\"navbar\":{\"primary\":{\"type\":\"button\",\"label\":\"Learn more\",\"href\":\"https://quill.co\"}},\"navigation\":{\"tabs\":[{\"tab\":\"Architecture\",\"groups\":[{\"group\":\"Architecture\",\"pages\":[\"architecture\"]}]},{\"tab\":\"BI Platform\",\"groups\":[{\"group\":\"BI Platform\",\"pages\":[\"bi-platform/overview\",\"bi-platform/quickstart\",\"bi-platform/tenant\",\"bi-platform/virtual-table\",\"bi-platform/dashboard\",\"bi-platform/report\",\"bi-platform/self-host\"]}]},{\"tab\":\"React SDK\",\"groups\":[{\"group\":\"Getting Started\",\"pages\":[\"react/quickstart\",\"react/themes\",\"react/headless\"]},{\"group\":\"Use cases\",\"pages\":[\"react/headless-dashboard\",\"react/headless-data-export\"]},{\"group\":\"Components\",\"pages\":[\"react/quill-provider\",\"react/dashboard\",\"react/report-builder\",\"react/chart\",\"react/static-chart\",\"react/table\",\"react/sql-editor\"]},{\"group\":\"Hooks\",\"pages\":[\"react/use-dashboard\",\"react/use-dashboard-report\",\"react/use-dashboards\",\"react/use-quill\",\"react/use-export\"]},{\"group\":\"Functions\",\"pages\":[\"react/format\"]}]},{\"tab\":\"Server SDK\",\"groups\":[{\"group\":\"Server SDK\",\"pages\":[\"server/quickstart\"]}]}]},\"styling\":{\"codeblocks\":\"system\"}},\"children\":[false,["$","$L22",null,{"id\":\"_mintlify-banner-script\",\"strategy\":\"beforeInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"(function m(a,b,c,d){try{let e=document.getElementById(\"banner\"),f=e?.innerText;if(!f)return void document.documentElement.setAttribute(d,\"hidden\");let g=localStorage.getItem(a),h=g!==f\u0026\u0026g!==b;null!=g\u0026\u0026(h?(localStorage.removeItem(c),localStorage.removeItem(a)):(localStorage.setItem(c,f),localStorage.setItem(a,f))),document.documentElement.setAttribute(d,!g||h?\"visible\":\"hidden\")}catch(a){console.error(a),document.documentElement.setAttribute(d,\"hidden\")}})(\n  \"quill-bannerDismissed\",\n  undefined,\n  \"__mintlify-bannerDismissed\",\n  \"data-banner-state\",\n)\"}}],["$","$L23",null,{"appId\":\"$undefined\",\"autoBoot\":true,\"children\":["$","$L24",null,{"value\":{\"auth\":\"$undefined\",\"userAuth\":\"$undefined\"},\"children\":["$","$L25",null,{"value\":{\"subdomain\":\"quill\",\"actualSubdomain\":\"quill\",\"gitSource\":{\"type\":\"github\",\"owner\":\"quill-sql\",\"repo\":\"docs\",\"deployBranch\":\"main\",\"contentDirectory\":\"\"},\"inkeep\":{\"integrationApiKey\":\"0eaeb874eb9519f754fda722c1578599b4553cdb900ecaa6\"},\"trieve\":{\"datasetId\":\"e3f2f0bf-52b1-4142-a2a0-61355e799642\",\"chatEnabled\":true},\"feedback\":\"$undefined\",\"entitlements\":{\"AI_CHAT\":{\"status\":\"ENABLED\"}},\"buildId\":\"6882b293c63da0bf290f36db:success\",\"clientVersion\":\"0.0.1482\"},\"children\":["$","$L26",null,{"value\":{}}]}]]}]}]])
```

--------------------------------

### Render Architecture Table and Content

Source: https://context7_llms

This JavaScript code snippet, likely generated by a framework like Next.js or MDX, renders UI components to display architectural information. It includes a table comparing 'Cloud' and 'Self-hosted' deployment models, followed by descriptive paragraphs and images for 'Hybrid', 'Self Hosted', and 'Cloud' architectures.

```javascript
function _createMdxContent(props) {
  const _components = {
    p: "p",
    ..._provideComponents(),
    ...props.components
  };
  return _jsx(_components.p, {
    children: "A new BI architecture, purpose built for end user facing, in-product dashboards and reporting."
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}

// The following code appears to be part of a larger rendering process, likely for an MDX file.
// It defines the structure for displaying architectural details.
_jsx(_components.table, {
  children: [_jsx(_components.thead, {
    children: _jsxs(_components.tr, {
      children: [_jsx(_components.th, {
        children: "Architecture"
      }), _jsx(_components.th, {
        children: "Description"
      }), _jsx(_components.th, {
        children: "Problems"
      })]
    })
  }), _jsxs(_components.tbody, {
    children: [_jsxs(_components.tr, {
      children: [_jsx(_components.td, {
        children: _jsx(_components.strong, {
          children: "Cloud"
        })
      }), _jsx(_components.td,
        children: "A web app that you embed via an iframe"
      }), _jsx(_components.td,
        children: "Limited customization, security concerns, performance issues"
      })]
    }), _jsxs(_components.tr,
      children: [_jsx(_components.td,
        children: _jsx(_components.strong,
          children: "Self-hosted"
        )
      }), _jsx(_components.td,
        children: "A docker container or kubernetes cluster hosted on your infrastructure"
      }), _jsx(_components.td,
        children: "Complex setup, maintenance overhead, still requires iframe embedding"
      })]
    })]
  })]
}), "\n", _jsx(_components.p,
  children: "By building backend and frontend logic into your existing stack, we solved these problems."
}), "\n", _jsx(Heading,
  {
    level: "2",
    id: "hybrid",
    isAtRootLevel: "true",
    children: "Hybrid"
  }
), "\n", _jsx(_components.p,
  children: "Production DB connection runs in your cloud. Metadata requests are made to Quill Metadata API. BI Platform is hosted on our cloud."
}), "\n", _jsx(ZoomImage,
  {
    children: _jsx("img", {
      src: "https://mintlify.s3.us-west-1.amazonaws.com/quill/images/quillhybridarchitecture.png"
    })
  }
), "\n", _jsx(Heading,
  {
    level: "2",
    id: "self-hosted",
    isAtRootLevel: "true",
    children: "Self Hosted"
  }
), "\n", _jsx(_components.p,
  children: "Production DB connection and BI Platform run entirely in your cloud. Metadata requests are made to Quill Metadata API. Typical for High Security Industries Like Finance, Healthcare, Government."
}), "\n", _jsx(ZoomImage,
  {
    children: _jsx("img", {
      src: "https://mintlify.s3.us-west-1.amazonaws.com/quill/images/quillselfhostedarchitecture.png"
    })
  }
), "\n", _jsx(Heading,
  {
    level: "2",
    id: "cloud",
    isAtRootLevel: "true",
    children: "Cloud"
  }
), "\n", _jsx(_components.p,
  children: "DB connection and BI Platform run in our cloud, similar to Other Cloud Developer Products."
}), "\n", _jsx(ZoomImage,
  {
    children: _jsx("img", {
      src: "https://mintlify.s3.us-west-1.amazonaws.com/quill/images/quillcloudarchitecture.png"
    })
  }
)]
});

// This part seems to be metadata extraction for page content.
// It includes page title, description, and keywords.
// The actual API reference data is empty in this snippet.
self.__next_f.push([1,"19:[\"$\",\"$L33\",null,{\"value\":{\"apiReferenceData\":{}},\"children\":[\"$\",\"$L34\",null,{\"value\":{\"pageMetadata\":{\"title\":\"Architecture\",\"description\":\"A new BI architecture, purpose built for end user facing, in-product dashboards and reporting.\",\"mode\":\"wide\",\"twitter:image\":\"/images/quillarchitecture.png\",\"keywords\":[\"self-hosted\",\"security\",\"container\",\"docker\"]},\"description\":{\"compiledSource\":\"\\\\"use strict\\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const _components = {\\n    p: \"p\",\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return _jsx(_components.p, {\\n    children: \"A new BI architecture, purpose built for end user facing, in-product dashboards and reporting.\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\n\"}}],"mdxExtracts":{\"tableOfContents\":[{\"title\":\"Hybrid\",\"slug\":\"hybrid\",\"depth\":2,\"children\":[]},{\"title\":\"Self Hosted\",\"slug\":\"self-hosted\",\"depth\":2,\"children\":[]},{\"title\":\"Cloud\",\"slug\":\"cloud\",\"depth\":2,\"children\":[]}]}}}]});
```

--------------------------------

### BI Architecture Comparison Table

Source: https://context7_llms

Renders a table comparing Cloud and Self-hosted BI architectures, detailing their descriptions and common problems. This snippet uses JSX syntax for rendering.

```javascript
function _createMdxContent(props) {
  const _components = {
    p: "p",
    strong: "strong",
    table: "table",
    tbody: "tbody",
    td: "td",
    th: "th",
    thead: "thead",
    tr: "tr",
    ..._provideComponents(),
    ...props.components
  }, {Heading, ZoomImage} = _components;
  if (!Heading) _missingMdxReference("Heading", true);
  if (!ZoomImage) _missingMdxReference("ZoomImage", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Traditionally in Business Intelligence products, there are 2 architectures, each with their own set of problems."
    }), "\n", _jsxs(_components.table, {
      children: [_jsx(_components.thead, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.th, {
            children: "Architecture"
          }), _jsx(_components.th, {
            children: "Description"
          }), _jsx(_components.th, {
            children: "Problems"
          })]
        })
      }), _jsxs(_components.tbody, {
        children: [_jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.strong, {
              children: "Cloud"
            })
          }), _jsx(_components.td, {
            children: "A web app that you embed via an iframe"
          }), _jsx(_components.td, {
            children: "Limited customization, security concerns, performance issues"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.strong, {
              children: "Self-hosted"
            })
          }), _jsx(_components.td, {
            children: "A docker container or kubernetes cluster hosted on your infrastructure"
          }), _jsx(_components.td, {
            children: "Complex setup, maintenance overhead, still requires iframe embedding"
          })]
        })]
      })]
    }), "\n", _jsx(_components.p, {
      children: "By building backend and frontend logic into your existing stack, we solved these problems."
    }), "\n", _jsx(Heading, {
      level: "2",
      id: "hybrid",
      isAtRootLevel: "true",
      children: "Hybrid"
    }), "\n", _jsx(_components.p, {
      children: "Production DB connection runs in your cloud. Metadata requests are made to Quill Metadata API. BI Platform is hosted on our cloud."
    }), "\n", _jsx(ZoomImage, {
      children: _jsx("img", {
        src: "https://mintlify.s3.us-west-1.amazonaws.com/quill/images/quillhybridarchitecture.png"
      })
    }), "\n", _jsx(Heading, {
      level: "2",
      id: "self-hosted",
      isAtRootLevel: "true",
      children: "Self Hosted"
    }), "\n", _jsx(_components.p, {
      children: "Production DB connection and BI Platform run entirely in your cloud. Metadata requests are made to Quill Metadata API. Typical for High Security Industries Like Finance, Healthcare, Government."
    }), "\n", _jsx(ZoomImage, {
      children: _jsx("img", {
        src: "https://mintlify.s3.us-west-1.amazonaws.com/quill/images/quillselfhostedarchitecture.png"
      })
    }), "\n", _jsx(Heading, {
      level: "2",
      id: "cloud",
      isAtRootLevel: "true",
      children: "Cloud"
    }), "\n", _jsx(_components.p, {
      children: "DB connection and BI Platform run in our cloud, similar to Other Cloud Developer Products."
    }), "\n", _jsx(ZoomImage, {
      children: _jsx("img", {
        src: "https://mintlify.s3.us-west-1.amazonaws.com/quill/images/quillcloudarchitecture.png"
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}

```

--------------------------------

### Next.js Client Data Hydration (LocalStorageAndAnalyticsProviders)

Source: https://context7_llms

This snippet details Next.js client-side data hydration, specifically mentioning 'LocalStorageAndAnalyticsProviders'. It lists the JavaScript chunks necessary for initializing these providers, which are crucial for managing application state and analytics.

```javascript
self.__next_f.push([1,"2d:I[71476,[\"3473\",\"static/chunks/891cff7f-2ca7d0df884db9d0.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"4129\",\"static/chunks/7bf36345-5ba13855b95a82b2.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1725\",\"static/chunks/d30757c7-35f0e85d69cf4320.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"803\",\"static/chunks/cd24890f-549fb4ba2f588ca6.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"7261\",\"static/chunks/7261-0cd7ee66db256d6a.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3892\",\"static/chunks/3892-251b69e2384ed286.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"7417\",\"static/chunks/7417-548f041b716e378a.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1953\",\"static/chunks/1953-639d64e349958881.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"9095\",\"static/chunks/9095-5e8c25cebc4b2bd6.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"9779\",\"static/chunks/9779-7bb45d52151006b8.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3619\",\"static/chunks/3619-5c67387071b9c7b3.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"2398\",\"static/chunks/2398-3c77a562bc9286bb.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1862\",\"static/chunks/1862-d7c7b8aab3b4ffe6.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"2755\",\"static/chunks/2755-e2a765a591a8496d.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1350\",\"static/chunks/1350-743c71d7707cb6c1.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"5456\",\"static/chunks/app/%255Fsites/%5Bsubdomain%5D/(multitenant)/layout-b596e085fd7c2d45.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\"],\"LocalStorageAndAnalyticsProviders\",1]

```

--------------------------------

### 404 Page Structure and Styling

Source: https://context7_llms

Defines the HTML structure and Tailwind CSS classes for a 'Page Not Found' (404) error page. It includes a title, a descriptive message, and styling for the overall layout and elements.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Page Not Found</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
</head>
<body>
  <main class="h-screen bg-background-light dark:bg-background-dark">
    <article class="bg-custom bg-fixed bg-center bg-cover relative flex flex-col items-center justify-center h-full">
      <div class="w-full max-w-xl px-10">
        <span class="inline-flex mb-6 rounded-full px-3 py-1 text-sm font-semibold mr-4 text-white p-1 bg-primary">Error 404</span>
        <h1 class="font-semibold mb-3 text-3xl">Page not found!</h1>
        <p class="text-lg text-gray-600 dark:text-gray-400 mb-6">We're sorry, we couldn't find the page you were looking for.</p>
      </div>
    </article>
  </main>
</body>
</html>
```

--------------------------------

### Next.js Client Data Hydration (SearchProvider)

Source: https://context7_llms

This snippet indicates Next.js client-side data hydration for the 'SearchProvider'. It lists the necessary JavaScript chunks for the search functionality, ensuring that the search components and their dependencies are loaded correctly.

```javascript
self.__next_f.push([1,"2e:I[46826,[\"3473\",\"static/chunks/891cff7f-2ca7d0df884db9d0.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"4129\",\"static/chunks/7bf36345-5ba13855b95a82b2.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1725\",\"static/chunks/d30757c7-35f0e85d69cf4320.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"803\",\"static/chunks/cd24890f-549fb4ba2f588ca6.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"7261\",\"static/chunks/7261-0cd7ee66db256d6a.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3892\",\"static/ch
```

--------------------------------

### Quill Docs Configuration

Source: https://context7_llms

Defines the configuration for the Quill documentation site, including theme, schema, colors, logo, favicon, navigation structure, and styling preferences. This object is used to build a dynamic and user-friendly documentation experience.

```json
{
  "theme": "maple",
  "$schema": "https://mintlify.com/docs.json",
  "name": "Quill",
  "colors": {
    "primary": "#212121",
    "light": "#FFFFFF",
    "dark": "#212121"
  },
  "logo": {
    "light": "https://mintlify.s3.us-west-1.amazonaws.com/quill/logo/light.png",
    "dark": "https://mintlify.s3.us-west-1.amazonaws.com/quill/logo/dark.png",
    "href": "https://quill.co"
  },
  "favicon": "/favicon.png",
  "navbar": {
    "primary": {
      "type": "button",
      "label": "Learn more",
      "href": "https://quill.co"
    }
  },
  "navigation": {
    "tabs": [
      {
        "tab": "Architecture",
        "groups": [
          {
            "group": "Architecture",
            "pages": [
              "architecture"
            ]
          }
        ]
      },
      {
        "tab": "BI Platform",
        "groups": [
          {
            "group": "BI Platform",
            "pages": [
              "bi-platform/overview",
              "bi-platform/quickstart",
              "bi-platform/tenant",
              "bi-platform/virtual-table",
              "bi-platform/dashboard",
              "bi-platform/report",
              "bi-platform/self-host"
            ]
          }
        ]
      },
      {
        "tab": "React SDK",
        "groups": [
          {
            "group": "Getting Started",
            "pages": [
              "react/quickstart",
              "react/themes",
              "react/headless"
            ]
          },
          {
            "group": "Use cases",
            "pages": [
              "react/headless-dashboard",
              "react/headless-data-export"
            ]
          },
          {
            "group": "Components",
            "pages": [
              "react/quill-provider",
              "react/dashboard",
              "react/report-builder",
              "react/chart",
              "react/static-chart",
              "react/table",
              "react/sql-editor"
            ]
          },
          {
            "group": "Hooks",
            "pages": [
              "react/use-dashboard",
              "react/use-dashboard-report",
              "react/use-dashboards",
              "react/use-quill",
              "react/use-export"
            ]
          },
          {
            "group": "Functions",
            "pages": [
              "react/format"
            ]
          }
        ]
      },
      {
        "tab": "Server SDK",
        "groups": [
          {
            "group": "Server SDK",
            "pages": [
              "server/quickstart"
            ]
          }
        ]
      }
    ]
  },
  "styling": {
    "codeblocks": "system"
  }
}
```

--------------------------------

### DOM Mutation Observer for UI Adjustments

Source: https://context7_llms

This JavaScript code sets up a MutationObserver to monitor changes in the DOM. It specifically targets Next.js applications, adjusting UI elements like table of contents visibility, content area overflow, and code block styling based on the current page path. It aims to improve the user experience for specific sections like 'components/notebooks'.

```javascript
const observer = new MutationObserver(function (mutations) {
	mutations.forEach(function (mutation) {
		if (mutation.type === "childList") {
			try {
				const [path, page] = window.location.pathname.split("/").slice(1);

				// Notebooks
				if (
					path === "components" &&
					[
						"dashboard",
						"chart",
						"table",
						"sql-editor",
						"chart-editor",
						"report-builder",
						"examples",
					].includes(page)
				) {
					const toc = document.querySelector("#table-of-contents");
					if (toc) toc.style.display = "none";
				}

				const contentArea = document.querySelector("#content-area");
				if (contentArea) {
					contentArea.style.overflow = "visible";
				}

				const codeblocks = document.querySelectorAll(
					"[class*='dark:bg-codeblock']"
				);
				for (block of codeblocks) {
					block.style.maxHeight = "400px";
					block.style.overflow = "auto";
				}
				// if (toc) toc.style.display = "none";
			} catch (error) {
				console.error("Error handling mutation:", error);
			}
		}
	});
});

observer.observe(document.body, { childList: true, subtree: true });
```

--------------------------------

### CSS Theme Variables (Light Mode)

Source: https://context7_llms

Defines CSS custom properties for theming the application in light mode. These variables control primary colors, background colors, and various shades of gray.

```css
:root {
    --primary: 22 163 74;
    --primary-light: 74 222 128;
    --primary-dark: 22 101 52;
    --background-light: 255 255 255;
    --background-dark: 10 13 13;
    --gray-50: 243 247 245;
    --gray-100: 238 242 240;
    --gray-200: 223 227 224;
    --gray-300: 206 211 208;
    --gray-400: 159 163 160;
    --gray-500: 112 116 114;
    --gray-600: 80 84 82;
    --gray-700: 63 67 64;
    --gray-800: 38 42 39;
    --gray-900: 23 27 25;
    --gray-950: 10 15 12;
  }
```

--------------------------------

### Define CSS Root Variables for Theming

Source: https://context7_llms

This CSS snippet defines a set of custom properties (CSS variables) within the `:root` pseudo-class. These variables are used to establish a consistent color palette for primary colors, background colors, and various shades of gray, likely supporting both light and dark themes within a web application.

```css
:root {
    --primary: 33 33 33;
    --primary-light: 255 255 255;
    --primary-dark: 33 33 33;
    --background-light: 255 255 255;
    --background-dark: 14 14 16;
    --gray-50: 243 243 243;
    --gray-100: 239 239 239;
    --gray-200: 223 223 223;
    --gray-300: 207 207 207;
    --gray-400: 159 159 159;
    --gray-500: 112 112 112;
    --gray-600: 81 81 81;
    --gray-700: 63 63 63;
    --gray-800: 38 38 38;
    --gray-900: 23 23 23;
    --gray-950: 11 11 11;
  }
```

--------------------------------

### Next.js Internal Data Push

Source: https://context7_llms

This snippet represents internal data structures used by Next.js for rendering pages. It includes information about metadata and chunk loading, essential for the framework's operation.

```javascript
self.__next_f.push([1,"21:\"$1c:metadata\"
"])
```

```javascript
self.__next_f.push([1,"45:I[7247,[\"3473\",\"static/chunks/891cff7f-2ca7d0df884db9d0.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"4129\",\"static/chunks/7bf36345-5ba13855b95a82b2.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1725\",\"static/chunks/d30757c7-35f0e85d69cf4320.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"7261\",\"static/chunks/7261-0cd7ee66db256d6a.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3892\",\"static/chunks/3892-251b69e2384ed286.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"7417\",\"static/chunks/7417-548f041b716e378a.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1953\",\"static/chunks/1953-639d64e349958881.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3122\",\"static/chunks/3122-a08e63c3fa98155d.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"9095\",\"static/chunks/9095-5e8c25cebc4b2bd6.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"6146\",\"static/chunks/6146-4bb9a962607d0938.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3619\",\"static/chunks/3619-5c67387071b9c7b3.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"2398\",\"static/chunks/2398-3c77a562bc9286bb.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3386\",\"static/chunks/3386-4a1b1b425d82baef.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1862\",\"static/chunks/1862-d7c7b8aab3b4ffe6.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3698\",\"static/chunks/3698-fd57c96a8b0a15e1.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"2755\",\"static/chunks/2755-e2a765a591a8496d.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"6168\",\"static/chunks/6168-175182e2dfb6f901.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"2170\",\"static/chunks/2170-963b88fa83f7ff93.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"9841\",\"static/chunks/app/%255Fsites/%5Bsubdomain%5D/(multitenant)/%5B%5B...slug%5D%5D/page-e48b5ce2d4bb4251.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\"],\"UserFeedback\",1]
"])
```

```javascript
self.__next_f.push([1,"46:I[99078,[\"3473\",\"static/chunks/891cff7f-2ca7d0df884db9d0.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"4129\",\"static/chunks/7bf36345-5ba13855b95a82b2.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1725\",\"static/chunks/d30757c7-35f0e85d69cf4320.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"7261\",\"static/chunks/7261-0cd7ee66db256d6a.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3892\",\"static/chunks/3892-251b69e2384ed286.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"7417\",\"static/chunks/7417-548f041b716e378a.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1953\",\"static/chunks/1953-639d64e349958881.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3122\",\"static/chunks/3122-a08e63c3fa98155d.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"9095\",\"static/chunks/9095-5e8c25cebc4b2bd6.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"6146\",\"static/chunks/6146-4bb9a962607d0938.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3619\",\"static/chunks/3619-5c67387071b9c7b3.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"2398\",\"static/chunks/2398-3c77a562bc9286bb.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3386\",\"static/chunks/3386-4a1b1b425d82baef.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"1862\",\"static/chunks/1862-d7c7b8aab3b4ffe6.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"3698\",\"static/chunks/3698-fd57c96a8b0a15e1.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"2755\",\"static/chunks/2755-e2a765a591a8496d.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"6168\",\"static/chunks/6168-175182e2dfb6f901.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"2170\",\"static/chunks/2170-963b88fa83f7ff93.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\",\"9841\",\"static/chunks/app/%255Fsites/%5Bsubdomain%5D/(multitenant)/%5B%5B...slug%5D%5D/page-e48b5ce2d4bb4251.js?dpl=dpl_78vx9dsyT6NxVHiLCBqCtkpovrRQ\"],\"UserFeedback\",1]
"])
```

--------------------------------

### Navigation Bar Structure

Source: https://context7_llms

This snippet represents the HTML structure for the main navigation bar, including logos for different themes (light and dark) and placeholders for navigation items. It's designed to be responsive, with different layouts for mobile and larger screens.

```html
<div class="block lg:hidden"><div id="navbar" class="z-30 fixed lg:sticky top-0 w-full"><div id="navbar-transition" class="absolute w-full h-full backdrop-blur flex-none transition-colors duration-500 border-b border-gray-500/5 dark:border-gray-300/[0.06] data-[is-opaque=true]:bg-background-light data-[is-opaque=true]:supports-backdrop-blur:bg-background-light/95 data-[is-opaque=true]:dark:bg-background-dark/75 data-[is-opaque=false]:supports-backdrop-blur:bg-background-light/60 data-[is-opaque=false]:dark:bg-transparent" data-is-opaque="false"></div><div class="max-w-8xl mx-auto relative"><div><div class="relative"><div class="flex items-center lg:px-12 h-16 min-w-0 mx-4 lg:mx-0"><div class="h-full relative flex-1 flex items-center gap-x-4 min-w-0 border-b border-gray-500/5 dark:border-gray-300/[0.06]"><div class="flex-1 flex items-center gap-x-4"><a href="https://quill.co"><span class="sr-only">Quill<!-- --> home page</span><img class="nav-logo w-auto h-7 relative object-contain block dark:hidden" src="https://mintlify.s3.us-west-1.amazonaws.com/quill/logo/light.png" alt="light logo"/><img class="nav-logo w-auto h-7 relative object-contain hidden dark:block" src="https://mintlify.s3.us-west-1.amazonaws.com/quill/logo/dark.png" alt="dark logo"/></a><div class="hidden lg:flex items-center gap-x-2"></div></div><div class="relative hidden lg:flex items-center gap-2.5 flex-1"><button type="button" class="flex pointer-events-auto rounded-xl w-full items-center 
```

--------------------------------

### Banner Dismissal Logic

Source: https://context7_llms

Manages banner dismissal state using localStorage. It checks for existing dismissal states and updates the document's attribute based on the banner's content.

```javascript
function(){
  try{
    let d=localStorage.getItem("__mintlify-bannerDismissed");
    if(null==d)
      for(let c=0;c<localStorage.length;c++){
        let e=localStorage.key(c);
        if(e?.endsWith("-bannerDismissed")&&(d=localStorage.getItem(e),null!=d)){
          localStorage.setItem("__mintlify-bannerDismissed",d);
          localStorage.setItem(e,d);
          break;
        }
      }
    let e=document.getElementById("banner")?.innerText,
    f=null==d||!!e&&d!==e;
    document.documentElement.setAttribute("data-banner-state",f?"visible":"hidden");
  }
  catch(a){
    console.error(a);
    document.documentElement.setAttribute("data-banner-state","hidden");
  }
}
```

--------------------------------

### CSS Variables

Source: https://context7_llms

Defines CSS custom properties (variables) for color schemes and spacing, enabling theming and consistent styling across the application.

```css
:root {
    --primary: 33 33 33;
    --primary-light: 255 255 255;
    --primary-dark: 33 33 33;
    --background-light: 255 255 255;
    --background-dark: 14 14 16;
    --gray-50: 243 243 243;
    --gray-100: 239 239 239;
    --gray-200: 223 223 223;
    --gray-300: 207 207 207;
    --gray-400: 159 159 159;
    --gray-500: 112 112 112;
    --gray-600: 81 81 81;
    --gray-700: 63 63 63;
    --gray-800: 38 38 38;
    --gray-900: 23 23 23;
    --gray-950: 11 11 11;
  }
```