chore: prettier and update script

Author: segunadebayo

Diff for: .prettierrc

@@ -1,10 +1,10 @@
 {
   "bracketSpacing": true,
-  "jsxSingleQuote": false,
+  "jsxSingleQuote": true,
   "printWidth": 80,
   "proseWrap": "always",
   "semi": false,
-  "singleQuote": false,
+  "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all"
 }

Diff for: configs/site-config.ts

@@ -1,65 +1,63 @@
-const baseUrl = "https://github.com/chakra-ui/chakra-ui"
+const baseUrl = 'https://github.com/chakra-ui/chakra-ui'
 
 const siteConfig = {
   copyright: `Copyright © ${new Date().getFullYear()} Segun Adebayo. All Rights Reserved.`,
   algolia: {
-    apiKey: "df1dcc41f7b8e5d68e73dd56d1e19701",
-    indexName: "chakra-ui",
-    inputSelector: "#algolia-search",
+    apiKey: 'df1dcc41f7b8e5d68e73dd56d1e19701',
+    indexName: 'chakra-ui',
+    inputSelector: '#algolia-search',
   },
   author: {
-    name: "Segun Adebayo",
-    github: "https://github.com/segunadebayo",
-    twitter: "https://twitter.com/thesegunadebayo",
-    linkedin: "https://linkedin.com/in/thesegunadebayo",
-    email: "[email protected]",
+    name: 'Segun Adebayo',
+    github: 'https://github.com/segunadebayo',
+    twitter: 'https://twitter.com/thesegunadebayo',
+    linkedin: 'https://linkedin.com/in/thesegunadebayo',
+    email: '[email protected]',
   },
   repo: {
     url: baseUrl,
     editUrl: `${baseUrl}/edit/main/website/pages`,
     blobUrl: `${baseUrl}/blob/main`,
   },
   openCollective: {
-    url: "https://opencollective.com/chakra-ui",
+    url: 'https://opencollective.com/chakra-ui',
   },
   discord: {
-    url: "https://discord.gg/chakra-ui",
+    url: 'https://discord.gg/chakra-ui',
   },
-  youtube: "https://www.youtube.com/channel/UC4TmDovH46TB4S0SM0Y4CIg",
+  youtube: 'https://www.youtube.com/channel/UC4TmDovH46TB4S0SM0Y4CIg',
   seo: {
-    title: "Chakra UI",
-    titleTemplate: "%s - Chakra UI",
+    title: 'Chakra UI',
+    titleTemplate: '%s - Chakra UI',
     description:
-      "Simple, Modular and Accessible UI Components for your React Applications.",
-    siteUrl: "https://chakra-ui.com",
+      'Simple, Modular and Accessible UI Components for your React Applications.',
+    siteUrl: 'https://chakra-ui.com',
     twitter: {
-      handle: "@chakra-ui",
-      site: "@chakra-ui",
-      cardType: "summary_large_image",
+      handle: '@chakra-ui',
+      site: '@chakra-ui',
+      cardType: 'summary_large_image',
     },
     openGraph: {
-      type: "website",
-      locale: "en_US",
-      url: "https://chakra-ui.com",
-      title: "Chakra UI",
+      type: 'website',
+      locale: 'en_US',
+      url: 'https://chakra-ui.com',
+      title: 'Chakra UI',
       description:
-        "Simple, Modular and Accessible UI Components for your React Applications.",
+        'Simple, Modular and Accessible UI Components for your React Applications.',
       site_name:
-        "Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.",
+        'Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.',
       images: [
         {
-          url: "https://chakra-ui.com/og-image.png",
+          url: 'https://chakra-ui.com/og-image.png',
           width: 1240,
           height: 480,
-          alt:
-            "Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.",
+          alt: 'Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.',
         },
         {
-          url: "https://chakra-ui.com/twitter-og-image.png",
+          url: 'https://chakra-ui.com/twitter-og-image.png',
           width: 1012,
           height: 506,
-          alt:
-            "Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.",
+          alt: 'Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.',
         },
       ],
     },

Diff for: crowdin.yml

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import PageContainer from 'components/page-container';
-import dynamic from 'next/dynamic';
+import * as React from 'react'
+import PageContainer from 'components/page-container'
+import dynamic from 'next/dynamic'
 
-const MDXLayout = dynamic(() => import('layouts/mdx'));
+const MDXLayout = dynamic(() => import('layouts/mdx'))
 
 export default function DefaultLayout({ children, frontMatter }) {
-  const slug = frontMatter?.slug;
+  const slug = frontMatter?.slug
 
   const layoutMap = {
     guides: <MDXLayout frontmatter={frontMatter}>{children}</MDXLayout>,
@@ -15,13 +15,13 @@ export default function DefaultLayout({ children, frontMatter }) {
     default: (
       <PageContainer frontmatter={frontMatter}>{children}</PageContainer>
     ),
-  };
+  }
 
   const layout = Object.entries(layoutMap).find(([path]) => {
-    return slug?.startsWith(`/${path}`);
-  });
+    return slug?.startsWith(`/${path}`)
+  })
 
-  if (!layout) return layoutMap.default;
+  if (!layout) return layoutMap.default
 
-  return layout[1];
+  return layout[1]
 }

