Skip to content

Commit 0284460

Browse files
LekoArtsLekoArts
authored
feat: Use ESM (#1119)
1 parent 34855d0 commit 0284460

File tree

136 files changed

+781
-468
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+781
-468
lines changed

‎.changeset/gold-cameras-pay.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
"@lekoarts/gatsby-theme-graphql-playground": minor
3+
"@lekoarts/gatsby-theme-minimal-blog-core": minor
4+
"@lekoarts/gatsby-theme-status-dashboard": minor
5+
"@lekoarts/gatsby-theme-minimal-blog": minor
6+
"@lekoarts/gatsby-theme-emilia-core": minor
7+
"@lekoarts/gatsby-theme-jodie-core": minor
8+
"@lekoarts/gatsby-theme-styleguide": minor
9+
"@lekoarts/gatsby-theme-emma-core": minor
10+
"@lekoarts/gatsby-theme-specimens": minor
11+
"@lekoarts/gatsby-theme-emilia": minor
12+
"@lekoarts/gatsby-theme-jodie": minor
13+
"@lekoarts/gatsby-theme-cara": minor
14+
"@lekoarts/gatsby-theme-emma": minor
15+
---
16+
17+
Starting with [Gatsby 5.3](https://www.gatsbyjs.com/docs/reference/release-notes/v5.3/#es-modules-esm-in-gatsby-files) ESM in Gatsby files is supported now! So you can write `gatsby-config.mjs` or `gatsby-node.mjs`.
18+
19+
Therefore this theme was updated to use ESM for its source code. This shouldn't make a difference for actually using the theme as behavior stays the same. If this is not the case, please open an issue!
20+
21+
One benefit of now using ESM behind the scenes is that e.g. the `remark-*` packages could be updated to their latest versions (they are ESM-only). Yey for using up-to-date software.

‎.changeset/loud-shrimps-rest.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
"@lekoarts/themes-utils": major
3+
---
4+
5+
This package is ESM-only now. If you need to continue using the CommonJS version, stick to the previous major version.
6+
7+
```js
8+
// From CommonJS
9+
const { slugify } = require("@lekoarts/themes-utils");
10+
11+
// To ESM
12+
import { slugify } from "@lekoarts/themes-utils";
13+
```
14+
15+
Learn more about ESM in [this guide](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)

‎.changeset/lovely-ways-admire.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
"@lekoarts/rehype-meta-as-attributes": major
3+
---
4+
5+
This package is ESM-only now. If you need to continue using the CommonJS version, stick to the previous major version.
6+
7+
The export was also change from a named export to a default export.
8+
9+
```js
10+
// Previous version
11+
const {
12+
rehypeMetaAsAttributes,
13+
} = require("@lekoarts/rehype-meta-as-attributes");
14+
15+
// Latest version
16+
import rehypeMetaAsAttributes from "@lekoarts/rehype-meta-as-attributes";
17+
```
18+
19+
Learn more about ESM in [this guide](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)

‎.changeset/orange-apricots-love.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@lekoarts/gatsby-theme-graphql-playground": minor
3+
"@lekoarts/gatsby-theme-minimal-blog": minor
4+
"@lekoarts/gatsby-theme-emilia-core": minor
5+
"@lekoarts/gatsby-theme-emma-core": minor
6+
"@lekoarts/gatsby-theme-jodie": minor
7+
"@lekoarts/gatsby-theme-cara": minor
8+
---
9+
10+
In the last major version release the `siteLanguage` key on the `siteMetadata` object was removed since the [Gatsby Head API](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/) didn't support setting the `lang` attribute on the `<html>` back then. Starting with [Gatsby 5.5](https://www.gatsbyjs.com/docs/reference/release-notes/v5.5/#setting-html-and-body-attributes) this is now supported and the removal change was reverted.
11+
12+
Thus you can use the `siteLanguage` key on the `siteMetadata` object again to change the language globally. By default it uses `en`. This is also highlighted in the `README` again. If you want to change the language on a per-page basis, define your own `<html lang="value" />` in your Head API export as it then overrides the global configuration.

‎.changeset/tall-plums-sit.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
"@lekoarts/gatsby-theme-graphql-playground": minor
3+
"@lekoarts/gatsby-theme-minimal-blog-core": minor
4+
"@lekoarts/gatsby-theme-minimal-blog": minor
5+
"@lekoarts/gatsby-theme-emilia-core": minor
6+
"@lekoarts/gatsby-theme-jodie-core": minor
7+
"@lekoarts/gatsby-theme-emma-core": minor
8+
"@lekoarts/gatsby-theme-emilia": minor
9+
"@lekoarts/gatsby-theme-jodie": minor
10+
"@lekoarts/gatsby-theme-cara": minor
11+
"@lekoarts/gatsby-theme-emma": minor
12+
---
13+
14+
Because this theme now uses a [Gatsby Head API](https://www.gatsbyjs.com/docs/reference/release-notes/v5.5/#setting-html-and-body-attributes) feature that was introduced in [Gatsby 5.5](https://www.gatsbyjs.com/docs/reference/release-notes/v5.5/#setting-html-and-body-attributes) the `peerDependencies` range was updated from `^5.0.0` to `^5.5.0`.
15+
16+
Please also update your `gatsby` package when updating this theme.

‎.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ module.exports = {
7373
camelcase: 1,
7474
"import/no-unresolved": 0,
7575
"func-names": 0,
76-
"no-underscore-dangle": [`warn`, { allow: [`__typename`] }],
76+
"no-underscore-dangle": [`warn`, { allow: [`__typename`, `__dirname`] }],
7777
"import/no-extraneous-dependencies": 0,
7878
"import/prefer-default-export": 0,
7979
"import/no-cycle": 0,

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎examples/cara/LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The BSD Zero Clause License (0BSD)
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission to use, copy, modify, and/or distribute this software for any
66
purpose with or without fee is hereby granted.

‎examples/cara/gatsby-config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ const config: GatsbyConfig = {
77
siteMetadata: {
88
// You can overwrite values here that are used for the SEO component
99
// You can also add new values here to query them like usual
10-
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-cara/gatsby-config.js
10+
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-cara/gatsby-config.mjs
1111
siteTitle: `Cara`,
1212
siteTitleAlt: `Cara - Gatsby Starter Portfolio`,
1313
siteHeadline: `Cara - Gatsby Theme from @lekoarts`,
1414
siteUrl: `https://cara.lekoarts.de`,
1515
siteDescription: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,
1616
siteImage: `/banner.jpg`,
17+
siteLanguage: `en`,
1718
author: `@lekoarts_de`,
1819
},
1920
trailingSlash: `never`,

‎examples/cara/gatsby-ssr.tsx

-5
This file was deleted.

‎examples/emilia/LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The BSD Zero Clause License (0BSD)
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission to use, copy, modify, and/or distribute this software for any
66
purpose with or without fee is hereby granted.

‎examples/emilia/gatsby-config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ const config: GatsbyConfig = {
77
siteMetadata: {
88
// You can overwrite values here that are used for the SEO component
99
// You can also add new values here to query them like usual
10-
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-emilia-core/gatsby-config.js
10+
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-emilia-core/gatsby-config.mjs
1111
siteTitle: `Emilia`,
1212
siteTitleAlt: `Emilia - Gatsby Starter Portfolio`,
1313
siteHeadline: `Emilia - Gatsby Theme from @lekoarts`,
1414
siteUrl: `https://emilia.lekoarts.de`,
1515
siteDescription: `Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI. Includes Light/Dark mode.`,
1616
siteImage: `/banner.jpg`,
17+
siteLanguage: `en`,
1718
author: `@lekoarts_de`,
1819
},
1920
trailingSlash: `never`,

‎examples/emilia/gatsby-ssr.tsx

-5
This file was deleted.

‎examples/emma/LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The BSD Zero Clause License (0BSD)
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission to use, copy, modify, and/or distribute this software for any
66
purpose with or without fee is hereby granted.

‎examples/emma/gatsby-config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ const config: GatsbyConfig = {
77
siteMetadata: {
88
// You can overwrite values here that are used for the SEO component
99
// You can also add new values here to query them like usual
10-
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-emma-core/gatsby-config.js
10+
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-emma-core/gatsby-config.mjs
1111
siteTitle: `Emma`,
1212
siteTitleAlt: `Emma - Gatsby Starter Portfolio`,
1313
siteHeadline: `Emma - Gatsby Theme from @lekoarts`,
1414
siteUrl: `https://emma.lekoarts.de`,
1515
siteDescription: `Minimalistic portfolio with full-width grid, page transitions, support for additional MDX pages, and a focus on large images`,
1616
siteImage: `/banner.jpg`,
17+
siteLanguage: `en`,
1718
author: `@lekoarts_de`,
1819
},
1920
trailingSlash: `never`,

‎examples/emma/gatsby-ssr.tsx

-5
This file was deleted.

‎examples/graphql-playground/LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The BSD Zero Clause License (0BSD)
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission to use, copy, modify, and/or distribute this software for any
66
purpose with or without fee is hereby granted.

‎examples/graphql-playground/docs/get-the-site-title.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ title: Get the Site Title
1313
}
1414
```
1515

16-
Start with the basics, pulling up the site `title` from your `gatsby-config.js`’s `siteMetadata`. Here the query is on the left and the results are on the right.
16+
Start with the basics, pulling up the site `title` from your `gatsby-config.mjs`’s `siteMetadata`. Here the query is on the left and the results are on the right.
1717

1818
Try editing the query to include the `description` from `siteMetadata`. When typing in the query editor you can use `Ctrl + Space` to see autocomplete options and `Ctrl + Enter` to run the current query.

‎examples/graphql-playground/gatsby-ssr.tsx

-5
This file was deleted.

‎examples/jodie/LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The BSD Zero Clause License (0BSD)
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission to use, copy, modify, and/or distribute this software for any
66
purpose with or without fee is hereby granted.

‎examples/jodie/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ By default, the underlying theme and thus this starter uses "Work Sans" as its f
8383
If you want to change your default font or add any additional fonts, you'll need to change a couple of things:
8484

8585
1. Font file inside `static/fonts`
86-
1. Preload link inside `gatsby-ssr.js` (the name of the font file)
86+
1. Preload link inside `gatsby-ssr.tsx` (the name of the font file)
8787
1. CSS in `global.css`
8888
1. The Theme UI config and its `fonts` key (see [Theme UI Typography Docs](https://theme-ui.com/theming#typography))
8989

‎examples/jodie/gatsby-config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ const config: GatsbyConfig = {
77
siteMetadata: {
88
// You can overwrite values here that are used for the SEO component
99
// You can also add new values here to query them like usual
10-
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-jodie/gatsby-config.js
10+
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-jodie/gatsby-config.mjs
1111
siteTitle: `Jodie`,
1212
siteTitleAlt: `Jodie - Gatsby Starter Portfolio`,
1313
siteHeadline: `Jodie - Gatsby Theme from @lekoarts`,
1414
siteUrl: `https://jodie.lekoarts.de`,
1515
siteDescription: `Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.`,
1616
siteImage: `/banner.jpg`,
17+
siteLanguage: `en`,
1718
author: `@lekoarts_de`,
1819
},
1920
trailingSlash: `never`,

‎examples/jodie/gatsby-ssr.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import type { GatsbySSR } from "gatsby"
22
import * as React from "react"
33

4-
export const onRenderBody: GatsbySSR["onRenderBody"] = ({ setHtmlAttributes, setHeadComponents }) => {
5-
setHtmlAttributes({ lang: `en` })
6-
4+
export const onRenderBody: GatsbySSR["onRenderBody"] = ({ setHeadComponents }) => {
75
setHeadComponents([
86
<link
97
rel="preload"

‎examples/jodie/src/gatsby-plugin-theme-ui/index.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { merge } from "theme-ui"
2-
// @ts-ignore - There are no types
3-
import originalTheme from "@lekoarts/gatsby-theme-jodie/src/gatsby-plugin-theme-ui/index"
2+
import originalTheme from "@lekoarts/gatsby-theme-jodie/src/gatsby-plugin-theme-ui"
43

54
const theme = merge(originalTheme, {
65
fonts: {

‎examples/minimal-blog/LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The BSD Zero Clause License (0BSD)
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission to use, copy, modify, and/or distribute this software for any
66
purpose with or without fee is hereby granted.

‎examples/minimal-blog/gatsby-config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ const config: GatsbyConfig = {
77
siteMetadata: {
88
// You can overwrite values here that are used for the SEO component
99
// You can also add new values here to query them like usual
10-
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-minimal-blog/gatsby-config.js
10+
// See all options: https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-minimal-blog/gatsby-config.mjs
1111
siteTitle: `Minimal Blog`,
1212
siteTitleAlt: `Minimal Blog - Gatsby Theme`,
1313
siteHeadline: `Minimal Blog - Gatsby Theme from @lekoarts`,
1414
siteUrl: `https://minimal-blog.lekoarts.de`,
1515
siteDescription: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.`,
1616
siteImage: `/banner.jpg`,
17+
siteLanguage: `en`,
1718
author: `@lekoarts_de`,
1819
},
1920
trailingSlash: `never`,

‎examples/minimal-blog/gatsby-ssr.tsx

-5
This file was deleted.

‎examples/specimens/LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The BSD Zero Clause License (0BSD)
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission to use, copy, modify, and/or distribute this software for any
66
purpose with or without fee is hereby granted.

‎examples/specimens/gatsby-config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { GatsbyConfig, PluginRef } from "gatsby"
22
import remarkGfm from "remark-gfm"
33
import remarkSlug from "remark-slug"
4-
import { rehypeMetaAsAttributes } from "@lekoarts/rehype-meta-as-attributes"
4+
import rehypeMetaAsAttributes from "@lekoarts/rehype-meta-as-attributes"
55
import "dotenv/config"
66

77
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
@@ -12,6 +12,7 @@ const config: GatsbyConfig = {
1212
siteDescription: `Leverage the wide variety of powerful React components to build your design system. Display your colors, typography or any other design tokens with ease and focus on the design system itself, not how to showcase it. Works seamlessly with MDX.`,
1313
banner: `https://specimens.lekoarts.de/banner.jpg`,
1414
siteUrl: `https://specimens.lekoarts.de`,
15+
siteLanguage: `en`,
1516
},
1617
trailingSlash: `never`,
1718
plugins: [

‎examples/specimens/gatsby-ssr.tsx

-5
This file was deleted.

‎examples/specimens/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
"react": "^18.2.0",
3636
"react-dom": "^18.2.0",
3737
"react-live": "^2.4.1",
38-
"remark-gfm": "^1",
39-
"remark-slug": "^6",
38+
"remark-gfm": "^3.0.1",
39+
"remark-slug": "^7.0.1",
4040
"theme-ui": "~0.15.3"
4141
},
4242
"devDependencies": {

‎examples/specimens/src/components/seo.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ interface ISiteSiteMetadata {
88
siteDescription: string
99
siteTitle: string
1010
siteUrl: string
11+
siteLanguage: string
1112
}
1213
}
1314
}
@@ -21,6 +22,7 @@ const Seo = () => {
2122
siteDescription
2223
siteTitle
2324
siteUrl
25+
siteLanguage
2426
}
2527
}
2628
}
@@ -30,6 +32,7 @@ const Seo = () => {
3032

3133
return (
3234
<>
35+
<html lang={meta.siteLanguage} />
3336
<title>{meta.siteTitle}</title>
3437
<meta name="description" content={meta.siteDescription} />
3538
<meta name="image" content={meta.banner} />

‎examples/specimens/src/pages/index.mdx

+5-3
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ Also be sure to check out other [Free & Open Source Gatsby Themes](https://theme
3535
npm install @lekoarts/gatsby-theme-specimens
3636
```
3737

38-
And in your gatsby-config.js:
38+
And in your gatsby-config.mjs:
3939

4040
```js
41-
// gatsby-config.js
42-
module.exports = {
41+
// gatsby-config.mjs
42+
const config = {
4343
plugins: [
4444
{
4545
resolve: `@lekoarts/gatsby-theme-specimens`,
@@ -48,6 +48,8 @@ module.exports = {
4848
}
4949
]
5050
}
51+
52+
export default config
5153
```
5254

5355
View the [**theme's README**](https://github.com/LekoArts/gatsby-themes/tree/main/themes/gatsby-theme-specimens) to see more instructions on how to set up this theme!

‎examples/status-dashboard/LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The BSD Zero Clause License (0BSD)
22

3-
Copyright (c) 2020 LekoArts
3+
Copyright (c) 2023 LekoArts
44

55
Permission to use, copy, modify, and/or distribute this software for any
66
purpose with or without fee is hereby granted.

0 commit comments

Comments
 (0)