Feat/frontend/help page format

frontend/package.json

@@ -45,6 +45,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.55.0",
     "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.5.2",
     "tailwind-merge": "^3.1.0",
     "tw-animate-css": "^1.2.5",
     "zod": "^3.24.2"
@@ -53,6 +54,7 @@
     "@eslint/eslintrc": "^3",
     "@faker-js/faker": "^9.6.0",
     "@tailwindcss/postcss": "^4.1.3",
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

frontend/public/help.md

@@ -1,116 +1,132 @@
-**How Do I Create an Account**
+<!-- Section: Home -->
+# Getting Started
+Welcome to the app! Here's how you get started...
+
+# How Do I Create an Account?
+
 1. Click the Get Started button on the home page or scroll down to the bottom of the page to the sign up button
 2. Enter a valid gmail account as the email 
 3. Enter a valid password of at least 6 characters 
 4. Re-enter the same password to confirm the password 
-5. Create a username
+5. Create a username 
+
+# How Do I Sign In?
 
-**How Do I Sign In?**
 1. Click the Get Started button on the home page or scroll down to the bottom of the page to sign up
 2. At the top of sign up, it will say that if you already have an account you can sign in 
 3. Click the sign in button above the sign up page to sign in
-4. Enter your email and password to sign in
+4. Enter your email and password to sign in 
 
+# How Do I Sign Out?
 
-**How Do I Sign Out?**
+Unfortunately, this feature isn’t currently implemented
 
+# How Do I Change Visibility Settings?
 
-**How Do I Change Visibility Settings?**
 1. You can view the app in either dark or light mode 
 2. To change the mode, locate the icon is located in the upper right corner of the app that displays either a moon or sun and click on it
 3. If you click the sun icon, the app will change to light mode 
 4. If you click the moon icon, the app will change to dark mode
 
-**How Do I Switch Between Calendar and Profile?**
-1. On the upper left side of the screen, there is a sidebar above the StressLess logo
-2. Click on the bar to the left 
-3. After clicking on the bar, it should list a bar of both the calendar and profile icons and labels
-4. If you click the profile icon, you will be able to access your profile
-5. If you click the calendar icon, you will be able to access your calendar
+<!-- Section: preference -->
+# User Preferences Survey
 
-# User Preferences Survey 
-
-**How Do I Use the User Preferences Survey?** 
+## How Do I Use the User Preferences Survey?
 
 1. Most Productive Time
-    -  You’ll be able to drag a cursor for the range of the times that you are the most productive 
-    - The dot to the left is when you’d prefer to start your productive times and the dot to the right is when you will able to end your productive times
-    - You currently can’t split up productive times, they have to be consecutive 
+    1. You’ll be able to drag a cursor for the range of the times that you are the most productive 
+    2. The dot to the left is when you’d prefer to start your productive times and the dot to the right is when you will able to end your productive times
+    3. You currently can’t split up productive times, they have to be consecutive 
 2. Work Duration 
-    -  Enter how many hours you want to work per day 
+    1. Enter how many minutes you want to work in a row
 3. Preferred Sleep Amount
-    - Enter how many hours you want to sleep with the keyboard or use the arrow keys to increase or decrease the sleep time in hours 
+    1. Enter how many hours you want to sleep with the keyboard or use the arrow keys to increase or decrease the sleep time in hours 
 4. Start of Work Day and End of Work Day
-    - For start of work day enter what time of day you want to start doing work and for the end of work day enter when you want to stop doing work
-    - Click on the hour to change to change the hour, then use the up arrows to increase the time and the down arrows to decrease the time
-    - Click on the minutes to change the minutes, then use the up arrows to increase the time and the down arrows to decrease the time 
-    - Click on the AM/PM to change the minutes, then use the up arrows to increase the time and the down arrows to decrease the time
+    1. For start of work day enter what time of day you want to start doing work and for the end of work day enter when you want to stop doing work
+    2. Click on the hour to change to change the hour, then use the up arrows to increase the time and the down arrows to decrease the time
+    3. Click on the minutes to change the minutes, then use the up arrows to increase the time and the down arrows to decrease the time 
+    4. Click on the AM/PM to change the minutes, then use the up arrows to increase the time and the down arrows to decrease the time
 5. Save Preferences 
