Update tutorial to reflect most recent changes to app, change sub-header casing in tutorial pages, alter tone to imperative within sub-headings, update margin-bottom of #advanced-btn HTML element in NewVersionInfo.vue to create consistent button spacing with other tutorial pages.

Author: Jaime de Venecia

src/components/right-sidebar/tutorial/AdvancedFunctions.vue

@@ -1,61 +1,61 @@
 <template>
   <section id="advancedFunctions">
     <h6 class="tutorialHeading">Advanced Functionality</h6>
-    <h class="tutorial-sub-heading">Importing an existing component</h>
+    <h class="tutorial-sub-heading">Import an existing component</h>
     <p class="tutorialContent">
       To import an existing Vue component file, click the import button in the
-      upper right hand corner. Please note: this feature is specifically
-      intended for import of json files saved in-app. Import of other file
-      formats is not currently supported.
+      upper right hand corner. Note: this feature is specifically intended for
+      import of .json files saved in-app. Imports of other file formats is not
+      currently supported.
     </p>
-    <h class="tutorial-sub-heading">Adding Props</h>
+    <h class="tutorial-sub-heading">Add props</h>
     <p class="tutorialContent">
-      To add props, select the component and click the Props sub-menu in the
+      To add props, select the component and click on the Props sub-menu in the
       Update Component menu in the left sidebar. Enter the name of the prop you
-      want to add and click ‘+’ or press enter. Then select the added prop(s)
+      want to add and click ‘+’ or press enter. Then, select the added prop(s)
       from the dropdown and click the 'Add' Prop(s)’ button. To remove a prop,
       click the ‘x’ icon on the right side of the prop.
     </p>
     <img
-      alt="Add Props"
+      alt="Add props"
       src="../../../assets/props.png"
       class="tut-screenshot"
     />
-    <h class="tutorial-sub-heading">Adding State or Actions</h>
+    <h class="tutorial-sub-heading">Add state variables or actions</h>
     <p class="tutorialContent">
-      To add state or actions to a component, they must first be added to the
-      store. Under the Store tab, click on Store State or Store Actions, enter
-      the name and click the ‘+’ or press enter. Then, select the component to
-      which you want to add state or actions. In the State or Actions sub-menus
-      in the Update Component menu of the left sidebar, select your desired
-      state(s) or action(s) from the dropdown and click ‘Map State’ or ‘Map
-      Actions’. To remove them, click the ‘x’ icon on the right side of the
-      state or action.
+      To add state variables or actions to a component, first add them to the
+      store. Under the Store tab, click on State or Actions, enter a label, and
+      click the ‘+’ or press enter. Then, select the component to which you want
+      to add state variables or actions. In the State or Actions sub-menus
+      within the Update Component menu in the left sidebar, select your desired
+      state variable(s) or action(s) from the dropdown and click on ‘Map State’
+      or ‘Map Action(s)’. To remove any, click the ‘x’ icon on the right side of
+      the state variable or action.
     </p>
     <img
-      alt="Store Tab"
+      alt="Store tab"
       src="../../../assets/state-actions.png"
       class="tut-screenshot"
     />
-    <h class="tutorial-sub-heading">TypeScript Mode</h>
+    <h class="tutorial-sub-heading">Enable TypeScript</h>
     <p class="tutorialContent">
-      To turn TypeScript mode on or off, click on the Settings gear icon in the
-      right corner of the nav bar and click the toggle at the bottom of the
-      menu.
+      To enable TypeScript, click on the Settings gear icon in the upper-right
+      corner of the nav bar and toggle the "TypeScript" switch.
     </p>
     <img
-      alt="TypeScript Toggle"
+      alt="Enable TypeScript"
       src="../../../assets/typescript.png"
       class="tut-screenshot"
     />
-    <h class="tutorial-sub-heading">Toggle Main View</h>
+    <h class="tutorial-sub-heading">Toggle between Tree Mode & Grid Mode</h>
     <p class="tutorialContent">
-      To revert the main view to the grid view used in previous OverVue versions, click on 
-      the Settings gear icon in the right corner of the nav bar and toggle from Tree to Grid.
-      <br/>
-      <br/>
-      Please note that some functionality may be disabled or broken, as this view is now considered
-      deprecated.
+      To revert the central user interface to the grid view used in previous
+      OverVue versions, click on the Settings gear icon in the upper-right
+      corner of the nav bar and toggle "Mode" from Tree to Grid.
+      <br />
+      <br />
+      Disclaimer: some functionality may be disabled or broken, as this view is
+      now considered deprecated.
     </p>
     <img
       alt="Main View Toggle"
