diff --git a/.eslintrc.js b/.eslintrc.js index 6c025ffa8..b7a66d4a9 100755 --- a/.eslintrc.js +++ b/.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, }, }, ], diff --git a/examples/cara/src/@lekoarts/gatsby-theme-cara/sections/projects.mdx b/examples/cara/src/@lekoarts/gatsby-theme-cara/sections/projects.mdx index ba0c71a4c..26a0c1ffc 100644 --- a/examples/cara/src/@lekoarts/gatsby-theme-cara/sections/projects.mdx +++ b/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. - 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. diff --git a/examples/graphql-playground/docs/query-variables.mdx b/examples/graphql-playground/docs/query-variables.mdx index 645d5b958..c78ef79fe 100644 --- a/examples/graphql-playground/docs/query-variables.mdx +++ b/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 { diff --git a/examples/minimal-blog/content/posts/code-block-examples/index.mdx b/examples/minimal-blog/content/posts/code-block-examples/index.mdx index 3e3a193e4..56e1382bc 100755 --- a/examples/minimal-blog/content/posts/code-block-examples/index.mdx +++ b/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 } }) => ( @@ -120,9 +120,9 @@ const Post = ({ data: { post } }) => ( {post.body} -) +); -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,10 +172,10 @@ Code block with line numbers, highlighting, language, and title:
```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 ( @@ -183,16 +183,20 @@ const Blog = ({ posts }: PostsProps) => { Blog - + View all tags - ) -} + ); +}; -export default Blog +export default Blog; ```
diff --git a/examples/minimal-blog/content/posts/markdown-reference/index.mdx b/examples/minimal-blog/content/posts/markdown-reference/index.mdx index 3f9ae6322..8a2f84b2f 100644 --- a/examples/minimal-blog/content/posts/markdown-reference/index.mdx +++ b/examples/minimal-blog/content/posts/markdown-reference/index.mdx @@ -80,7 +80,7 @@ module.exports = { }, variants: {}, plugins: [], -} +}; ``` Hopefully that looks good enough to you. diff --git a/examples/minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx b/examples/minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx index 1c8f46f7c..fc6d560f1 100644 --- a/examples/minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx +++ b/examples/minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx @@ -1,3 +1,6 @@ - + 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). diff --git a/examples/specimens/src/pages/index.mdx b/examples/specimens/src/pages/index.mdx index 9826edbab..b0b46c4af 100755 --- a/examples/specimens/src/pages/index.mdx +++ b/examples/specimens/src/pages/index.mdx @@ -1,9 +1,9 @@ -import PageLayout from "../components/layout" -import TableOfContents from "../components/table-of-contents" -import Seo from "../components/seo" +import PageLayout from "../components/layout"; +import TableOfContents from "../components/table-of-contents"; +import Seo from "../components/seo"; -export const Head = () => -export default PageLayout +export const Head = () => ; +export default PageLayout; # Specimens for Design Systems @@ -80,8 +80,8 @@ render( Gentle warning :) Super helpful information goes here nooooooooo, not this way - -) + , +); ``` ### Audio @@ -129,9 +129,9 @@ const radii = { none: "0", sm: "0.5rem", md: "1rem", -} +}; -render() +render(); ``` ### Color Families @@ -163,9 +163,9 @@ const colors = { 300: `#fdba74`, 400: `#fb923c`, }, -} +}; -render() +render(); ``` ### Color Row @@ -200,8 +200,8 @@ render( - -) + , +); ``` ### Download @@ -249,9 +249,9 @@ const fonts = { sans: '-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"', serif: 'Georgia, Cambria, "Times New Roman", Times, serif', mono: 'Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace', -} +}; -render() +render(); ``` ### Font Size @@ -271,9 +271,9 @@ fontSizes: string[] | number[] --- ```jsx live noInline -const fontSizes = ["0.875rem", "1rem", "1.25rem", "1.5rem"] +const fontSizes = ["0.875rem", "1rem", "1.25rem", "1.5rem"]; -render() +render(); ``` ### Font Weight @@ -302,9 +302,9 @@ const fontWeights = { semibold: "600", bold: "700", black: "900", -} +}; -render() +render(); ``` ### Heading @@ -323,7 +323,17 @@ You can filter which keys to show by using the helper function `filterStyles({ i ```jsx live noInline const theme = { - fontSizes: ["0.875rem", "1rem", "1.25rem", "1.5rem", "1.875rem", "2.25rem", "3rem", "4rem", "4.5rem"], + fontSizes: [ + "0.875rem", + "1rem", + "1.25rem", + "1.5rem", + "1.875rem", + "2.25rem", + "3rem", + "4rem", + "4.5rem", + ], lineHeights: { heading: "1.25", }, @@ -373,7 +383,7 @@ const theme = { m: 3, }, }, -} +}; render( -) + />, +); ``` ### Palette: Color Rows @@ -409,7 +419,7 @@ const theme = { colors: { indigo: [null, "#ebf4ff", "#c3dafe", "#a3bffa", "#7f9cf5", "#667eea"], }, -} +}; const orange = [ { @@ -420,15 +430,18 @@ const orange = [ name: "2", color: "#fbd38d", }, -] +]; render( - +

Orange

- -) + , +); ``` ### Palette: Color Swatches @@ -461,9 +474,15 @@ const theme = { text: `#2d3748`, indigo: [null, "#ebf4ff", "#c3dafe", "#a3bffa", "#7f9cf5", "#667eea"], }, -} +}; -render() +render( + , +); ``` ### Sizes @@ -497,18 +516,22 @@ const sizes = { 10: "2.5rem", 12: "3rem", 16: "4rem", -} +}; render( - +
{Object.entries(sizes).map(([key, value]) => (
{key}
{value}
))} -
-) + , +); ``` ### Shadows @@ -534,9 +557,9 @@ const shadows = { default: `0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)`, xl: `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)`, "2xl": `0 25px 50px -12px rgba(0, 0, 0, 0.25)`, -} +}; -render() +render(); ``` ### Space @@ -554,9 +577,9 @@ space: string[] | number[] --- ```jsx live noInline -const space = [0, `0.25rem`, `0.5rem`, `1rem`, `2rem`, `4rem`, `8rem`] +const space = [0, `0.25rem`, `0.5rem`, `1rem`, `2rem`, `4rem`, `8rem`]; -render() +render(); ``` ### Video @@ -573,5 +596,9 @@ Available props: - autoplay (`boolean`) (optional) (Default: false) ```jsx live -