Code prettifier github actions + prettified the files (#12)

.github/workflows/Format.yaml

@@ -0,0 +1,19 @@
+name: Continuous Integration
+
+# This action works with pull requests and pushes
+on:
+  - push
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        # Make sure the actual branch is checked out when running on pull requests
+        ref: ${{ github.head_ref }}
+
+    - name: Prettify code
+      uses: creyD/[email protected]

gatsby-config.js

@@ -5,8 +5,5 @@
  */
 
 module.exports = {
-  plugins: [
-    `gatsby-plugin-sass`,
-    `gatsby-plugin-react-helmet`,
-  ],
+  plugins: [`gatsby-plugin-sass`, `gatsby-plugin-react-helmet`],
 }

src/components/footer.js

@@ -1,10 +1,5 @@
 import React from "react"
 
-const Footer = ({ children }) => (
-
-  <footer>
-      2021 © Bible Before Bread
-  </footer>
-)
+const Footer = ({ children }) => <footer>2021 © Bible Before Bread</footer>
 
 export default Footer

src/components/form.js

@@ -2,28 +2,31 @@ import React from "react"
 import arrow from "../../static/img/arrow.png"
 
 const Form = () => (
-
-
-    <form name="subscribe" method="POST" data-netlify="true">
-
-      <p class="coming-soon"> Daily Bible Inspirations Coming Soon. </p>
-      <p class="enter-email"> Enter your email to stay informed. </p>
-
-      <input type="hidden" name="form-name" value="subscribe" />
-
-      <div class="fields">
-        <div class="email-field">
-          <input type="email" name="email" id="email" placeholder="[email protected]"/>
-          <label for="email" htmlFor="email">Your Email </label>
-        </div> 
-
-        <button class="home-button" type="submit">
-          <span class="button-text">Send</span>
-          <img src={arrow} className="button-arrow" alt="Arrow" />
-        </button>
+  <form name="subscribe" method="POST" data-netlify="true">
+    <p class="coming-soon"> Daily Bible Inspirations Coming Soon. </p>
+    <p class="enter-email"> Enter your email to stay informed. </p>
+
+    <input type="hidden" name="form-name" value="subscribe" />
+
+    <div class="fields">
+      <div class="email-field">
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="[email protected]"
+        />
+        <label for="email" htmlFor="email">
+          Your Email{" "}
+        </label>
       </div>
-    </form>
 
+      <button class="home-button" type="submit">
+        <span class="button-text">Send</span>
+        <img src={arrow} className="button-arrow" alt="Arrow" />
+      </button>
+    </div>
+  </form>
 )
 
 export default Form

src/components/header.js

@@ -3,13 +3,12 @@ import { Link } from "gatsby"
 import logo from "../../static/img/logo-black.png"
 
 const Header = () => (
-
   <header>
-      <h1>
-        <Link style={{ color:`black`, textDecoration:`none` }} to="/">
-          <img src={logo} className='home-logo' alt="Logo" />
-        </Link>
-      </h1>
+    <h1>
+      <Link style={{ color: `black`, textDecoration: `none` }} to="/">
+        <img src={logo} className="home-logo" alt="Logo" />
+      </Link>
+    </h1>
   </header>
 )
 

src/components/layout.js

@@ -3,7 +3,6 @@ import Header from "./header"
 import Footer from "./footer"
 
 const Layout = ({ children }) => (
-
   <>
     <div class="site-title">
       <Header />

src/components/vanta-animation.js

@@ -1,36 +1,39 @@
-
 import React from "react"
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef } from "react"
 
 import CLOUDS from "vanta/dist/vanta.clouds.min"
 // Need to load three or will get "TypeError: undefined has no properties". not completely sure why
-import * as THREE from "three" 
+import * as THREE from "three"
 
-const VantaCloudsAnimation = (props) => {
+const VantaCloudsAnimation = props => {
   const [vantaEffect, setVantaEffect] = useState(0)
   const myRef = useRef(null)
   useEffect(() => {
     if (!vantaEffect) {
-      setVantaEffect(CLOUDS({
-        THREE, // used here to prevent "TypeError: undefined has no properties". not completely sure why
-        el: myRef.current,
-        mouseControls: true,
-        touchControls: true,
-        gyroControls: false,
-        minHeight: 200.00,
-        minWidth: 200.00,
-        // skyColor: 0x791de1,
-        speed: 1.70
-      }))
+      setVantaEffect(
+        CLOUDS({
+          THREE, // used here to prevent "TypeError: undefined has no properties". not completely sure why
+          el: myRef.current,
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200.0,
+          minWidth: 200.0,
+          // skyColor: 0x791de1,
+          speed: 1.7,
+        })
+      )
     }
     return () => {
       if (vantaEffect) vantaEffect.destroy()
     }
   }, [vantaEffect])
-  return <div className="vanta-clouds-background" ref={myRef}>
+  return (
+    <div className="vanta-clouds-background" ref={myRef}>
       {/* Foreground content goes here */}
-      { props.children }
-  </div>
+      {props.children}
+    </div>
+  )
 }
 
 export default VantaCloudsAnimation

src/pages/index.js

@@ -10,32 +10,31 @@ import VantaCloudsAnimation from "../components/vanta-animation"
 import "../style/index.scss"
 
 const Home = () => (
-
   <Layout>
-
     <div class="home-logo" />
 
     {/* add vanta animation, is helmet needed? */}
     <Helmet>
-        <script src="../../static/three.r119.min.js"></script>
-        <script src="../../static/vanta.clouds.min.js"></script>
-    </Helmet>      
+      <script src="../../static/three.r119.min.js"></script>
+      <script src="../../static/vanta.clouds.min.js"></script>
+    </Helmet>
     <VantaCloudsAnimation>
-        <div class="home-quote">
-          <blockquote> "Man shall not live by bread alone, but by every word that comes from the mouth of God."</blockquote>
-          <img src={line} className="quote-line" alt="Logo" />
-          <p class="quote-verse">- Matthew 4:4</p>
-        </div>  
+      <div class="home-quote">
+        <blockquote>
+          {" "}
+          "Man shall not live by bread alone, but by every word that comes from
+          the mouth of God."
+        </blockquote>
+        <img src={line} className="quote-line" alt="Logo" />
+        <p class="quote-verse">- Matthew 4:4</p>
+      </div>
     </VantaCloudsAnimation>
 
     <div className="form-container">
       <Form />
       <img class="form-image" src={form_image} alt="" />
     </div>
-
   </Layout>
-
-
 )
 
 export default Home