Overview

The starter project provides an easy starting point to monetizing an ebook by section/chatper with auto-unlock on the web using Mash. Using GatsbyJS and Markdown, it builds a website that can be hosted anywhere. The built website is setup with the Mash Wallet to allow the author to monetize their book on a per chapter basis.

👉

A live demo can be found at https://mashlightningbookstarter.gatsbyjs.io/

Building your Book

Dependencies

To build your book the following are required:

Git: https://git-scm.com/
Node: https://nodejs.org/en/
Yarn: https://yarnpkg.com/

[Optional] The project is configured to use Yarn but NPM can also be installed.

Local Development

Navigate to the Github repository and checkout out the code:

git clone git@github.com:getmash/mash-lightning-book-starter.git
Not using Github? Download https://github.com/getmash/mash-lightning-book-starter/archive/refs/heads/main.zip

The next step is to install the project dependencies.

yarn install

Now that we have the project locally with all the dependencies installed, we can start a local development server and make changes any necessary changes

Run yarn develop to start the development server

Project Structure

src - The code powering the book can be found in this folder. Unless you are modifying the code or styles you should not need to modify any code here. The starter is built to require just modifying the Markdown to have a book be ready to be deployed.

src/styles - This folder contains all files related to the CSS powering the book. The project uses TailwindCSS

gatsby-config.ts - This is main configuration file. This files contains the metadata for the book such as “Author”, “Description” and all Mash related attributes that need to be configured on a per-earner basis.

content/book - The content of the book. This is where the Markdown files for each chapter will be found.

Creating your book in Markdown

A basic syntax guide can be found here: https://www.markdownguide.org/basic-syntax/. Unless the book has some complex elements, the basic syntax guide should be sufficient.

The code powering the book supports code blocks in many different languages. It also includes support for line numbers. An example can be seen below:

```cpp{numberLines: 51}
  if (params.fPowNoRetargeting)
    return pindexLast->nBits;
```

This will generate a code block where the first line will be numbered “51”. It will have syntax highlighting for the c++ language.

Markdown Metadata

Each markdown file must contain a metadata block at the top. This metadata block helps the rendering code determine how to structure the table of contents and the chapter/section. It also controls if the chapter/section should be free or if it requires payment.

Example Chapter: https://raw.githubusercontent.com/getmash/mash-lightning-book-starter/main/content/book/2_1_two_section_one/index.md

---
chapter: 2
section: 1
free: false
title: Why do we use it?
slug: 2_1_why_do_we_use_it
---

Chapter: This specifies the chapter this page is associated with. See chapter definitions in the gatsy-config.ts

Section: This specifies the section within the chapter. This is especially useful is you are displaying sections within a chapter across multiple pages. It helps sort the sections correctly. If showing your book with all sections on one page this number will generally be 0.

Free: Boolean flag that informs the rendering engine if his page is free or requires payment

Title: Title that is will be displayed in the table of contents and on the page

Slug: The url of the page. This will be shown in the browser URL bar.

Setting up the configuration file

The configuration file is called gatsby-config.ts. If you have used GatsbyJS in the past you will familiar with this file otherwise this file contains all the necessary configuration parameters to help customize the page without needing to modify the code directly.

The important block in this file is siteMetadata . The other fields will not need to be modified unless you are adding plugins or making larger changes across the app.

Example of site metadata

siteMetadata: {
    title: "Mash Lightning Book: Quick Starter Template",
    shortTitle: "Mash Lightning Book",
    author: "Mike Dedys",
    description:
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
    siteUrl: "https://mashlightningbookstarter.gatsbyjs.io/",
    social: {
      twitter: "getmash",
      email: "join@getmash.com",
    },
    book: {
      amazon: "https://someamazonbooklink.com",
      chapters: [
        {
          number: 1,
          title: "Lorem Ipsum",
        },
        {
          number: 2,
          title: "Why Lorem Ipsum",
        },
        {
          number: 3,
          title: "Where does it come from?",
        },
      ],
    },
    mash: {
      sdk: "https://wallet.getmash.com/sdk/sdk.js",
      earnerID: "3ca1325e-eb19-49f8-bad2-6d844b85b394",
      resourceID: "d2f6bcce-daf0-4c54-b95d-4982aa7b7fa6",
      handle: "mashearner",
      boosts: {
        icon: "lightning",
        variant: "dark",
        layoutMode: "float",
        floatLocationDesktop: "bottom-center",
        floatLocationMobile: "bottom-left",
      },
    },
  },

title: The title of the book. This should be the full complete title

short Title: A shorter title that will be used for mobile

author: Name of the author

description: A short description of the book. This will be shown on the home page of the book as well as on any social media links to the book.

siteUrl: The url of the book

social.twitter: Twitter username that will be attached to the twitter icon

social.email: Email that will be attached to the mailto icon

book.amazon: Optional amazon book link. If not set, the amazon button will not be shown

book.chapters: Definition of chapters within the book. This is array of objects that contain a number (Chapter Number) and title (Name of Chapter) fields.

mash: This block contains all the required fields for configuring mash.

mash.sdk: This field should not be changed. This points the app where to download the Mash Wallet from

mash.earnerID: Unique ID used to identify you within Mash. You can follow the instructions here to retrieve your earner ID: https://www.notion.so/getmash/Overview-Add-Mash-Consumer-Wallet-55ecdf4e351341de901d14fd69b2aba0#04852b60b9794c998bc881030461d398

mash.resourceID: Unique ID associated with a pricing category you have created within the Mash Earner dashboard. This informs the Mash Wallet how much each page in the book costs, along with how many freebies are associated with the pricing model. Navigate to https://wallet.getmash.com/earn/pay-per-use/pricing-list to configure your pricing model.

mash.handle: Unique handle configured in your Mash Earner dashboard. This allows donations to be sent to you. The handle can be retrieved from https://wallet.getmash.com/earn/settings

mash.boosts: This objects configures the boost button on your site. You can change the type and positioning of the button using this block. It follows the same attributes that can be found in the documentation: https://docs.getmash.com/?path=/story/donations-boost-button--boost-button.

Hosting your Book

The book can hosted anywhere you would like. To build the book simply run: yarn build . This command will build the entire book and generate a static site. The site will be found the in public directory. You can take this folder and upload it to whatever hosting solution you have chosen.

If you don’t currently have a hosting solution, you can use one of the ones listed below.

Netlify

1️⃣ Create an account: https://app.netlify.com/signup

2️⃣ Add a new site

The next section will depend on the where your site code is living. If using Github/Gitlab you can use the “Import Existing Project”, otherwise select “Deploy manually”

3️⃣ Import Existing Project

Connect to Git Provider, Authorize the provider and select the correct repository

Set up build settings.

Build command: yarn build
Publish directory: public/

4️⃣ Deploy Site!

Now any commit to main/master branch will result in a new deployment.
If you would like a custom domain see: https://docs.netlify.com/domains-https/custom-domains/

Deploy Manually

3️⃣ Build your site: yarn build and then drag public folder to have site deployed

4️⃣ To setup custom domain, follow the steps listed in the dashboard.