wip

app/controllers/home.php

@@ -28,6 +28,9 @@ class Home extends Controller {
     public function index() {
         self::$title = '{SITENAME}';
         self::$pageDescription = 'AllTheBookmarks.com is here to provide you a better, faster, and easier way - to manage bookmarks across multiple browser and multiple devices seamlessly.';
+        if ( App::$isLoggedIn ) {
+            return Views::view( 'bookmarks.introduction' );
+        }
         Views::view( 'index' );
     }
 

app/plugins/bookmarks/controllers/bookmarks.php

@@ -2,7 +2,7 @@
 /**
  * app/plugins/bookmarks/controllers/bookmarks.php
  *
- * This is the bug reports controller.
+ * This is the bookmarks controller.
  *
  * @package TP Bookmarks
  * @version 3.0
@@ -70,22 +70,6 @@ class Bookmarks extends Controller {
         $this->setPrefToggles();
     }
 
-    public function tutorials( $browser = '', $tutorial = '' ) {
-        self::$title = 'Tutorials - {SITENAME}';
-        if ( empty( $browser ) && empty( $tutorial ) ) {
-            return Views::view( 'bookmarks.tutorials.list' );
-        }
-        if ( ! in_array( $browser, ['chrome','brave','firefox','edge','safari','opera'] ) ) {
-            Issues::add( 'error', 'Unknown browser' );
-            return Views::view( 'bookmarks.tutorials.list' );
-        }
-        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
-            Issues::add( 'error', 'Unknown tutorial' );
-            return Views::view( 'bookmarks.tutorials.list' );
-        }
-        return Views::view( 'bookmarks.tutorials.' . $browser . '.' . $tutorial );
-    }
-
     public function index() {
         self::$title = 'Manage Bookmarks - {SITENAME}';
         if ( Input::exists('submit') ) {
@@ -936,7 +920,7 @@ class Bookmarks extends Controller {
         $out .= '<div class="mb-3 row">';
         $out .= '<label for="folder_id" class="col-lg-5 col-form-label text-end">Folder</label>';
         $out .= '<div class="col-lg-3">';
-        $out .= '<select name="folder_id" id="folder_id" class="form-select">';
+        $out .= '<select name="folder_id" id="folder_id" class="form-control">';
         if ( isset( $options[0] ) ) {
             $assocOptions = [];
             foreach ( $options as $key => $value ) {

app/plugins/bookmarks/controllers/tutorials.php

@@ -0,0 +1,103 @@
+<?php
+/**
+ * app/plugins/bookmarks/controllers/tutorials.php
+ *
+ * This is the tutorials controller.
+ *
+ * @package TP Bookmarks
+ * @version 3.0
+ * @author  Joey Kimsey <Joey@thetempusproject.com>
+ * @link    https://TheTempusProject.com
+ * @license https://opensource.org/licenses/MIT [MIT LICENSE]
+ */
+namespace TheTempusProject\Controllers;
+
+use TheTempusProject\Houdini\Classes\Issues;
+use TheTempusProject\Houdini\Classes\Views;
+use TheTempusProject\Classes\Controller;
+use TheTempusProject\Houdini\Classes\Navigation;
+use TheTempusProject\Houdini\Classes\Components;
+use TheTempusProject\Bedrock\Functions\Input;
+
+class Tutorials extends Controller {
+    public function __construct() {
+        parent::__construct();
+        self::$title = 'Tutorials - {SITENAME}';
+        self::$pageDescription = 'We have detailed walkthroughs on how to perform a number of tasks for every major browser.';
+    }
+
+    public function index( $browser = '', $tutorial = '' ) {
+        return Views::view( 'bookmarks.tutorials.list' );
+    }
+    
+    public function brave( $tutorial = '' ) {
+        Navigation::setCrumbComponent( 'tutorialCrumbs', Input::get( 'url' ) );
+
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            $test = new \stdClass();
+            $test->pretty = 'Brave';
+            $test->printed = 'brave';
+            return Views::view( 'bookmarks.tutorials.card', [ $test ] );
+        }
+        return Views::view( 'bookmarks.tutorials.brave.' . $tutorial );
+    }
+
+    public function chrome( $tutorial = '' ) {
+        Navigation::setCrumbComponent( 'tutorialCrumbs', Input::get( 'url' ) );
+
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            $test = new \stdClass();
+            $test->pretty = 'Chrome';
+            $test->printed = 'chrome';
+            return Views::view( 'bookmarks.tutorials.card', [ $test ] );
+        }
+        
+        return Views::view( 'bookmarks.tutorials.chrome.' . $tutorial );
+    }
+
+    public function edge( $tutorial = '' ) {
+        Navigation::setCrumbComponent( 'tutorialCrumbs', Input::get( 'url' ) );
+
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            $test = new \stdClass();
+            $test->pretty = 'Edge';
+            $test->printed = 'edge';
+            return Views::view( 'bookmarks.tutorials.card', [ $test ] );
+        }
+        return Views::view( 'bookmarks.tutorials.edge.' . $tutorial );
+    }
+
+    public function opera( $tutorial = '' ) {
+        Navigation::setCrumbComponent( 'tutorialCrumbs', Input::get( 'url' ) );
+
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            $test = new \stdClass();
+            $test->pretty = 'Opera';
+            $test->printed = 'opera';
+            return Views::view( 'bookmarks.tutorials.card', [ $test ] );
+        }
+        return Views::view( 'bookmarks.tutorials.opera.' . $tutorial );
+    }
+
+    public function firefox( $tutorial = '' ) {
+        Navigation::setCrumbComponent( 'tutorialCrumbs', Input::get( 'url' ) );
+
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            $test = new \stdClass();
+            $test->pretty = 'Firefox';
+            $test->printed = 'firefox';
+            return Views::view( 'bookmarks.tutorials.card', [ $test ] );
+        }
+        return Views::view( 'bookmarks.tutorials.firefox.' . $tutorial );
+    }
+
+    public function safari( $tutorial = '' ) {
+        Issues::add( 'notice', 'Safari is not supported at this time.' );
+        return;
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            Issues::add( 'notice', 'Unknown tutorial' );
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        return Views::view( 'bookmarks.tutorials.safari.' . $tutorial );
+    }
+}

