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.
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.
- More information can be found here: https://docs.netlify.com/domains-https/custom-domains/
Firebase Hosting
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
Gatsby Cloud
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”
See All Guides
Contact Us
- Support@getmash.com
- Telegram group
- Discord Channel (just launched)
Partner
Stay up to date
- The Mash Twitter account
- Youtube Channel