Updated documentation and added GitHub logo to app

README.md

@@ -5,7 +5,7 @@
 <br />
 <p align="center">
     <h2 align="center">Propguard</h2>
-    <p align="center">Propguard is a webapp that teaches people how to start writing basic flight code with technologies like PX4, MAVSDK, and Python.</p>
+    <p align="center">Propguard is a Codecademy-style webapp that lets you create and learn from interactive coding tutorials. Client-side only, no servers needed except for hosting instances.</p>
 </p>
 
 ## Table of Contents
@@ -18,15 +18,15 @@
 
 ## What is this?
 
-Propguard is a web app built for Missouri S&T's Multirotor Robot Design Team meant to preserve the knowledge and experience of its past members. Propguard teaches new members how to start working on the team's flight code via a Codeacademy-like tutorial interface.
+Propguard is a web app built for Missouri S&T's Multirotor Robot Design Team meant to preserve the knowledge and experience of its past members. Propguard teaches new members how to start working on the team's flight code via a Codeacademy-like tutorial interface that includes a simple text editor and basic mock-output.
 
-It includes a wiki that will serve as the collective knowledge of all the past members of the team. During our flight tests we always run into issues, and some of those issues happen to be things that have been solved in the past. We obviously don't want to keep making the same mistakes.
-
-The tech stack for the front-end is Typescript and ReactJS.
+This app also includes a tutorial editor for creating and editing existing tutorials. In order to make this project client-side only, we use GatbyJS which lets us more easily manage tutorials as JSON files. In order to update tutorials on the live instance, we can just edit the JSON files in `src/data` and update the repo.
 
 ## Usage
 
-We're working on getting a live version up so for now you'll have to run this project locally on your machine. See the [**Get Started**](#get-started) section for instructions on how to run it.
+Continue on if you want to run this locally. Otherwise [go here](https://missourimrr.github.io/propguard/) for a quick demo.
+
+**For more info on how to use Propguard, reference our [user guide](USERGUIDE.md).**
 
 ## Get started
 
@@ -72,7 +72,7 @@ yarn start
 
 ## Roadmap and progress
 
-See the [Projects section](https://github.com/MissouriMRR/propguard/projects) for more information on deadlines and tasks that need to be done. We expect to have Propguard's editor ready before the summer of 2021.
+See the [Projects section](https://github.com/MissouriMRR/propguard/projects) for more tasks and feature improvements. Otherwise most functionality of Propguard is complete.
 
 <!-- Shield links here -->
 
@@ -83,7 +83,7 @@ See the [Projects section](https://github.com/MissouriMRR/propguard/projects) fo
 
 ## Adding/editing tutorials
 
-[Visit here](https://github.com/MissouriMRR/propguard/#contributing-tutorials.md) for more information about contributing your own Propguard tutorials.
+[Visit here](USERGUIDE.md#contributing-tutorials) for more information about contributing your own Propguard tutorials.
 
 We'll flesh this out more when we finish the editor!
 

USERGUIDE.md

@@ -0,0 +1,37 @@
+# Propguard User Guide
+
+For those who are using Propguard to learn and using Propguard to create tutorials.
+
+Don't find a good answer here? Please open up an issue on the repo!
+
+## Table of Contents
+
+- [For students](#for-students)
+    - [How do I reset my progress](#how-do-i-reset-my-progress)
+    - [Why is the error checking so specific](#why-is-the-error-checking-so-specific)
+- [For teachers (tutorial creators)](#for-teachers)
+    - [Basics for tutorial editing](#basics-for-tutorial-editing)
+		- [Contributing tutorials](#contributing-tutorials)
+		- [Why is this process a little annoying?](#why-is-this-process-a-little-annoying)
+
+## For students
+### How to I reset my progress?
+
+Easy, just delete your cookies for the website. You should be able to delete cookies from a particular website without touching the rest of your browser.
+
+### Why is the error checking so specific
+
+Since the main purpose of Propguard was meant to teach autonomous fight logic, it would be difficult to verify that the user actually wrote proper code without running a simulation (which could be a future feature). In order to keep things simple, error-checking is just raw string checks rather than running a code execution engine or running Python tests which would make more sense.
+
+## For teachers
+### Basics for tutorial editing
+
+Propguard stores tutorials in a JSON file format. The Propguard editor has a way of creating tutorials with a visual editor that exports to JSON files. Right now there's no way of saving progress other than exporting the tutorial, but you are able to upload existing tutorial files and edit from there.
+
+### Contributing tutorials
+
+Once you have finished a tutorial and would like it on the live instances, make a branch on this repo named `tutorial/your-tutorial-name`. On this branch, upload the tutorial anywhere inside the `src/data/` folder. You can run your own local instance to verify that it shows up on the application. Once you're sure that it works, make a pull request and once approved, you should be able to see it on the website.
+
+### Why is this process a little annoying?
+
+Unfortunately, it's very difficult for a university organization to host an app with functionality that depends on a backend/cloud solution due to cost and maintenance reasons. If you find a maintainer, making Propguard cloud-based could be a nice overhaul. For now, making Propguard client-side makes it simple to maintain.

src/components/navbar/index.tsx

@@ -4,6 +4,8 @@ import { Link } from "gatsby";
 import { Icon } from "@iconify/react";
 import listIcon from "@iconify/icons-ic/round-format-list-bulleted";
 import pencilIcon from "@iconify/icons-mdi/pencil";
+import bxlGithub from "@iconify-icons/bx/bxl-github";
+
 import { useLocalStorageView } from "../hooks/index";
 
 import { accent, textPrimary, grey } from "../../constants";
@@ -15,7 +17,7 @@ const NavWrapper: AnyStyledComponent = styled.nav`
   position: sticky;
   top: 0;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   border: 1px solid ${grey};
   color: ${textPrimary};
@@ -27,6 +29,13 @@ const NavWrapper: AnyStyledComponent = styled.nav`
   }
 `;
 
+const TopIcons: AnyStyledComponent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
 interface NavIconProps {
   readonly isSelected: boolean;
 }
@@ -86,25 +95,30 @@ const Navbar: React.FC = (): JSX.Element => {
 
   return (
     <NavWrapper>
-      <NavLogo
-        to="/"
-        onClick={openTutorialComponent}
-        $isSelected={componentView === "TutorialComponent"}
-      >
-        <Logo />
-      </NavLogo>
-      <Link to="/">
-        <NavIcon
-          icon={listIcon}
-          onClick={openTutorialSelector}
-          $isSelected={componentView === "TutorialSelector"}
-        />
-      </Link>
-      <Link to="/editor">
-        <NavIcon
-          icon={pencilIcon}
-          $isSelected={componentView === "TutorialEditor"}
-        />
+      <TopIcons>
+        <NavLogo
+          to="/"
+          onClick={openTutorialComponent}
+          $isSelected={componentView === "TutorialComponent"}
+        >
+          <Logo />
+        </NavLogo>
+        <Link to="/">
+          <NavIcon
+            icon={listIcon}
+            onClick={openTutorialSelector}
+            $isSelected={componentView === "TutorialSelector"}
+          />
+        </Link>
+        <Link to="/editor">
+          <NavIcon
+            icon={pencilIcon}
+            $isSelected={componentView === "TutorialEditor"}
+          />
+        </Link>
+      </TopIcons>
+      <Link to="https://github.com/MissouriMRR/propguard">
+        <NavIcon icon={bxlGithub} />
       </Link>
     </NavWrapper>
   );