tessl/npm--vuepress--theme-default

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

—

Pending

Overview

Eval results

Files

Global Components

Name: tessl/npm--vuepress--theme-default
Author: tessl

Globally available Vue components for content enhancement including badges, code blocks, and tabbed code groups that can be used directly in markdown files.

Capabilities

Badge Component

Inline badge/label component with color variants for highlighting important information.

/**
 * Inline badge/label functional Vue component
 * Available globally as <Badge>
 */
const Badge: VueComponent = {
  functional: true,
  props: {
    /** Badge type/color variant */
    type: {
      type: String,
      default: 'tip'
    },
    /** Badge text content */
    text: String,
    /** Vertical alignment */
    vertical: {
      type: String,
      default: 'top'
    }
  },
  render(h, { props, slots }): VNode
};

Props:

type (String, default: 'tip'): Badge color variant (tip, error, warning, etc.)
text (String): Badge text content
vertical (String, default: 'top'): Vertical alignment (top, middle, bottom)

Badge Types:

tip / green: Green badge for tips and positive information
error: Red badge for errors and critical information
warning / warn / yellow: Yellow badge for warnings
Default: Blue badge for general information

Usage Examples:

<!-- In markdown files -->
<Badge text="new" type="tip" />
<Badge text="deprecated" type="warning" />
<Badge text="beta" type="error" />

<!-- With default slot content -->
<Badge type="tip">New Feature</Badge>

<!-- With custom vertical alignment -->
<Badge text="v2.0" vertical="middle" />

CodeGroup Component

Tabbed code block container component for displaying multiple code examples with tab navigation.

/**
 * Tabbed code block container Vue component
 * Available globally as <CodeGroup>
 */
const CodeGroup: VueComponent = {
  name: 'CodeGroup',
  data() {
    return {
      codeTabs: Array,
      activeCodeTabIndex: Number
    };
  },
  slots: {
    default: {} // Code blocks content
  },
  methods: {
    changeCodeTab(index: number): void
  },
  mounted(): void,
  beforeDestroy(): void
};

Usage Examples:

<CodeGroup>
<CodeBlock title="NPM">

```bash
npm install package-name

</CodeBlock> <CodeBlock title="YARN">

yarn add package-name

</CodeBlock> </CodeGroup> ```

CodeBlock Component

Individual code block component used within CodeGroup for tabbed code examples.

/**
 * Individual code block Vue component for use within CodeGroup
 * Available globally as <CodeBlock>
 */
const CodeBlock: VueComponent = {
  name: 'CodeBlock',
  props: {
    /** Tab title for the code block */
    title: {
      type: String,
      required: true
    },
    /** Whether this code block is active */
    active: {
      type: Boolean,
      default: false
    }
  },
  slots: {
    default: {} // Code content
  }
};

Props:

title (String, required): Tab title displayed in CodeGroup navigation
active (Boolean, default: false): Whether this code block is initially active

Usage:

<CodeBlock title="JavaScript">

```javascript
const result = processData(input);
console.log(result);

</CodeBlock> ```

Advanced Usage

Nested Components

Global components can be nested and combined:

<!-- Badge within code group -->
<CodeGroup>
<CodeBlock title="Current API">

```javascript
// Current implementation
const api = new API();

</CodeBlock> <CodeBlock title="Deprecated API">

// Old implementation <Badge text="deprecated" type="warning" />
const oldApi = new OldAPI();

</CodeBlock> </CodeGroup> ```

Custom Styling

Components inherit theme styling but can be customized:

// Custom badge styles
.badge
  &.custom
    background-color #ff6b6b
    color white

// Custom code group styles  
.theme-code-group
  .theme-code-group__nav-tab
    &.custom-tab
      background-color #f8f8f8

Component Registration

Global components are automatically registered by VuePress and available in all markdown files without imports:

// Automatic registration (handled by VuePress)
Vue.component('Badge', Badge);
Vue.component('CodeGroup', CodeGroup);
Vue.component('CodeBlock', CodeBlock);

Accessibility

Global components include accessibility features:

Badge Accessibility

Uses semantic HTML with appropriate ARIA attributes
Color variants are supplemented with text indicators
Screen reader friendly text content

CodeGroup Accessibility

Keyboard navigation support (arrow keys, enter, space)
ARIA roles and labels for tab interface
Focus management and visual indicators
Screen reader announcements for tab changes

// Accessibility features
interface AccessibilityFeatures {
  /** Keyboard navigation support */
  keyboardNavigation: boolean;
  /** ARIA labels and roles */
  ariaSupport: boolean;
  /** Focus management */
  focusManagement: boolean;
  /** Screen reader compatibility */
  screenReaderSupport: boolean;
}

Browser Support

Global components work in all modern browsers:

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+
Mobile browsers with JavaScript enabled

Components gracefully degrade in older browsers with basic HTML/CSS fallbacks.

Install with Tessl CLI

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

docs

global-components.md

index.md

page-layout.md

theme-configuration.md

utilities.md

tile.json

tessl/npm--vuepress--theme-default