{"id":15230097,"url":"https://github.com/shetharp/gatsby-theme-polaroid","last_synced_at":"2025-04-10T02:21:26.376Z","repository":{"id":38437229,"uuid":"279173448","full_name":"shetharp/gatsby-theme-polaroid","owner":"shetharp","description":"📸 Polaroid is a photography-focused Gatsby theme for building portfolio websites.","archived":false,"fork":false,"pushed_at":"2023-01-06T12:49:56.000Z","size":113927,"stargazers_count":4,"open_issues_count":29,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T05:59:57.087Z","etag":null,"topics":["gatsby","gatsby-plugin","gatsby-theme-polaroid","gatsby-themes","mdx","mdx-blog","theme-ui","typescript"],"latest_commit_sha":null,"homepage":"https://shetharp.github.io/gatsby-theme-polaroid/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shetharp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["shetharp"]}},"created_at":"2020-07-13T00:38:48.000Z","updated_at":"2023-09-06T04:21:12.000Z","dependencies_parsed_at":"2023-02-06T03:02:04.309Z","dependency_job_id":null,"html_url":"https://github.com/shetharp/gatsby-theme-polaroid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shetharp%2Fgatsby-theme-polaroid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shetharp%2Fgatsby-theme-polaroid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shetharp%2Fgatsby-theme-polaroid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shetharp%2Fgatsby-theme-polaroid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shetharp","download_url":"https://codeload.github.com/shetharp/gatsby-theme-polaroid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248143114,"owners_count":21054709,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","gatsby-plugin","gatsby-theme-polaroid","gatsby-themes","mdx","mdx-blog","theme-ui","typescript"],"created_at":"2024-09-29T02:05:29.859Z","updated_at":"2025-04-10T02:21:26.353Z","avatar_url":"https://github.com/shetharp.png","language":"TypeScript","funding_links":["https://github.com/sponsors/shetharp"],"categories":[],"sub_categories":[],"readme":"# gatsby-theme-polaroid-workspace\n\n![npm (scoped)](https://img.shields.io/npm/v/@shetharp/gatsby-theme-polaroid?logo=npm\u0026style=for-the-badge)\n![GitHub last commit](https://img.shields.io/github/last-commit/shetharp/gatsby-theme-polaroid?logo=github\u0026style=for-the-badge)\n![GitHub last commit (branch)](https://img.shields.io/github/last-commit/shetharp/gatsby-theme-polaroid/gh-pages?label=Demo%20Site%20Deployed\u0026logo=github\u0026style=for-the-badge)\n\n[![Polaroid Banner](https://raw.githubusercontent.com/shetharp/gatsby-theme-polaroid/master/demo/static/banner.png)](https://shetharp.github.io/gatsby-theme-polaroid/)\n\nPolaroid 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.\n\nDesigned \u0026 developed by [Arpit Sheth](https://arpitsheth.com/).\n\n### [📸 View Demo Site →](https://shetharp.github.io/gatsby-theme-polaroid/)\n\n---\n\n### [Readme](https://github.com/shetharp/gatsby-theme-polaroid/blob/master/README.md)\n\n- [📸 View Demo Site →](https://shetharp.github.io/gatsby-theme-polaroid/)\n- [Install the Polaroid Theme](https://github.com/shetharp/gatsby-theme-polaroid/blob/master/README.md#install-the-polaroid-theme)\n- [Start with the Polaroid Workspace](https://github.com/shetharp/gatsby-theme-polaroid/blob/master/README.md#start-with-the-polaroid-workspace)\n- [Features](https://github.com/shetharp/gatsby-theme-polaroid/blob/master/README.md#features)\n- [📖 Read Wiki Documentation →](https://github.com/shetharp/gatsby-theme-polaroid/wiki)\n- [How to Contribute](https://github.com/shetharp/gatsby-theme-polaroid#how-to-contribute)\n\n### [Add Content](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Add-Content)\n\n- [Add a new slide to the homepage](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Add-a-new-slide-to-the-homepage)\n- [Add a new page](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Add-a-new-page)\n- [Add a new blog post](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Add-a-new-blog-post)\n\n### [Customizing and Shadowing](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Customizing-and-Shadowing)\n\n- [Customize Site Metadata](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Customize-Site-Metadata)\n- [Customize Theme Options](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Customize-Theme-Options)\n- [Customize Theme UI](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Customize-Theme-UI)\n- [Customize the Logo](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Customize-the-Logo)\n- [Customize the Header Links](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Customize-the-Header-Links)\n- [Customize the Footer](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Customize-the-Footer)\n\n### [Features](https://github.com/shetharp/gatsby-theme-polaroid/blob/master/README.md#features)\n\n- [Use Syntax Highlighted Code Blocks](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Use-Syntax-Highlighted-Code-Blocks)\n\n### [Developer Guide](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Developer-Guide)\n\n- [How to Contribute](https://github.com/shetharp/gatsby-theme-polaroid#how-to-contribute)\n- [Deploy and Publish](https://github.com/shetharp/gatsby-theme-polaroid/wiki/Deploy-and-Publish)\n- [Creating New Gatsby Theme with Typescript, MDX, and Theme-UI](https://hackernoon.com/creating-new-gatsby-theme-with-typescript-mdx-and-theme-ui-tz1c3u3u) _– article by Arpit Sheth_\n\n---\n\n# Install the Polaroid Theme\n\n1. Add the theme as a dependency to your Gatsby site.\n\n```shell\nnpm i --save @shetharp/gatsby-theme-polaroid\n# or\nyarn add @shetharp/gatsby-theme-polaroid\n```\n\n2. Add the theme to your `gatsby-config.js` file\n\n```js:title=gatsby-config.js\nmodule.exports = {\n  plugins: [\"@shetharp/gatsby-theme-polaroid\"],\n};\n```\n\n3. Modify the [theme options](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-minimal-blog) and site metadata in your `gatsby-config.js` file.\n\n4. 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.\n\n5. Shadow, override, and customize the theme to fit your needs. See the list of features below for more info.\n\n# Start with the Polaroid Workspace\n\n1. start developing your own theme using this repo as a starting point:\n\n```shell\ngatsby new gatsby-theme-custom https://github.com/shetharp/gatsby-theme-polaroid\ncd gatsby-theme-custom\nyarn\nyarn workspace demo develop\n```\n\n_Replace `gatsby-theme-custom` with whatever you wish to name your theme._\n\n2. The `theme` workspace directory contains the components, styles, and theme configurations.\n\n   - You should update the `package.json` to match the details for your theme (such as name, author, repository, etc.)\n   - This workspace can be used to publish your theme as its own npm package\n\n3. The `demo` workspace directory contains the content, components, and styles for an example site that consumes the theme.\n\n   - 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!\n   - You should then update the `gatsby-config.js` to include your theme as a plugin\n   - This workspace can be used to deploy a demo site for your theme\n\n---\n\n# Features\n\nUnder the hood, Polaroid is built on top of the functionality provided by [@lekoarts/gatsby-theme-minimal-blog-core](https://www.gatsbyjs.org/packages/@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.\n\nPolaroid lets you quickly build a production-ready website that supports the following out of the box:\n\n- **Photo-rich portfolio**\n\n  - A gorgeous homepage that puts your photos or work on fullscreen display\n  - Responsive optimized images\n  - Automatically darkens images in dark mode\n  - Customizable props for colorful gradient overlays\n  - Customizable props for titles, descriptions, links, and call to action buttons\n  - Beautiful typography with plenty of responsive styling for all screen sizes\n\n- **MDX Blog Posts and Site Pages**\n\n  - MDX support for pages and posts\n  - A blog with tags/categories for posts\n  - Syntax-highlighted code blocks if you want to set up a developer blog\n    - Allows adding line numbers, line highlighting, language tabs, and file titles\n    - Provided by [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live)\n  - Typography driven with minimal styles\n  - Great reading experience with light and dark mode options\n\n- **Built with Theme UI**\n\n  - A custom theme with beautiful colors\n  - Typography driven with minimal styles\n  - Plenty of responsive styling for a great looking website on all screen sizes\n  - Support for light mode / dark mode\n\n- **Easy to Customize with Typescript**\n  - Customizable `data` for the header, toggle header menu, and footer\n  - Easy to import, shadow, and customize components with plenty of Typescript types defined for you\n\n# Wiki Documentation\n\nThe Polaroid Theme wiki contains more documentation on how to add content, customize the theme, and how to use its features.\n\n### [📖 Read Wiki Documentation →](https://github.com/shetharp/gatsby-theme-polaroid/wiki)\n\n# How to Contribute\n\nIt 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:\n\n- [What are Gatsby themes?](https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes) _– oficial documentation_\n- [Building Themes](https://www.gatsbyjs.org/docs/themes/building-themes) _– oficial documentation_\n- [Creating New Gatsby Theme with Typescript, MDX, and Theme-UI](https://hackernoon.com/creating-new-gatsby-theme-with-typescript-mdx-and-theme-ui-tz1c3u3u) _– article by Arpit Sheth_\n\nThis repo uses Yarn workspaces and Gatsby, so make sure you have them installed on your machine.\n\n1. Clone this repo and `cd` into it\n2. Install dependencies\n   ```shell\n   yarn\n   ```\n3. Make changes to the theme itself in the `theme` directory. To update the demo site, make changes in the `demo` directory.\n4. Launch the development server for the demo site to see your changes live.\n   ```shell\n   yarn workspace demo develop\n   ```\n5. Commit your changes to your own branch and make a PR against this repo.\n   - Be sure to test your PR with a production build of the demo site.\n     ```shell\n     yarn workspace demo build\n     ```\n   - Please take a moment to update any relevant documentation in the Readme or Wiki.\n\n💙 Thank you for helping make this project better! ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshetharp%2Fgatsby-theme-polaroid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshetharp%2Fgatsby-theme-polaroid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshetharp%2Fgatsby-theme-polaroid/lists"}