fix: further fixes for build

stjudecloud · Dec 28, 2020 · f1a1990 · f1a1990
1 parent 0d66bae
commit f1a1990
Show file tree

Hide file tree

Showing 9 changed files with 5,216 additions and 5,437 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -61,13 +61,14 @@ let plugins = [
         {
           resolve: `gatsby-remark-autolink-headers`,
           options: {
+            offsetY: 85,
             icon: `<svg height="512pt" viewBox="-31 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m30 316c-16.570312 0-30 13.429688-30 30 0 16.566406 13.429688 30 30 30h59l-14 106c0 16.566406 13.429688 30 30 30s30-13.433594 30-30l14-106h120l-14 106c0 16.566406 13.429688 30 30 30s30-13.433594 30-30l14-106h61c16.570312 0 30-13.433594 30-30 0-16.570312-13.429688-30-30-30h-53l16-120h67c16.570312 0 30-13.433594 30-30 0-16.570312-13.429688-30-30-30h-59l14-106c0-16.570312-13.429688-30-30-30s-30 13.429688-30 30l-14 106h-120l14-106c0-16.570312-13.429688-30-30-30s-30 13.429688-30 30l-14 106h-61c-16.570312 0-30 13.429688-30 30 0 16.566406 13.429688 30 30 30h53l-16 120zm143-120h120l-16 120h-120zm0 0"/></svg>`,
           },
         },
         {
           resolve: `gatsby-remark-copy-linked-files`,
           options: {
-            ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`],
+            ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`, `md`],
           },
         },
         {
@@ -114,7 +115,15 @@ let plugins = [
             icons: "svg",
           },
         },
-        `gatsby-remark-check-links`,
+        `gatsby-plugin-catch-links`,
+        {
+          resolve: "gatsby-remark-external-links",
+          options: {
+            target: "_blank",
+            rel: "noopener",
+          },
+        },
+        `gatsby-remark-smartypants`,
       ],
     },
   },
@@ -153,6 +162,18 @@ let plugins = [
   },
 ]
 