app/plugins/bookmarks/plugin.php

@@ -46,7 +46,7 @@ class Bookmarks extends Plugin {
         ],
         [
             'text' => 'Tutorials',
-            'url' => '{ROOT_URL}bookmarks/tutorials',
+            'url' => '{ROOT_URL}tutorials',
             'filter' => 'bkmtuts',
         ],
         [
@@ -57,7 +57,7 @@ class Bookmarks extends Plugin {
     public $info_footer_links = [
         [
             'text' => 'Tutorials',
-            'url' => '{ROOT_URL}bookmarks/tutorials',
+            'url' => '{ROOT_URL}tutorials',
         ],
     ];
     public $configMatrix = [

app/plugins/bookmarks/views/bookmarks/create.html

@@ -30,7 +30,7 @@
                 <div class="mb-3 row">
                     <label for="title" class="col-lg-5 col-form-label text-end">Privacy</label>
                     <div class="col-lg-3">
-                        <select id="privacy" name="privacy" class="form-select">
+                        <select id="privacy" name="privacy" class="form-control">
                             <option value="private">Private</option>
                             <option value="public">Public</option>
                         </select>

app/plugins/bookmarks/views/bookmarks/list.html

@@ -12,7 +12,7 @@
         {LOOP}
         <tr>
             <td style="text-align: center;">
-                <a href="{url}">
+                <a href="{url}" class="text-decoration-none atb-green">
                     {title}
                 </a>
             </td>

app/plugins/bookmarks/views/bookmarks/unsorted.html

@@ -7,6 +7,9 @@
             When you add bookmarks without a folder, they will be considered "Unsorted". There is nothing wrong with these bookmarks, 
             but much of the application relies on folder for organizing and displaying bookmarks. You may find that these bookmarks do not regularly appear in other sections of the application.
         </p>
+        <p class="px-2 text-muted text-center">
+            This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
+        </p>
         <hr>
         {/BKMTUTS}
         <table class="table table-striped context-main1">
@@ -23,7 +26,7 @@
                 {LOOP}
                 <tr>
                     <td style="text-align: center;">
-                        <a href="{url}">
+                        <a href="{url}" class="text-decoration-none atb-green">
                             {title}
                         </a>
                     </td>

app/plugins/bookmarks/views/dash.html

@@ -11,6 +11,9 @@
             Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
             my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
         </p>
+        <p class="px-2 text-muted text-center">
+            This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
+        </p>
         <hr>
         {/BKMTUTS}
         {VIEW_OPTIONS}

app/plugins/bookmarks/views/dashboards/list.html

@@ -11,6 +11,9 @@
             Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
             my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
         </p>
+        <p class="px-2 text-muted text-center">
+            This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
+        </p>
         <hr>
         {/BKMTUTS}
         <div class="row g-3 text-center p-2">

app/plugins/bookmarks/views/export.html

@@ -12,7 +12,10 @@
             find your file for download. You take that newly saved file an import it into your browser of choice.
         </p>
         <p class="px-2">
-            If you need help importing your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+            If you need help importing your bookmarks, we have <a href="/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+        <p class="px-2 text-muted text-center">
+            This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
         </p>
         <hr>
         {/BKMTUTS}

app/plugins/bookmarks/views/exportExplainer.html

@@ -11,7 +11,7 @@
             find your file for download. You take that newly saved file an import it into your browser of choice.
         </p>
         <p class="px-2">
-            If you need help importing your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+            If you need help importing your bookmarks, we have <a href="/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
         </p>
     </div>
 </div>

app/plugins/bookmarks/views/folders/create.html

@@ -22,7 +22,7 @@
                 <div class="mb-3 row">
                     <label for="title" class="col-lg-5 col-form-label text-end">Privacy</label>
                     <div class="col-lg-3">
-                        <select id="privacy" name="privacy" class="form-select">
+                        <select id="privacy" name="privacy" class="form-control">
                             <option value="private">Private</option>
                             <option value="public">Public</option>
                         </select>

app/plugins/bookmarks/views/folders/listPage.html

@@ -5,6 +5,9 @@
     <p class="ps-2">
         Just like the folders you have in your web browser, you can add, edit, or remove folders for organizing your bookmarks here.
     </p>
+    <p class="px-2 text-muted text-center">
+        This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
+    </p>
     <hr>
     {/BKMTUTS}
     {foldersList}

app/plugins/bookmarks/views/import.html

@@ -11,7 +11,10 @@
             You will need to browse your computer and select the <strong>.html</strong> file where you exported your bookmarks from your browser.
         </p>
         <p class="ps-2">
-            If you need help exporting your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+            If you need help exporting your bookmarks, we have <a href="/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+        <p class="px-2 text-muted text-center">
+            This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
         </p>
         <hr>
         {/BKMTUTS}

app/plugins/bookmarks/views/importExplainer.html

@@ -10,7 +10,7 @@
             You will need to browse your computer and select the <strong>.html</strong> file where you exported your bookmarks from your browser.
         </p>
         <p class="ps-2">
-            If you need help exporting your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+            If you need help exporting your bookmarks, we have <a href="/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
         </p>
     </div>
 </div>

app/plugins/bookmarks/views/introduction.html

@@ -1,60 +1,58 @@
-<div class="container py-5">
+<div class="container py-5 context-main-bg mt-4">
     <!-- Hero Section -->
     <div class="text-center mb-5">
-      <h1 class="display-4">Welcome to <span class="text-primary">All The Bookmarks</span></h1>
+        <h1 class="display-4">Welcome to <span class="atb-green">All The Bookmarks</span></h1>
-      <p class="lead">Your ultimate tool for organizing, sharing, and managing website bookmarks effortlessly.</p>
+        <p class="lead">You've unlocked the ultimate tool for organizing, sharing, and managing all of your bookmarks effortlessly.</p>
-      <img src="path/to/hero-image.jpg" alt="Illustration of bookmark organization" class="img-fluid my-4">
+        <img src="/images/manage.png" alt="Illustration of bookmark organization" class="img-fluid m-4 border border-white" style="width: 600px;">
-      <a href="#" class="btn btn-primary btn-lg">Get Started</a>
     </div>
-  
+    <hr>
     <!-- Features Section -->
-    <div class="row text-center mb-5">
+    <div class="row text-center my-4">
-      <div class="col-md-4">
+        <div class="col-md-4">
-        <i class="fas fa-folder fa-3x text-primary mb-3"></i>
+            <i class="fas fa-folder fa-3x atb-green mb-3"></i>
-        <h5>Organize Your Bookmarks</h5>
+            <h5>Organize Your Bookmarks</h5>
-        <p>Create folders to keep your bookmarks tidy and easy to find.</p>
+            <p>Create folders to keep your bookmarks tidy and easy to find.</p>
-      </div>
+        </div>
-      <div class="col-md-4">
+        <div class="col-md-4">
-        <i class="fas fa-share-alt fa-3x text-primary mb-3"></i>
+            <i class="fas fa-share-alt fa-3x atb-green mb-3"></i>
-        <h5>Share Collections</h5>
+            <h5>Share Collections</h5>
-        <p>Share dashboards with groups of folders to collaborate seamlessly.</p>
+            <p>Share dashboards with groups of folders to collaborate seamlessly.</p>
-      </div>
+        </div>
-      <div class="col-md-4">
+        <div class="col-md-4">
-        <i class="fas fa-sync-alt fa-3x text-primary mb-3"></i>
+            <i class="fas fa-sync-alt fa-3x atb-green mb-3"></i>
-        <h5>Import & Export</h5>
+            <h5>Import & Export</h5>
-        <p>Sync your bookmarks across major browsers with our easy import/export tools.</p>
+            <p>Sync your bookmarks across major browsers with our easy import/export tools.</p>
-      </div>
+        </div>
     </div>
-  
+    <hr>
     <!-- Browser Extensions Section -->
-    <div class="row align-items-center mb-5">
+    <div class="row align-items-center my-4 ps-5">
-      <div class="col-md-6">
+        <div class="col-md-6">
-        <h3>Bookmark Anytime, Anywhere</h3>
+            <h3>Bookmark Anything; Anytime, Anywhere</h3>
-        <p>Our browser extension works with Chrome, Firefox, Brave, Edge, and Opera, making it simple to save and manage bookmarks directly from your browser.</p>
+            <p>Our browser extension works with Chrome, Firefox, Brave, Edge, and Opera, making it simple to save and manage bookmarks directly from your browser.</p>
-        <a href="#" class="btn btn-outline-primary">Install Extension</a>
+            <a href="/extensions" class="btn atb-green-outline">Install Extension</a>
-      </div>
+        </div>
-      <div class="col-md-6 text-center">
+        <div class="col-md-6 text-center">
-        <img src="path/to/extension-image.jpg" alt="Illustration of browser extensions" class="img-fluid">
+            <img src="/images/extension.png" alt="Illustration of browser extensions" class="img-fluid">
-      </div>
+        </div>
     </div>
-  
+    <hr>
     <!-- Dashboards Section -->
-    <div class="row align-items-center mb-5">
+    <div class="row align-items-center my-4 ps-5">
-      <div class="col-md-6 text-center">
+        <div class="col-md-6 text-center">
-        <img src="path/to/dashboard-image.jpg" alt="Illustration of dashboards" class="img-fluid">
+            <img src="/images/dashboard.png" alt="Illustration of dashboards" class="img-fluid">
-      </div>
+        </div>
-      <div class="col-md-6">
+        <div class="col-md-6">
-        <h3>Dynamic Dashboards</h3>
+            <h3>Dynamic Dashboards</h3>
-        <p>Group folders into dashboards and share them to keep everyone updated on the latest changes.</p>
+            <p>Group folders into dashboards and share them to keep everyone updated on the latest changes.</p>
-        <a href="#" class="btn btn-outline-primary">Learn More About Dashboards</a>
+            <a href="/bookmarks/dashboards" class="btn atb-green-outline">Learn More About Dashboards</a>
-      </div>
+        </div>
     </div>
-  
+    <hr>
     <!-- Call to Action -->
-    <div class="text-center">
+    <div class="text-center mt-4">
-      <h4>Ready to Get Started?</h4>
+        <h4>Ready to Get Started?</h4>
-      <p>Start organizing, sharing, and syncing your bookmarks today!</p>
+        <p>Start organizing, sharing, and syncing your bookmarks today!</p>
-      <a href="#" class="btn btn-success btn-lg">Create Your First Folder</a>
+        <a href="/bookmarks/createFolder" class="btn btn-lg atb-green-bg">Create Your First Folder</a>
     </div>
-  </div>
+</div>
-  

app/plugins/bookmarks/views/share.html

@@ -10,6 +10,9 @@
             <p class="px-2">
                 Any link or folder can be shared and by default, the extensions and app default to <strong>private</strong>. These "public" items can be viewed by anyone with the link provided from this page.
             </p>
+            <p class="px-2 text-muted text-center">
+                This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
+            </p>
             <hr>
         </div>
         {/BKMTUTS}

app/plugins/bookmarks/views/tutorials/brave/export.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Export bookmarks from Brave</h2>
+            {tutorialCrumbs}
             <hr>
             <p class="card-text">
                 Exporting your bookmarks is lightning fast and simple inside of brave.

app/plugins/bookmarks/views/tutorials/brave/import.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Import bookmarks in Brave</h2>
+            {tutorialCrumbs}
             <hr>
             <p class="card-text">
                 Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of brave.

app/plugins/bookmarks/views/tutorials/brave/pin.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Brave</h2>
+            {tutorialCrumbs}
             <hr>
             <div class="alert alert-success w-100 text-center" role="alert">
                 If you have not already installed the AllTheBookmarks Brave extension, you can find it in the 

app/plugins/bookmarks/views/tutorials/brave/settings.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Access Extension Settings in Brave</h2>
+            {tutorialCrumbs}
             <hr>
             <div class="alert alert-success w-100 text-center" role="alert">
                 If you have not already installed the AllTheBookmarks Brave extension, you can find it in the 
@@ -26,7 +27,7 @@
             </div>
             <p class="card-text">
                 (If you need help pinning the extension to your toolbar for easy access, we have a separate 
-                <a href="/bookmarks/tutorials/brave/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+                <a href="/tutorials/brave/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
             </p>
         </div>
     </div>

app/plugins/bookmarks/views/tutorials/card.html

@@ -0,0 +1,38 @@
+<section class="container my-5">
+    <h1 class="text-center mb-4">{pretty} Tutorials</h1>
+    <div class="row g-4">
+        <!-- Opera Section -->
+        <div class="col-md-8 offset-2">
+            {tutorialCrumbs}
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-{printed} fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title text-center">{pretty}</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush rounded">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}tutorials/{printed}/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}tutorials/{printed}/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}tutorials/{printed}/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}tutorials/{printed}/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

