@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 checkout other Free & Open Source Gatsby Themes

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 use of the theme.

gatsby 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 (/)

Example usage

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

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

// gatsby-config.js
module.exports = {
  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.`,
    // Will be set on the html tag
    siteLanguage: `en`,
    // Used for og:image and must be placed inside the `static` folder
    siteImage: `/banner.jpg`,
    // Twitter Handle
    author: `@lekoarts_de`,
  },
};

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.

🌟 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!