gatsby-theme-polaroid

Polaroid is a photography-focused Gatsby theme for building portfolio websites. It supports an MDX blog with tags/categories, syntax-highlighted code blocks, Theme UI for dark mode, and Typescript.

Designed & developed by Arpit Sheth.

📸 View Demo Site →

Readme

• 📸 View Demo Site →
• Install the Polaroid Theme
• Start with the Polaroid Workspace
• Features
• 📖 Read Wiki Documentation →
• How to Contribute

Add Content

• Add a new slide to the homepage
• Add a new page
• Add a new blog post

Customizing and Shadowing

• Customize Site Metadata
• Customize Theme Options
• Customize Theme UI
• Customize the Logo
• Customize the Header Links
• Customize the Footer

Features

• Use Syntax Highlighted Code Blocks

Developer Guide

• How to Contribute
• Deploy and Publish
• Creating New Gatsby Theme with Typescript, MDX, and Theme-UI – article by Arpit Sheth

Install the Polaroid Theme

1. Add the theme as a dependency to your Gatsby site.

npm i --save @shetharp/gatsby-theme-polaroid
# or
yarn add @shetharp/gatsby-theme-polaroid

2. Add the theme to your gatsby-config.js file

module.exports = {
  plugins: ["@shetharp/gatsby-theme-polaroid"],
};

3. Modify the theme options and site metadata in your gatsby-config.js file.

4. Create .mdx files for your site's pages or posts. By default this should be in your site's content/posts and content/pages directories. You should create these directories if they don't already exist.

5. Shadow, override, and customize the theme to fit your needs. See the list of features below for more info.

Start with the Polaroid Workspace

1. start developing your own theme using this repo as a starting point:

gatsby new gatsby-theme-custom https://github.com/shetharp/gatsby-theme-polaroid
cd gatsby-theme-custom
yarn
yarn workspace demo develop

Replace gatsby-theme-custom with whatever you wish to name your theme.

2. The theme workspace directory contains the components, styles, and theme configurations.

   • You should update the package.json to match the details for your theme (such as name, author, repository, etc.)
   • This workspace can be used to publish your theme as its own npm package

3. The demo workspace directory contains the content, components, and styles for an example site that consumes the theme.

   • You should update the package.json to include your theme as a dependency. Make sure the name of the dependency matches the name in your theme's package.json file!
   • You should then update the gatsby-config.js to include your theme as a plugin
   • This workspace can be used to deploy a demo site for your theme

Features

Under the hood, Polaroid is built on top of the functionality provided by @lekoarts/gatsby-theme-minimal-blog-core. Polaroid provides additional features, especially those that enhance the user experience for a photography-focused portfolio website and blog.

Polaroid lets you quickly build a production-ready website that supports the following out of the box:

• Photo-rich portfolio

  • A gorgeous homepage that puts your photos or work on fullscreen display
  • Responsive optimized images
  • Automatically darkens images in dark mode
  • Customizable props for colorful gradient overlays
  • Customizable props for titles, descriptions, links, and call to action buttons
  • Beautiful typography with plenty of responsive styling for all screen sizes

• MDX Blog Posts and Site Pages

  • MDX support for pages and posts
  • A blog with tags/categories for posts
  • Syntax-highlighted code blocks if you want to set up a developer blog
    • Allows adding line numbers, line highlighting, language tabs, and file titles
    • Provided by prism-react-renderer and react-live
  • Typography driven with minimal styles
  • Great reading experience with light and dark mode options

• Built with Theme UI

  • A custom theme with beautiful colors
  • Typography driven with minimal styles
  • Plenty of responsive styling for a great looking website on all screen sizes
  • Support for light mode / dark mode

• Easy to Customize with Typescript

  • Customizable data for the header, toggle header menu, and footer
  • Easy to import, shadow, and customize components with plenty of Typescript types defined for you

Wiki Documentation

The Polaroid Theme wiki contains more documentation on how to add content, customize the theme, and how to use its features.

📖 Read Wiki Documentation →

How to Contribute

It will help if you have some basic experience with Yarn workspaces, Gatsby, and Gatsby themes. If you don't have much experience with this, I suggest looking into these resources:

• What are Gatsby themes? – oficial documentation
• Building Themes – oficial documentation
• Creating New Gatsby Theme with Typescript, MDX, and Theme-UI – article by Arpit Sheth

This repo uses Yarn workspaces and Gatsby, so make sure you have them installed on your machine.

1. Clone this repo and cd into it
2. Install dependencies

   yarn

3. Make changes to the theme itself in the theme directory. To update the demo site, make changes in the demo directory.
4. Launch the development server for the demo site to see your changes live.

   yarn workspace demo develop

5. Commit your changes to your own branch and make a PR against this repo.
   • Be sure to test your PR with a production build of the demo site.

     yarn workspace demo build

   • Please take a moment to update any relevant documentation in the Readme or Wiki.

💙 Thank you for helping make this project better! ❤️