@packdigital/gatsby-theme-ripperoni-components

🍕 ripperoni components library

Components

• AsyncLoadOnTrigger
• catchErrors (HOC)
• CatchErrors
• ClientSideOnly
• Container & Container.Small & Container.Large (optional)
• ErrorFallback
• FlexCol
• FlexMQ & FlexMQ.Csr
• FlexRow
• Footer
• Header
• InView
• MQ & MQ.Csr
• Main

Development (Storybook)

yarn start

Build (Storybook)

yarn build

TODO

• Complete migration of components/ from ripperoni
• Add propTypes and defaultProps to all incoming components
• Add stories to all incoming components
• Test build process
• Publish build to github pages

🍕 Ripperoni v 0.1

⚠️ WIP - Rest in pepperoni.

Badge City

[Badges Go Here]

Getting Started Guide

Basic Instructions

Initial Setup

1. Do step one
2. Do step two

/

1. Rename env.example to .env by typing mv env.example .env in your terminal.
2. Modify gatsby-config.js and add your site title, etc.
3. ?????
4. PROFIT!!!

Current Feature Status

✖️ Fetching data and building pages from Contentful ✖️ Cart object created via the buy-sdk ✖️ Lambda functions being built from src->functions ✖️ Ability to login ✖️ Ability to register ✖️ Ability to logout ✖️ Better error handling for register ✖️ Ability to activate accounts ✖️ Ability to forgot passwords ✖️ Ability to reset passwords ✖️ account status in the header + logout ✖️ view single product detail ✖️ ability to add to cart ✖️ Ability to quick add to cart ✖️ cart visible on the frontend ✖️ Add/remove items from the cart ✖️ Ability to see orders ✖️ Add/remove addresses ✖️ Ability to see/edit addresses

Feature roadmap

✔️ 🍕 Steal README.md ✖️ 🍕 Klaviyo Newsletter ✖️ 🍕 Klaviyo Waitlisting for out of stock products ✖️ 🍕 Product schema json-ld ✖️ 🍕 Focus States & Tab Index for ADA ✖️ 🍕 Seo Meta out of the Box (this works but i have a no-follow on robots.txt) ✖️ 🍕 Add Analytics patterns (via get analytics) ✖️ 🍕 Add ability to do multi-variant selection ✖️ 🍕 Product carousel ✖️ 🍕 Hero component ✖️ 🍕 Promo Bar in the schema

Bonus features?

✖️ ✨ Netlify plugins (a11y/gatsby booster) ✖️ ✨ Logrocket pattern ✖️ ✨ jest testing

Things to look into

✖️ 👀 smooth react-transition-group page transitions ✖️ 👀 siteContext component ✖️ 👀 scrollTop on page transition

Features

• 🛒 Shopping Cart create powered by Shopify Buy SDK
• 📡 Real-time content preview in development
• ⏱ Fast & frugal builds
• 🗃 No accidental missing fields/types
• 🧰 Full Render Control with Portable Text
• 📸 gatsby-image support
• 🔧 Minimal configuration
• 💆‍♀️ Headless Account Managements via /accounts/*
• 📹 Headless Preview via /previews/* coming soon

Credits

Spaghetti Man for the README

License

MIT

Cuts Todo

• GTM collection page

"globals": { "PATH_PREFIX": true },