feat: update minimal-blog

.changeset/slow-suns-attack.md

@@ -0,0 +1,40 @@
+---
+"@lekoarts/gatsby-theme-minimal-blog": minor
+---
+
+This theme uses [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) for its code blocks. The version was updated from `1.3.5` to `2.0.6` and it contains some breaking changes in regards to the API surface.
+
+If you modified the theme in any way (e.g. by shadowing or adding additional Prism languages) you need to apply those changes, too.
+
+## Change of module imports
+
+```diff
+- import Highlight, { defaultProps } from "prism-react-renderer";
++ import { Highlight } from "prism-react-renderer"
+
+const Content = (
+-  <Highlight {...defaultProps} code={exampleCode} language="jsx">
++  <Highlight code={exampleCode} language="jsx">
+```
+
+## Custom languages
+
+```js
+import { Highlight, Prism } from "prism-react-renderer";
+
+(typeof global !== "undefined" ? global : window).Prism = Prism
+await import("prismjs/components/prism-applescript")
+/** or **/
+require("prismjs/components/prism-applescript")
+```
+
+## Theme imports
+
+```diff
+- import vsDark from "prism-react-renderer/themes/vsDark"
++ import { themes } from "prism-react-renderer"
++ const { vsDark } = themes
+
+- const theme = require('prism-react-renderer/themes/vsDark')
++ const theme = require('prism-react-renderer').themes.vsDark
+```

examples/minimal-blog/content/posts/code-block-examples/SpotifyPlayer.js

@@ -1,37 +1,31 @@
-/* eslint react/no-unknown-property: 0 */
-/* eslint react/prefer-stateless-function: 0 */
-
-/**
- * Spotify player iframe widget
- *
- * @author Alexander Wallin <[email protected]>
- * @see https://developer.spotify.com/technologies/widgets/spotify-play-button/
- */
-
 import * as React from "react"
 
 // Size presets, defined by Spotify
 const sizePresets = {
-  large: {
-    width: 300,
-    height: 380,
+  normal: {
+    width: `100%`,
+    height: `352px`,
   },
   compact: {
-    width: 300,
-    height: 80,
+    width: `100%`,
+    height: `152px`,
   },
 }
 
-function SpotifyPlayer({ uri, view, theme, size }) {
+function SpotifyPlayer({ albumUri = `6Ar5HxNWXtvraqs7FI7bYq`, size = `normal` }) {
   return (
     <iframe
       title="Spotify"
-      className="SpotifyPlayer"
-      src={`https://embed.spotify.com/?uri=${uri}&view=${view}&theme=${theme}`}
+      style={{
+        borderRadius: `12px`,
+      }}
+      src={`https://open.spotify.com/embed/album/${albumUri}?theme=0`}
       width={sizePresets[size].width}
       height={sizePresets[size].height}
       frameBorder="0"
-      allowtransparency="true"
+      allowfullscreen=""
+      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+      loading="lazy"
     />
   )
 }

examples/minimal-blog/content/posts/code-block-examples/index.mdx

@@ -9,12 +9,7 @@ import SpotifyPlayer from "./SpotifyPlayer";
 
 Here will a React component go:
 
-<SpotifyPlayer
-  uri="spotify:user:bbcamerica:playlist:3w18u69NplCpXVG4fQG726"
-  size="large"
-  theme="black"
-  view="list"
-/>
+<SpotifyPlayer />
 
 Here will a normal code block go:
 
@@ -176,7 +171,7 @@ Code block with line numbers, highlighting, language, and title:
 
 <div data-testid="code-block">
 
-```tsx title=src/components/blog.tsx highlight=7-9,16 withLineNumbers
+```tsx title=src/components/blog.tsx highlight=7-8,19,21 withLineNumbers
 import * as React from "react";
 
 const Blog = ({ posts }: PostsProps) => {

themes/gatsby-theme-minimal-blog/package.json

@@ -29,7 +29,7 @@
     "@theme-ui/preset-tailwind": "0.15.3",
     "gatsby-plugin-catch-links": "^5.12.0",
     "gatsby-plugin-theme-ui": "~0.15.3",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.0.6",
     "theme-ui": "~0.15.3"
   },
   "keywords": [

themes/gatsby-theme-minimal-blog/src/components/code.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { useColorMode } from "theme-ui"
-import Highlight, { defaultProps } from "prism-react-renderer"
+import { Highlight } from "prism-react-renderer"
 import { calculateLinesToHighlight, getLanguage, GetLanguageInput } from "@lekoarts/themes-utils"
 import Copy from "./copy"
 import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"
@@ -31,7 +31,6 @@ const Code = ({
 
   return (
     <Highlight
-      {...defaultProps}
       code={codeString}
       // @ts-ignore
       language={language}

themes/gatsby-theme-minimal-blog/src/utils/prism-themes.ts

@@ -1,7 +1,7 @@
-import github from "prism-react-renderer/themes/github"
-import vsDark from "prism-react-renderer/themes/vsDark"
+import { themes } from "prism-react-renderer"
 import { themeWithCssVariables } from "./prism-utils"
 
+const { github, vsDark } = themes
 const { theme: lightTheme, variables: lightThemeVars } = themeWithCssVariables(github)
 const { theme: darkTheme, variables: darkThemeVars } = themeWithCssVariables(vsDark)
 

yarn.lock

@@ -2961,7 +2961,7 @@ __metadata:
     "@theme-ui/preset-tailwind": 0.15.3
     gatsby-plugin-catch-links: ^5.12.0
     gatsby-plugin-theme-ui: ~0.15.3
-    prism-react-renderer: ^1.3.5
+    prism-react-renderer: ^2.0.6
     theme-ui: ~0.15.3
   peerDependencies:
     gatsby: ^5.5.0
@@ -18845,15 +18845,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prism-react-renderer@npm:^1.3.5":
-  version: 1.3.5
-  resolution: "prism-react-renderer@npm:1.3.5"
-  peerDependencies:
-    react: ">=0.14.9"
-  checksum: c18806dcbc4c0b4fd6fd15bd06b4f7c0a6da98d93af235c3e970854994eb9b59e23315abb6cfc29e69da26d36709a47e25da85ab27fed81b6812f0a52caf6dfa
-  languageName: node
-  linkType: hard
-
 "prism-react-renderer@npm:^2.0.6":
   version: 2.0.6
   resolution: "prism-react-renderer@npm:2.0.6"