chore: Format MDX files

.eslintrc.js

@@ -138,6 +138,7 @@ module.exports = {
         "import/no-named-as-default-member": 0,
         "@typescript-eslint/no-unused-vars": 0,
         "react/no-children-prop": 0,
+        "prettier/prettier": 0,
       },
     },
   ],

examples/cara/src/@lekoarts/gatsby-theme-cara/sections/projects.mdx

@@ -5,8 +5,8 @@
   link="https://www.lekoarts.de/gatsby/tips-and-tricks-for-gatsby?utm_source=cara&utm_medium=Theme"
   bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)"
 >
-  A collection of short, but useful quick tips shared by me and the community about Gatsby. From GraphQL over local
-  development to deployment.
+  A collection of short, but useful quick tips shared by me and the community
+  about Gatsby. From GraphQL over local development to deployment.
 </ProjectCard>
 <ProjectCard
   title="Setting  up a yarn Workspace"
@@ -27,6 +27,6 @@
   link="https://www.lekoarts.de/design/introducing-the-theme-ui-plugin-for-figma?utm_source=cara&utm_medium=Theme"
   bg="linear-gradient(to right, #D585FF 0%, #00FFEE 100%)"
 >
-  The Theme UI plugin for Figma allows for a workflow where Theme UI is the starting point both for design &
-  development.
+  The Theme UI plugin for Figma allows for a workflow where Theme UI is the
+  starting point both for design & development.
 </ProjectCard>

examples/graphql-playground/docs/query-variables.mdx

@@ -3,7 +3,11 @@ title: Query Variables
 ---
 
 ```graphql preview
-query GetBlogPosts($limit: Int, $filter: MarkdownRemarkFilterInput, $sort: MarkdownRemarkSortInput) {
+query GetBlogPosts(
+  $limit: Int
+  $filter: MarkdownRemarkFilterInput
+  $sort: MarkdownRemarkSortInput
+) {
   allMarkdownRemark(limit: $limit, filter: $filter, sort: $sort) {
     edges {
       node {

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

@@ -5,7 +5,7 @@ tags:
   - Code
 ---
 
-import SpotifyPlayer from "./SpotifyPlayer"
+import SpotifyPlayer from "./SpotifyPlayer";
 
 Here will a React component go:
 
@@ -49,25 +49,25 @@ A code block with a JSDoc comment, short, and long comment:
  */
 const getValue = (input, rootFontSize = 16) => {
   if (typeof input === `number`) {
-    return input / rootFontSize
+    return input / rootFontSize;
   }
 
-  const isPxValue = input.slice(-2) === `px`
+  const isPxValue = input.slice(-2) === `px`;
 
   if (isPxValue) {
-    return parseFloat(input.slice(0, -2))
+    return parseFloat(input.slice(0, -2));
   }
 
-  return parseFloat(input.slice(0, -3))
-}
+  return parseFloat(input.slice(0, -3));
+};
 
 // This is a little helper function
-const helper = (a, b) => a + b
+const helper = (a, b) => a + b;
 
 // This is also a little helper function but this time with a really long one-line comment that should show some more details
-const morehelper = (a, b) => a * b
+const morehelper = (a, b) => a * b;
 
-export { getValue, helper, morehelper }
+export { getValue, helper, morehelper };
 ```
 
 Normal block without language:
@@ -87,7 +87,7 @@ export default Layout
 Code block with code highlighting:
 
 ```jsx title=src/components/post.jsx highlight=5-7,10
-import * as React from "react"
+import * as React from "react";
 
 const Post = ({ data: { post } }) => (
   <Layout>
@@ -120,9 +120,9 @@ const Post = ({ data: { post } }) => (
       <MDXRenderer>{post.body}</MDXRenderer>
     </section>
   </Layout>
-)
+);
 
-export default Post
+export default Post;
 ```
 
 Code block without title:
@@ -158,11 +158,11 @@ const scream = (input) => window.alert(input)
 Line highlighting without code title:
 
 ```js highlight=2,4-5
-const test = 3
-const foo = "bar"
-const harry = "potter"
-const hermione = "granger"
-const ron = "weasley"
+const test = 3;
+const foo = "bar";
+const harry = "potter";
+const hermione = "granger";
+const ron = "weasley";
 ```
 
 Here will `inline code` go, just inside the text. Wow!
@@ -172,27 +172,31 @@ Code block with line numbers, highlighting, language, and title:
 <div data-testid="code-block">
 
 ```tsx title=src/components/blog.tsx highlight=7-8,19,21 withLineNumbers
-import * as React from "react"
+import * as React from "react";
 
 const Blog = ({ posts }: PostsProps) => {
-  const { tagsPath, basePath } = useSiteMetadata()
+  const { tagsPath, basePath } = useSiteMetadata();
 
   return (
     <Layout>
       <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
         <Heading variant="h2" as="h2">
           Blog
         </Heading>
-        <Styled.a as={Link} sx={{ variant: `links.secondary` }} to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}>
+        <Styled.a
+          as={Link}
+          sx={{ variant: `links.secondary` }}
+          to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}
+        >
           View all tags
         </Styled.a>
       </Flex>
       <Listing posts={posts} sx={{ mt: [4, 5] }} />
     </Layout>
-  )
-}
+  );
+};
 
-export default Blog
+export default Blog;
 ```
 
 </div>

examples/minimal-blog/content/posts/markdown-reference/index.mdx

@@ -80,7 +80,7 @@ module.exports = {
   },
   variants: {},
   plugins: [],
-}
+};
 ```
 
 Hopefully that looks good enough to you.

examples/minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx

@@ -1,3 +1,6 @@
-<Text children={`Hi.`} sx={{ fontSize: [4, 5, 6], fontWeight: `bold`, color: `heading` }} />
+<Text
+  children={`Hi.`}
+  sx={{ fontSize: [4, 5, 6], fontWeight: `bold`, color: `heading` }}
+/>
 
 I'm LekoArts, your theme creator. I'm passionate about open source & teaching. Learn more about Gatsby & React on [my website](https://www.lekoarts.de?utm_source=minimal-blog&utm_medium=Starter).