HowTo.tsx

Created HowTo route to shorten home page. Added about/tutorial video to homepage.

Fixed up word count stuff to my liking.

react-app-env.d.tsx

@@ -1,3 +1,4 @@
 declare module "*.png";
 declare module "*.jpeg";
 declare module "*.wav";
+declare module "*.mp4";

src/App.tsx

@@ -6,6 +6,7 @@ import Home from "./pages/Home";
 import About from "./pages/About";
 import NotFound from "./pages/NotFound";
 import "react-calendar/dist/Calendar.css";
+import HowTo from "./pages/HowTo";
 
 export default function App() {
   return (
@@ -15,6 +16,7 @@ export default function App() {
         <Route path="/projects" element={<Projects />} />
         <Route path="/edit/:id" element={<Editor />} />
         <Route path="/about" element={<About />} />
+        <Route path="/how-to" element={<HowTo />} />
         <Route path="/*" element={<NotFound />} />
       </Routes>
     </HashRouter>

src/components/Navbar.tsx

@@ -18,25 +18,42 @@ const LinkList = () => {
         </a>
       </li>
       <li>
-        <a href="#/about" className={STYLES.NAV_ANCHOR}>
-          About
-        </a>
-      </li>
-      <li>
-        <a href="https://ca.linkedin.com/in/parrottjrs">
-          <Linkedin className={STYLES.NAV_ANCHOR} strokeWidth={1} />
-        </a>
-      </li>
-      <li>
-        <a href="https://github.com/parrottjrs">
-          <Github className={STYLES.NAV_ANCHOR} strokeWidth={1} />
+        <a href="#/how-to" className={STYLES.NAV_ANCHOR}>
+          How to
         </a>
       </li>
       <li>
-        <a href="mailto:[email protected]">
-          <Mail className={STYLES.NAV_ANCHOR} strokeWidth={1} />
+        <a href="#/about" className={STYLES.NAV_ANCHOR}>
+          About
         </a>
       </li>
+
+      <div className="flex flex-col">
+        <li>
+          <a
+            href="https://ca.linkedin.com/in/parrottjrs"
+            aria-label="Jordan Parrott on LinkedIn"
+          >
+            <Linkedin className={STYLES.NAV_SOCIAL} strokeWidth={1} />
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://github.com/parrottjrs"
+            aria-label="Jordan Parrott on Github"
+          >
+            <Github className={STYLES.NAV_SOCIAL} strokeWidth={1} />
+          </a>
+        </li>
+        <li>
+          <a
+            href="mailto:[email protected]"
+            aria-label="E-mail Jordan Parrott"
+          >
+            <Mail className={STYLES.NAV_SOCIAL} strokeWidth={1} />
+          </a>
+        </li>
+      </div>
     </ul>
   );
 };
@@ -67,6 +84,12 @@ const Dropdown = () => {
               </a>
             </DropdownMenu.Item>
             <DropdownMenu.Separator className={STYLES.DROPDOWN_NAV_SPACER} />
+            <DropdownMenu.Item>
+              <a href="#/how-to" className={STYLES.DROPDOWN_NAV_ANCHOR}>
+                How to
+              </a>
+            </DropdownMenu.Item>
+            <DropdownMenu.Separator className={STYLES.DROPDOWN_NAV_SPACER} />
             <DropdownMenu.Item>
               <a href="#/about" className={STYLES.DROPDOWN_NAV_ANCHOR}>
                 About
@@ -75,23 +98,32 @@ const Dropdown = () => {
             <DropdownMenu.Separator className={STYLES.DROPDOWN_NAV_SPACER} />
             <div className="flex flex-row justify-left pt-1 pb-2 pl-3">
               <DropdownMenu.Item>
-                <a href="https://ca.linkedin.com/in/parrottjrs">
+                <a
+                  href="https://ca.linkedin.com/in/parrottjrs"
+                  aria-label="Jordan Parrott on LinkedIn"
+                >
                   <Linkedin
                     className={STYLES.DROPDOWN_NAV_SOCIALS}
                     strokeWidth={1}
                   />
                 </a>
               </DropdownMenu.Item>
               <DropdownMenu.Item>
-                <a href="https://github.com/parrottjrs">
+                <a
+                  href="https://github.com/parrottjrs"
+                  aria-label="Jordan Parrott on Github"
+                >
                   <Github
                     className={STYLES.DROPDOWN_NAV_SOCIALS}
                     strokeWidth={1}
                   />
                 </a>
               </DropdownMenu.Item>
               <DropdownMenu.Item>
-                <a href="mailto:[email protected]">
+                <a
+                  href="mailto:[email protected]"
+                  aria-label="Email Jordan Parrott"
+                >
                   <Mail
                     className={STYLES.DROPDOWN_NAV_SOCIALS}
                     strokeWidth={1}
@@ -108,7 +140,7 @@ const Dropdown = () => {
 
 export default function Navbar() {
   return (
-    <header className="z-10  self-center mb-5 md:mb-10 md:h-20 bg-gray-800/95 sticky top-0 opacity-95 flex flex-row items-center justify-between p-4 border-gray-200 bg-gray-50 dark:bg-gray-800/95 dark:border-gray-700">
+    <header className="z-10 self-center mb-5 h-24 md:mb-10 md:h-30 bg-gray-800/95 sticky top-0 opacity-95 flex flex-row items-center justify-between p-4 border-gray-200 bg-gray-50 dark:bg-gray-800/95 dark:border-gray-700">
       <img src={words} alt="Think-Write" className="h-6 md:h-12 md:px-7" />
       <div className="flex items-center">
         <nav

src/components/ProjectList.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import NavigateToEdit from "./NavigateToEdit";
-import { getLocalProjects } from "../utils/utils";
+import { getLocalProjects, wordCounter } from "../utils/utils";
 import { Warning } from "./Warning";
 import { STYLES } from "../utils/constants";
 
@@ -19,10 +19,9 @@ export default function ProjectList() {
   };
 
   return projects.map((project) => {
-    const { id, title, modified, sessions } = project;
-    let totalWords = 0;
+    const { id, title, modified, sessions, hot } = project;
+    let totalWords = wordCounter(hot);
     sessions.forEach((session) => (totalWords += session.wordCount));
-    console.log(totalWords);
     return (
       <React.Fragment key={id}>
         <div className={STYLES.PROJECT_GRID_DIV}>

src/components/SessionDialog.tsx

@@ -57,12 +57,13 @@ export default function SessionDialog({ title, onSubmit }) {
                 </React.Fragment>
               ) : (
                 <input
-                  className="ml-2 p-1 bg-zinc-900 text-sm md: text-lg text-white font-thin tracking-wider rounded-md"
+                  className="w-44 ml-2 p-1 bg-zinc-900 text-sm md: text-lg text-white font-thin tracking-wider rounded-md focus: bg-zinc-900"
                   id="titleInput"
                   type="text"
                   {...register("currentTitle")}
                   defaultValue={title}
                   required={false}
+                  autoComplete="off"
                 />
               )}
             </div>
@@ -72,7 +73,7 @@ export default function SessionDialog({ title, onSubmit }) {
                 {"Today's Goal: "}
               </label>
               <input
-                className="w-12 ml-2 p-1.5 bg-zinc-900 text-sm md:text-lg text-white font-thin tracking-wider rounded-md"
+                className="w-16 ml-2 p-1.5 bg-zinc-900 text-sm md:text-lg text-white font-thin tracking-wider rounded-md"
                 id="goal"
                 type="number"
                 {...register("goalNumber")}

src/pages/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
 import { useParams } from "react-router-dom";
@@ -79,7 +79,12 @@ export default function Editor() {
   const [progress, setProgress] = useState(0);
   const [open, setOpen] = useState(false);
 
-  const currentWordCount = wordCounter(hot);
+  const totalWordCount = wordCounter(hot);
+  const prevWordCount = useRef(wordCounter(hot));
+  const workingWordCount =
+    totalWordCount < prevWordCount.current
+      ? 0
+      : totalWordCount - prevWordCount.current;
 
   useEffect(() => {
     saveProject({
@@ -108,7 +113,10 @@ export default function Editor() {
           interval = setInterval(() => setProgress(progress + 1), timing);
           break;
         case "words":
-          const percentage = (wordCounter(hot) / data.goalNumber) * 100;
+          if (workingWordCount < 0) {
+            return;
+          }
+          const percentage = (workingWordCount / data.goalNumber) * 100;
           setProgress(percentage);
           break;
         default:
@@ -156,11 +164,11 @@ export default function Editor() {
           <div className={STYLES.STANDARD_TEXT}>
             {data.goalType === "words" ? (
               <p>
-                {currentWordCount}/{data.goalNumber} words
+                {workingWordCount}/{data.goalNumber} words
               </p>
             ) : (
               <p>
-                {currentWordCount} {currentWordCount === 1 ? "word" : "words"}
+                {totalWordCount} {totalWordCount === 1 ? "word" : "words"}
               </p>
             )}
           </div>