app/plugins/bookmarks/views/tutorials/chrome/export.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Export bookmarks from Chrome</h2>
+            {tutorialCrumbs}
             <hr>
             <p class="card-text">
                 Exporting your bookmarks is lightning fast and simple inside of chrome.

app/plugins/bookmarks/views/tutorials/chrome/import.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Import bookmarks in Chrome</h2>
+            {tutorialCrumbs}
             <hr>
             <p class="card-text">
                 Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of chrome.

app/plugins/bookmarks/views/tutorials/chrome/pin.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Chrome</h2>
+            {tutorialCrumbs}
             <hr>
             <div class="alert alert-success w-100 text-center" role="alert">
                 If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the 

app/plugins/bookmarks/views/tutorials/chrome/settings.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Access Extension Settings in Chrome</h2>
+            {tutorialCrumbs}
             <hr>
             <div class="alert alert-success w-100 text-center" role="alert">
                 If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the 
@@ -26,7 +27,7 @@
             </div>
             <p class="card-text">
                 (If you need help pinning the extension to your toolbar for easy access, we have a separate 
-                <a href="/bookmarks/tutorials/chrome/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+                <a href="/tutorials/chrome/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
             </p>
         </div>
     </div>

app/plugins/bookmarks/views/tutorials/firefox/export.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Export bookmarks in Firefox</h2>
+            {tutorialCrumbs}
             <hr>
             <p class="card-text">
                 Exporting your bookmarks is lightning fast and simple inside of firefox.

app/plugins/bookmarks/views/tutorials/firefox/import.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Import bookmarks in Firefox</h2>
+            {tutorialCrumbs}
             <hr>
             <p class="card-text">
                 Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of firefox.

app/plugins/bookmarks/views/tutorials/firefox/pin.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Firefox</h2>
+            {tutorialCrumbs}
             <hr>
             <div class="alert alert-success w-100 text-center" role="alert">
                 If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the 

app/plugins/bookmarks/views/tutorials/firefox/settings.html

@@ -2,6 +2,7 @@
     <div class="card shadow-sm">
         <div class="card-body context-main-bg">
             <h2 class="card-title text-center mb-4">How to Access Extension Settings in Firefox</h2>
+            {tutorialCrumbs}
             <hr>
             <div class="alert alert-success w-100 text-center" role="alert">
                 If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the 
@@ -26,7 +27,7 @@
             </div>
             <p class="card-text">
                 (If you need help pinning the extension to your toolbar for easy access, we have a separate 
-                <a href="/bookmarks/tutorials/firefox/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+                <a href="/tutorials/firefox/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
             </p>
         </div>
     </div>

app/plugins/bookmarks/views/tutorials/list.html

@@ -10,22 +10,22 @@
                     <hr>
                     <ul class="list-group list-group-flush rounded">
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/opera/pin" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/opera/pin" class="text-decoration-none atb-green">
                                 How to pin the extension to your toolbar
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/opera/settings" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/opera/settings" class="text-decoration-none atb-green">
                                 How to Open the extension settings page
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/opera/import" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/opera/import" class="text-decoration-none atb-green">
                                 How to Import Bookmarks into the browser
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/opera/export" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/opera/export" class="text-decoration-none atb-green">
                                 How to export Bookmarks from the browser
                             </a>
                         </li>
@@ -43,22 +43,22 @@
                     <hr>
                     <ul class="list-group list-group-flush">
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/pin" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/firefox/pin" class="text-decoration-none atb-green">
                                 How to pin the extension to your toolbar
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/settings" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/firefox/settings" class="text-decoration-none atb-green">
                                 How to Open the extension settings page
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/import" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/firefox/import" class="text-decoration-none atb-green">
                                 How to Import Bookmarks into the browser
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/export" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/firefox/export" class="text-decoration-none atb-green">
                                 How to export Bookmarks from the browser
                             </a>
                         </li>
@@ -76,22 +76,22 @@
                     <hr>
                     <ul class="list-group list-group-flush">
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/pin" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/chrome/pin" class="text-decoration-none atb-green">
                                 How to pin the extension to your toolbar
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/settings" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/chrome/settings" class="text-decoration-none atb-green">
                                 How to Open the extension settings page
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/import" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/chrome/import" class="text-decoration-none atb-green">
                                 How to Import Bookmarks into the browser
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/export" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/chrome/export" class="text-decoration-none atb-green">
                                 How to export Bookmarks from the browser
                             </a>
                         </li>
@@ -109,22 +109,22 @@
                     <hr>
                     <ul class="list-group list-group-flush">
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/brave/pin" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/brave/pin" class="text-decoration-none atb-green">
                                 How to pin the extension to your toolbar
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/brave/settings" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/brave/settings" class="text-decoration-none atb-green">
                                 How to Open the extension settings page
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/brave/import" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/brave/import" class="text-decoration-none atb-green">
                                 How to Import Bookmarks into the browser
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/brave/export" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/brave/export" class="text-decoration-none atb-green">
                                 How to export Bookmarks from the browser
                             </a>
                         </li>
@@ -142,22 +142,22 @@
                     <hr>
                     <ul class="list-group list-group-flush">
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/edge/pin" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/edge/pin" class="text-decoration-none atb-green">
                                 How to pin the extension to your toolbar
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/edge/settings" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/edge/settings" class="text-decoration-none atb-green">
                                 How to Open the extension settings page
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/edge/import" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/edge/import" class="text-decoration-none atb-green">
                                 How to Import Bookmarks into the browser
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/edge/export" class="text-decoration-none atb-green">
+                            <a href="{ROOT_URL}tutorials/edge/export" class="text-decoration-none atb-green">
                                 How to export Bookmarks from the browser
                             </a>
                         </li>
@@ -175,22 +175,22 @@
                     <hr>
                     <ul class="list-group list-group-flush">
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/safari/pin" class="text-decoration-none atb-green">
+                            <a  aria-disabled="true" class="text-decoration-none atb-green disabled">
                                 How to pin the extension to your toolbar
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/safari/settings" class="text-decoration-none atb-green">
+                            <a  aria-disabled="true" class="text-decoration-none atb-green disabled">
                                 How to Open the extension settings page
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/safari/import" class="text-decoration-none atb-green">
+                            <a  aria-disabled="true" class="text-decoration-none atb-green disabled">
                                 How to Import Bookmarks into the browser
                             </a>
                         </li>
                         <li class="list-group-item context-second-bg mb-1">
-                            <a href="{ROOT_URL}bookmarks/tutorials/safari/export" class="text-decoration-none atb-green">
+                            <a  aria-disabled="true" class="text-decoration-none atb-green disabled">
                                 How to export Bookmarks from the browser
                             </a>
                         </li>
@@ -198,5 +198,12 @@
                 </div>
             </div>
         </div>
+        {LOGGEDIN}
+        {BKMTUTS}
+        <p class="px-2 text-muted text-center">
+            The Main menu link to this page can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
+        </p>
+        {/BKMTUTS}
+        {/LOGGEDIN}
     </div>
 </section>