fix for the documentation

Author: nitin27may

.github/workflows/jekyll-gh-pages.yml

@@ -7,7 +7,7 @@ on:
     branches: [ main ]
     paths:
       - 'docs/**'
-      - '_config.yml'
+      - 'docs/_config.yml'
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -36,7 +36,7 @@ jobs:
       - name: Build with Jekyll
         uses: actions/jekyll-build-pages@v1
         with:
-          source: ./
+          source: ./docs
           destination: ./_site
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

NuGet-README.md

@@ -11,7 +11,7 @@ permalink: /backend
 The backend of this project is built with .NET 9, following Clean Architecture principles. It provides a robust API layer for the Angular frontend, using Dapper for efficient data access and PostgreSQL as the database.
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/CleanArchitecture.png" alt="Clean Architecture Diagram" style="width: 90%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <img src="img/screenshots/CleanArchitecture.png" alt="Clean Architecture Diagram" style="width: 90%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
   <p style="font-style: italic; margin-top: 10px;">Clean Architecture implementation in the .NET 9 backend</p>
 </div>
 
@@ -405,7 +405,7 @@ public class UnitOfWork : IUnitOfWork
 The application uses JWT-based authentication with role-based authorization:
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/landing-page.png" alt="Login Page" style="width: 70%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <img src="img/screenshots/landing-page.png" alt="Login Page" style="width: 70%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
   <p style="font-style: italic; margin-top: 10px;">Login page that connects to the JWT authentication system</p>
 </div>
 
@@ -490,11 +490,11 @@ The backend implements a flexible permission system:
 
 <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
   <div style="flex: 1; min-width: 300px;">
-    <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/role-master.png" alt="Role Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <img src="img/screenshots/role-master.png" alt="Role Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <p style="font-style: italic; text-align: center;">Role Management System</p>
   </div>
   <div style="flex: 1; min-width: 300px;">
-    <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/role-permission-mapping.png" alt="Role Permission Mapping" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <img src="img/screenshots/role-permission-mapping.png" alt="Role Permission Mapping" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <p style="font-style: italic; text-align: center;">Role Permission Mapping</p>
   </div>
 </div>
@@ -635,7 +635,7 @@ public class ExceptionMiddleware
 Comprehensive activity tracking:
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/User-activity-log.png" alt="User Activity Log" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <img src="img/screenshots/User-activity-log.png" alt="User Activity Log" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
   <p style="font-style: italic; margin-top: 10px;">User Activity Logging System</p>
 </div>
 
@@ -707,7 +707,7 @@ public class ActivityLoggingMiddleware
 Complete CRUD operations:
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/contact-list-page.png" alt="Contact List" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <img src="img/screenshots/contact-list-page.png" alt="Contact List" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
   <p style="font-style: italic; margin-top: 10px;">Contact Management System powered by the API</p>
 </div>
 

docs/backend.md

@@ -21,7 +21,7 @@ This guide explains the Docker setup for the Clean Architecture Full-Stack appli
 The application uses Docker to containerize all services for consistent development and deployment. This containerization approach ensures that the application runs the same way in all environments, from development to production.
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/architecture.png" alt="Docker Architecture" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <img src="img//screenshots/architecture.png" alt="Docker Architecture" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
   <p style="font-style: italic; margin-top: 10px;">Architecture diagram showing the containerized application components</p>
 </div>
 

docs/docker-guide.md

@@ -11,7 +11,7 @@ permalink: /Frontend
 The frontend of this project is built with Angular 19, leveraging modern Angular features including standalone components, signals for state management, the inject() function for dependency injection, and a powerful combination of Angular Material and TailwindCSS for styling.
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/contact-list-page.png" alt="Contact List Page" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <img src="img//screenshots/contact-list-page.png" alt="Contact List Page" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
   <p style="font-style: italic; margin-top: 10px;">The Contact List page demonstrating the clean UI design with Angular Material and TailwindCSS</p>
 </div>
 
@@ -331,11 +331,11 @@ Authentication is implemented using JWT tokens with automatic refresh capability
 
 <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
   <div style="flex: 1; min-width: 300px;">
-    <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/landing-page.png" alt="Login Page" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <img src="img//screenshots/landing-page.png" alt="Login Page" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <p style="font-style: italic; text-align: center;">Login Page with Material Design components</p>
   </div>
   <div style="flex: 1; min-width: 300px;">
-    <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/landing-page-drak.png" alt="Login Page (Dark Mode)" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <img src="img//screenshots/landing-page-drak.png" alt="Login Page (Dark Mode)" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <p style="font-style: italic; text-align: center;">Login Page in Dark Mode</p>
   </div>
 </div>
@@ -466,7 +466,7 @@ The application includes a complete authentication system with:
 ### Role-Based Access Control
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/role-permission-mapping.png" alt="Role Permission Mapping" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <img src="img//screenshots/role-permission-mapping.png" alt="Role Permission Mapping" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
   <p style="font-style: italic; margin-top: 10px;">Role Permission Mapping interface for administrators</p>
 </div>
 
@@ -524,11 +524,11 @@ export class HasPermissionDirective {
 
 <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
   <div style="flex: 1; min-width: 300px;">
-    <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/contact-list-page.png" alt="Contact List View" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <img src="img//screenshots/contact-list-page.png" alt="Contact List View" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <p style="font-style: italic; text-align: center;">Contact List View with filtering and sorting</p>
   </div>
   <div style="flex: 1; min-width: 300px;">
-    <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/Contacnt-form.png" alt="Contact Form" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <img src="img//screenshots/Contacnt-form.png" alt="Contact Form" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <p style="font-style: italic; text-align: center;">Contact Form with validation</p>
   </div>
 </div>
@@ -537,11 +537,11 @@ export class HasPermissionDirective {
 
 <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
   <div style="flex: 1; min-width: 300px;">
-    <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/role-master.png" alt="Role Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <img src="img//screenshots/role-master.png" alt="Role Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <p style="font-style: italic; text-align: center;">Role Management</p>
   </div>
   <div style="flex: 1; min-width: 300px;">
-    <img src="/clean-architecture-docker-dotnet-angular/img/screenshots/operation-master.png" alt="Operation Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <img src="img//screenshots/operation-master.png" alt="Operation Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <p style="font-style: italic; text-align: center;">Operation Management</p>
   </div>
 </div>