-    - Click on save preferences when you’re satisfied with your answers. These preferences don’t have to be perfect. You can always edit them later if you change your mind.
+    1. Click on save preferences when you’re satisfied with your answers. These preferences don’t have to be perfect. You can always edit them later if you change your mind. 
+
+<!-- Section: dashboard/profilepage -->
+## How Do I Edit My Preferences in the Survey?
 
-**How Do I Edit My Preferences in the Survey**
 You can either edit your preferences in two ways
 
-- After the survey is complete at the profile you can press the edit preferences button 
-- You can also navigate to the profile user page by clicking on the user icon in the sidebar. This will redirect you to the preferences page where you can click on edit preferences
+1. After the survey is complete at the profile you can press the edit preferences button 
+2. You can also navigate to the profile user page by clicking on the user icon in the sidebar. This will redirect you to the preferences page where you can click on edit preferences
 
-**How Do I Edit My Name?**
-- After you submit your preferences, you will be on the user profile page which will show your    answers to all of your responses.
-- If you are not on the user profile page, navigate to the user profile page by using the sidebar
-- If you want to edit your name, click on the writing pencil icon and delete the studious student name and enter the name you want your profile to say instead.
+## How Do I Edit my Name?
 
-**Calendar**
+ 1.   After you submit your preferences, you will be on the user profile page which will show your    answers to all of your responses.
+
+1. If you are not on the user profile page, navigate to the user profile page by using the sidebar
+2. If you want to edit your name, click on the writing pencil icon and delete the studious student name and enter the name you want your profile to say instead.
+
+<!-- Section: dashboard/calendar -->
+# Calendar
+
+## How Do I Change Calendar Views?
 
-**How Do I Change Calendar Views?**
 1. Above the calendar, there is both a weekly and monthly button located in the top right corner.
 2. If you click on the weekly button, the calendar will display your calendar for the week
 3. If you click on the monthly button, the calendar will display your calendar for the month
 
-**How Do I Change Between Months and Weeks?**
+## How Do I Change Between Months and Weeks?
+
 1. In both weekly and monthly mode, you can change between months and weeks with the arrow keys located on the top to the left of the today button. 
-    - If you are in monthly mode, you’ll change between months
-    - If you’re in weekly mode, you’ll change between weeks
+    1. If you are in monthly mode, you’ll change between months
+    2. If you’re in weekly mode, you’ll change between weeks
 2. Click the arrow button on the left to go to previous month or week and the button to the right to go to future month or week
 
-**How Do I See the Current Day?**
+## How Do I See the Current Day?
+
 1. At the top of the calendar in the left hand corner next to the arrows click on the today button
 2. When you click on the today button, the current day will glow yellow showing you what the current day is
 
-**How Do I Add a Preexisting Event?**
+## How Do I Add a Preexisting Event?
+
 1. You can add an event when you are on the calendar page. 
 2. You can drag any of the preexisting events from the right side into the desired day
 
-**How Do I Add My Own Custom Event?**
+## How Do I Add My Own Custom Event?
+
 1. Don’t use the pre-existing events on the right
 2. Instead, click on a day you want to add the event
 3. Type in the label of your custom event
 4. Click create to add your event
 
-***How Do I Change the Day of an Event?***
+## How Do I Change the Day of an Event?
+
 1. You can be in either weekly or monthly mode 
-2. Change the day by dragging the event to the new desired day
+2. Change the day by dragging the event to the new desired day 
+
+## How Do I Change The Time of an Event?
 
