### Install CueSync using npm

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/installation.md

Install the CueSync package into your project using npm. This command adds CueSync to your project's dependencies.

```bash
npm i @cuesync/cuesync
```

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

### Example Shortcode Logic

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/layouts/shortcodes/example.html

This snippet outlines the logic for the 'example' shortcode, demonstrating how it processes parameters like id, class, show_preview, and show_markup to render code content.

```html
{{- /* Usage: `example args` `args` are all optional and can be one of the following: * id: the `div`'s id - default: "" * class: any extra class(es) to be added to the `div` - default: "" * show_preview: if the preview should be output in the HTML - default: `true` * show_markup: if the markup should be output in the HTML - default: `true` */ -}}
{{- $id := .Get "id" -}}
{{- $class := .Get "class" -}}
{{- $lang := .Get "lang" | default "html" -}}
{{- $show_preview := .Get "show_preview" | default true -}}
{{- $show_markup := .Get "show_markup" | default true -}}
{{- $link := .Get "link" | default false -}}
{{- $codeId := .Get "codeId" -}}
{{- $input := .Inner -}}
{{- $input := split $input "##split##" -}}

{{- if eq $show_preview true -}}
  {{- range $input }}
    {{- . | safeHTML -}}
  {{- end -}}

{{- end -}}
{{- if ne $link false -}}

[View Demo]({{ . }})

{{- end -}}

[VIEW CODE](#{{ . }})

{{- if eq $show_markup true -}}
  {{- range $input }}
    {{- $content := replaceRE `\n` `![...](...)` . | safeHTML -}}
    {{- $content = replaceRE ` (class=" *?")` "" $content -}}

    {{- $lang -}}

    {{- highlight (trim $content "\n") $lang "" -}}
  {{- end -}}
{{- end -}}
```

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

### VTT Transcript Format Example

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Example of a VTT (WebVTT) transcript format. CueSync supports timing and text. Language metadata is optional for multilingual support.

```text
WEBVTT
Language: Hindi

00:00:02 --> 00:00:03
कीट

00:00:03 --> 00:00:06
खुरदरे, गूदेदार

00:00:06 --> 00:00:09
ओह, वह मुलायम है
```

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

### SRT Transcript Format Example

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Example of an SRT (SubRip) transcript format. CueSync supports timing and text. Language metadata can be included for language selection.

```text
1
00:00:02 --> 00:00:03
bugs

2
00:00:03 --> 00:00:06
give me the scaly the squishy

3
00:00:06 --> 00:00:09
oh she's fluffy
```

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

### Basic CueSync Integration

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Integrate CueSync by adding a <cue-sync> element with transcript-path and media attributes. This is the default setup for an interactive transcript.

```html
<video id="natGeoVideo" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo"
          style="height: 400px;"></cue-sync>
```

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

### Import CueSync JS with npm

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/installation.md

Import the CueSync library into your JavaScript project after installing it via npm. This allows you to use CueSync's functionalities.

```javascript
import * as cuesync from '@cuesync/cuesync'
```

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

### Custom Theming with CSS Variables

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Apply custom styles to the CueSync component by overriding its CSS custom properties. This example demonstrates changing colors, border radius, and background styles.

```html
<style>
.custom-cuesync {
 --cs-border-color: #aa076b;
 --cs-border-radius: 20px;

 --cs-toolbar-bg: #aa076b;
 --cs-toolbar-color: #fff;

 --cs-transcript-bg: #aa076b;
 --cs-transcript-color: #fff;

 --cs-cue-hover-bg: #e47aaf;
 --cs-cue-hover-color: #000;
 --cs-cue-active-bg: #ffd75e;
 --cs-cue-active-color: #aa076b;
 --cs-cue-highlight-color: #ffd75e;

 --cs-timestamp-bg: #ffd75e;
 --cs-timestamp-color: #aa076b;
 --cs-timestamp-border-radius: 20px;
}
</style>

<!-- Video -->
<video id="natGeoVideo8" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync class="custom-cuesync" transcript-path="/assets/transcripts/natgeo.vtt, /assets/transcripts/natgeo_hindi.vtt" 
          media="#natGeoVideo8"
          style="height: 400px;"></cue-sync>
```

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

