Merge branch 'master' into PreRelease

public/index.html

@@ -41,4 +41,16 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  
+  <!-- Hotjar Tracking Code for https://www.camscode.com -->
+  <script>
+    (function(h,o,t,j,a,r){
+        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+        h._hjSettings={hjid:2739788,hjsv:6};
+        a=o.getElementsByTagName('head')[0];
+        r=o.createElement('script');r.async=1;
+        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+        a.appendChild(r);
+    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+  </script>
 </html>

src/components/App.js

@@ -4,7 +4,6 @@ import "./css/App.css";
 import Navigation from './Navigation';
 import Github from './Github';
 import Articles from './Articles';
-import ArticleEditor from './ArticleEditor';
 import About from './About';
 import Intro from './Intro';
 
@@ -19,7 +18,6 @@ const App = (props) => {
             <Route path="/github" render={(props) => <Github {...props} />} />
             <Route path="/about" component={About} />
             <Route path="/articles" component={Articles} />
-            <Route path="/articleEditor" component={ArticleEditor} />
           </Switch>
         </div>
       </div>

src/components/Article.js

@@ -1,49 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Theater from './subcomponents/Theater';
 import './css/Articles.css';
 
 const Article = ({article}) => {
-    const [show, setShow] = useState("");
-    const [currArticle, setCurrArticle] = useState("");
-
-    useEffect(()=>{
-        if (currArticle === ""){ // If no articles have been opened
-            if (show === "") {
-                // Set the current article and initiate the open animation
-                setCurrArticle(article);
-                setShow("open");
-                
-                // Once the animation runs, open the entire article
-                setTimeout(() =>{
-                    setShow("show");
-                }, 1024)
-            }
-
-        } else if (currArticle !== article) { // If we've changed articles
-            // Change currArticle to the actual current article and initiate close animation
-            setCurrArticle(article);
-            setShow("close");
-
-            // Step through the close animation, open animation, and fully opening the article
-            setTimeout(()=>{
-                setShow("");
-
-                setTimeout(()=>{
-
-                    setShow("open");
-
-                    setTimeout(() =>{
-                        setShow("show");
-                    }, 1024);
-                }, 1024);
-            }, 24);
-        }
-    }, [currArticle, article, show]);
-    
     let linkProcessor = (text) => {
         /**
          * Given some text, processes and returns jsx with any link represented as an anchor
          */
+
         let output = [""]; // Stores all text in a list
         let loc = 0; // Stores the current location in output that we're working with
         let tmp;
@@ -162,7 +126,6 @@ const Article = ({article}) => {
         return [...output.keys()].map((i)=>{ // Format text and return as jsx
             
             let text = linkProcessor(output[i]); // Process links
-            text = newLineProcessor(text);
             
             if (type[i] === 0){ // Return default text type
 
@@ -189,7 +152,7 @@ const Article = ({article}) => {
     };
 
     return (
-        <div className={"article " + show}>
+        <div className="article">
             <Theater
             title={article.title}
             description={article.desc}

src/components/ArticleEditor.js

@@ -1,34 +0,0 @@
-import React, { useState } from 'react';
-import Article from './Article';
-import "./css/ArticleEditor.css";
-
-const ArticleEditor = (props) => {
-    const [content, setContent] = useState("Hello World");
-
-    let article = {
-        "id":"0",
-        "title": "Article Editor",
-        "desc":"This is a place to edit articles",
-        "contents": content
-    };
-
-    let copyToClipboard = () => {
-        navigator.clipboard.writeText(content).then(function() {
-        console.log('Async: Copying to clipboard was successful!');
-        }, function(err) {
-            console.error('Async: Could not copy text: ', err);
-        });
-    };
-
-    return (
-    <div className="ArticleEditor">
-        <div id="toolbar" className="toolbar">
-            <div className="btn" onClick={copyToClipboard()}>Copy to Clipboard</div>
-        </div>
-        <Article article={article}/>
-        <textarea onInput={e=>{setContent(e.target.value)}}></textarea>
-    </div>
-    );
-};
-
-export default ArticleEditor;

src/components/css/ArticleEditor.css

@@ -1,42 +0,0 @@
-.ArticleEditor textarea {
-    width:100%;
-    height: 35vh;
-    border-style: solid;
-    border-color: lightgray;
-    border-radius: 2px;
-    border-width: 2px;
-    padding: 0.4em 0.4em 0.4em 0;
-    text-align: left;
-}
-
-.ArticleEditor .toolbar {
-    width: 100%;
-    height: 56px;
-    display: flex;
-}
-
-.ArticleEditor .toolbar .btn {
-    color: white;
-    background-color: darkgreen;
-    text-align: center;
-    align-items:center;
-    justify-content: center;
-    display: flex;
-    padding-left: 3px;
-    padding-right: 3px;
-}
-.ArticleEditor .toolbar .btn:hover{
-    background-color: #005400
-}
-
-.article .open {
-    max-height:100vh;
-}
-
-.article .Close {
-    max-height:100vh;
-}
-
-.article {
-    max-height:100vh;
-}

src/components/css/Articles.css

@@ -3,24 +3,6 @@
     align-items: center;
     display: flex;
     flex-direction: column;
-    max-height:0;
-    overflow: hidden;
-    transition: max-height 1s ease;
-
-}
-
-.article.open {
-    max-height:100vh;
-    transition: max-height 1s ease;
-}
-
-.article.close {
-    max-height:100vh;
-}
-
-.article.show {
-    max-height:none;
-
 }
 
 .article .content {

src/components/css/Theater.css

@@ -15,7 +15,7 @@
 
 .theater-bg {
     
-    height: inherit;
+    height: 100%;
     width:100%;
     background-size: cover;
     background-image: url('../../img/background.webp');

src/components/subcomponents/Listing.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import '../css/Listing.css';
 
 const Listing = (props) => {
@@ -12,12 +11,12 @@ const Listing = (props) => {
      */
     return (
         <div className="listing">
-            <Link to={props.link}>
+            <a href={props.link}>
                 <div className="title">{props.title}</div>
                 <div className="content">
                     {props.children}
                 </div>
-            </Link>
+            </a>
         </div>
     );    
 };