vuepress-theme-live-ebook

This repository contains theme for Vuepress, made specifically for creating live ebooks, like this one with ease: https://design-process.netguru.co

It's compatible with vuepress 0.x.

Usage

Create new vuepress project.
Install theme:

yarn add vuepress-theme-live-ebook

Install required peer dependencies:

yarn add vue-svg-loader

Create config .vuepress/config.js, here's the example one:

// .vuepress/config.js
module.exports = {
  title: 'Design Process by Netguru', // Page title
  description: 'Live E-Book with useful informations about Design Process',
  theme: 'live-ebook', // Important! This is the name of this theme
  redirectToFirstSection: false, // Important! Control if `/` should redirect to 1st chapter or not
  base: '/', // Base URL, leave as is if you don't serve the book from a folder
  contactUrl: '/', // Url on which user will be redirected after click on contact
  head: [
    ['link', { rel: 'icon', href: '/images/favicon.ico' }],
    ['meta', { property: 'og:type', content: 'website' }],
  ],
  ga: 'UA-259047-66', // Google Analytics ID
  themeConfig: {
    bookTitle: 'Design Process for pros', // Book title
    baseUrl: 'https://design-process.netguru.co', // Used for sharing in social media and for meta tags
    exitUrl: 'https://www.netguru.co/design-process',
    company: {
      name: 'Netguru',
      url: 'https://www.netguru.co',
      logo: '/images/netguru.svg'
      logoMobile: '/images/netguru_letter.svg',
      copyRights: '© 2019 Copyrights by Netguru. All rights reserved.'
    },
    socials: {
      facebook: 'netguru',
      twitter: 'netguru',
      dribbble: 'netguru',
      behance: 'netguru',
    },
  },

  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  }
}

Create index.md file with the following content:

---
layout: home
---

Everything that goes under will be displayed on home page. You may add any content, use existing sections designed for a landing page or create your own within the project. Out of the box, you will see rendered header and footer.

Example of home layout code

---
layout: home
---
<LandingChapters
  intro="Short intro text"
  img="image.svg"
  imgAlt="image is displayed under intro text"
/>
<h1>Your own tag</h1>
...

Important! If you don't need landing page, set redirectToFirstSection property in config.js to true.

Alternatively you can also fork one of our E-Books, e.g. PM Book and tweak it to your liking.

Example e-book file tree:

your-ebook
├── .vuepress
│   ├── public <-- publically available files
│   │   ├── fonts
│   │   └── images
│   ├── config.js <-- configuration file, example content posted above
│   ├── override.styl  <-- use this to override default stylus variables
│   └── style.styl <-- put your own CSS here
├── chapters <-- actual e-book content here
│   ├── 01-lorem-ipsum.md
│   ├── 02-dolor-sit.md
│   └── 03-amet-consectetur.md
├── index.md <-- home page (required, although when you set redirectToFirstSection to true, it's there only to redirect users to 1st chapter) 
└── package.json

Chapter format

Each chapter file has to start with the following Front Matter:

---
layout: chapter
title: "Example title of Chapter 2"
chapter_number: "02"
description: In this chapter you will ...
---

# Example title of Chapter 2

Chapter content goes here.

Fields: layout, title and chapter_number are required.
description field is optional, if present - it will be places in proper meta tags on the page. Defaults to the description from .vuepress/config.js
Make sure that title in front matter corresponds to the primary heading - as in the above example.
Use only one H1 heading (# ...).

See example chapter for reference.

Landing page example

---
layout: home
---

<LandingHeader
  title="Some title to be render"
  subtitle="Short subtitle"
  intro="Any text e.g. Learn new things about your design process."
  tag="Version 1.0"
  :imgDesktop="{
    img: 'banner-desktop.png',
    img2x: '',
    imgAlt: '',
  }"
  :imgMobile="{
    img: 'banner-mobile.png',
    img2x: '',
    imgAlt: '',
  }"
/>

<LandingChapters
  intro="Short intro text"
  img="image.svg"
  imgAlt="image is displayed under intro text"
/>

...

Available components

BaseImage

If you need to use an image, place it in folder .vuepress/public/images. You can then use it using the <BaseImage /> component, e.g.:

<BaseImage img="sample.png" img2x="[email protected]" alt="Sample image" />

The img2x property is optional. If you want you can also use regular markdown image syntax.

BaseQuote

You can insert quotes by using following syntax:

<BaseQuote
  text="Quote text goes here"
  author="Quote author goes here"
/>

This will produce a following quote: