### JavaScript for Fuse.js Search Index Initialization

Source: https://context7_llms

This JavaScript code defines an asynchronous function `loadSearchData` to fetch and process search index data. It uses the `fetch` API to get `search_index.json` and then initializes a Fuse.js instance with specified options for searching. The initialization is triggered either on DOMContentLoaded or immediately if the DOM is already ready.

```javascript
async function loadSearchData() {
    const response = await fetch("/static/search_index.json?version=3.8.0");
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const searchData = await response.json();
    const options = {
        keys: [
            { name: "title", weight: 0.7 },
            { name: "content", weight: 0.3 },
        ],
        tokenize: true, // each word is ranked individually
        threshold: 0.3,
        location: 0,
        distance: 10000,
    };
    window.fuse = new Fuse(searchData, options);
}
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadSearchData);
} else {
    loadSearchData();
}
```

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

### Initialize WebSocket Connection for NiceGUI

Source: https://context7_llms

This code initializes a WebSocket connection for the NiceGUI framework. It specifies connection details such as version, prefix, query parameters, and transports. This is crucial for real-time communication between the client and the server.

```javascript
const socket = new NiceGUI.socket({
        version: "3.8.0",
        prefix: "",
        query: {'fly_instance_id': 'd8d4774f9d4958', 'client_id': '0cd88693-aebb-444e-8377-4023d993f354', 'next_message_id': 0, 'implicit_handshake': True},
        extraHeaders: {'fly-force-instance-id': 'd8d4774f9d4958'},
        transports: ['websocket', 'polling'],
      });
```

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

### Desktop Detection with Media Query Listener

Source: https://context7_llms

This JavaScript code sets up an event listener for a media query to detect if the client is using a desktop screen size (min-width: 1024px). It emits an 'is_desktop' event with a boolean value indicating the match status. The listener is attached to both the media query change and the window load event.

```javascript
const mediaQuery = window.matchMedia('(min-width: 1024px)');
            mediaQuery.addEventListener('change', e => emitEvent('is_desktop', e.matches));
            window.addEventListener('load', () => emitEvent('is_desktop', mediaQuery.matches));
        </script>
```

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

### JavaScript for Plausible Analytics Integration

Source: https://context7_llms

This JavaScript snippet initializes Plausible, a privacy-friendly analytics tool. It ensures that the Plausible tracking script is loaded and configured. The `window.plausible` object is defined to handle tracking events, and `plausible.init()` is called to set up the analytics.

```javascript
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
plausible.init()
```

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

### Configure Quasar Framework in Vue App

Source: https://context7_llms

This code configures the Quasar framework for a Vue application, including setting the version, defining API endpoints, and configuring theme and language settings. It initializes Quasar with custom brand colors and language settings, and sets up a function to toggle dark mode.

```javascript
const dark = False;
const language = "en-US";
const vue_config = {"brand":{"primary":"#5898d4","secondary":"#26a69a","accent":"#9c27b0","dark":"#1d1d1d","dark-page":"#121212","positive":"#21ba45","negative":"#c10015","info":"#31ccec","warning":"#f2c037"},"loadingBar":{"color":"primary","skipHijack":false}};

app.use(Quasar, {config: vue_config});
applyColors(vue_config.brand);
Quasar.lang.set(Quasar.lang[language.replace('-', '')]);
darkSetter = (dark) => Quasar.Dark.set(dark === None ? "auto" : dark);
setDark(dark);
```

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

### Register NiceGUI Components (JavaScript)

Source: https://context7_llms

Registers custom Vue components for use within the NiceGUI application. These components extend the functionality of the base NiceGUI framework. No external dependencies are required beyond the NiceGUI framework itself.

```javascript
import { default as input } from "/_nicegui/3.8.0/components/c9001076d82ac473c404189f7d35f98a/input.js";
app.component("nicegui-input", input);
import { default as keyboard } from "/_nicegui/3.8.0/components/c9001076d82ac473c404189f7d35f98a/keyboard.js";
app.component("nicegui-keyboard", keyboard);
import { default as sub_pages } from "/_nicegui/3.8.0/components/0a5a7f3c83b505636b441bb512a6ba6d/sub_pages.js";
app.component("nicegui-sub_pages", sub_pages);

app.mount("#app");
```

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

### Scroll to Fragment on Mount (JavaScript)

Source: https://context7_llms

Ensures that the browser scrolls to a specific fragment (identified by the URL hash) after the Vue application has mounted. This is useful for deep linking or navigating to specific sections of a page. It uses `Vue.nextTick` to ensure the DOM is ready and handles cases where the fragment might be an element ID or an anchor name.

