Snippets Folder Inventory

This page provides a comprehensive inventory of all files and folders in the /snippets directory. The snippets folder is the central location for all custom components, data, scripts, and assets used in the Livepeer documentation.

Overview

The snippets folder contains:

• Components - Custom React/JSX components organized by purpose
• Data - Reusable data files (code strings, variables, API specs)
• Pages - Modular MDX content imported into main documentation pages
• Scripts - Automation and generation scripts
• Automations - Data fetching and processing automation files
• Assets - Images, logos, media files, and static assets
• Styles - Theme and styling definitions
• SnippetsWiki - Internal documentation about the snippets system

Directory Structure

Components (/snippets/components/)

Custom React/JSX components organized by purpose:

Primitives (/snippets/components/primitives/)

• buttons.jsx - Button components (BasicBtn, DownloadButton)
• divider.jsx - CustomDivider component
• icons.jsx - Livepeer brand icons (LivepeerIcon, LivepeerSVG, etc.)
• links.jsx - Link and navigation components (GotoLink, GotoCard, CustomCallout, etc.)
• text.jsx - Text components (Subtitle, CopyText, etc.)

Layout (/snippets/components/layout/)

• cards.jsx - Card layout components (PostCard, BlogCard, ScrollBox)
• lists.jsx - List components (BasicList, IconList, StepList, etc.)
• ListSteps.jsx - ListSteps component for rendering lists as steps
• steps.jsx - Styled step components (StyledSteps, StyledStep)
• table.jsx - DynamicTable component
• quadGrid.jsx - QuadGrid layout component
• text.jsx - Text layout components (AccordionLayout)

Display (/snippets/components/display/)

• video.jsx - Video components (YouTubeVideo, CardVideo, LinkedInEmbed)
• image.jsx - Image components (Image, LinkImage)
• embed.jsx - Embed components (MarkdownEmbed, EmbedMarkdown)
• zoomable-diagram.jsx - ScrollableDiagram component
• quote.jsx - Quote components (Quote, FrameQuote)
• frameMode.jsx - Frame mode heading components (PageHeader, H1-H6, P, Divider)
• showcaseCards.jsx - ShowcaseCards component
• socialLinks.jsx - SocialLinks component
• CardCarousel.jsx - CardCarousel component

Content (/snippets/components/content/)

• code.jsx - Code display components (CustomCodeBlock, CodeComponent, ComplexCodeBlock)
• external-content.jsx - ExternalContent component for loading external docs
• release.jsx - LatestVersion component
• responseField.jsx - API response field components (ResponseFieldGroup, ValueResponseField, etc.)

Integrations (/snippets/components/integrations/)

• coingecko.jsx - CoinGeckoExchanges component

Domain (/snippets/components/domain/)

Domain-specific components organized by documentation section:

• 04_GATEWAYS/ - Gateway-specific components
  • callouts.jsx - Gateway warning/note callouts
  • quickstartTabs.jsx - Gateway quickstart UI components
• SHARED/ - Shared components across domains
  • HeroGif.jsx - Starfield animation component
  • Portals.jsx - Portal page layout components
  • previewCallouts.jsx - Preview/coming soon callouts

Data (/snippets/data/)

Reusable data files for code strings, variables, and references:

• gateways/ - Gateway-related data files
  • code.jsx - Docker and installation code strings
  • flags.jsx - Configuration flags
  • quickstart.jsx - Quickstart data
  • linux/ - Linux-specific code data
• references/ - Reference data
  • chainlist.jsx - Chainlist RPC data
• variables/ - Variable definitions
  • home.mdx - Home page variables
  • variables.mdx - Global variables
• API/ - API-related data
  • README.md - API documentation generation guide
  • openapi.yaml - OpenAPI specifications

Pages (/snippets/pages/)

Modular MDX content imported into main documentation pages:

• 00_HOME/ - Home page content
• 01_ABOUT/ - About section content
• 04_GATEWAYS/ - Gateway documentation content
  • run/quickstart/ - Quickstart views by OS and mode
• 05_GPUS/ - GPU-related content
• 08_SHARED/ - Shared page content

Scripts (/tools/scripts/snippets/)

Automation and generation scripts:

• update-component-library.sh - Auto-updates component library listing
• generate-api-docs.sh - Generates API documentation from OpenAPI specs
• generate-seo.js - Generates SEO metadata
• fetch-external-docs.sh - Fetches external documentation
• fetch-openapi-specs.sh - Fetches OpenAPI specifications
• fetch-lpt-exchanges.sh - Fetches LPT exchange data
• generate-data/ - Data generation scripts
  • scripts/terminology-search.js - Discovers glossary terminology
  • scripts/generate-glossary.js - Generates glossary terms
• paths.config.json - Configuration for script paths

Automations (/snippets/automations/)

Data fetching and processing automation files:

• blog/ - Blog data (Ghost blog integration)
• discord/ - Discord announcements data
• forum/ - Forum data integration
• globals/ - Global automation data (versions, etc.)
• luma/ - Luma calendar integration
• youtube/ - YouTube data integration
• showcase/ - Showcase project data
• scripts/ - n8n workflow scripts (JSON)

Assets (/snippets/assets/)

Static assets including images, logos, and media:

• logos/ - Livepeer logos and brand assets
• domain/ - Domain-specific assets organized by section
• media/ - Media files (gifs, images, videos)
• site/ - Site-wide assets (favicon, images)
• data/ - Data files (HTML exports, etc.)

Styles (/snippets/styles/)

• themeStyles.jsx - Theme styling definitions (deprecated - use CSS Custom Properties in style.css instead)

SnippetsWiki (/snippets/snippetsWiki/)

Internal documentation about the snippets system:

• index.mdx - Overview of snippets folder
• mintlify-behaviour.mdx - Mintlify-specific patterns and gotchas
• theme-colors.mdx - Theme color system documentation
• componentLibrary/ - Component library documentation
  • index.mdx - Auto-generated component structure (updated by script)
  • examples/ - Component examples

File Count Summary

• Components: ~50+ JSX/TSX files across 6 categories
• Data Files: ~20+ JSX/MDX files
• Page Modules: ~20+ MDX files
• Scripts: ~10+ shell/JS scripts
• Automations: ~15+ JSX/JSON files
• Assets: 100+ image/media files
• Total: 200+ files in snippets folder

Usage Patterns

Importing Components

// Import from components
import { YouTubeVideo } from "/snippets/components/display/video.jsx";
import { GotoCard } from "/snippets/components/primitives/links.jsx";
import { CustomCodeBlock } from "/snippets/components/content/code.jsx";

Importing Data

// Import data files
import { DOCKER_CODE } from "/snippets/data/gateways/code.jsx";
import { latestVersion } from "/snippets/automations/globals/globals.jsx";

Importing Page Modules

// Import MDX page modules
import DockerOffChainTab from "/snippets/pages/04_GATEWAYS/run/quickstart/views/docker/dockerOffChainTab.mdx";

Automation

The component library listing is automated:

Script: tools/scripts/snippets/update-component-library.sh

Output: snippets/snippetsWiki/componentLibrary/index.mdx

Usage:

./tools/scripts/snippets/update-component-library.sh

This script automatically generates a Tree structure listing all components in snippets/components/.

Related Resources

• Component Library - Detailed component reference
• Style Guide - Styling and Mintlify gotchas
• Snippets Wiki - Internal snippets documentation
• Mintlify Behavior Guide - Mintlify-specific patterns