No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
assets/svg
components
docs-assets
global-components
layouts
styles
.editorconfig
.eslintrc.js
.gitattributes
.gitignore
.npmignore
LICENSE
Layout.vue
NotFound.vue
Readme.md
enhanceApp.js
package.json
yarn.lock

Readme.md

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

  1. Create new vuepress project.

  2. Install theme:

yarn add vuepress-theme-live-ebook
  1. Install required peer dependencies:
yarn add vue-svg-loader
  1. 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
  base: '/', // Base URL, leave as is if you don't serve the book from a folder
  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'
    },
    twitter: 'netguru',
  },

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

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  }
}
  1. Create index.md file with the following content:
---
layout: home
---

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 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.

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="sample@2x.png" 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: BaseQuote

BaseQA

You can insert Q&A sections by using following syntax:

<BaseQA
  question="Why do you want to know the business model?"
  answer="This will allow us some amount of lorem ipsum dolor sit amet conscetur blah blah"
/>

This will produce a following outcome: BaseQA

BaseComparison

You can insert DOs and DONT's sections by using following syntax:

<BaseComparison
  intro="There are a couple of things we need to cover:"
  :good="[
    'Create your wireframes based on a muted color pallete',
    'Use color only if it helps defining the idea behind the design',
  ]"
  :bad="[
    'Don't use color in your wireframe designs unless it has a solid purpose',
    'Don't use various tints of grey',
  ]"
/>

This will produce a following outcome: BaseComparison

Customization

In order to customize basic informations, update themeConfig properties in .vuepress/config.js.

You can also override [styles/variables.stylus](default stylus variables), in order to do so create .vuepress/override.styl and override them there. Recommended variables to override:

$ff-base = Helvetica
$ff-serif = Georgia, sans-serif
$c-primary = #ff9a57

Do NOT put regular CSS inside override.styl - it's only for overriding variables.

If you want to add custom CSS, create .vuepress/style.styl.