-***How Do I Change The Time of an Event?***
 1. Make sure you are in weekly mode 
 2. If you aren’t in weekly mode, switch to weekly mode by clicking on the week button in the upper right hand corner above the calendar 
 3. When in weekly mode there will be two options 
-    - If you created an event in monthly mode or created an event in all day
+    1. If you created an event in monthly mode or created an event in all day
         1. The event will be in the all day at the top 
         2. Drag the event below to a specific time 
         3. If you want to lengthen shorten the time locate the arrow key at the bottom of the event
         4. Drag the arrow down to make the event longer and drag the arrow up to make the event shorter
     2. If you created an event in weekly mode, but want to edit the time
-        - If you want to lengthen shorten the time locate the arrow key at the bottom of the event
-        - Drag the arrow down to make the event longer and drag the arrow up to make the event shorter
-**How Do I Lengthen or Shorten How Many Days an Event is?**
+        1. If you want to lengthen shorten the time locate the arrow key at the bottom of the event
+        2. Drag the arrow down to make the event longer and drag the arrow up to make the event shorter
+
+## How Do I Lengthen or Shorten How Many Days an Event is?
+
 1. Make sure you are in monthly mode
 2. If you aren’t in monthly mode, switch to monthly mode by clicking on the week button in the upper right hand corner above the calendar 
 3. Go to the end and edge of the scheduled event 
 4. Locate the right arrow key at the end of the event 
 5. Increase the number of days for the event by dragging the arrow to the right 
 6. Decrease the number of days for the event by dragging the arrow to the left
 
-**How Do I Delete an Event?**
+## How Do I Delete an Event?
+
 1. You can delete an event by clicking on the event on the calendar. 
 2. If you click on the event, you can press the read delete button to delete the event
-3. If you don’t want to delete the event, you can press the cancel button
+3. If you don’t want to delete the event, you can press the cancel button

frontend/src/components/Help.tsx

@@ -7,15 +7,39 @@ import ReactMarkdown from 'react-markdown';
 export const Help = () => {
   const [showHelp, setShowHelp] = useState(false);
   const [markdown, setMarkdown] = useState('');
+  const [currentPage, setCurrentPage] = useState('');
 
   useEffect(() => {
+    // Determine the current page based on the URL
+    const path = window.location.pathname;
+    if(path === '/'){
+      setCurrentPage('Home'); // Landing page = Home
+    }else if(path === '/dashboard'){
+      setCurrentPage('dashboard/calendar'); // If route is dashboard default view is calendar
+    }else{
+      setCurrentPage(path.replace('/', '')); // Remove '/' from currentpage name
+    }
+
+    // Fetch markdown file from /public
     if (showHelp && !markdown) {
       fetch('/help.md')
         .then((res) => res.text())
         .then((text) => setMarkdown(text));
     }
   }, [showHelp]);
 
+  // Extract the section based on custom tags
+  const getSection = () => {
+    const regex = new RegExp(
+      `<!-- Section: ${currentPage} -->(.*?)(?=<!-- Section:|$)`,
+      's'
+    );
+    console.log('current zection: ', regex);
+    const match = markdown.match(regex);
+    console.log('match here: ', match);
+    return match ? match[1].trim() : 'Section not found.';
+  };
+
   return (
     <div className="relative">
       <Button
@@ -29,7 +53,7 @@ export const Help = () => {
 
       {showHelp && (
         <div className="absolute right-0 mt-2 w-[400px] max-h-[400px] overflow-auto bg-white dark:bg-zinc-900 text-sm p-4 shadow-xl border rounded-lg z-50 prose prose-sm dark:prose-invert">
-          <ReactMarkdown>{markdown}</ReactMarkdown>
+          <ReactMarkdown>{getSection()}</ReactMarkdown>
         </div>
       )}
     </div>

frontend/src/styles/globals.css

@@ -3,7 +3,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+@plugin '@tailwindcss/typography';
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {