Vuepress - wikipedia Infobox

Work in progress

This is a vuepress plugin to add an Infobox to a page which is very simliar to wikipedia.

Preview

Install

npm install vuepress-infobox

Add the plugin to your config.js file plugins property

module.exports = {
  plugins: ['infobox']
}

Then add the infobox component anywhere in your .md file and create a .json file (demo.json) to provide all the information you want to display in the infobox.

# Demo

<Infobox :json="require('./demo.json')" />

## History

This is the history of the article

For reference look at the official wikipedia infobox: https://en.wikipedia.org/wiki/Template:Infobox_website

Example of demo.json

{
  "name": "Demo",
  "logo": "/logos/demo.png",
  "screenshot": {
    "url": "/screenshots/demo.png",
    "caption": ""
  },
  "owner": "me",
  "authors": "me",
  "programming_language": "Vue.js, Markdown",
  "url": "<a target='_blank' href='https://vuepress-infobox.github.io/'>vuepress-infobox.github.io</a>",
  "repository": "<a target='_blank' href='https://github.com/mszkb/vuepress-infobox'>https://github.com/mszkb/vuepress-infobox</a>"
}

Screenshots, logos and data

Make sure you have following folder structure:

docs/.vuepress/public/

Inside the public directory you can create more directories as you wish, for example

docs/.vuepress/public/logos

Then in your demo.json file you can reference the files inside the logos directory.