@@ -72,11 +72,10 @@
   </section>
 </template>
 
-<!-- COMPOSITION API SYNTAX -->
 <script setup lang="ts">
 import { useStore } from "../../../store/main.js";
-const store = useStore();
 
+const store = useStore();
 const toggleTutorial = () => store.toggleTutorial();
 </script>
 

src/components/right-sidebar/tutorial/BasicFunctions.vue

@@ -1,13 +1,12 @@
 <template>
   <section id="basicFunctions">
-    <h6 class="tutorialHeading">Getting Started in OverVue</h6>
+    <h6 class="tutorialHeading">Get Started with OverVue</h6>
     <p class="tutorialContent">
       Prototyping in OverVue is designed to be quick and efficient. Learning how
       to use OverVue will help you integrate this tool into your design process
-      to more seemlessly create Vue applications.
+      to more seamlessly create Vue applications.
     </p>
-    <br />
-    <h class="tutorial-sub-heading">Navigating OverVue</h>
+    <h class="tutorial-sub-heading">Navigate OverVue</h>
     <p class="tutorialContent">
       If you ever want to navigate back to this page, click the gear icon
       <img
@@ -16,10 +15,10 @@
         src="../../../assets/gear.png"
         class="tut-image"
       />
-      in the top navigation bar, all the way to the right, and select "Getting
-      Started" to return to the landing page.
+      in the top navigation bar, all the way to the right, and select "Welcome
+      Page" to return to the landing page.
     </p>
-    <h class="tutorial-sub-heading">Setting Up Your Project</h>
+    <h class="tutorial-sub-heading">Set up your project</h>
     <p class="tutorialContent">
       Begin by clicking the gear icon
       <img
@@ -28,58 +27,59 @@
         src="../../../assets/gear.png"
         class="tut-image"
       />
-      to customize your project. Here, you can select Slack login to push
-      project updates to your Slack teams. You can also toggle typescript to
-      make your project typescript compatible, or add Oauth for Google or
-      Github. Boilerplate for these configurations will be reflected in your
+      to customize your project.You can also toggle TypeScript to make your
+      project TypeScript compatible, or add OAuth for Google or GitHub.
+      Boilerplate code for these configurations will be reflected in your
       exported project.
     </p>
-    <h class="tutorial-sub-heading">Creating Components</h>
+    <h class="tutorial-sub-heading">Create components</h>
     <p class="tutorialContent">
       Under the Create Component menu in the left sidebar, set a component name
-      (required) and optionally select a parent component, and/or html elements
+      (required) and optionally select a parent component, and/or HTML elements
       to be nested inside the component (see Advanced Functionality to add
-      deeper nesting to html elements).
+      deeper nesting to HTML elements).
     </p>
     <img
       alt="Create Component Menu"
       src="../../../assets/create_component_box.png"
       class="tut-screenshot"
     />
     <p class="tutorialContent">
-      To use components from the Vue 3 compatible library, Vuetensils, you can 
-      switch the tab from Elements to Vuetensils. Finally, click create component!
+      To use components from the Vue 3 compatible library Vuetensils, you can
+      switch the tab from Elements to Vuetensils. Finally, click create
+      component!
     </p>
-    <h class="tutorial-sub-heading">Customizing Your Components</h>
+    <h class="tutorial-sub-heading">Customize your components</h>
     <p class="tutorialContent">
       To capture component styling, be sure to add a class attribute. You can
-      further customize your components in the sidebar by adding an id, parents,
+      further customize your components in the sidebar by adding an ID, parents,
       children, props, state, or actions - all of which will be included in your
       exported code. To update a component after its creation, select the
       component on the tree and the Update Component Menu will appear in the
       left sidebar.
     </p>
-    <h class="tutorial-sub-heading">Building Out Your Prototype</h>
+    <h class="tutorial-sub-heading">Build out your prototype</h>
     <p class="tutorialContent">
-      To manipulate your prototype, you can drag and drop your components on
-      the tree. This will alter the component relationships and the code will
-      reflect the changes. To control the tree view, you focus on the tree background
-      by clicking it, and use keyboard controls to move around and zoom in.
+      To manipulate your prototype, you can drag and drop your components on the
+      tree. This will alter the component relationships and the code will
+      reflect the changes. To control the tree view, you focus on the tree
+      background by clicking it, and use keyboard controls to move around and
+      zoom in.
     </p>
