Skip to content

Add API endpoint guide to Home page #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Add API endpoint guide to Home page #15

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb9b8cf
Initial plan
Copilot Feb 3, 2026
ac4a0e1
Add comprehensive API endpoint guide to Home page
Copilot Feb 3, 2026
8eceb0e
Fix hardcoded URLs to use dynamic host values
Copilot Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 106 additions & 0 deletions Views/Home/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,112 @@
</div>
</div>

<!-- API Endpoint Guide Section -->
<div class="container mt-5 pt-4">
<div class="row mb-4">
<div class="col-12 text-center">
<h2 class="display-5 fw-bold text-primary mb-3">
<i class="bi bi-code-square"></i> API Endpoint Guide
</h2>
<p class="lead text-muted">
Access our RESTful APIs for programmatic integration with the Ship Services platform.
</p>
</div>
</div>

<!-- API Documentation Cards -->
<div class="row g-4 mb-4">
<!-- Ship Agencies API -->
<div class="col-lg-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="bi bi-people-fill"></i> Ship Agencies API</h5>
</div>
<div class="card-body">
<div class="mb-3">
<span class="badge bg-success me-2">GET</span>
<code class="text-dark">/api/ShipAgenciesApi</code>
</div>
<p class="card-text mb-3">Retrieve all ship agencies with their contact information and details.</p>

<div class="mb-3">
<strong>Response Example:</strong>
<pre class="bg-light p-3 rounded mt-2"><code>[
{
"id": 1,
"agencyName": "Blue Ocean Maritime",
"contactPerson": "Alice Dsouza",
"contactEmail": "alice@blueocean.com"
},
{
"id": 2,
"agencyName": "Global Ports",
"contactPerson": "John Lee",
"contactEmail": "john@globalports.com"
}
]</code></pre>
</div>
</div>
</div>
</div>

<!-- Swagger UI Card -->
<div class="col-lg-6">
<div class="card border-0 shadow-sm h-100 bg-light">
<div class="card-body d-flex flex-column justify-content-center text-center p-5">
<i class="bi bi-play-circle-fill display-1 text-primary mb-4"></i>
<h4 class="mb-3">Interactive API Testing</h4>
<p class="text-muted mb-4">
Try out all available APIs directly in your browser with our Swagger UI interface.
Test endpoints, view request/response formats, and explore the complete API documentation.
</p>
<a href="/swagger" class="btn btn-primary btn-lg">
<i class="bi bi-box-arrow-up-right"></i> Open Swagger UI
</a>
</div>
</div>
</div>
Comment on lines +119 to +133

Copilot AI Feb 3, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Swagger UI link will not function in production environments since Swagger is only enabled when the application runs in Development mode (as configured in Program.cs lines 12-16). When users click this button in production, they will encounter a 404 error. Consider either:

  1. Adding conditional rendering to show this card only in Development environments using if (Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == "Development")
  2. Adding a note in the card explaining that Swagger is only available in development environments
  3. Configuring Swagger to be available in all environments (though this may have security implications)

Copilot uses AI. Check for mistakes.
</div>

<!-- API Usage Information -->
<div class="row">
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-body">
<h5 class="card-title mb-3"><i class="bi bi-info-circle-fill text-info"></i> Quick Start Guide</h5>
<div class="row">
<div class="col-md-4 mb-3">
<h6 class="fw-bold">1. Base URL</h6>
<p class="text-muted small mb-0">
All API endpoints are accessible at:<br>
<code>@Context.Request.Scheme://@Context.Request.Host/api/</code>
</p>
</div>
<div class="col-md-4 mb-3">
<h6 class="fw-bold">2. Response Format</h6>
<p class="text-muted small mb-0">
All responses are returned in JSON format with appropriate HTTP status codes.
</p>
</div>
<div class="col-md-4 mb-3">
<h6 class="fw-bold">3. Testing</h6>
<p class="text-muted small mb-0">
Use tools like curl, Postman, or our built-in Swagger UI to test the endpoints.
</p>
</div>
</div>

<!-- Example cURL Command -->
<div class="mt-3 pt-3 border-top">
<h6 class="fw-bold mb-2">Example cURL Command:</h6>
<pre class="bg-light p-3 rounded mb-0"><code>curl -X GET "@Context.Request.Scheme://@Context.Request.Host/api/ShipAgenciesApi" -H "accept: application/json"</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Optional: Animated CSS/JS (Bootstrap icons & Animate.css for demo effect) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">