### Disable Settings Panel in CueSync

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Use `allow-settings="false"` to hide the settings button and disable user customization options. This example also sets a paragraph layout and hides timestamps.

```html
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo6" 
          allow-settings="false"
          layout="paragraph"
          show-timestamp="false"
          style="height: 400px;"></cue-sync>
```

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

### Include CueSync via unpkg CDN

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/installation.md

Use this script tag to include the CueSync JavaScript file from the unpkg CDN. Ensure the integrity and crossorigin attributes are correctly set for secure loading.

```html
<!-- CueSync JS -->
<script src="https://unpkg.com/@cuesync/cuesync@2.0.0/dist/js/cuesync.min.js"
        integrity="sha384-RpHsvYVjmvzPcZvnEEhED/Ak7wWjOC/VvcwaDXj87I9fJXNy2SF0OreIznbkrWbK"
        crossorigin="anonymous"></script>
```

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

### Set Light Theme in CueSync

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Apply a specific theme using the `theme` attribute. Set `theme="light"` to enforce a light theme, overriding the default 'auto' setting.

```html
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo5" 
          theme="light"
          style="height: 400px;"></cue-sync>
```

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

### Provide Multilingual Transcripts in CueSync

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Specify multiple transcript files by comma-separating their paths in the `transcript-path` attribute. CueSync will enable language selection in the settings.

```html
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt, /assets/transcripts/natgeo_hindi.vtt" 
          media="#natGeoVideo7"
          style="height: 400px;"></cue-sync>
```

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

### Include CueSync via jsDelivr CDN

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/installation.md

Use this script tag to include the CueSync JavaScript file from the jsDelivr CDN. Ensure the integrity and crossorigin attributes are correctly set for secure loading.

```html
<!-- CueSync JS -->
<script src="https://cdn.jsdelivr.net/npm/@cuesync/cuesync@2.0.0/dist/js/cuesync.min.js"
        integrity="sha384-RpHsvYVjmvzPcZvnEEhED/Ak7wWjOC/VvcwaDXj87I9fJXNy2SF0OreIznbkrWbK"
        crossorigin="anonymous"></script>
```

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

### Theme Switching Logic

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/layouts/partials/header.html

Handles theme switching based on local storage and system preferences. It sets the 'data-bs-theme' attribute on the root element.

```javascript
var root = document.documentElement
var activeTheme = localStorage.getItem('theme')
var checkSystemTheme = function () {
    activeTheme = localStorage.getItem('theme')
    // If there's no stored theme (Auto mode is set)
    if (!activeTheme) {
        // If Dark mode is set in the OS, set the theme to dark (but don't store it)
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.setAttribute('data-bs-theme', 'dark')
        } else {
            document.documentElement.removeAttribute('data-bs-theme')
        }
    }
}
if (activeTheme) {
    root.setAttribute('data-bs-theme', activeTheme)
} else {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
        checkSystemTheme()
    })
    checkSystemTheme()
}
```

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

### Accessing CueSync Component via JavaScript

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Select the CueSync web component using standard DOM methods like querySelector. This is the first step for any JavaScript interaction.

```javascript
const cueSync = document.querySelector('cue-sync');
```

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

### Hugo Site Title and Description

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/layouts/partials/header.html

Renders the site title and description, conditionally including the version for non-home pages.

```html
{{ if .IsHome }}{{ .Site.Title | markdownify }} 
· {{ .Site.Params.description | markdownify }}{{ else }}{{ .Title | markdownify }} 
· {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}
```

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

### CueSync with Paragraph Layout

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Set the default layout for CueSync to 'paragraph' using the layout attribute. This changes how the transcript is displayed to the user.

```html
<!-- Video -->
<video id="natGeoVideo2" controls style="width: 100%; max-width: 500px;">
    <source src="/assets/videos/natgeo.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

<!-- Transcript -->
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo2" 
          layout="paragraph"
          style="height: 400px;"></cue-sync>
```

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

