vuepress-theme-momo

Dreipols MOMO vuepress theme.

This is basically the default theme. The only difference is the SearchBox.vue component, which has been refactored to provide a better search implementation using lunr.js.

Usage

If you want to use this theme you have to set your theme to momo. In addition you need a search-documents property.

.vuepress/config.js

    module.exports = {
        title: name,
        theme: 'momo',
        themeConfig: {
            nav: ...,
            sidebar: ...,
            search: {
                ref: 'name',
                fields: ['content'],
                ui: {
                    link: 'link',
                    text: 'file',
                },
                documents: require('../app/search-documents.json'),
                index: require('../app/search-index.json'),
            },
        },
    };

Config

The search configuration has to look like this interface

    export default interface ConfigInterface{
        ref: string;
        fields: string[];
        ui: UIConfigInterface;
        documents: object[];
        index?: object;
        metadataComponent?: string;
    }
    
    export interface UIConfigInterface {
        link: string;
        text: string;
    }

Config Description

|Property|Description| |---|---| |ref| Document identifier for your document set. Like the ID| |fields| Array of fields that will be indexed| |ui.link| Define what property defines the link to the result | |ui.text| Text that should be displayed for your result| |documents| Documents that will be indexed and available in your search| |index| A serialized search index created by lunr| |metadataComponent| A component name that will be used to render the metadata content. Default|

Pre-Built Lunr Index

Read here about prebuilding your index