Gathering detailed insights and metrics for @lekoarts/gatsby-theme-jodie
Gathering detailed insights and metrics for @lekoarts/gatsby-theme-jodie
Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
Installations
npm install @lekoarts/gatsby-theme-jodieDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=18.0.0
Node Version
18.20.5
NPM Version
10.8.2
Releases
422
@lekoarts/gatsby-theme-minimal-blog@6.2.6
@lekoarts/gatsby-theme-minimal-blog@6.2.6
Updated on Jun 26, 2025
@lekoarts/rehype-meta-as-attributes@3.0.3
@lekoarts/rehype-meta-as-attributes@3.0.3
Updated on Jun 26, 2025
@lekoarts/themes-utils@3.0.3
@lekoarts/themes-utils@3.0.3
Updated on Jun 26, 2025
@lekoarts/gatsby-theme-minimal-blog-core@6.2.6
@lekoarts/gatsby-theme-minimal-blog-core@6.2.6
Updated on Jun 26, 2025
@lekoarts/gatsby-theme-minimal-blog-core@6.2.5
@lekoarts/gatsby-theme-minimal-blog-core@6.2.5
Updated on May 05, 2025
@lekoarts/gatsby-theme-graphql-playground@5.1.11
@lekoarts/gatsby-theme-graphql-playground@5.1.11
Updated on May 05, 2025
Languages
7
TypeScript
JavaScript
Handlebars
MDX
CSS
Shell
HTML
TypeScript (80.69%)
JavaScript (14.12%)
Handlebars (3.81%)
MDX (0.93%)
CSS (0.33%)
Shell (0.11%)
HTML (0.01%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1,879 Stars
1,416 Commits
537 Forks
12 Watchers
11 Branches
15 Contributors
Updated on Jul 14, 2025
Maintainers
1
Package Meta Information
Latest Version
5.1.9
Package Id
@lekoarts/gatsby-theme-jodie@5.1.9
Unpacked Size
81.98 kB
Size
21.11 kB
File Count
31
NPM Version
10.8.2
Node Version
18.20.5
Published on
Dec 24, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
@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 the theme including example content and additional plugins.
1npx gatsby new gatsby-starter-portfolio-jodie https://github.com/LekoArts/gatsby-starter-portfolio-jodie
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.mjs 2const config = { 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} 17 18export 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
1// gatsby-config.mjs 2const config = { 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 // Used for og:image and must be placed inside the `static` folder 15 siteImage: `/banner.jpg`, 16 // Set the default "lang" attribute on "html" element 17 siteLanguage: `en`, 18 // Twitter Handle 19 author: `@lekoarts_de`, 20 }, 21}; 22 23export 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:
homepagePageLimithomepageProjectLimit- 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 Bluesky and share the project with me.
Please star this project, share it on Social Media or consider supporting me on GitHub Sponsors!
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
11 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 9
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/build-packages.yml:1
- Warn: no topLevel permission defined: .github/workflows/e2e_testing.yml:1
- Warn: no topLevel permission defined: .github/workflows/publish-starters.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/unit-testing.yml:1
- Info: no jobLevel write permissions found
Reason
Found 0/21 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-packages.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/build-packages.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e_testing.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/e2e_testing.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e_testing.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/e2e_testing.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-starters.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/publish-starters.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-starters.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/publish-starters.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-starters.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/publish-starters.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/release.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/release.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit-testing.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/LekoArts/gatsby-themes/unit-testing.yml/main?enable=pin
- Info: 0 out of 7 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 4 third-party GitHubAction dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 20 are checked with a SAST tool
Reason
39 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-cwcx-rxgc-cmw3
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-9pv7-vfvm-6vr7
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Score
3.7
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More