Diff for: layouts/index.tsx

@@ -1,41 +1,41 @@
-import PageContainer from 'components/page-container';
-import Pagination from 'components/pagination';
-import Sidebar from 'components/sidebar/sidebar';
-import docsSidebar from 'configs/docs-sidebar.json';
-import guidesSidebar from 'configs/guides-sidebar.json';
-import * as React from 'react';
-import { findRouteByPath, removeFromLast } from 'utils/find-route-by-path';
-import { getRouteContext } from 'utils/get-route-context';
+import PageContainer from 'components/page-container'
+import Pagination from 'components/pagination'
+import Sidebar from 'components/sidebar/sidebar'
+import docsSidebar from 'configs/docs-sidebar.json'
+import guidesSidebar from 'configs/guides-sidebar.json'
+import * as React from 'react'
+import { findRouteByPath, removeFromLast } from 'utils/find-route-by-path'
+import { getRouteContext } from 'utils/get-route-context'
 
 export function getRoutes(slug: string) {
   // for home page, use docs sidebat
-  if (slug === '/') return docsSidebar.routes;
+  if (slug === '/') return docsSidebar.routes
 
   const configMap = {
     '/resources': docsSidebar,
     '/changelog': docsSidebar,
     '/guides': guidesSidebar,
     '/docs': docsSidebar,
     '/faq': docsSidebar,
-  };
+  }
 
   const [, sidebar] =
-    Object.entries(configMap).find(([path]) => slug.startsWith(path)) ?? [];
+    Object.entries(configMap).find(([path]) => slug.startsWith(path)) ?? []
 
-  return sidebar?.routes ?? [];
+  return sidebar?.routes ?? []
 }
 
 interface MDXLayoutProps {
-  frontmatter: any;
-  children: React.ReactNode;
+  frontmatter: any
+  children: React.ReactNode
 }
 
 export default function MDXLayout(props: MDXLayoutProps) {
-  const { frontmatter, children } = props;
-  const routes = getRoutes(frontmatter.slug);
+  const { frontmatter, children } = props
+  const routes = getRoutes(frontmatter.slug)
 
-  const route = findRouteByPath(removeFromLast(frontmatter.slug, '#'), routes);
-  const routeContext = getRouteContext(route, routes);
+  const route = findRouteByPath(removeFromLast(frontmatter.slug, '#'), routes)
+  const routeContext = getRouteContext(route, routes)
 
   return (
     <PageContainer
@@ -50,5 +50,5 @@ export default function MDXLayout(props: MDXLayoutProps) {
     >
       {children}
     </PageContainer>
-  );
+  )
 }

Diff for: layouts/mdx.tsx

