@olavea/gatsby-theme-picture-book

0.2.10 • Public • Published

Gatsby

@olavea/gatsby-theme-picture-book

I love reading books. So the day it dawned on me that I could build a book with Gatsby was a GOOD day. By getting some brilliant friends to help me build this theme I hope to pass some of the goodness on to you.

My daughter Lillian (4.5 🦄) gave me the Gatsby-book-building-idea, read the backstory by scrolling down to the end.

Check out Petra Rabbit. It's almost Beatrix Potter's Peter Rabbit, newly narrated by Lillian (4.5 🦄) and I.

-- Ola Vea (41 #codenewbie and #booklover)

Create a Do-It-Yourself picture book together with a child you know

  • Automagically generate a picture book from image files
  • Touch swipe to flip page
  • Optional audio track

Ola will continue working on this theme while learning to code. New features will be added sporadically. You are welcome to make a pull request on github, @raae will help manage the repo. Ask Ola anything or give him ideas on twitter @OlaHolstVea

DEMO Site

Installation

npm install @olavea/gatsby-theme-picture-book

Install Our Theme With the Gatsby-starter-hello-world

  1. A book made with two random pictures, the Gatsby-starter-hello-world and our theme.

    Use the Gatsby CLI to build a book, specifying the hello-world starter.

    gatsby new Your_Brutus_BADger_Book https://github.com/gatsbyjs/gatsby-starter-hello-world
  2. Navigate into your new book’s directory

    cd Your_Brutus_BADger_Book/
  3. npm install @olavea/gatsby-theme-picture-book

    npm install @olavea/gatsby-theme-picture-book
  4. Open the source code, delete the "pages" folder and add two new folders

    Open the Your_Brutus_BADger_Book directory in your code editor of choice and:

    • Delete the folder "pages" at the root of your source code.
    • Also delete the file "index.js" inside the folder "pages".
  5. Add two new folders and two images

  6. Edit your gatsby-config.js

    // gatsby-config.js
    module.exports = {
      plugins: [
        {
          resolve: `@olavea/gatsby-theme-picture-book`,
          options: {
            basePath: `/my-book`,
            imagePath: `book/images`,
            infoLink: {
              title: "gatsby-theme-picture-book on GitHub",
              url: `https://github.com/olavea/gatsby-theme-picture-book.git`,
            },
          },
        },
      ],
    }
  7. Start up your new Gatsby book

    # Start up your new Gatsby book
    gatsby develop

    Your book is now running at http://localhost:8000!

Usage

Example Usage With Audiobook

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@olavea/gatsby-theme-picture-book`,
      options: {
        basePath: `/my-book`,
        imagePath: `book/images`,
        audioPath: `book/audio`,
        infoLink: {
          title: "Project on GitHub",
          url: `https://github.com/olavea/gatsby-theme-picture-book.git`,
        },
      },
    },
  ],
}

Theme options

Key Default Value Description
basePath / Root url for the theme
imagePath book/images Path to folder of images to turn into picture book pages
audioPath null Path to folder with a single audio file (optional)
infoLink null Adds an info button to first and last page (optional)
infoLink.url null Url to navigate to (external or internal)
infoLink.label i Label inside button
infoLink.title info Title for the a tag

The imagePath folder must contain at least one image file. The book's pages will be sorted alphabetically by filename. We suggest using a naming schema similar to this "01.jpg", "02.jpg" ... "99.jpg".

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // First page will have siteTile as page title,
    // the other pages follow this configuration <page#> | <siteTitle>.
    siteTitle: `Petra Rabbit`,
    // Used for SEO
    siteDescription: `Almost Beatrix Potter's Peter Rabbit, narrated by Ola (41) and Lillian (4.5 🦄)`,
    // Will be set on the <html /> tag
    siteLanguage: `en`,
    // Twitter Handle
    author: `@OlaHolstVea`,
  },
}

Shadowing

To change the look and feel of the theme shadow components found in components/ui. These have solely presentational logic, while the root components in components contain the more functional logic.

This theme has a persistent layout component components/persistenLayout.js. You will therefore not find a reference to a layout in any component. The PersistentLayout is wrapped around the whole site by gatsby-plugin-layout.

Why do we do this? Its so the state of the audio element will persist through all pages of the book.

Storytime

A Good Day In The Morning

One sunny morning Lillian (4.5 🦄) and I were reading Beatrix Potter's Ginger & Pickles together. Lillian (4.5 🦄) is my daughter. Ginger is an orange and yellow striped cat who runs a shop with Pickles the terrier. Lillian (4.5 🦄) was drinking warmed oat milk, I was reading out loud and sipping coffee.

Lillian (4.5 🦄) said: «I want to make my own book.» «Yessss!!» I said with glee. «Let's build Ginger & Pickles, but with added PIRATES! Arrrh!» «Do it NOW!» golden-haired Lillian (4.5 🦄) said.

A Good Day At Work

After a reckless ride on her green bicycle, I leave Lillian (4.5 🦄) at kindergarten and start my workday by typing «Beatrix Potter» into google.

All of Beatrix Potter's precious picture books for children where THERE. Like a treasure trove. Content free from «this-content-needs-polishing-before-publishing-it» thoughts to distract me.

I started by firing up Scott Tolinski's top-notch tutorial Pro Gatsby 2. Before I knew it, I had the Ginger & Pickles book deployed before I even remembered the poor pirates! Arrh!

A Good Summer

Do not worry! Pirates were added, kids from the kindergarten contributed and I kept working on a Gatbsy starter to simplify creating books even more.

Take a look at the books I am co-working on Lillian (4.5 🦄) and and her brave band of friends

When the Gasby Theme Jam came around, it was the perfect project for my time at the summer office!

And the rest as they say, is history (or a tweet thread by Lillian's mom @raae).

/@olavea/gatsby-theme-picture-book/

    Package Sidebar

    Install

    npm i @olavea/gatsby-theme-picture-book

    Weekly Downloads

    0

    Version

    0.2.10

    License

    MIT

    Unpacked Size

    22.8 kB

    Total Files

    22

    Last publish

    Collaborators

    • olavea