tessl/npm--vuepress--theme-default

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

—

Pending

Overview

Eval results

Files

Page Layout Components

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

Core page layout and content display components including main layout system, homepage hero layout, and page content management.

Capabilities

Layout Component

Main layout component that provides the complete page structure with navbar, sidebar, and content areas.

/**
 * Main page layout Vue component
 * Available as layouts/Layout.vue
 */
const Layout: VueComponent = {
  name: 'Layout',
  components: {
    Home: Object,
    Navbar: Object, 
    Page: Object,
    Sidebar: Object
  },
  slots: {
    'sidebar-top': {},    // Top of sidebar area
    'sidebar-bottom': {}, // Bottom of sidebar area  
    'page-top': {},       // Top of page content
    'page-bottom': {}     // Bottom of page content
  },
  data() {
    return {
      isSidebarOpen: Boolean
    };
  },
  computed: {
    shouldShowNavbar: Boolean,
    shouldShowSidebar: Boolean,
    pageClasses: Array,
    sidebarItems: Array
  },
  methods: {
    toggleSidebar(to?: boolean): void,
    onTouchStart(e: TouchEvent): void,
    onTouchEnd(e: TouchEvent): void
  }
};

Slots:

sidebar-top: Content at top of sidebar
sidebar-bottom: Content at bottom of sidebar
page-top: Content at top of page
page-bottom: Content at bottom of page

Usage:

<template>
  <Layout>
    <template #page-top>
      <div>Custom header content</div>
    </template>
    <template #page-bottom>
      <div>Custom footer content</div>
    </template>
  </Layout>
</template>

404 Layout Component

Error page layout component with random error messages and home navigation.

/**
 * 404 error page layout Vue component
 * Available as layouts/404.vue
 */
const NotFoundLayout: VueComponent = {
  methods: {
    getMsg(): string
  }
};

The 404 component randomly selects from predefined error messages:

"There's nothing here."
"How did we get here?"
"That's a Four-Oh-Four."
"Looks like we've got some broken links."

Home Component

Homepage hero layout component for documentation landing pages.

/**
 * Homepage hero layout Vue component
 * Available as @theme/components/Home.vue
 */
const Home: VueComponent = {
  name: 'Home',
  computed: {
    data(): object,
    actionLink(): object
  }
};

Frontmatter Configuration:

---
home: true
heroImage: /hero.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/ 
features:
  - title: Feature 1
    details: Feature 1 description
  - title: Feature 2  
    details: Feature 2 description
  - title: Feature 3
    details: Feature 3 description
footer: MIT Licensed | Copyright © 2018-present
---

Page Component

Standard page content wrapper component that handles regular documentation pages.

/**
 * Standard page content wrapper Vue component
 * Available as @theme/components/Page.vue
 */
const Page: VueComponent = {
  name: 'Page',
  props: {
    sidebarItems: {
      type: Array,
      default: () => []
    }
  },
  slots: {
    top: {},    // Top of page content
    bottom: {}  // Bottom of page content
  }
};

Props:

sidebarItems (Array): Sidebar navigation items for current page

Slots:

top: Content at top of page
bottom: Content at bottom of page

PageEdit Component

Component that displays edit page links, last updated information, and contributor details.

/**
 * Page edit links and metadata Vue component
 * Available as @theme/components/PageEdit.vue
 */
const PageEdit: VueComponent = {
  name: 'PageEdit',
  computed: {
    lastUpdated(): string,
    lastUpdatedText(): string,
    editLink(): string,
    editLinkText(): string
  },
  methods: {
    createEditLink(repo: string, docsRepo: string, docsDir: string, docsBranch: string, path: string): string,
    endingSlashRE: RegExp
  }
};

Configuration:

// VuePress config
module.exports = {
  themeConfig: {
    // Repository info
    repo: 'vuejs/vuepress',
    repoLabel: 'GitHub',
    
    // Edit links
    editLinks: true,
    editLinkText: 'Edit this page on GitHub',
    docsDir: 'docs',
    docsBranch: 'master',
    
    // Last updated
    lastUpdated: 'Last Updated'
  }
}

PageNav Component

Next/previous page navigation component for sequential page browsing.

/**
 * Next/previous page navigation Vue component
 * Available as @theme/components/PageNav.vue
 */
const PageNav: VueComponent = {
  name: 'PageNav',
  computed: {
    prev(): object | null,
    next(): object | null
  },
  methods: {
    resolvePrev(page: object, items: Array): object | null,
    resolveNext(page: object, items: Array): object | null,
    find(page: object, items: Array, offset: number): object | null,
    isString(v: any): boolean
  }
};

Configuration:

---
# Frontmatter configuration
prev: /previous-page/
next: /next-page/

# Or disable navigation
prev: false
next: false
---

Layout Behavior

Responsive Design

All layout components adapt to different screen sizes:

Desktop: Full navbar + sidebar layout
Tablet: Collapsible sidebar with overlay
Mobile: Hidden sidebar with hamburger menu

Touch Navigation

Layout supports touch gestures on mobile:

Swipe right to open sidebar
Swipe left to close sidebar
Touch outside sidebar to close

Page Classes

The Layout component applies CSS classes based on page state:

interface PageClasses {
  'theme-container': boolean;
  'sidebar-open': boolean;
  'no-navbar': boolean;
  'no-sidebar': boolean;
}

Frontmatter Configuration

Pages can be configured via frontmatter:

---
# Homepage
home: true
heroImage: /hero.png
heroText: Site Title
tagline: Site description
actionText: Get Started
actionLink: /guide/

# Regular page
navbar: true
sidebar: true
prev: /previous/
next: /next/

# Custom layout
layout: CustomLayout
---

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