website: change formatting

.prettierrc

@@ -1,6 +1,5 @@
 {
-  "bracketSpacing": false,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "printWidth": 80,
   "proseWrap": "never",
   "singleQuote": true,

contents/_components/QuestionList.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import QuestionGroups from './QuestionGroups.json';
 
-function DifficultyLabel({difficulty}) {
+function DifficultyLabel({ difficulty }) {
   return (
     <span
       style={{

website/blog/2022-04-20-take-control-over-your-coding-interview copy.md

@@ -130,14 +130,14 @@ Depending on where the pricing data comes from, one possible variation of the ta
 ```javascript
 // config.js
 export const priceByRanges = [
-  {min: 1, max: 5, price: '5'},
-  {min: 6, max: 10, price: '4'},
-  {min: 11, max: 20, price: '3'},
-  {min: 21, max: Number.MAX_SAFE_INTEGER, price: '2.5'},
+  { min: 1, max: 5, price: '5' },
+  { min: 6, max: 10, price: '4' },
+  { min: 11, max: 20, price: '3' },
+  { min: 21, max: Number.MAX_SAFE_INTEGER, price: '2.5' },
 ];
 
 // app.js
-import {priceByRanges} from './config.js';
+import { priceByRanges } from './config.js';
 
 function getPrice(amount) {
   // error handling for amount outside the range
@@ -155,10 +155,10 @@ If the array `priceByRanges` is always sorted in terms of the price ranges, we c
 
 ```javascript
 const priceByRanges = [
-  {min: 1, max: 5, price: '5'},
-  {min: 6, max: 10, price: '4'},
-  {min: 11, max: 20, price: '3'},
-  {min: 21, max: Number.MAX_SAFE_INTEGER, price: '2.5'},
+  { min: 1, max: 5, price: '5' },
+  { min: 6, max: 10, price: '4' },
+  { min: 11, max: 20, price: '3' },
+  { min: 21, max: Number.MAX_SAFE_INTEGER, price: '2.5' },
 ];
 
 function getPrice(amount) {

website/docusaurus.config.js

@@ -40,7 +40,7 @@ module.exports = {
           label: 'Algorithms',
           href: '/algorithms/study-cheatsheet',
         },
-        {label: 'Blog', to: 'blog', position: 'left'},
+        { label: 'Blog', to: 'blog', position: 'left' },
         {
           label: 'Grind 75',
           href: 'https://www.techinterviewhandbook.org/grind75',

website/src/components/SidebarAd/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import clsx from 'clsx';
@@ -7,7 +7,7 @@ import styles from './styles.module.css';
 
 const AD_REFRESH_RATE = 20 * 1000;
 
-function FAANGTechLeads({position}) {
+function FAANGTechLeads({ position }) {
   return (
     <a
       className={clsx(styles.container, styles.backgroundFTL)}
@@ -29,7 +29,7 @@ function FAANGTechLeads({position}) {
   );
 }
 
-function AlgoMonster({position}) {
+function AlgoMonster({ position }) {
   return (
     <a
       className={clsx(styles.container, styles.backgroundAlgoMonster)}
@@ -50,7 +50,7 @@ function AlgoMonster({position}) {
   );
 }
 
-function Moonchaser({position}) {
+function Moonchaser({ position }) {
   return (
     <a
       className={clsx(styles.container, styles.backgroundMoonchaser)}
@@ -73,7 +73,7 @@ function Moonchaser({position}) {
   );
 }
 
-function DesignGurusCoding({position}) {
+function DesignGurusCoding({ position }) {
   return (
     <a
       className={clsx(styles.container, styles.backgroundGrokkingCoding)}
@@ -93,7 +93,7 @@ function DesignGurusCoding({position}) {
   );
 }
 
-function DesignGurusSystemDesign({position}) {
+function DesignGurusSystemDesign({ position }) {
   return (
     <a
       className={clsx(styles.container, styles.backgroundGrokkingSystemDesign)}
@@ -113,7 +113,7 @@ function DesignGurusSystemDesign({position}) {
   );
 }
 
-function ByteByteGoSystemDesign({position}) {
+function ByteByteGoSystemDesign({ position }) {
   return (
     <a
       className={clsx(styles.container, styles.backgroundByteByteGo)}
@@ -136,7 +136,7 @@ function ByteByteGoSystemDesign({position}) {
   );
 }
 
-function Interviewingio({position}) {
+function Interviewingio({ position }) {
   return (
     <a
       className={clsx(styles.container, styles.backgroundInterviewingio)}
@@ -159,7 +159,7 @@ function Interviewingio({position}) {
   );
 }
 
-export default React.memo(function SidebarAd({position}) {
+export default React.memo(function SidebarAd({ position }) {
   const [counter, setCounter] = useState(0);
   useEffect(() => {
     const timer = setTimeout(() => {

website/src/data/successStories.js

@@ -157,10 +157,10 @@ export default [
           target="_blank"
           rel="noreferrer noopener">
           Grind 75 Tool
-        </a>,
-        which provides customisable coding interview study plans. This not only
-        helped to sharpen my problem-solving skills, but also assured me that
-        I covered sufficient breadth and depth.
+        </a>
+        , which provides customisable coding interview study plans. This not
+        only helped to sharpen my problem-solving skills, but also assured me
+        that I covered sufficient breadth and depth.
         <br />
         <br />
         Even now, after interviewing for a couple of years, I still go back to

website/src/pages/index.js

@@ -79,7 +79,7 @@ const FEATURES = [
   },
 ];
 
-function Tweet({url, handle, name, content, avatar, date}) {
+function Tweet({ url, handle, name, content, avatar, date }) {
   return (
     <div className={clsx('card', styles.tweet)}>
       <div className="card__header">
@@ -104,7 +104,7 @@ function Tweet({url, handle, name, content, avatar, date}) {
 }
 
 function Home() {
-  const {siteConfig = {}} = useDocusaurusContext();
+  const { siteConfig = {} } = useDocusaurusContext();
   return (
     <Layout
       title="Technical Interview Guide for Busy Engineers"
@@ -125,7 +125,7 @@ function Home() {
 }
 
 function HeroSection() {
-  const {siteConfig = {}} = useDocusaurusContext();
+  const { siteConfig = {} } = useDocusaurusContext();
 
   return (
     <header className={clsx('hero', styles.heroBanner)}>
@@ -150,7 +150,7 @@ function HeroSection() {
             Start reading now&nbsp;&nbsp;→
           </Link>
         </div>
-        <p className="margin-top--md" style={{fontSize: 16, fontWeight: 600}}>
+        <p className="margin-top--md" style={{ fontSize: 16, fontWeight: 600 }}>
           Or check out our{' '}
           <a href="https://www.frontendinterviewhandbook.com">
             Front End Interview Handbook
@@ -263,7 +263,7 @@ function MoonchaserSection() {
   );
 }
 
-function HowToUseStep({index, title, ctaLink, contents}) {
+function HowToUseStep({ index, title, ctaLink, contents }) {
   return (
     <div className={clsx('card', styles.howToUseStep)}>
       <div className="card__header">
@@ -395,7 +395,7 @@ function FeaturesSection() {
               We have everything you need - all straight to the point
             </h3>
             <div className={clsx('row', styles.featuresRow)}>
-              {FEATURES.map(({title, description, link}, idx) => (
+              {FEATURES.map(({ title, description, link }, idx) => (
                 <div
                   key={idx}
                   className={clsx(
@@ -428,13 +428,13 @@ function DesignGurusSection() {
   return (
     <div
       className={clsx('padding-vert--lg')}
-      style={{backgroundColor: '#6fc8cc'}}>
+      style={{ backgroundColor: '#6fc8cc' }}>
       <div className="container">
         <div className="row">
           <div className="col col--8 col--offset-2">
             <div className="margin-vert--lg text--center">
               <div>
-                <h2 style={{color: '#083436'}}>
+                <h2 style={{ color: '#083436' }}>
                   <strong>
                     Tired of grinding mindlessly? Grokking the Coding Interview
                     is the recommended way to quickly learn coding question
@@ -466,7 +466,7 @@ function FAANGTechLeadsSection() {
   return (
     <div
       className={clsx('padding-vert--lg')}
-      style={{backgroundColor: 'rgb(244, 63, 94)'}}>
+      style={{ backgroundColor: 'rgb(244, 63, 94)' }}>
       <div className="container">
         <div className="row">
           <div className="col col--8 col--offset-2">
@@ -503,7 +503,7 @@ function AlgoMonsterSection() {
   return (
     <div
       className={clsx('padding-vert--lg')}
-      style={{backgroundImage: 'linear-gradient(270deg, #3e1792, #6a45b9)'}}>
+      style={{ backgroundImage: 'linear-gradient(270deg, #3e1792, #6a45b9)' }}>
       <div className="container">
         <div className="row">
           <div className="col col--8 col--offset-2">
@@ -712,7 +712,7 @@ function TweetsSection() {
   );
 }
 
-function SuccessStory({name, quote, thumbnail, title}) {
+function SuccessStory({ name, quote, thumbnail, title }) {
   return (
     <div className="card margin-vert--lg">
       <div className="card__body">

website/src/theme/DocItem/Content/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/theme-common/internal';
 import Heading from '@theme/Heading';
 import MDXContent from '@theme/MDXContent';
 /**
@@ -15,7 +15,7 @@ import MDXContent from '@theme/MDXContent';
  - the markdown content does not already contain a top-level h1 heading
 */
 function useSyntheticTitle() {
-  const {metadata, frontMatter, contentTitle} = useDoc();
+  const { metadata, frontMatter, contentTitle } = useDoc();
   const shouldRender =
     !frontMatter.hide_title && typeof contentTitle === 'undefined';
   if (!shouldRender) {
@@ -23,7 +23,7 @@ function useSyntheticTitle() {
   }
   return metadata.title;
 }
-export default function DocItemContent({children}) {
+export default function DocItemContent({ children }) {
   const syntheticTitle = useSyntheticTitle();
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>

website/src/theme/DocItem/Layout/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import {useWindowSize} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
+import { useWindowSize } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/theme-common/internal';
 import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -17,7 +17,7 @@ import SidebarAd from '../../../components/SidebarAd';
  * Decide if the toc should be rendered, on mobile or desktop viewports
  */
 function useDocTOC() {
-  const {frontMatter, toc} = useDoc();
+  const { frontMatter, toc } = useDoc();
   const windowSize = useWindowSize();
   const hidden = frontMatter.hide_table_of_contents;
   const canRender = !hidden && toc.length > 0;
@@ -32,7 +32,7 @@ function useDocTOC() {
     desktop,
   };
 }
-export default function DocItemLayout({children}) {
+export default function DocItemLayout({ children }) {
   const docTOC = useDocTOC();
   return (
     <div className="row">

website/src/theme/DocSidebar/Mobile/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type {Props} from '@theme/DocSidebar/Mobile';
+import type { Props } from '@theme/DocSidebar/Mobile';
 declare function DocSidebarMobile(props: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
 export default _default;

website/src/theme/DocSidebar/Mobile/index.js

@@ -4,11 +4,11 @@ import {
   NavbarSecondaryMenuFiller,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
-import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import SidebarAd from '../../../components/SidebarAd';
 // eslint-disable-next-line react/function-component-definition
-const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
+const DocSidebarMobileSecondaryMenu = ({ sidebar, path }) => {
   const mobileSidebar = useNavbarMobileSidebar();
   return (
     <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>

website/src/theme/TOC/index.js

@@ -8,7 +8,7 @@ import SidebarAd from '../../components/SidebarAd';
 const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
 const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
-function TOC({className, ...props}) {
+function TOC({ className, ...props }) {
   return (
     <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
       <div className="margin--md">