diff --git a/README.md b/README.md
index de85598..8beea41 100644
--- a/README.md
+++ b/README.md
@@ -2,14 +2,14 @@
GuideFrame is a tool which allows software developers to produce detailed walkthrough videos of their projects using python code. It can be run locally, provided you have the required packages installed, or can be used as a GitHub action.
-It uses a selection of open-source software to record a users screen, perform scripted UI interactions and generate a matching voiceover based on a user-defined markdown file.
+It uses a selection of open-source software to record a users screen, perform scripted UI interactions and generate a matching voiceover based on a user-defined markdown file. To see GuideFrame in action you can visit the [Demos section of the GuideFrame Site](https://chipspeak.github.io/GuideFrame/demos/).
## Installation
GuideFrame is currently available on PyPi. It can be installed using:`pip install guideframe`.
While GuideFrame can be run locally, given the variance in development environment, using it as part of a GitHub action is the recommended approach.
-More detailed installation instructions can be found on the official docs page [here](https://chipspeak.github.io/GuideFrame/installation/).
+More detailed installation instructions can be found on the docs page [here](https://chipspeak.github.io/GuideFrame/installation/).
## Getting Started
diff --git a/docs/_config.yml b/docs/_config.yml
index 53d3c0f..8ec0ebe 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -1,5 +1,5 @@
-title: GuideFrame Docs
-description: The official documentation for GuideFrame.
+title: GuideFrame
+description: The official site for GuideFrame.
theme: just-the-docs
url: https://chipspeak.github.io/GuideFrame
diff --git a/docs/code-demo.md b/docs/code-demo.md
new file mode 100644
index 0000000..85af7f7
--- /dev/null
+++ b/docs/code-demo.md
@@ -0,0 +1,445 @@
+---
+title: Code Demo
+layout: default
+nav_order: 1
+parent: Demos
+permalink: /code-demo/
+---
+
+# Code Walkthrough
+
+The below video serves as a demonstration of GuideFrame's use in a code walkthrough of its own repository. The script used to create this can be seen below in addition to its companion markdown.
+
+
+
+
+
+## GuideFrame Code Walkthrough Script
+```python
+
+from guideframe.selenium import * # Moved all selenium functions to external file
+from guideframe.assembly import assemble # Importing the assemble_clips function from assembly.py
+from guideframe.utils import guide_step, get_env_settings # Importing the guide_step and get_env_settings functions from guideframe_utils.py
+
+# Function to run the full script
+def guideframe_script():
+ try:
+ '''
+ Setup - Setup driver, Open GuideFrame repo and set window size etc
+ '''
+ env_settings = get_env_settings() # Getting the environment settings
+ driver_location = env_settings["driver_location"] # Getting the driver location from the settings
+ driver = driver_setup(driver_location) # Initializing driver as the return value from the setup function in selenium script
+ set_window_size(driver)
+ open_url(driver, "https://github.com/chipspeak/GuideFrame")
+
+#-------------------Overview-------------------#
+
+ '''
+ Step 1 - Open GitHub Page
+ '''
+ guide_step(
+ 1,
+ lambda: None
+ )
+
+ '''
+ Step 2 - open tutors test file
+ '''
+ guide_step(
+ 2,
+ lambda: open_url(driver, "https://github.com/chipspeak/GuideFrame/tree/main/selenium_demos"),
+ lambda: open_url(driver, "https://github.com/chipspeak/GuideFrame/blob/main/selenium_demos/selenium_function_demo.py"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 3 - Open markdown file in new tab
+ '''
+ guide_step(
+ 3,
+ lambda: open_link_in_new_tab(driver, "https://github.com/chipspeak/GuideFrame/blob/main/selenium_demos/selenium_function_demo.md"),
+ lambda: click_element_by_xpath(driver, '//*[@id="repos-sticky-header"]/div[1]/div[2]/div[1]/ul/li[2]/button/span/div'),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 4 - Switch back to main script, move to environment setup
+ '''
+ guide_step(
+ 4,
+ lambda: switch_to_tab(driver, 0),
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/selenium_demos/selenium_function_demo.py#L6-L13"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 5 - Move to step 1 and 2 highlight step syntax
+ '''
+ guide_step(
+ 5,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/selenium_demos/selenium_function_demo.py#L16-L31"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 6 - Explain multiple actions
+ '''
+ guide_step(
+ 6,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/selenium_demos/selenium_function_demo.py#L134-L142"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 7 - Illustrate main and explain assembly
+ '''
+ guide_step(
+ 7,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/selenium_demos/selenium_function_demo.py#L186-L189"),
+ order="action-before-vo"
+ )
+
+#-------------------Demonstration-------------------#
+
+ '''
+ Step 8 - Demo function 1 - explain
+ '''
+ guide_step(
+ 8,
+ lambda: open_url(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/selenium.py#L139-L149"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 9 - Demo function 1 - demonstrate
+ '''
+ guide_step(
+ 9,
+ lambda: open_link_in_new_tab(driver, "https://magento.softwaretestingboard.com/"),
+ lambda: click_button_by_span_text(driver, "AGREE"),
+ )
+
+ '''
+ Step 10 - Demo function 2 - explain
+ '''
+ guide_step(
+ 10,
+ lambda: switch_to_tab(driver, 0),
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/selenium.py#L115-L124"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 11 - Demo function 2 - demonstrate
+ '''
+ guide_step(
+ 11,
+ lambda: switch_to_tab(driver, 2),
+ lambda: sleep_for(1),
+ lambda: click_element(driver, ".authorization-link > a"),
+ lambda: sleep_for(1),
+ )
+
+ '''
+ Step 12 - Demo function 3 - explain
+ '''
+ guide_step(
+ 12,
+ lambda: switch_to_tab(driver, 0),
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/selenium.py#L127-L136"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 13 - Demo function 3 - demonstrate
+ '''
+ guide_step(
+ 13,
+ lambda: switch_to_tab(driver, 2),
+ lambda: sleep_for(1),
+ lambda: type_into_field(driver, "email", "test-user@email.com"),
+ lambda: sleep_for(1),
+ lambda: type_into_field(driver, "pass", "testuser-1"),
+ )
+
+ '''
+ Step 14 - Demo function 4 - explain
+ '''
+ guide_step(
+ 14,
+ lambda: switch_to_tab(driver, 0),
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/selenium.py#L100-L112"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 15 - Demo function 4 - demonstrate
+ '''
+ guide_step(
+ 15,
+ lambda: switch_to_tab(driver, 2),
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/women.html"),
+ lambda: sleep_for(1),
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/women/tops-women.html"),
+ lambda: sleep_for(1),
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/women/tops-women/jackets-women.html"),
+ lambda: sleep_for(1),
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/men.html"),
+ lambda: sleep_for(1),
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/men/tops-men.html"),
+ lambda: sleep_for(1),
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/men/tops-men/jackets-men.html"),
+ )
+
+#-------------------Core Logic Walkthrough-------------------#
+
+ '''
+ Step 16 - Move to utils file - get_env_settings
+ '''
+ guide_step(
+ 16,
+ lambda: switch_to_tab(driver, 0),
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/utils.py#L6-L29"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 17 - Move to utils file - extract filenames
+ '''
+ guide_step(
+ 17,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/utils.py#L32-L40"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 18 - Move to utils file - guide_step
+ '''
+ guide_step(
+ 18,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/utils.py#L42-L65"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 19 - Move to audio file
+ '''
+ guide_step(
+ 19,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/audio.py#L52-L65"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 20 - Move to video file
+ '''
+ guide_step(
+ 20,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/video.py#L9-L29"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 21 - Move to assembly file - audio + video
+ '''
+ guide_step(
+ 21,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/assembly.py#L10-L29"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 22 - Move to assembly file - assemble_clips
+ '''
+ guide_step(
+ 22,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/assembly.py#L32-L54"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 23 - Move to assembly file - assemble
+ '''
+ guide_step(
+ 23,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/assembly.py#L57-L75"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 24 - Move to assembly file - cleanup
+ '''
+ guide_step(
+ 24,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/guideframe/assembly.py#L77-L95"),
+ order="action-before-vo"
+ )
+
+#-------------------Workflow walkthrough-------------------#
+
+ '''
+ Step 25 - Move to workflows
+ '''
+ guide_step(
+ 25,
+ lambda: open_url(driver, "https://github.com/chipspeak/GuideFrame/tree/main/.github/workflows"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 26 - Move to workflows - render.yaml
+ '''
+ guide_step(
+ 26,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/.github/workflows/render.yaml#L1-L25"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 27 - Move to workflows - render.yaml pt 2
+ '''
+ guide_step(
+ 27,
+ lambda: highlight_github_code(driver, "https://github.com/chipspeak/GuideFrame/blob/main/.github/workflows/render.yaml#L26-L40"),
+ order="action-before-vo"
+ )
+
+#-------------------Conclusion-------------------#
+
+ '''
+ Step 28 - GitHub page
+ '''
+ guide_step(
+ 28,
+ lambda: open_url(driver, "https://github.com/chipspeak/GuideFrame"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 29 - PyPi page
+ '''
+ guide_step(
+ 29,
+ lambda: open_url(driver, "https://pypi.org/project/guideframe/"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 30 - Docs page
+ '''
+ guide_step(
+ 30,
+ lambda: open_url(driver, "https://chipspeak.github.io/GuideFrame/"),
+ order="action-before-vo"
+ )
+
+#-------------------Walkthrough Complete-------------------#
+
+ finally:
+ print("Script complete -> moving to assembly")
+ driver.quit()
+
+
+# Main function to run the test and assemble the clips (now passing the number of steps to the assembly function)
+if __name__ == "__main__":
+ guideframe_script()
+ assemble(30)
+```
+
+## GuideFrame Code Walkthrough Markdown
+
+```markdown
+## Step 1
+Guide-Frame is a tool which allows software engineers to generate walkthrough videos using python. This demo aims to illustrate the functionality of Guide-Frame by examining its codebase. Before we dive into the underlying logic, lets first examine a Guide-Frame script in order to provide some broader context.
+
+## Step 2
+The selenium functions demo will serve as an example of a GuideFrame script. Each script is a python file and must also have a markdown file with a matching name. Let's briefly touch on the format and role of this markdown file.
+
+## Step 3
+GuideFrame creates the voiceover based on this markdown file. It simply requires a user to create a ## heading with the text 'Step Number'. Under this heading, the user can add whatever text corresponds to the actions they define in the main GuideFrame script. This promotes ease of adjustment in the event of purely audio changes. Lets switch back to the main script and run through some of the setup syntax.
+
+## Step 4
+All the python script requires is the relevant imports as seen at the top of the file. A user should then define a guideframe script function, as seen here on line 7. After some initial environment setup, via the functions imported from the GuideFrame package, a user can start defining their GuideFrame steps.
+
+## Step 5
+Let's examine steps 1 and 2 to illustrate the syntax of a GuideFrame step. Each step takes a number as an argument in addition to a lambda function and an opptional argument for the order of the voicever relative to the interactions. In the case of step 1, lambda is set to none in order to hang on the main webpage while the voiceover is performed. Step 2 features a call to the click button by span text function to click the agree button.
+
+## Step 6
+Lets skip to step 14 to demonstrate the ability to pass multiple actions. In this case, we're filling review fields on the test site. A user can pass as many actions to a step as they wish and GuideFrame will iterate through them.
+
+## Step 7
+Once a user has defined all of their guide steps within a function, they should call it within main. They should then pass the number of steps to the assemble function. This function carries out the assembly of all generated audio and video segments. Now that we've got a high level understanding of GuideFrame, let's take a look at the underlying code.
+
+## Step 8
+Let's start off by examining one of the selenium functions. The selenium file acts as an SDK which allows users to more easily create individual interactions. There are numerous actions available but for this demonstration we'll use a small subset. The first one we'll look at is the open link in new tab function. Like most of these functions, its wrapped in a try block with exception handling. The function takes the webdriver and a h ref as an argument. The h ref is then passed to selenium's native functions. It opens the link and then switches to the most recently opened tab.
+
+## Step 9
+Lets demonstrate it by using the magento test site. We'll use the function to open the test site in a new tab and switch to it.
+
+## Step 10
+The click element function takes a driver and a C S S selector as arguments. It uses selenium's functionality to wait for the element to appear and then clicks on it.
+
+## Step 11
+Let's return to the test site to demonstrate that. In this case we'll click on the sign in button.
+
+## Step 12
+The type into field function takes the driver, element i d and text as arguments. It uses seleniums ability to pass text into form fields to achieve its purpose.
+
+## Step 13
+Let's switch back to magento to see it in action. In this case we can fill the login details. We achieve this by using two different functions within one guide step.
+
+## Step 14
+The final function we'll examine allows a user to hover over elements. This function takes a h ref as an argument. It uses selenium's action chains to move to the h ref's element.
+
+## Step 15
+When defining this particular step, we also pass sleep functions to allow space between selections.
+
+## Step 16
+Now that we've demonstrated some of the functions, lets dive a little deeper into the code that makes this possible. The utils file contains much of the logic relating to the guide steps themselves. The function seen here uses script arguments to extract environment variables.
+
+## Step 17
+This pair of functions simply serve to extract the scripts name for use in additional logic.
+
+## Step 18
+The guide step function orchestrates much of the core logic via calls to various functions. It extracts environment data and then passes this to f f m peg to begin a screen recording. It then checks the order variable and loops through the actions passed as arguments. The generate voiceover function is then called based on the order. This takes the step number and markdown file in order to pull the text from its match. Finally, the function ends by stopping the f f m peg recording.
+
+## Step 19
+Much of the remaining logic should be relatively clear. Within the audio file, regex is used to extract the text under the markdown headings. This is then passed to the generate voiceover function. This uses g t t s to create the audio clip. Finally, an additional function sleeps based on the length of this audio clip. This ensures that interactions don't occur until a voiceover segment is complete.
+
+## Step 20
+The video file simply contains the functions called in the guide steps. They start and stop f f mpeg, taking the environment variables previously mentioned.
+
+## Step 21
+The assembly file is where the audio and video segments for each step are combined. This first function checks for the existence of the matching audio and video files. f f m peg is then used to combine them into a single video with voiceover.
+
+## Step 22
+The combine all videos function takes the output files and a name as arguments. It then writes these to a text file. This list of files is then passed to f f m peg for concatination. The final file name is dictated by the second function argument.
+
+## Step 23
+The assemble function takes the steps number and uses it to loop through all of the created files. It then passes these to the assemble audio video function mentioned earlier. It then creates the required name and an array based on the combined files. Both the array and filename are then passed to the combine all videos function.
+
+## Step 24
+Finally, a cleanup loop removes all of the files generated through this process.
+
+## Step 25
+The final layer of guideframe is its use as a git hub action. This allows users to run guideframe on repository updates.
+
+## Step 26
+This render workflow activates on push events. It spins up an ubuntu git hub runner and installs the requirements needed to run guideframe. Note the pip install commands here don't install the guideframe package. This is because this workflow runs within the source repository. Within the template repository, these python installations are replaced with pip install guideframe.
+
+## Step 27
+Once the environment is set up, the virtual display is started. The tutors demo is then run before a final step uploads this output as an artifact. This allows the user to download the final mp4 from the workflow.
+
+## Step 28
+This concludes the code walkthrough. GuideFrame is available on GitHub via the link seen here.
+
+## Step 29
+It can also be found here on PyPi.
+
+## Step 30
+And finally, the official documentation can be found here. Thanks for watching!
+```
diff --git a/docs/demos.md b/docs/demos.md
new file mode 100644
index 0000000..03fb0e0
--- /dev/null
+++ b/docs/demos.md
@@ -0,0 +1,8 @@
+---
+title: Demos
+layout: default
+nav_order: 6
+permalink: /demos/
+---
+
+This section contains example GuideFrame videos that have been uploaded to youtube. Each page contains the video, followed by the video's respective GuideFrame script and markdown files.
\ No newline at end of file
diff --git a/docs/magento-demo.md b/docs/magento-demo.md
new file mode 100644
index 0000000..c4dda45
--- /dev/null
+++ b/docs/magento-demo.md
@@ -0,0 +1,287 @@
+---
+title: Magento Demo
+layout: default
+nav_order: 2
+parent: Demos
+permalink: /magento-demo/
+---
+
+# Code Walkthrough
+
+The below video serves as a demonstration of GuideFrame's Selenium SDK via the Magento test site. The script used to create this can be seen below in addition to its companion markdown.
+
+
+
+
+
+## GuideFrame Code Walkthrough Script
+```python
+
+from guideframe.selenium import * # Importing all functions from selenium_functions.py
+from guideframe.assembly import assemble # Importing the assemble_clips function from assembly.py
+from guideframe.utils import get_env_settings, guide_step # Importing the guide_step and get_env_settings functions from guideframe_utils.py
+
+
+# This function will run the full script
+def selenium_automation_tests():
+ try:
+ env_settings = get_env_settings() # Getting the environment settings
+ driver_location = env_settings["driver_location"] # Getting the driver location from the settings
+ driver = driver_setup(driver_location) # Initializing driver
+ set_window_size(driver)
+ open_url(driver, "https://magento.softwaretestingboard.com/")
+
+
+ '''
+ Step 1 - Open the Magento website
+ '''
+ guide_step(
+ 1,
+ lambda: None
+ )
+
+
+ '''
+ Step 2 - Click the "AGREE" button on the cookies policy
+ '''
+ guide_step(
+ 2,
+ lambda: click_button_by_span_text(driver, "AGREE")
+ )
+
+
+ '''
+ Step 3 - Click the "Sign In" link
+ '''
+ guide_step(
+ 3,
+ lambda: click_element(driver, ".authorization-link > a")
+ )
+
+
+ '''
+ Step 4 - Enter email and password
+ '''
+ guide_step(
+ 4,
+ lambda: type_into_field(driver, "email", "test-user@email.com"),
+ lambda: type_into_field(driver, "pass", "testuser-1")
+ )
+
+
+ '''
+ Step 5 - Click the "Sign In" button
+ '''
+ guide_step(
+ 5,
+ lambda: click_element(driver, "button[name='send']")
+ )
+
+
+ '''
+ Step 6 - Hover over the "Gear" menu
+ '''
+ guide_step(
+ 6,
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/gear.html")
+ )
+
+
+ '''
+ Step 7 - Then, click on "Fitness Equipment"
+ '''
+ guide_step(
+ 7,
+ lambda: click_element(driver, "a[href='https://magento.softwaretestingboard.com/gear/fitness-equipment.html']")
+ )
+
+
+ '''
+ Step 8 - Hover over the yoga companion kit
+ '''
+ guide_step(
+ 8,
+ lambda: hover_over_element_by_xpath(driver, '//*[@id="maincontent"]/div[3]/div[1]/div[3]/ol/li[1]/div/a/span/span/img')
+ )
+
+
+ '''
+ Step 9 - Hover over the "Yoga Straps" product
+ '''
+ guide_step(
+ 9,
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/set-of-sprite-yoga-straps.html")
+ )
+
+
+ '''
+ Step 10 - Hover over the strength band kit
+ '''
+ guide_step(
+ 10,
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/harmony-lumaflex-trade-strength-band-kit.html")
+ )
+
+
+ '''
+ Step 11 - Return to the straps and click on them
+ '''
+ guide_step(
+ 11,
+ lambda: hover_and_click(driver, "https://magento.softwaretestingboard.com/set-of-sprite-yoga-straps.html")
+ )
+
+
+ '''
+ Step 12 - Hover over the reviews link
+ '''
+ guide_step(
+ 12,
+ lambda: hover_over_element(driver, "https://magento.softwaretestingboard.com/set-of-sprite-yoga-straps.html#review-form")
+ )
+
+
+ '''
+ Step 13 - Open the reviews link in a new tab
+ '''
+ guide_step(
+ 13,
+ lambda: open_link_in_new_tab(driver, "https://magento.softwaretestingboard.com/set-of-sprite-yoga-straps.html#review-form")
+ )
+
+
+ '''
+ Step 14 - Enter the nickname, summary, and review
+ '''
+ guide_step(
+ 14,
+ lambda: type_into_field(driver, "nickname_field", "Test User"),
+ lambda: type_into_field(driver, "summary_field", "Great product!"),
+ lambda: type_into_field(driver, "review_field", "I love this product!")
+ )
+
+
+ '''
+ Step 15 - Submit the review
+ '''
+ guide_step(
+ 15,
+ lambda: click_button_by_span_text(driver, "Submit Review")
+ )
+
+
+ '''
+ Step 16 - Return to the first tab
+ '''
+ guide_step(
+ 16,
+ lambda: switch_to_tab(driver, 0)
+ )
+
+
+ '''
+ Step 17 - Click the dropdown next to user name
+ '''
+ guide_step(
+ 17,
+ lambda: click_button_by_span_text(driver, "Change")
+ )
+
+
+ '''
+ Step 18 - Click the "Log Out" button
+ '''
+ guide_step(
+ 18,
+ lambda: click_element(driver, "a[href='https://magento.softwaretestingboard.com/customer/account/logout/']")
+ )
+
+
+ finally:
+ print("Script complete -> moving to assembly")
+ driver.quit()
+
+
+# Run the automation test
+if __name__ == "__main__":
+ selenium_automation_tests()
+ assemble(18)
+```
+
+## GuideFrame Code Walkthrough Markdown
+
+```markdown
+## Step 1
+This video serves as a demonstration of guideframe's use of selenium functions. We'll achieve this via the Magneto testing site.
+
+
+## Step 2
+Here, we can demonstrate the function which takes a buttons span text as an argument. In this case, we can click on the agree button within the cookie policy popup.
+
+
+## Step 3
+We can use the click element function by passing in the elements I D. Let's use that to sign in.
+
+
+## Step 4
+We can use the form fields here to demonstrate the type into fields function, which takes the element I D and the text you wish to pass as arguments.
+
+
+## Step 5
+Now that we've filled the form, we can use the click element function again to sign in with these credentials.
+
+
+## Step 6
+Next, we'll demonstrate the hover over element function by hovering over the gear dropdown in the navbar. This function takes an h ref as an argument. It is then used in an X path filter to locate the appropriate element.
+
+
+## Step 7
+We'll once again use the click element function to select the fitness equipment link.
+
+
+## Step 8
+Now we'll hover over the yoga companion kit using the same hovering function.
+
+
+## Step 9
+Then we can move on to hover over the yoga straps.
+
+
+## Step 10
+Then the strength band kit.
+
+
+## Step 11
+Before returning to the yoga straps, this time using the hover and click function in order to first hover, then click on the link.
+
+
+## Step 12
+Next, let's hover over the reviews section on the product page.
+
+
+## Step 13
+We can use the open link in new tab function here to open the reviews section in a new tab and switch to it.
+
+
+## Step 14
+Let's enter some text here using the same function for fields that we did earlier.
+
+
+## Step 15
+Now we can click on the submit review button using the same functionality we've been using throughout.
+
+
+## Step 16
+We can use the switch to tab function to return to the original tab by passing the tab index as an argument.
+
+
+## Step 17
+Now that we're on the original tab, let's click the dropdown in the top right of the screen. We do this by using the click on button via span text function once again.
+
+
+## Step 18
+Finally, let's click the sign out button to end this demonstration.
+```
diff --git a/docs/samples.md b/docs/samples.md
index ccfa26d..c3620de 100644
--- a/docs/samples.md
+++ b/docs/samples.md
@@ -7,4 +7,4 @@ permalink: /samples/
# Samples
-This section contains two example files which serve to demonstrate GuideFrame script and markdown construction. These examples also feature in the [GuideFrame Template Repository](https://github.com/chipspeak/GuideFrame-Template).
\ No newline at end of file
+This section contains two example files which serve to demonstrate GuideFrame script and markdown construction. An example workflow to trigger this is also included. These examples also feature in the [GuideFrame Template Repository](https://github.com/chipspeak/GuideFrame-Template).
\ No newline at end of file
diff --git a/docs/tutors-demo.md b/docs/tutors-demo.md
new file mode 100644
index 0000000..2bc0812
--- /dev/null
+++ b/docs/tutors-demo.md
@@ -0,0 +1,195 @@
+---
+title: Tutors Demo
+layout: default
+nav_order: 3
+parent: Demos
+permalink: /tutors-demo/
+---
+
+# Code Walkthrough
+
+The below video serves as a demonstration of GuideFrame via the open-source education platform, Tutors. The script used to create this can be seen below in addition to its companion markdown.
+
+
+
+
+
+## GuideFrame Code Walkthrough Script
+```python
+
+from guideframe.selenium import * # Moved all selenium functions to external file
+from guideframe.assembly import assemble # Importing the assemble_clips function from assembly.py
+from guideframe.utils import guide_step, get_env_settings # Importing the guide_step and get_env_settings functions from guideframe_utils.py
+
+
+# Function to run the main walkthrough section
+def guideframe_script():
+ try:
+ '''
+ Setup - Setup driver and Open Tutors.dev and set window size etc
+ '''
+ env_settings = get_env_settings() # Getting the environment settings
+ driver_location = env_settings["driver_location"] # Getting the driver location from the settings
+ driver = driver_setup(driver_location) # Initializing driver as the return value from the setup function in selenium script
+ set_window_size(driver)
+ open_url(driver, "https://tutors.dev")
+
+ '''
+ Step 1 - Open Tutors
+ '''
+ guide_step(
+ 1,
+ lambda: None,
+ )
+
+ '''
+ Step 2 - setting dark mode
+ '''
+ guide_step(
+ 2,
+ lambda: click_element(driver, "span.ml-2.hidden.text-sm.font-bold.md\\:block"),
+ lambda: sleep_for(0.5),
+ lambda: click_element(driver, "label[data-testid='segment-item']"),
+ lambda: sleep_for(0.5),
+ lambda: click_element(driver, "span.ml-2.hidden.text-sm.font-bold.md\\:block"),
+ )
+
+ '''
+ Step 3 - navigating to the docs page
+ '''
+ guide_step(
+ 3,
+ lambda: hover_and_click(driver, "/course/tutors-reference-manual"),
+ )
+
+ '''
+ Step 4 - Docs page intro
+ '''
+ guide_step(
+ 4,
+ lambda: None
+ )
+
+ '''
+ Step 5 - Hovering over the first card
+ '''
+ guide_step(
+ 5,
+ lambda: hover_over_element(driver, "/note/tutors-reference-manual/unit-0-getting-started/note-01-getting-started"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 6 - Hovering over the second card
+ '''
+ guide_step(
+ 6,
+ lambda: hover_over_element(driver, "/course/tutors-starter-course"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 7 - Hovering over the third card
+ '''
+ guide_step(
+ 7,
+ lambda: hover_over_element(driver, "/course/layout-reference-course"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 8 - Hovering over the fourth card
+ '''
+ guide_step(
+ 8,
+ lambda: scroll_to_element(driver, "/course/reference-course"),
+ lambda: hover_over_element(driver, "/course/reference-course"),
+ order="action-before-vo"
+ )
+
+ '''
+ Step 9 - Click the search button
+ '''
+ guide_step(
+ 9,
+ lambda: click_element_by_xpath(driver, '/html/body/div[1]/div[1]/header/header/section/div[3]/div[1]/div[3]/button/div/span[2]'),
+ )
+
+ '''
+ Step 10 - Search for a term
+ '''
+ guide_step(
+ 10,
+ lambda: type_into_field(driver, "search", "card"),
+ )
+
+ '''
+ Step 11 - Open the search result in a new tab
+ '''
+ guide_step(
+ 11,
+ lambda: open_link_in_new_tab(driver, "https://tutors.dev/note/tutors-reference-manual/unit-1-fundamentals/note-02-cards")
+ )
+
+ '''
+ Step 12 - End demo
+ '''
+ guide_step(
+ 12,
+ lambda: None
+ )
+
+
+ finally:
+ print("Script complete -> moving to assembly")
+ driver.quit()
+
+
+# Main function to run the test and assemble the clips
+if __name__ == "__main__":
+ guideframe_script()
+ assemble(12)
+```
+
+## GuideFrame Code Walkthrough Markdown
+
+```markdown
+## Step 1
+This brief GuideFrame demo begins by opening tutors.dev. This is achieved by using the open u r l function prior to step 1.
+
+## Step 2
+We can demonstrate the ability to pass multiple actions to GuideFrame by activating dark mode. This involves 3 calls to the click element function. We'll also call the sleep function for 0.5 seconds between each action.
+
+## Step 3
+Now let's use the hover and click function to move to the tutors reference manual.
+
+## Step 4
+We can pass None to lambda in order to hang on a page. This is useful for when you wish to simply add voiceover to a static page. Let's use the hover over element function a few times here. We'll also pass the order argument. This ensures that the action begins before the voiceover.
+
+## Step 5
+We'll start with the getting started card.
+
+## Step 6
+Now let's move on to the simple starter card.
+
+## Step 7
+Let's continue to the alternative starter card. Before using the scroll to element function to move to the reference course.
+
+## Step 8
+In this case, we use this function to access an element that may not be in the display window.
+
+## Step 9
+Let's use the click element by xpath function. We'll use it to access the search bar at the top of the screen.
+
+## Step 10
+With the search bar open, let's use the type into field function to type in card.
+
+## Step 11
+Let's open the link in the first result in a new tab. We can do this by using the open link in new tab function.
+
+## Step 12
+And that concludes this GuideFrame demonstration.
+```