CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm--vuepress--theme-default

Default theme for VuePress providing navigation, sidebar, search, and responsive documentation layouts

Pending
Overview
Eval results
Files

utilities.mddocs/

Utility Functions

Path processing, page resolution, and sidebar generation utilities for theme customization, extension, and internal navigation logic.

Capabilities

Path Processing Functions

Utility functions for normalizing and processing URL paths in VuePress applications.

/**
 * Normalize URL path by removing hash and file extensions
 * @param {string} path - Raw path to normalize
 * @returns {string} Normalized path
 */
function normalize(path): string;

/**
 * Extract hash fragment from path
 * @param {string} path - Path containing hash fragment  
 * @returns {string|undefined} Hash fragment or undefined
 */
function getHash(path): string | undefined;

/**
 * Ensure .html extension on internal paths
 * @param {string} path - Path to process
 * @returns {string} Path with .html extension
 */
function ensureExt(path): string;

/**
 * Check if path is external URL
 * @param {string} path - Path to check
 * @returns {boolean} True if external URL
 */
function isExternal(path): boolean;

/**
 * Check if path is mailto link
 * @param {string} path - Path to check
 * @returns {boolean} True if mailto link
 */
function isMailto(path): boolean;

/**
 * Check if path is tel link  
 * @param {string} path - Path to check
 * @returns {boolean} True if tel link
 */
function isTel(path): boolean;

Usage Examples:

import { normalize, isExternal, ensureExt } from '@vuepress/theme-default/util';

// Normalize paths
normalize('/guide/installation.md#setup'); // → '/guide/installation'
normalize('/api.html'); // → '/api'

// Check external links
isExternal('https://github.com'); // → true
isExternal('/internal-page'); // → false

// Ensure extensions
ensureExt('/guide/'); // → '/guide/'  
ensureExt('/api'); // → '/api.html'

Route and Navigation Functions

Functions for handling active states and route matching.

/**
 * Check if route matches path (for active link states)
 * @param {object} route - Vue router route object
 * @param {string} path - Path to compare against
 * @returns {boolean} True if route is active for path
 */
function isActive(route, path): boolean;

/**
 * Process navigation link configuration
 * @param {object} linkItem - Navigation link configuration
 * @returns {object} Processed link item with type
 */
function resolveNavLinkItem(linkItem): object;

Usage Examples:

// Check active state
const route = this.$route;
isActive(route, '/guide/'); // → true if current route matches

// Process nav links
const navItem = resolveNavLinkItem({
  text: 'Guide',
  link: '/guide/',
  items: [...]
}); // → { text: 'Guide', link: '/guide/', type: 'links' }

Page Resolution Functions

Functions for resolving pages and building navigation structures.

/**
 * Resolve page object from path and pages array
 * @param {Array} pages - Array of all site pages
 * @param {string} rawPath - Raw path to resolve
 * @param {string} [base] - Base path for resolution
 * @returns {object} Resolved page object
 */
function resolvePage(pages, rawPath, base?): object;

/**
 * Build sidebar navigation structure for current page
 * @param {object} page - Current page object
 * @param {string} regularPath - Regular path of current page
 * @param {object} site - Site data with pages and config
 * @param {string} localePath - Locale path for i18n
 * @returns {Array} Array of sidebar groups and items
 */
function resolveSidebarItems(page, regularPath, site, localePath): Array;

/**
 * Match current path to sidebar configuration
 * @param {string} regularPath - Regular path to match
 * @param {object|Array} config - Sidebar configuration
 * @returns {object} Matching config with base path
 */
function resolveMatchingConfig(regularPath, config): object;

Usage Examples:

// Resolve page
const page = resolvePage(
  site.pages,
  '/guide/installation',
  '/guide/'
); // → { type: 'page', path: '/guide/installation.html', title: '...' }

