@lekoarts/gatsby-theme-jodie

Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.

Read the Source Code.

Also, be sure to check out other Free & Open Source Gatsby Themes and my Personal Website.

Features

• MDX
• Theme UI-based theming
• Create a project by creating an MDX file and dropping the images into the same folder
• Extensible custom pages
• Define colors for each page, and the sidebar & content will adapt while maintaining WCAG 2 AA contrast ratios

Installation

1npm install @lekoarts/gatsby-theme-jodie

Install as a starter

This will generate a new site that pre-configures use of the theme.

1gatsby new jodie LekoArts/gatsby-starter-portfolio-jodie

View the starter's code

Usage

Theme options

Key	Default Value	Description
basePath	/	Root url for the theme
projectsPath	content/projects	Location of projects
projectsUrl	/projects	url for the projects overview
projectsPrefix	/	Prefix for all individual projects
pagesPath	content/pages	Location of pages
formatString	DD.MM.YYYY	Configure the date format for Date fields
navigation	[]	Add links to your internal sites to the sidebar
homepagePageLimit	9999	Configure how many pages (defined in pagesPath should be shown on the homepage (/)
homepageProjectLimit	3	Configure how many projects (defined in projectsPath should be shown on the homepage (/)
mdx	true	Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)
sharp	true	Configure gatsby-plugin-sharp (if your website already is using the plugin pass false to turn this off)

Example usage

1// gatsby-config.js
2module.exports = {
3  plugins: [
4    {
5      resolve: `@lekoarts/gatsby-theme-jodie`,
6      options: {
7          navigation: [
8            { name: `Projects`, slug: `/projects` },
9            { name: `Instagram`, slug: `/instagram` },
10            { name: `About`, slug: `/about` },
11          ],
12        }
13      }
14    }
15  ]
16};

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

1// gatsby-config.js
2module.exports = {
3  siteMetadata: {
4    // Used for the title template on pages other than the index site
5    siteTitle: `Jodie`,
6    // Default title of the page
7    siteTitleAlt: `Jodie - @lekoarts/gatsby-theme-jodie`,
8    // Can be used for e.g. JSONLD
9    siteHeadline: `Jodie - Gatsby Theme from @lekoarts`,
10    // Will be used to generate absolute URLs for og:image etc.
11    siteUrl: `https://jodie.lekoarts.de`,
12    // Used for SEO
13    siteDescription: `Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.`,
14    // Will be set on the html tag
15    siteLanguage: `en`,
16    // Used for og:image and must be placed inside the `static` folder
17    siteImage: `/banner.jpg`,
18    // Twitter Handle
19    author: `@lekoarts_de`,
20  },
21};

Customizing the homepage

Both your projects and pages are displayed on the homepage (located at / in the live project and src/components/homepage.tsx in the theme itself). Of course, you can always shadow this and other files to customize the theme to your liking.

However, before completely overriding the homepage you should consider the three available options:

1. homepagePageLimit
2. homepageProjectLimit
3. Shadowing modify-grid.ts

The options 1) and 2) are explained in the theme options -- they limit the number of projects and pages that will randomly be distributed on the page.

Option 3) is a really powerful one! The modifyGrid function is wrapping the entire array of projects & pages before passing it to the render function of the React component. Or in other words: As the name suggests you can modify the items that are passed to the grid on the homepage.

You can achieve this by shadowing modify-grid.ts: Create a file at src/@lekoarts/gatsby-theme-jodie/utils/modify-grid.js and define a default export for modifyGrid.

modifyGrid examples

All code snippets are placed inside src/@lekoarts/gatsby-theme-jodie/utils/modify-grid.js

Default behavior:

1const modifyGrid = (data) => data;
2
3export default modifyGrid;

I've also created some resolver templates that you can use. They are exported in resolver-templates.ts. They cover the most common use cases and can give you an idea on what to do with the resolver.

Only pages / Only projects:

1import {
2  onlyPages,
3  onlyProjects,
4} from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";
5
6const modifyGrid = (data) => onlyPages(data);
7// const modifyGrid = (data) => onlyProjects(data)
8
9export default modifyGrid;

Filter by slug:

1import { filterBySlug } from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";
2
3const modifyGrid = (data) => filterBySlug(data, ["/about"]);
4
5export default modifyGrid;

Shuffle:

1import { shuffle } from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";
2
3const modifyGrid = (data) => shuffle(data);
4
5export default modifyGrid;

Shadowing

Please read the guide Shadowing in Gatsby Themes to understand how to customize this theme! Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-jodie/ to shadow/override files.

Changelog

You can find the extensive changelog of changes on GitHub. You'll be able to see each patch, minor, and major changes and what pull requests contributed to them.

Questions?

If you have general questions or need help with Gatsby, please go to one of the support platforms mentioned in Gatsby's documentation. If you have a specific question about this theme, you can head to the GitHub Discussions of the repository.

🌟 Supporting me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on Twitter and share the project with me.

Please star this project, share it on Social Media or consider supporting me on Patreon or GitHub Sponsor!