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.
Building your Book
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.
- Navigate to the Github repository and checkout out the code:
- 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.
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
yarn developto start the development server
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:
This will generate a code block where the first line will be numbered “51”. It will have syntax highlighting for the c++ language.
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.
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
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.
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:
- Publish directory:
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/
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.
- More information can be found here: https://docs.netlify.com/domains-https/custom-domains/
1️⃣ Create an account or login into firebase: https://console.firebase.google.com
2️⃣ Create a project
3️⃣ Navigate to “Hosting”
4️⃣ Create your first site
5️⃣ Install Firebase CLI
6️⃣ Connect your Google Account to firebase and init your project
7️⃣ Deploy your site using Firebase CLI
1️⃣ Create or Login to Gatsby Cloud: https://www.gatsbyjs.com/products/cloud/
2️⃣ Add a new site
3️⃣ Connect a Provider
4️⃣ Import code from your repository
5️⃣ Use default settings for site and click “Build Site”