style: eslint

mitchLui · Nov 7, 2023 · dd16ce8 · dd16ce8
1 parent 48f4f2d
commit dd16ce8
Show file tree

Hide file tree

Showing 29 changed files with 331 additions and 403 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -21,6 +21,7 @@
     ],
     "rules": {
         "semi": ["error", "always"],
-        "quotes": ["error", "single"]
+        "quotes": ["error", "single"],
+        "indent": ["error", 2]
     }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,32 +10,30 @@ import { ProjectsPage } from './pages/ProjectPage/ProjectsPage';
 import { ProjectModalPage } from './pages/ProjectModalPage/ProjectModalPage';
 import { Derrianne } from './pages/Derrianne/Derrianne';
 import { NotFoundPage } from './pages/NotFoundPage/NotFoundPage';
-import { Copyright } from './components/Copyright/Copyright';
 import { SitemapPage } from './pages/SitemapPage/SitemapPage';
 import { RedirectPage } from './pages/RedirectPage/RedirectPage';
 
 import './App.scss';
 
 function App (): React.ReactElement {
   return (
-      <div className={'App'}>
-        <Router>
-          <NavBar/>
-          <Routes>
-            <Route path={'/'} element={<HomePage/>}/>
-            <Route path={'/derrianne'} element={<Derrianne/>}/>
-            <Route path={'/projects'} element={<ProjectsPage/>}/>
-            <Route path={'/projects/:projectClass'} element={<ProjectModalPage/>}/>
-            <Route path={'/sitemap'} element={<SitemapPage/>}/>
-            <Route path={'/not-found'} element={<NotFoundPage/>}/>
-            <Route path={'/linkedin'} element={<RedirectPage redirect={'https://linkedin.com/in/mitchlui'}/>}/>
-            <Route path={'/github'} element={<RedirectPage redirect={'https://github.com/mitchlui'}/>}/>
-            <Route path={'/medium'} element={<RedirectPage redirect={'https://mitchlui.medium.com'}/>}/>
-            <Route path={'*'} element={<NotFoundPage/>}/>
-          </Routes>
-          <Copyright/>
-        </Router>
-      </div>
+    <div className={'App'}>
+      <Router>
+        <NavBar/>
+        <Routes>
+          <Route path={'/'} element={<HomePage/>}/>
+          <Route path={'/derrianne'} element={<Derrianne/>}/>
+          <Route path={'/projects'} element={<ProjectsPage/>}/>
+          <Route path={'/projects/:projectClass'} element={<ProjectModalPage/>}/>
+          <Route path={'/sitemap'} element={<SitemapPage/>}/>
+          <Route path={'/not-found'} element={<NotFoundPage/>}/>
+          <Route path={'/linkedin'} element={<RedirectPage redirect={'https://linkedin.com/in/mitchlui'}/>}/>
+          <Route path={'/github'} element={<RedirectPage redirect={'https://github.com/mitchlui'}/>}/>
+          <Route path={'/medium'} element={<RedirectPage redirect={'https://mitchlui.medium.com'}/>}/>
+          <Route path={'*'} element={<NotFoundPage/>}/>
+        </Routes>
+      </Router>
+    </div>
   );
 }
 

diff --git a/src/components/Arrow/Arrow.tsx b/src/components/Arrow/Arrow.tsx
@@ -5,9 +5,8 @@ type ArrowProps = {
     text: string;
 }
 
-// eslint-disable-next-line no-undef
 export const Arrow = ({ text }: ArrowProps): React.ReactElement =>
-    <div className={'arrow-container'}>
-        <div className={'arrow'}/>
-        <span className={'arrow-text'}>{text}</span>
-    </div>;
+  <div className={'arrow-container'}>
+    <div className={'arrow'}/>
+    <span className={'arrow-text'}>{text}</span>
+  </div>;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -26,30 +26,30 @@ type LinkButtonProps = CommonButtonProps & {
 }
 
 export const LinkButton = ({ to, text }: LinkButtonProps): React.ReactElement =>
-    <Link to={to} className={'button'}>{text}</Link>;
+  <Link to={to} className={'button'}>{text}</Link>;
 
 type FunctionButtonProps = CommonButtonProps & {
     onClick: () => void;
 }
 
 export const FunctionButton = ({ onClick, text }: FunctionButtonProps): React.ReactElement =>
-    <button className={'button'} onClick={onClick}>{text}</button>;
+  <button className={'button'} onClick={onClick}>{text}</button>;
 
 type LinkFunctionButtonProps = CommonButtonProps & LinkButtonProps & FunctionButtonProps;
 
 export const LinkFunctionButton = ({ to, text, onClick }: LinkFunctionButtonProps): React.ReactElement =>
