Update templates

ambarltd · Nov 14, 2024 · 61c4724 · 61c4724
1 parent 6514150
commit 61c4724
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/application/frontend-javascript/src/views/event-bus-with-ambar.handlebars b/application/frontend-javascript/src/views/event-bus-with-ambar.handlebars
@@ -187,12 +187,14 @@
 
     <div class="container">
         <div class="description">
-            <p class="lead mb-0">
-                Ambar reads and stores database rows, and forwards them as messages
-                to HTTP endpoints with delivery and ordering guarantees. </p>
-            <p class="lead mb-0">
+            <p class="lead mb-0 fw-semibold text-center mx-auto" style="max-width: 500px">
                 Ambar is the most robust, performant, and easy to use event bus for event sourcing!
             </p>
+            <br>
+            <p class="lead mb-0 fw-normal text-center mx-auto" style="max-width: 700px">
+                Ambar reads and stores database rows, and forwards them as messages
+                to HTTP endpoints with delivery and ordering guarantees.
+            </p>
         </div>
 
         <div class="table-container">
@@ -228,7 +230,7 @@
                     <thead>
                         <tr>
                             <th>Status</th>
-                            <th>Service</th>
+                            <th>Destination</th>
                             <th>Type</th>
                             <th>Endpoint</th>
                             <th>Sources</th>

diff --git a/application/frontend-javascript/src/views/layouts/main.handlebars b/application/frontend-javascript/src/views/layouts/main.handlebars
@@ -8,7 +8,6 @@
 </head>
 <body>
 
-<!-- Fixed navigation bar -->
 <div class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-slate-500 via-blue-500 to-slate-500 text-white shadow-lg" style="padding: 10px 0;">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="py-4 flex flex-wrap items-center justify-center gap-4 text-base">
@@ -20,13 +19,26 @@
           </svg>
           <span>Instructions</span>
         </button>
-        <div class="absolute left-0 mt-2 w-64 rounded-md shadow-lg bg-white text-gray-700 transform opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 transition-all z-50">
+        <div class="absolute left-0 mt-2 w-96 rounded-md shadow-lg bg-white text-gray-700 transform opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 transition-all z-50">
           <div class="p-4 text-sm">
             <p class="font-medium mb-2">Getting Started:</p>
             <ul class="space-y-2">
-              <li>• Sign in or create an account</li>
-              <li>• Explore the application components</li>
-              <li>• Check verification status</li>
+              <li>1. Sign up for an account, verify your email, and sign in.</li>
+              <li>2. Explore the results in the event store database, projections database, and event bus.</li>
+              <li>3. Read the code for
+                  <a class="text-blue-600 hover:text-blue-800 underline transition-color" href="https://github.com/ambarltd/courses-v2/blob/main/application/backend-php/code/src/BoundedContext/Identity/User/CommandHandler/SignUp/SignUpHandler.php">
+                      Command Handler: Sign Up
+                  </a> and
+                  <a class="text-blue-600 hover:text-blue-800 underline transition-color" href="https://github.com/ambarltd/courses-v2/blob/main/application/backend-php/code/src/BoundedContext/Identity/User/Projection/UserDetails/UserDetailsProjector.php">
+                      Projection: User Details
+                  </a>
+              </li>
+              <li>4. Read more code, write new code, redeploy, play around, the sky is the limit!</li>
+              <li>5. If you get stuck, just ask questions in the #event-sourcing channel on the
+                  <a class="text-blue-600 hover:text-blue-800 underline transition-color" href ="https://www.launchpass.com/ambar">
+                      Ambar Community Slack.
+                  </a>
+              </li>
             </ul>
           </div>
         </div>

diff --git a/application/frontend-javascript/src/views/layouts/signed-out.handlebars b/application/frontend-javascript/src/views/layouts/signed-out.handlebars
@@ -11,25 +11,40 @@
 <div class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-slate-500 via-blue-500 to-slate-500 text-white shadow-lg" style="padding: 10px 0;">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="py-4 flex flex-wrap items-center justify-center gap-4 text-base">
+      <!-- Help Button with Dropdown -->
       <div class="relative group">
         <button class="w-full sm:w-auto flex items-center space-x-2 bg-white/20 hover:bg-white/30 transition-colors rounded-md px-4 py-2">
           <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>
           <span>Instructions</span>
         </button>
-        <div class="absolute left-0 mt-2 w-64 rounded-md shadow-lg bg-white text-gray-700 transform opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 transition-all z-50">
+        <div class="absolute left-0 mt-2 w-96 rounded-md shadow-lg bg-white text-gray-700 transform opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 transition-all z-50">
           <div class="p-4 text-sm">
             <p class="font-medium mb-2">Getting Started:</p>
             <ul class="space-y-2">
-              <li>• Sign in or create an account</li>
-              <li>• Explore the application components</li>
-              <li>• Check verification status</li>
+              <li>1. Sign up for an account, verify your email, and sign in.</li>
+              <li>2. Explore the results in the event store database, projections database, and event bus.</li>
+              <li>3. Read the code for
+                  <a class="text-blue-600 hover:text-blue-800 underline transition-color" href="https://github.com/ambarltd/courses-v2/blob/main/application/backend-php/code/src/BoundedContext/Identity/User/CommandHandler/SignUp/SignUpHandler.php">
+                      Command Handler: Sign Up
+                  </a> and
+                  <a class="text-blue-600 hover:text-blue-800 underline transition-color" href="https://github.com/ambarltd/courses-v2/blob/main/application/backend-php/code/src/BoundedContext/Identity/User/Projection/UserDetails/UserDetailsProjector.php">
+                      Projection: User Details
+                  </a>
+              </li>
+              <li>4. Read more code, write new code, redeploy, play around, the sky is the limit!</li>
+              <li>5. If you get stuck, just ask questions in the #event-sourcing channel on the
+                  <a class="text-blue-600 hover:text-blue-800 underline transition-color" href ="https://www.launchpass.com/ambar">
+                      Ambar Community Slack.
+                  </a>
+              </li>
             </ul>
           </div>
         </div>
       </div>
 
+      <!-- Direct Links -->
       <a href="http://localhost:8081" target="_blank" rel="noopener" class="w-full sm:w-auto flex items-center justify-center space-x-2 bg-white/20 hover:bg-white/30 transition-colors rounded-md px-4 py-2">
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M1 5h8M5 17v4M1 19h8M5 10v4M1 12h8M19 3v4M15 5h8M19 17v4M15 19h8M19 10v4M15 12h8"></path>