feat: redirects homepage to /docs/

stjudecloud · Jan 29, 2021 · 45cd7be · 45cd7be
1 parent 71afc0f
commit 45cd7be
Showing 1 changed file with 73 additions and 57 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,11 +1,13 @@
 import React from "react"
-import { Link, graphql, useStaticQuery } from "gatsby"
+import { Link, graphql, useStaticQuery, navigate } from "gatsby"
 import DocsLogo from "../images/icons/docs-logo.svg"
 import Chevron from "../images/icons/chevron.svg"
 import BackgroundImage from "gatsby-background-image"
 import Img from "gatsby-image"
 
-export default () => {
+const redirectToDocs = true
+
+const HomePage = () => {
   const data = useStaticQuery(
     graphql`
       query MyQuery {
@@ -56,65 +58,79 @@ export default () => {
 
   const logo = data.logo.childImageSharp.fixed
 
-  return (
-    <BackgroundImage
-      className="absolute h-screen w-screen bg-auto bg-right"
-      fluid={fluidImages}
-      style={{
-        backgroundPosition: ["center right", "top right", "10% 0%", "0% 100%"],
-        backgroundSize: ["auto 90%", "auto 50%", "35% auto", "auto 50%"],
-      }}
-    >
-      <Img
-        fixed={logo}
-        className="absolute select-none"
-        style={{ top: 25, left: 25, width: "231px", height: "45px" }}
-      />
-      <div
-        className="flex items-center h-screen w-screen"
+  if (redirectToDocs) {
+    navigate('/docs/')
+    return null
+  } else {
+    return (
+      <BackgroundImage
+        className="absolute h-screen w-screen bg-auto bg-right"
+        fluid={fluidImages}
         style={{
-          padding: "0rem 0rem 0rem 10%",
+          backgroundPosition: [
+            "center right",
+            "top right",
+            "10% 0%",
+            "0% 100%",
+          ],
+          backgroundSize: ["auto 90%", "auto 50%", "35% auto", "auto 50%"],
         }}
       >
-        <div className="mb-20">
-          <div className="mb-20 select-none">
-            <h1 className="text-5xl font-bold">St. Jude Cloud</h1>
-            <h1 className="mt-6 text-purple text-6xl font-bold">University</h1>
-            <p className="mt-10 text-coolGray-500 text-xl">
-              Explore the comprehensive <br />
-              education playbook for using <br />
-              St. Jude Cloud.
-            </p>
-          </div>
+        <Img
+          fixed={logo}
+          className="absolute select-none"
+          style={{ top: 25, left: 25, width: "231px", height: "45px" }}
+        />
+        <div
+          className="flex items-center h-screen w-screen"
+          style={{
+            padding: "0rem 0rem 0rem 10%",
+          }}
+        >
+          <div className="mb-20">
+            <div className="mb-20 select-none">
+              <h1 className="text-5xl font-bold">St. Jude Cloud</h1>
+              <h1 className="mt-6 text-purple text-6xl font-bold">
+                University
+              </h1>
+              <p className="mt-10 text-coolGray-500 text-xl">
+                Explore the comprehensive <br />
+                education playbook for using <br />
+                St. Jude Cloud.
+              </p>
+            </div>
 
-          <div>
-            <Link
-              to="/docs/"
-              className="flex flex-row justify-between w-full cursor-pointer border-2 hover:border-purple text-black hover:text-purple transition duration-200 call-to-action-btn"
-            >
-              <div className="flex items-center">
-                <DocsLogo width="130px" />
-              </div>
-              <div className="mx-4 flex flex-col justify-center text-inherit select-none">
-                <h5 className="text-2xl font-semibold text-inherit mb-2">
-                  View the Docs
-                </h5>
-                <p className="text-coolGray-500 text-md">
-                  Read the technical documentation for the St. Jude Cloud
-                  project.
-                </p>
-              </div>
-              <div className="flex items-center">
-                <Chevron
-                  className="text-inherit fill-current"
-                  width="20px"
-                  height="20px"
-                />
-              </div>
-            </Link>
+            <div>
+              <Link
+                to="/docs/"
+                className="flex flex-row justify-between w-full cursor-pointer border-2 hover:border-purple text-black hover:text-purple transition duration-200 call-to-action-btn"
+              >
+                <div className="flex items-center">
+                  <DocsLogo width="130px" />
+                </div>
+                <div className="mx-4 flex flex-col justify-center text-inherit select-none">
+                  <h5 className="text-2xl font-semibold text-inherit mb-2">
+                    View the Docs
+                  </h5>
+                  <p className="text-coolGray-500 text-md">
+                    Read the technical documentation for the St. Jude Cloud
+                    project.
+                  </p>
+                </div>
+                <div className="flex items-center">
+                  <Chevron
+                    className="text-inherit fill-current"
+                    width="20px"
+                    height="20px"
+                  />
+                </div>
+              </Link>
+            </div>
           </div>
         </div>
-      </div>
-    </BackgroundImage>
-  )
+      </BackgroundImage>
+    )
+  }
 }
+
+export default HomePage