Playing with Vuepress, and loving it!
Vuepress is a great demonstration of static page generation implementing the Single Page Application (SPA) framework. For Vue developers this is great, as creating/ extending custom components is easy.
Vuepress is by no means a mature product. Listing existing pages on the sidebar is not an existing feature (or should it?). As someone who creates content, updating the sidebar to list new pages is an unnecessary friction.
enhanceApp.js to the Rescue!
So I added this little code into enhanceApp.js, which is Vuepress' way to modify app functionality.
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// add articles to folders marked for auto-insert
siteData.themeConfig.sidebar = insertDynamicSidebar(siteData.themeConfig.sidebar, siteData.pages);
}
function insertDynamicSidebar(sidebar, pages) {
return sidebar.map((item) => {
if (typeof item === 'string') {
// looking for path ending with /*
if (item.match(/\/\*$/)) {
// remove extra /
let ParentPath = item.substring(0, item.length - 1);
item = {
title: '',
children: [ParentPath]
};
// item.children[0] = ParentPath;
pages.forEach(page => {
if (page.path.startsWith(ParentPath))
if (page.path === ParentPath)
item.title = page.title;
else
// found page in path
item.children.push(page.path);
});
}
}
return item;
});
}
To flag a folder for auto page insertion, tag the sidebar entry with backslash-asterix '/*'. Example below:
...
sidebar: [
'/',
'/2018/*',
'/WhoAmI'
],
...