-    <h class="controls">Controls:</h>
+    <h class="controls">Tree Mode Controls:</h>
     <p class="tutorialContent">
       Directional Movement: Arrow Keys
-      <br/>
+      <br />
       Zoom: Scroll Wheel | Comma ( , ) | Period ( . )
-      <br/>
+      <br />
       Return to Root: Slash ( / )
     </p>
     <img
       alt="Tree View"
       src="../../../assets/tree.png"
       class="tut-screenshot"
     />
-    <h class="tutorial-sub-heading">Deleting Components</h>
+    <h class="tutorial-sub-heading">Delete components</h>
     <p class="tutorialContent">
       To delete a component, select it and click ‘Delete Current Component’ in
       the Update Component menu.
@@ -89,19 +89,19 @@
       src="../../../assets/delete-component.png"
       class="tut-screenshot"
     />
-    <h class="tutorial-sub-heading">Component Details</h>
+    <h class="tutorial-sub-heading">View component details</h>
     <p class="tutorialContent">
       In the right sidebar, there is a component details tab where you can
       access details about the active/selected component. Here, you can toggle
-      between a live updated code snippet, component hierarchy diagram, and
-      project routing visualization.
+      between a dynamically-updated code preview, HTML element hierarchy
+      diagram, and project routing visualization.
     </p>
     <img
       alt="Component Details"
       src="../../../assets/component-details.png"
       class="tut-screenshot"
     />
-    <h class="tutorial-sub-heading">Routes</h>
+    <h class="tutorial-sub-heading">View routes</h>
     <p class="tutorialContent">
       You can find all of your routes in the Routes tab. To add a route, enter
       the name in the input field and click the ‘+’, or press enter. Once added,
@@ -114,19 +114,19 @@
       src="../../../assets/routes.png"
       class="tut-screenshot"
     />
-    <h class="tutorial-sub-heading">Saving or Exporting Your Project</h>
+    <h class="tutorial-sub-heading">Save or export your project</h>
     <p class="tutorialContent">
-      When you are satisfied with your project, you can save it or export it
-      using the buttons in the top right.
+      When you are satisfied with your project, you can save or export it using
+      the buttons in the upper-right corner of the nav bar.
     </p>
     <p class="tutorialContent">
       <img
         style="vertical-align: middle"
         alt="save"
         src="../../../assets/save.png"
         class="tut-image"
-      />Save your OverVue project progress as a JSON file to access it again
-      later<br />
+      />Save your current OverVue project layout as a JSON file to access it
+      again later<br />
       <img
         style="vertical-align: middle"
         alt="import"
@@ -139,13 +139,14 @@
         alt="export"
         src="../../../assets/export.png"
         class="tut-image"
-      />Export boilerplate code for your whole project or a single component<br />
+      />Export boilerplate code for your whole project, or just for a single
+      component<br />
     </p>
     <q-btn
       class="tut-btn"
       color="secondary"
       id="version-btn"
-      label="Checkout Our New Features"
+      label="New Features in Version 10"
       @click="nextTab"
     />
     <q-btn
@@ -159,11 +160,11 @@
 <script setup lang="ts">
 import { useStore } from "../../../store/main.js";
 
-const store = useStore();
 const emit = defineEmits(["nextTab"]);
+const nextTab = () => emit("nextTab");
 
+const store = useStore();
 const toggleTutorial = () => store.toggleTutorial();
-const nextTab = () => emit("nextTab");
 </script>
 
 <style scoped lang="scss">

src/components/right-sidebar/tutorial/Landing.vue

@@ -14,7 +14,8 @@
     />
     <p id="new-text"></p>
     <p id="new-text"></p>
-    <p id="new-text">New To Overvue?</p>
+    <p id="new-text">New to Overvue?</p>
+    <br />
     <q-btn
       class="tut-btn"
       color="secondary"
@@ -34,14 +35,14 @@
 // @ts-nocheck
 // No check for the shell
 import { useStore } from "../../../store/main.js";
-
 const { shell } = window;
 
-const store = useStore();
 const emit = defineEmits(["nextTab", "versionTab"]);
+const nextTab = () => emit("nextTab");
 
+const store = useStore();
 const toggleTutorial = () => store.toggleTutorial();
-const nextTab = () => emit("nextTab");
+
 const openUrl = (url: string) => shell.openExternal(url, { activate: true });
 </script>