+if (process.env.INTERCOM_APP_ID) {
+  console.log(`Loading Intercom with app id: "${process.env.INTERCOM_APP_ID}"`)
+  plugins.push({
+    resolve: "gatsby-plugin-intercom-spa",
+    options: {
+      app_id: process.env.INTERCOM_APP_ID,
+      include_in_development: true,
+      delay_timeout: 500,
+    },
+  })
+}
+
 if (process.env.GATSBY_ALGOLIA_APP_ID) {
   plugins.push({
     resolve: `gatsby-plugin-algolia`,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,8 @@
     "gatsby-background-image": "^1.3.1",
     "gatsby-image": "^2.5.0",
     "gatsby-plugin-algolia": "^0.16.1",
+    "gatsby-plugin-catch-links": "^2.7.0",
+    "gatsby-plugin-intercom-spa": "^0.2.0",
     "gatsby-plugin-manifest": "^2.6.1",
     "gatsby-plugin-offline": "^3.4.0",
     "gatsby-plugin-purgecss": "^5.0.0",
@@ -27,10 +29,11 @@
     "gatsby-plugin-sharp": "^2.9.1",
     "gatsby-plugin-sitemap": "^2.8.0",
     "gatsby-remark-admonitions": "^0.1.0",
-    "gatsby-remark-autolink-headers": "^2.6.0",
-    "gatsby-remark-check-links": "^2.1.0",
+    "gatsby-remark-autolink-headers": "^2.9.0-next.1",
     "gatsby-remark-copy-linked-files": "^2.5.0",
+    "gatsby-remark-external-links": "^0.0.4",
     "gatsby-remark-images": "^3.6.0",
+    "gatsby-remark-smartypants": "^2.7.0",
     "gatsby-remark-table-of-contents": "^0.2.1",
     "gatsby-remark-vscode": "^3.2.0",
     "gatsby-source-filesystem": "^2.5.0",
@@ -44,6 +47,7 @@
     "react-helmet": "^6.1.0",
     "react-hotkeys": "^2.0.0",
     "react-instantsearch-dom": "^6.8.2",
+    "react-toastify": "^6.2.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
   },
   "devDependencies": {

diff --git a/src/components/docs/doc.js b/src/components/docs/doc.js
@@ -13,6 +13,8 @@ import { ContentsSidebarLeft, ActionSidebarRight } from "./sidebars"
 import SearchModal from "../search"
 import Chevron from "../../images/icons/chevron.svg"
 
+import { ToastContainer } from "react-toastify"
+
 class BaseLayout extends Component {
   static defaultProps = {
     searchModal: null,
@@ -101,6 +103,7 @@ class BaseLayout extends Component {
 
     return (
       <div className="bg-white text-gray-500 antialiased js-focus-visible">
+        <ToastContainer />
         <SearchModal
           ref={element => (this.searchModal = element)}
           algoliaIndex="docs"

diff --git a/src/components/docs/sidebars/ActionsSidebarRight.js b/src/components/docs/sidebars/ActionsSidebarRight.js
@@ -3,15 +3,25 @@ import PropTypes from "prop-types"
 import Question from "../../../images/icons/question.svg"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
+import { toast } from "react-toastify"
 
 function askAQuestion() {
-  let mailto = "mailto:support@stjude.cloud"
-  mailto += "?subject=Question about St. Jude Cloud docs"
-  mailto +=
-    "&body=Hello%2C%0A%0AI%27ve%20got%20a%20question%20about%20the%20St.%20Jude%20Cloud%20docs.Specifically,%20this%20page%0A%0A%20%20%20%20%20%20"
-  mailto += encodeURI(window.location)
-  mailto += "%0A%0A%5BYOUR%20QUESTION%20HERE%5D.%0A%0AThanks%21"
-  window.location.href = mailto
+  if (window.Intercom) {
+    window.Intercom("showNewMessage")
+  } else {
+    toast.error(
+      "Looks like our chat isn't enabled in this environment! Please email us at support@stjude.cloud with this error.",
+      {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      }
+    )
+  }
 }
 
 function editOnGitHub(fileAbsolutePath) {
@@ -38,7 +48,7 @@ const ActionSidebarRight = ({ fileAbsolutePath }) => {
           Actions
         </div>
         <button
-          className="flex justify-center w-3/5 rounded bg-coolGray-800 text-white font-semibold px-4 py-2 my-2"
+          className="flex justify-center w-3/5 rounded bg-coolGray-800 text-white font-semibold px-4 py-2 my-2 disabled:opacity-50"
           onClick={askAQuestion}
         >
           <Question className="mr-2" />

diff --git a/src/components/docs/sidebars/ContentSidebarLeft.js b/src/components/docs/sidebars/ContentSidebarLeft.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import { ScrollContainer } from "gatsby-react-router-scroll"
 import { Link } from "gatsby"
 import Chevron from "../../../images/icons/chevron.svg"
 import ModulePopUp from "./ModulePopUp"
@@ -94,30 +93,28 @@ const ContentsSidebarLeft = ({
           </div>
           <div className="absolute inset-x-0">
             <div className="h-screen overflow-y-scroll">
-              <ScrollContainer key="content-sidebar">
-                <div className="my-2 mx-3 pb-60">
-                  {currentChapters.map(e => {
-                    return (
-                      <ul className="chapter">
-                        <li className="title">{e.title}</li>
-                        {e.pages.map(page => {
-                          return (
-                            <li
-                              className={
-                                (currentPathBeingViewed === page.path
-                                  ? "active "
-                                  : "") + "page"
-                              }
-                            >
-                              <Link to={page.path}>{page.title}</Link>
-                            </li>
-                          )
-                        })}
-                      </ul>
-                    )
-                  })}
-                </div>
-              </ScrollContainer>
+              <div className="my-2 mx-3 pb-60">
+                {currentChapters.map(e => {
+                  return (
+                    <ul className="chapter">
+                      <li className="title">{e.title}</li>
+                      {e.pages.map(page => {
+                        return (
+                          <li
+                            className={
+                              (currentPathBeingViewed === page.path
+                                ? "active "
+                                : "") + "page"
+                            }
+                          >
+                            <Link to={page.path}>{page.title}</Link>
+                          </li>
+                        )
+                      })}
+                    </ul>
+                  )
+                })}
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/styles/base.scss b/src/styles/base.scss
@@ -10,21 +10,3 @@ mark {
   @apply px-2;
   @apply py-1;
 }
-
-/**
- * Fix direct targeting of anchor tags being hidden
- * behind the navbar
- **/
-
-:target {
-  &:before {
-    content: "";
-    display: block;
-    height: 110px;
-    margin: -110px 0 0;
-  }
-
-  & svg {
-    @apply text-opacity-100 #{!important};
-  }
-}
diff --git a/src/styles/contentsbar.scss b/src/styles/contentsbar.scss
@@ -33,14 +33,6 @@
     .active {
       @apply text-purple;
       @apply font-semibold;
-
-      &:before {
-        @apply absolute;
-        font-size: 2rem;
-        line-height: 22.5px;
-        translate: -150%;
-        content: "•";
-      }
     }
   }
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+@import "~react-toastify/dist/ReactToastify.css";
 @import "./base.scss";
 
 @import "./admonitions.scss";