### Listening for CueSync Custom Events

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Add event listeners to the CueSync component to react to changes in its attributes, such as layout updates. The event detail provides the new value.

```javascript
const cueSync = document.querySelector('cue-sync');

cueSync.addEventListener('layout-changed', e => {
  console.log('Layout changed to:', e.detail.newValue);
});
```

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

### Hugo Stylesheet Partial

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/layouts/partials/header.html

Includes the stylesheet partial, passing the current page context.

```html
{{ partial "stylesheet" . }}
```

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

### Hugo Stylesheet Processing

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/layouts/partials/stylesheet.html

This snippet demonstrates a common pattern for processing SCSS files in Hugo. It includes dynamic filename generation based on the current date, configuration for SCSS output style and precision, and PostCSS options for autoprefixer. It also conditionally applies compressed output style for production environments.

```go-html-template
{{- $date := now.Format "20060102" -}} {{- $filename := printf "styles-v%s.css" $date -}} {{- $targetDocsCssPath := path.Join "/" .Site.Params.docs_version "assets/css" $filename -}} {{- $sassOptions := dict "targetPath" $targetDocsCssPath "outputStyle" "expanded" "precision" 6 -}} {{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}} {{ if eq hugo.Environment "production" -}} {{- $sassOptions = merge $sassOptions (dict "outputStyle" "compressed") -}} {{- end -}} {{- $style := resources.Get (path.Join .Site.Params.docs_version "/scss/site.scss") | toCSS $sassOptions | postCSS $postcssOptions }}
```

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

### Concatenate and Process JavaScript Files in Hugo

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/layouts/partials/scripts.html

This snippet shows how to find all JavaScript files for a specific documentation version, concatenate them into a single file, and conditionally minify and fingerprint the result for production.

```html
{{ if eq hugo.Environment "production" -}} {{ else -}} {{- end }} {{- $js := resources.Match (path.Join .Site.Params.docs_version "js/*.js") -}} {{- $targetDocsJSPath := path.Join "/" .Site.Params.docs_version "assets/js/site.js" -}} {{- $docsJs := $js | resources.Concat $targetDocsJSPath -}} {{- if eq hugo.Environment "production" -}} {{- $docsJs = $docsJs | resources.Minify | fingerprint -}} {{- end }}
```

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

### Dynamically Modifying CueSync Attributes

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Update HTML attributes of the CueSync component using JavaScript's setAttribute() method. This allows for dynamic changes to layout and theme.

```javascript
const cueSync = document.querySelector('cue-sync');

cueSync.setAttribute('layout', 'paragraph');
cueSync.setAttribute('theme', 'dark');
```

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

### Calling CueSync Public Function: redrawTime()

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Invoke the redrawTime() public function on the CueSync component instance. This is useful for recalculating the timestamp column width after font or style changes.

```javascript
const cueSync = document.querySelector('cue-sync');

cueSync.redrawTime();
```

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

### Hugo Robots Meta Tag

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/layouts/partials/header.html

Conditionally renders the robots meta tag if a 'robots' parameter is set in the front matter.

```html
{{ with .Params.robots -}}
  {{- end }}
```

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

### Hide Timestamps in CueSync

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Use the `show-timestamp="false"` attribute to hide timestamps in the transcript. This is useful when timestamps are not desired for the user experience.

```html
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo3" 
          show-timestamp="false"
          style="height: 400px;"></cue-sync>
```

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

### Disable Auto-Scroll in CueSync

Source: https://github.com/cuesync/cuesync.github.io/blob/main/site/content/2.0/examples.md

Set the `auto-scroll="false"` attribute to disable the default auto-scroll behavior. This keeps the transcript in its current view even as media plays.

```html
<cue-sync transcript-path="/assets/transcripts/natgeo.vtt" 
          media="#natGeoVideo4" 
          auto-scroll="false"
          style="height: 400px;"></cue-sync>
```

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