```javascript
// Scroll to fragment after Vue mounts (browser's native scroll may have failed if element wasn't ready)
if (window.location.hash) {
  Vue.nextTick(() => {
    const fragment = window.location.hash.substring(1);
    (document.getElementById(fragment) || document.querySelector(`a[name="${fragment}"]`))?.scrollIntoView();
  });
}
```

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

### HTML Sanitization with DOMPurify Polyfill

Source: https://context7_llms

This script imports the DOMPurify library to sanitize HTML content, providing a polyfill for browsers that do not natively support `Element.prototype.setHTML`. It defines `setHTML` on the Element prototype, ensuring that any HTML set via this method is safely sanitized before being inserted into the DOM.

```javascript
// Load DOMPurify for HTML sanitization, polyfill for browsers without native setHTML
      import DOMPurify from "dompurify";
      if (typeof Element.prototype.setHTML !== "function") {
        Element.prototype.setHTML = function (html) {
          this.innerHTML = DOMPurify.sanitize(html);
        };
      }

```

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

### Register NiceGUI Components in Vue App

Source: https://context7_llms

This code snippet demonstrates how to register several custom NiceGUI components within a Vue application. It imports default components like 'dark_mode', 'header', 'link', 'html', 'dialog', and 'input', and then registers them using app.component(). These components are essential for building the user interface.

```javascript
import { default as dark_mode } from "/_nicegui/3.8.0/components/433f7ecfc4ab0b391a22e7d7d7acfb29/dark_mode.js";
app.component("nicegui-dark_mode", dark_mode);
import { default as header } from "/_nicegui/3.8.0/components/bf0eddf8a904be8942da4f80ffac271c/header.js";
app.component("nicegui-header", header);
import { default as link } from "/_nicegui/3.8.0/components/b3dee25cfff616c860373e3b26951a7a/link.js";
app.component("nicegui-link", link);
import { default as html } from "/_nicegui/3.8.0/components/2b781e6fac5c411179c2c9b467b3e6b3/html.js";
app.component("nicegui-html", html);
import { default as dialog } from "/_nicegui/3.8.0/components/59c2e0b5d84a1d3bc7c40f991911e1ea/dialog.js";
app.component("nicegui-dialog", dialog);
import { default as input } from "/_nicegui/3.8.0/components/48003bae254cc610e37a8955122f6584/input.js";
app.component("nicegui-input", input);
```

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

### Basic CSS Styling for NiceGUI

Source: https://context7_llms

This CSS defines base styles for the NiceGUI framework, including font families, overflow handling, and specific element styling for headers, scroll indicators, and parameter tables. It also includes dark mode variations.

```css
html, body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: "Fira Sans", Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --q-dark-page: #222;
}
html:has(body.body--light) {
  background-color: #f8f8f8;
}
html {
  scroll-behavior: smooth;
}
.browser-window {
  font-family: Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.bash-window code,
.python-window code {
  font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
}
.fancy-em em {
  font-style: normal;
  color: #5898d4;
}
a:link:not(.browser-window *),
 a:visited:not(.browser-window *) {
  color: inherit !important;
  text-decoration: none;
}
a:hover:not(.browser-window *),
 a:active:not(.browser-window *) {
  opacity: 0.85;
}
.bold-links a:link {
  font-weight: 500;
}
.arrow-links a:link:not(.auto-link)::after {
  content: "north_east";
  font-family: "Material Icons";
  font-weight: 100;
  vertical-align: -10%;
}

.rst-param-tables table {
  text-align: left;
  table-layout: auto;
}
.rst-param-tables table th,
.rst-param-tables table td {
  border-width: 0;
  padding: 0;
}
.rst-param-tables table th {
  padding-right: 1em;
}

.q-header {
  height: 70px;
  background-color: #5898d4;
}
.q-header.fade {
  padding-top: 20px;
  transform: translateY(-20px);
  background-color: #5898d4d0;
  backdrop-filter: blur(5px);
}
.body--dark .q-header {
  background-color: #3e6a94;
}
.body--dark .q-header.fade {
  background-color: #3e6a94d0;
}

.scroll-indicator:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 8px;
  border-left: 3px solid #444;
  border-bottom: 3px solid #444;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb04 2s infinite;
  animation: sdb04 1.5s infinite;
  transition-timing-function: ease;
}
.body--dark .scroll-indicator:after {
  border-left: 3px solid #bbb;
  border-bottom: 3px solid #bbb;
}
@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  15% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  30% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  15% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  30% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

dl.field-list,
dl.docinfo {
  display: grid;
  grid-template-columns: max-content auto;
  margin: 1em 0;
}
dl.field-list dt,
dl.docinfo dt {
  grid-column-start: 1;
  margin-right: 1em;
  font-weight: 500;
}
dl.field-list dd,
dl.docinfo dd {
  grid-column-start: 2;
}
dl.field-list p,
dl.docinfo p {
  margin: 0;
}

.dark-box {
  background-color: #5898d4;
  width: 100%;
}
.body--dark .dark-box {
  background-color: #3e6a94;
}

/* google-webfonts-helper (https://gwfh.mranftl.com/fonts) */
/* fira-sans-regular - latin */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
}
```

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