@@ -1,39 +1,39 @@
-import { Button, Heading, Text, VStack } from "@chakra-ui/react"
-import { FaHome } from "react-icons/fa"
-import { AdBanner } from "components/chakra-pro/ad-banner"
-import Header from "components/header"
-import SEO from "components/seo"
-import * as React from "react"
-import NextLink from "next/link"
-import { t } from "utils/i18n"
+import { Button, Heading, Text, VStack } from '@chakra-ui/react'
+import { FaHome } from 'react-icons/fa'
+import { AdBanner } from 'components/chakra-pro/ad-banner'
+import Header from 'components/header'
+import SEO from 'components/seo'
+import * as React from 'react'
+import NextLink from 'next/link'
+import { t } from 'utils/i18n'
 
 const NotFoundPage = () => {
   return (
     <>
       <SEO
-        title={t("notfound.title")}
-        description={t("notfound.description")}
+        title={t('notfound.title')}
+        description={t('notfound.description')}
       />
       <AdBanner />
       <Header />
       <VStack
-        justify="center"
-        spacing="4"
-        as="section"
-        mt={["20", null, "40"]}
-        textAlign="center"
+        justify='center'
+        spacing='4'
+        as='section'
+        mt={['20', null, '40']}
+        textAlign='center'
       >
-        <Heading>{t("notfound.heading")}</Heading>
-        <Text fontSize={{ md: "xl" }}>{t("notfound.message")}</Text>
-        <NextLink href="/" passHref>
+        <Heading>{t('notfound.heading')}</Heading>
+        <Text fontSize={{ md: 'xl' }}>{t('notfound.message')}</Text>
+        <NextLink href='/' passHref>
           <Button
-            as="a"
-            aria-label="Back to Home"
+            as='a'
+            aria-label='Back to Home'
             leftIcon={<FaHome />}
-            colorScheme="teal"
-            size="lg"
+            colorScheme='teal'
+            size='lg'
           >
-            {t("notfound.back-to-home")}
+            {t('notfound.back-to-home')}
           </Button>
         </NextLink>
       </VStack>

Diff for: pages/404.tsx

@@ -1,13 +1,13 @@
-import { ChakraProvider } from '@chakra-ui/react';
-import FontFace from 'components/font-face';
-import { DefaultSeo } from 'next-seo';
-import Head from 'next/head';
-import React from 'react';
-import theme from 'theme';
-import { getSeo } from 'utils/seo';
+import { ChakraProvider } from '@chakra-ui/react'
+import FontFace from 'components/font-face'
+import { DefaultSeo } from 'next-seo'
+import Head from 'next/head'
+import React from 'react'
+import theme from 'theme'
+import { getSeo } from 'utils/seo'
 
 const App = ({ Component, pageProps }) => {
-  const seo = getSeo();
+  const seo = getSeo()
 
   return (
     <>
@@ -33,7 +33,7 @@ const App = ({ Component, pageProps }) => {
       </ChakraProvider>
       <FontFace />
     </>
-  );
-};
+  )
+}
 
-export default App;
+export default App

Diff for: pages/_app.tsx

@@ -1,12 +1,12 @@
-import { ColorModeScript } from "@chakra-ui/react"
+import { ColorModeScript } from '@chakra-ui/react'
 import NextDocument, {
   DocumentContext,
   Head,
   Html,
   Main,
   NextScript,
-} from "next/document"
-import React from "react"
+} from 'next/document'
+import React from 'react'
 
 class Document extends NextDocument {
   static getInitialProps(ctx: DocumentContext) {
@@ -15,14 +15,14 @@ class Document extends NextDocument {
 
   render() {
     return (
-      <Html lang="en">
+      <Html lang='en'>
         <Head>
           <link
-            rel="preload"
-            href="/fonts/Inter.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
+            rel='preload'
+            href='/fonts/Inter.woff2'
+            as='font'
+            type='font/woff2'
+            crossOrigin='anonymous'
           />
         </Head>
         <body>

Diff for: pages/_document.tsx

@@ -1,30 +1,30 @@
-import { allBlogs } from '.contentlayer/data';
-import type { Blog } from '.contentlayer/types';
-import { MDXComponents } from 'components/mdx-components';
-import { GetStaticPaths, GetStaticProps } from 'next';
-import { useMDXComponent } from 'next-contentlayer/hooks';
-import Layout from 'layouts';
+import { allBlogs } from '.contentlayer/data'
+import type { Blog } from '.contentlayer/types'
+import { MDXComponents } from 'components/mdx-components'
+import { GetStaticPaths, GetStaticProps } from 'next'
+import { useMDXComponent } from 'next-contentlayer/hooks'
+import Layout from 'layouts'
 
 export default function Page({ blog }: { blog: Blog }) {
-  const Component = useMDXComponent(blog.body.code);
+  const Component = useMDXComponent(blog.body.code)
   return (
     <Layout frontMatter={blog.frontMatter}>
       <Component components={MDXComponents} />
     </Layout>
-  );
+  )
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const blogs = allBlogs
     .map((t) => t._id.replace('blogs/', '').replace('.mdx', ''))
-    .map((id) => ({ params: { slug: id.split('/') } }));
-  return { paths: blogs, fallback: false };
-};
+    .map((id) => ({ params: { slug: id.split('/') } }))
+  return { paths: blogs, fallback: false }
+}
 
 export const getStaticProps: GetStaticProps = async (ctx) => {
   const params = Array.isArray(ctx.params.slug)
     ? ctx.params.slug
-    : [ctx.params.slug];
-  const blog = allBlogs.find((blog) => blog._id.includes(params.join('/')));
-  return { props: { blog } };
-};
+    : [ctx.params.slug]
+  const blog = allBlogs.find((blog) => blog._id.includes(params.join('/')))
+  return { props: { blog } }
+}