@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

npm install @lekoarts/gatsby-theme-jodie

Install as a starter

This will generate a new site that pre-configures the theme including example content and additional plugins.

npx gatsby new gatsby-starter-portfolio-jodie https://github.com/LekoArts/gatsby-starter-portfolio-jodie

View the starter’s code

Usage

Theme options

Example usage

// gatsby-config.mjs
const config = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-jodie`,
      options: {
          navigation: [
            { name: `Projects`, slug: `/projects` },
            { name: `Instagram`, slug: `/instagram` },
            { name: `About`, slug: `/about` },
          ],
        }
      }
    }
  ]
}

export default config

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

// gatsby-config.mjs
const config = {
  siteMetadata: {
    // Used for the title template on pages other than the index site
    siteTitle: `Jodie`,
    // Default title of the page
    siteTitleAlt: `Jodie - @lekoarts/gatsby-theme-jodie`,
    // Can be used for e.g. JSONLD
    siteHeadline: `Jodie - Gatsby Theme from @lekoarts`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://jodie.lekoarts.de`,
    // Used for SEO
    siteDescription: `Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.`,
    // Used for og:image and must be placed inside the `static` folder
    siteImage: `/banner.jpg`,
    // Set the default "lang" attribute on "html" element
    siteLanguage: `en`,
    // Twitter Handle
    author: `@lekoarts_de`,
  },
};

export default config;

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:

const modifyGrid = (data) => data;

export 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:

import {
  onlyPages,
  onlyProjects,
} from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => onlyPages(data);
// const modifyGrid = (data) => onlyProjects(data)

export default modifyGrid;

Filter by slug:

import { filterBySlug } from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => filterBySlug(data, ["/about"]);

export default modifyGrid;

Shuffle:

import { shuffle } from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => shuffle(data);

export 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 GitHub Sponsors!