### Add CSS Animations and Styles for NiceGUI

Source: https://context7_llms

This script adds custom CSS animations, including 'star-tumble' and 'star-grow', to enhance the visual appeal of the NiceGUI interface. It also defines styles for elements like '.star' and '.star-container', and includes hover effects for stars. The styles are applied using the addStyle function.

```javascript
addStyle("
    @keyframes star-tumble {
          0% { transform: translateX(6em) rotate(432deg); }
        100% { transform: translateX(0)   rotate(0);      }
    }
    .star {
        height: 1.75em;
        fill: white;
        animation: 1s ease-in-out 6s both star-tumble;
    }
    .star:hover {
        fill: rgb(250, 204, 21);
    }

    @keyframes star-grow {
          0% { width: 0 }
        100% { width: 2em }
    }
    .star-container {
        animation: 1s ease-in-out 6s both star-grow;
    }
");</script>
```

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

### Add Style to Document Head (JavaScript)

Source: https://context7_llms

This JavaScript function, `addStyle`, takes a CSS string as input and appends a new style element to the document's head. It's a utility for dynamically applying styles to the web page.

```javascript
addStyle = (c) => document.head.append(Object.assign(document.createElement("style"), { textContent: c }));
```

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

### CSS Font Face Definitions for Fira Sans and Fira Mono

Source: https://context7_llms

This CSS code defines the @font-face rule for 'Fira Sans' and 'Fira Mono' fonts. It provides multiple font file formats (eot, woff2, woff, ttf, svg) to ensure compatibility across different browsers and devices, including legacy IE versions. Each font weight and style is specified with its corresponding font file path.

```css
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/fira-sans-v16-latin-500.eot"); /* IE9 Compat Modes */
  src: local(""), url("/fonts/fira-sans-v16-latin-500.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/fonts/fira-sans-v16-latin-500.woff2") format("woff2"),
    /* Super Modern Browsers */ url("/fonts/fira-sans-v16-latin-500.woff") format("woff"),
    /* Modern Browsers */ url("/fonts/fira-sans-v16-latin-500.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("/fonts/fira-sans-v16-latin-500.svg#FiraSans") format("svg"); /* Legacy iOS */
}
/* fira-sans-regular - latin */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/fira-sans-v16-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("/fonts/fira-sans-v16-latin-regular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/fonts/fira-sans-v16-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("/fonts/fira-sans-v16-latin-regular.woff") format("woff"),
    /* Modern Browsers */ url("/fonts/fira-sans-v16-latin-regular.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("/fonts/fira-sans-v16-latin-regular.svg#FiraSans") format("svg"); /* Legacy iOS */
}
/* fira-sans-700 - latin */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/fira-sans-v16-latin-700.eot"); /* IE9 Compat Modes */
  src: local(""), url("/fonts/fira-sans-v16-latin-700.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/fonts/fira-sans-v16-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("/fonts/fira-sans-v16-latin-700.woff") format("woff"),
    /* Modern Browsers */ url("/fonts/fira-sans-v16-latin-700.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("/fonts/fira-sans-v16-latin-700.svg#FiraSans") format("svg"); /* Legacy iOS */
}
/* fira-mono-regular - latin */
@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/fira-mono-v14-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("/fonts/fira-mono-v14-latin-regular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/fonts/fira-mono-v14-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("/fonts/fira-mono-v14-latin-regular.woff") format("woff"),
    /* Modern Browsers */ url("/fonts/fira-mono-v14-latin-regular.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("/fonts/fira-mono-v14-latin-regular.svg#FiraMono") format("svg"); /* Legacy iOS */
}

```

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

### Font Face Definition for Fira Sans (CSS)

Source: https://context7_llms

This CSS defines the @font-face rule for the 'Fira Sans' font, specifying its source for Latin characters with normal style and weight 400. This ensures consistent typography across the application.

```css
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
}
```

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

### Header Fade-in on Scroll (JavaScript)

Source: https://context7_llms

This JavaScript code implements a scroll event listener that fades the header element in or out based on the scroll position. It prevents the fade effect when a dialog is open.

```javascript
window.onscroll = () => {
  if (document.querySelector(".q-dialog__backdrop")) return;
  const header = document.querySelector(".q-header");
  if (document.documentElement.scrollTop > 50) header.classList.add("fade");
  else header.classList.remove("fade");
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.