-    <Link onClick={onClick} to={to} className={'button'}>{text}</Link>;
+  <Link onClick={onClick} to={to} className={'button'}>{text}</Link>;
 
 type ModalCloseButtonProps = {
     onClick: () => void;
     to: string;
 }
 
 export const ModalCloseButton = ({ onClick, to }: ModalCloseButtonProps): React.ReactElement =>
-    <Link onClick={onClick} to={to} className={'modal'}><Cross/></Link>;
+  <Link onClick={onClick} to={to} className={'modal'}><Cross/></Link>;
 
 export const GoBackButton = ({ to, text }: LinkButtonProps): React.ReactElement =>
-    <Link to={to} className={'modal'}><Arrow text={text}/></Link>;
+  <Link to={to} className={'modal'}><Arrow text={text}/></Link>;
 
 type ContactButtonProps = CommonButtonProps & {
     icon: string;
@@ -58,11 +58,11 @@ type ContactButtonProps = CommonButtonProps & {
 }
 
 export const ContactButton = ({ icon, href, alt, text }: ContactButtonProps): React.ReactElement =>
-    <a className={'button contact'} href={href} target={'_blank'} rel={'noreferrer'}>
-        <div className={'contact-icon'}>
-            <img src={icon} alt={alt}/>
-        </div>
-        <div className={'contact-text'}>
-            {text}
-        </div>
-    </a>;
+  <a className={'button contact'} href={href} target={'_blank'} rel={'noreferrer'}>
+    <div className={'contact-icon'}>
+      <img src={icon} alt={alt}/>
+    </div>
+    <div className={'contact-text'}>
+      {text}
+    </div>
+  </a>;
diff --git a/src/components/Cards/Cards.tsx b/src/components/Cards/Cards.tsx
@@ -13,21 +13,21 @@ type CardProps = {
 }
 
 export const ProjectCard = ({ key, name, title, thumbnail, alt, headline, gitUrl }: CardProps): React.ReactElement =>
-    <article key={key} className={'card project ' + name}>
-        <picture className={'thumbnail'}>
-            <source srcSet={'/project_assets/webp/' + thumbnail + '.webp'} type="image/webp" />
-            <img
-                src={'/project_assets/png/' + thumbnail + '.png'}
-                alt={alt}
-            />
-        </picture>
-        <h2>{title}</h2>
-        <div className={'card-content'}>{headline}</div>
-        <footer>
-            <LinkButton to={'/projects/' + name} text={'Learn more'}/>
-            {
-                gitUrl &&
+  <article key={key} className={'card project ' + name}>
+    <picture className={'thumbnail'}>
+      <source srcSet={'/project_assets/webp/' + thumbnail + '.webp'} type="image/webp" />
+      <img
+        src={'/project_assets/png/' + thumbnail + '.png'}
+        alt={alt}
+      />
+    </picture>
+    <h2>{title}</h2>
+    <div className={'card-content'}>{headline}</div>
+    <footer>
+      <LinkButton to={'/projects/' + name} text={'Learn more'}/>
+      {
+        gitUrl &&
                 <Button url={gitUrl} target={'_blank'} text={'Code'}/>
-            }
-        </footer>
-    </article>;
+      }
+    </footer>
+  </article>;
diff --git a/src/components/Contact/Contact.tsx b/src/components/Contact/Contact.tsx
@@ -2,51 +2,41 @@ import { ContactButton } from '../Button/Button';
 import EmailSVG from './contact_images/email.svg';
 import LinkedInSVG from './contact_images/linkedin.svg';
 import GitHubSVG from './contact_images/github.svg';
-import TwitterSVG from './contact_images/twitter.svg';
 import React from 'react';
 import './contact.scss';
 
 export const Contact = (): React.ReactElement =>
-    <section className={'contact-container'}>
-        <div className={'contact-header-text'}>
+  <section className={'contact-container'}>
+    <div className={'contact-header-text'}>
             Contact me:
-        </div>
-        <div className={'current-status'} />
-        <div className={'contact-links'}>
-            <ul>
-                <li>
-                    <ContactButton
-                    icon={EmailSVG}
-                    href={'mailto:[email protected]'}
-                    alt={'email contact icon'}
-                    text={'Email'}
-                    />
-                </li>
-                <li>
-                    <ContactButton
-                        icon={LinkedInSVG}
-                        href={'https://www.linkedin.com/in/mitchlui/'}
-                        alt={'linkedin contact icon'}
-                        text={'Linkedin'}
-                    />
-                </li>
-                <li>
-                    <ContactButton
-                        icon={GitHubSVG}
-                        href={'https://www.github.com/mitchlui'}
-                        alt={'github contact icon'}
-                        text={'GitHub'}
-                    />
-                </li>
-                <li>
-                    <ContactButton
-                        icon={TwitterSVG}
-                        href={'https://www.twitter.com/mitchluidev'}
-                        alt={'twitter contact icon'}
-                        text={'Twitter'}
-                    />
-                </li>
-            </ul>
-
-        </div>
-    </section>;
+    </div>
+    <div className={'current-status'} />
+    <div className={'contact-links'}>
+      <ul>
+        <li>
+          <ContactButton
+            icon={EmailSVG}
+            href={'mailto:[email protected]'}
+            alt={'email contact icon'}
+            text={'Email'}
+          />
+        </li>
+        <li>
+          <ContactButton
+            icon={LinkedInSVG}
+            href={'https://www.linkedin.com/in/mitchlui/'}
+            alt={'linkedin contact icon'}
+            text={'Linkedin'}
+          />
+        </li>
+        <li>
+          <ContactButton
+            icon={GitHubSVG}
+            href={'https://www.github.com/mitchlui'}
+            alt={'github contact icon'}
+            text={'GitHub'}
+          />
+        </li>
+      </ul>
+    </div>
+  </section>;
diff --git a/src/components/Contact/contact_images/twitter.svg b/src/components/Contact/contact_images/twitter.svg
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import './container.scss';
+import { Copyright } from '../Copyright/Copyright';
 
 type ContainerProps = {
     children: React.ReactNode;
 }
 
 export const Container = ({ children }: ContainerProps): React.ReactElement =>
-    <div><div className="container">{children}</div></div>;
+  <div className="container">{children}<Copyright/></div>;
diff --git a/src/components/Container/container.scss b/src/components/Container/container.scss
@@ -1,4 +1,5 @@
 .container {
+    display: block;
     padding-left: 10%;
     padding-right: 10%;
     padding-bottom: 2.5%;

diff --git a/src/components/Copyright/Copyright.tsx b/src/components/Copyright/Copyright.tsx
@@ -7,7 +7,7 @@ function getCurrentYear (): number {
 }
 
 export const Copyright = (): React.ReactElement =>
-    <section className={'copyright'}>
+  <section className={'copyright'}>
         Copyright © {getCurrentYear()} Mitch Lui. All rights reserved.
-        <p><Link to={'/sitemap'}>Sitemap</Link></p>
-    </section>;
+    <p><Link to={'/sitemap'}>Sitemap</Link></p>
+  </section>;
diff --git a/src/components/Copyright/copyright.scss b/src/components/Copyright/copyright.scss
@@ -1,11 +1,7 @@
 .copyright{
-    padding: 2rem 0.5rem;
     position: relative;
-    left: 0px;
-    right: 0px;
-    bottom: 2rem;
-    text-align: center;
     font-size: 0.75rem;
     opacity: 75%;
+    text-align: center;
 }
 
diff --git a/src/components/Cross/Cross.tsx b/src/components/Cross/Cross.tsx
@@ -2,4 +2,4 @@ import React from 'react';
 import './cross.scss';
 
 export const Cross = (): React.ReactElement =>
-    <div className={'modal-close'}/>;
+  <div className={'modal-close'}/>;
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -12,15 +12,15 @@ type DropdownProps = {
 }
 
 export const Dropdown = ({ className, onChange, label, options }: DropdownProps): React.ReactElement =>
-    <>
-        <label className={'dropdown-label'} htmlFor={className}>{label}</label>
-        <select className={'dropdown-menu'} onChange={(e) => onChange(e.target.value)} name={'Sort by:'} id={className} defaultValue={'none'}>
-            {Object.keys(options).map((key) =>
-                <optgroup key={key} label={key}>
-                    {options[key].map((option) =>
-                        <option key={option.value} value={option.value}>{option.text}</option>
-                    )}
-                </optgroup>
-            )}
-        </select>
-    </>;
+  <>
+    <label className={'dropdown-label'} htmlFor={className}>{label}</label>
+    <select className={'dropdown-menu'} onChange={(e) => onChange(e.target.value)} name={'Sort by:'} id={className} defaultValue={'none'}>
+      {Object.keys(options).map((key) =>
+        <optgroup key={key} label={key}>
+          {options[key].map((option) =>
+            <option key={option.value} value={option.value}>{option.text}</option>
+          )}
+        </optgroup>
+      )}
+    </select>
+  </>;
diff --git a/src/components/FadeInSection/FadeInSection.tsx b/src/components/FadeInSection/FadeInSection.tsx
diff --git a/src/components/FadeInSection/fadeinsection.scss b/src/components/FadeInSection/fadeinsection.scss
diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
@@ -7,8 +7,8 @@ type GridProps = {
 
 export const Grid = ({ children }: GridProps): React.ReactElement => {
   return (
-        <div className={'grid'}>
-            {children}
-        </div>
+    <div className={'grid'}>
+      {children}
+    </div>
   );
 };