// Build sidebar items
const sidebarItems = resolveSidebarItems(
  currentPage,
  '/guide/installation',
  site,
  '/'
); // → [{ type: 'group', title: 'Guide', children: [...] }]

Header Processing Functions

Functions for processing and organizing page headers for navigation.

/**
 * Group h3 headers under h2 parent headers
 * @param {Array} headers - Array of header objects
 * @returns {Array} Grouped headers with h3s as children of h2s
 */
function groupHeaders(headers): Array;

Usage Examples:

const headers = [
  { level: 2, title: 'Getting Started', slug: 'getting-started' },
  { level: 3, title: 'Installation', slug: 'installation' },
  { level: 3, title: 'Configuration', slug: 'configuration' },
  { level: 2, title: 'Advanced', slug: 'advanced' }
];

const grouped = groupHeaders(headers);
// → [
//     { 
//       level: 2, 
//       title: 'Getting Started', 
//       children: [
//         { level: 3, title: 'Installation', slug: 'installation' },
//         { level: 3, title: 'Configuration', slug: 'configuration' }
//       ]
//     },
//     { level: 2, title: 'Advanced', slug: 'advanced' }
//   ]

Regular Expressions

Utility regular expressions for path processing:

/** Regex for URL hash fragments (#section) */
const hashRE: RegExp = /#.*$/;

/** Regex for .md and .html file extensions */
const extRE: RegExp = /\.(md|html)$/;

/** Regex for trailing slashes */
const endingSlashRE: RegExp = /\/$/;

/** Regex for external URLs (protocol prefixes) */
const outboundRE: RegExp = /^[a-z]+:/i;

Usage:

// Test against patterns
hashRE.test('/guide#setup'); // → true
extRE.test('/api.md'); // → true
endingSlashRE.test('/guide/'); // → true
outboundRE.test('https://example.com'); // → true

Type Definitions

interface Page {
  /** Unique page key */
  key: string;
  /** Full page path with extension */
  path: string;
  /** Regular path without extension */
  regularPath: string;
  /** Page title */
  title: string;
  /** Frontmatter data */
  frontmatter: object;
  /** Page headers for navigation */
  headers?: Header[];
}

interface Header {
  /** Header level (1-6) */
  level: number;
  /** Header text content */
  title: string;
  /** URL slug for linking */
  slug: string;
  /** Nested child headers */
  children?: Header[];
}

interface SiteData {
  /** All site pages */
  pages: Page[];
  /** Theme configuration */
  themeConfig: object;
}

interface ResolvedPage {
  /** Page type */
  type: 'page' | 'external';
  /** Page path */
  path: string;
  /** Page title */
  title?: string;
  /** Page headers */
  headers?: Header[];
}

interface SidebarGroup {
  /** Group type */
  type: 'group' | 'page' | 'external' | 'auto';
  /** Group title */
  title?: string;
  /** Group path */
  path?: string;
  /** Child items */
  children?: SidebarGroup[];
  /** Whether group can be collapsed */
  collapsable?: boolean;
  /** Sidebar depth */
  sidebarDepth?: number;
  /** Initial open group index */
  initialOpenGroupIndex?: number;
}

interface NavLinkItem {
  /** Link text */
  text: string;
  /** Link URL */
  link?: string;
  /** Nested items for dropdown */
  items?: NavLinkItem[];
  /** Link type */
  type?: 'link' | 'links';
}

Error Handling

Utility functions include error handling and logging:

// Page resolution with error logging
function resolvePage(pages, rawPath, base) {
  // ... resolution logic ...
  if (!found) {
    console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`);
    return {};
  }
  return page;
}

Functions gracefully handle edge cases:

  • Missing or malformed paths
  • Invalid page configurations
  • Circular reference detection
  • Locale fallback resolution

Install with Tessl CLI

npx tessl i tessl/npm--vuepress--theme-default

docs

global-components.md

index.md

navigation.md

page-layout.md

sidebar.md

theme-configuration.md

utilities.md

tile.json