npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@olavea/gatsby-theme-picture-book

v0.2.10

Published

<!-- AUTO-GENERATED-CONTENT:START (STARTER) --> <p align="center"> <a href="https://www.gatsbyjs.org"> <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" /> </a> </p> <h1 align="center"> @olavea/gatsby-theme-picture-book </

Downloads

16

Readme

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