Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@shetharp/gatsby-theme-polaroid

0.1.8 • Public • Published

gatsby-theme-polaroid

npm (scoped) GitHub last commit GitHub last commit (branch)

Polaroid Banner

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

Add Content

Customizing and Shadowing

Features

Developer Guide


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
  1. Add the theme to your gatsby-config.js file
module.exports = {
  plugins: ["@shetharp/gatsby-theme-polaroid"],
};
  1. Modify the theme options and site metadata in your gatsby-config.js file.

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

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

  1. 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
  2. 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
    • 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:

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! ❤️

Install

npm i @shetharp/gatsby-theme-polaroid

DownloadsWeekly Downloads

5

Version

0.1.8

License

MIT

Unpacked Size

114 kB

Total Files

72

Last publish

Collaborators

  • avatar