Improve README formatting
This commit is contained in:
220
README.md
220
README.md
@@ -1,42 +1,40 @@
|
|||||||
# CiteLynq Web Sample
|
# CiteLynq Web Sample
|
||||||
|
|
||||||
A sample ASP.NET Core web application demonstrating how to use the CiteLynq API to search for verified citations across multiple authoritative sources.
|
A sample ASP.NET Core web application demonstrating how to integrate with the CiteLynq API for verified citations across multiple authoritative sources.
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
✅ ASP.NET Core 9.0 minimal API
|
| Feature | Description |
|
||||||
✅ Static file hosting with wwwroot
|
|---------|-------------|
|
||||||
✅ Proxy endpoints to hide API keys from client
|
| ASP.NET Core 9.0 | Minimal API with modern C# patterns |
|
||||||
✅ Clean, modern UI with gradient design
|
| Proxy Endpoints | Hide API keys from client-side code |
|
||||||
✅ Search across multiple data sources
|
| Multi-Source Search | ArXiv, PubMed, CourtListener, and more |
|
||||||
✅ Display formatted citations (APA, MLA, Bluebook)
|
| Citation Formats | APA, MLA, Chicago, Bluebook |
|
||||||
✅ Filter by source type (ArXiv, PubMed, CourtListener, etc.)
|
| Responsive UI | Clean, modern design for desktop and mobile |
|
||||||
✅ Responsive design
|
| Local Storage | Persists API key in browser |
|
||||||
✅ Local storage for API key persistence
|
|
||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
|
|
||||||
### 1. Get an API Key
|
### 1. Clone the Repository
|
||||||
|
|
||||||
1. Visit [https://citelynq.com/app/api-keys](https://citelynq.com/app/api-keys)
|
```bash
|
||||||
|
git clone https://git.marketally.com/citelynq/CiteLynq.WebSample.git
|
||||||
|
cd CiteLynq.WebSample
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Get an API Key
|
||||||
|
|
||||||
|
1. Visit [citelynq.com/app/api-keys](https://citelynq.com/app/api-keys)
|
||||||
2. Create a new API key
|
2. Create a new API key
|
||||||
3. Copy the key (starts with `cl_`)
|
3. Copy the key (starts with `cl_`)
|
||||||
|
|
||||||
### 2. Run the Application
|
### 3. Run
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd /repos/CiteFlow/samples/CiteLynq.WebSample
|
|
||||||
dotnet run
|
dotnet run
|
||||||
```
|
```
|
||||||
|
|
||||||
The application will start on `http://localhost:5100`
|
Open `http://localhost:5100` in your browser.
|
||||||
|
|
||||||
### 3. Use the Application
|
|
||||||
|
|
||||||
1. Open your browser to `http://localhost:5100`
|
|
||||||
2. Enter your API key
|
|
||||||
3. Enter a search query (e.g., "climate change")
|
|
||||||
4. Click "Search"
|
|
||||||
|
|
||||||
## Project Structure
|
## Project Structure
|
||||||
|
|
||||||
@@ -50,47 +48,24 @@ CiteLynq.WebSample/
|
|||||||
└── index.html # Single-page application
|
└── index.html # Single-page application
|
||||||
```
|
```
|
||||||
|
|
||||||
## How It Works
|
|
||||||
|
|
||||||
### Backend (Program.cs)
|
|
||||||
|
|
||||||
The backend provides proxy endpoints to securely call the CiteLynq API:
|
|
||||||
|
|
||||||
1. **GET /api/search** - Proxies search requests
|
|
||||||
- Accepts: query parameters (q, sourceType, page, pageSize)
|
|
||||||
- Headers: X-API-Key
|
|
||||||
- Returns: Search results from CiteLynq API
|
|
||||||
|
|
||||||
2. **GET /api/articles/{id}** - Proxies article detail requests
|
|
||||||
- Accepts: article ID as path parameter
|
|
||||||
- Headers: X-API-Key
|
|
||||||
- Returns: Article details from CiteLynq API
|
|
||||||
|
|
||||||
**Why use a proxy?**
|
|
||||||
- Hides your API key from client-side code
|
|
||||||
- Prevents CORS issues
|
|
||||||
- Adds an abstraction layer for future enhancements
|
|
||||||
- Enables server-side caching if needed
|
|
||||||
|
|
||||||
### Frontend (wwwroot/index.html)
|
|
||||||
|
|
||||||
The frontend is a self-contained single-page application:
|
|
||||||
|
|
||||||
- **API Key Storage**: Saves API key in localStorage
|
|
||||||
- **Search Interface**: Query input and source filter
|
|
||||||
- **Results Display**: Shows citations with metadata
|
|
||||||
- **Responsive Design**: Works on desktop and mobile
|
|
||||||
|
|
||||||
## API Endpoints
|
## API Endpoints
|
||||||
|
|
||||||
### Search Citations
|
### Search Citations
|
||||||
|
|
||||||
```http
|
```http
|
||||||
GET /api/search?q=climate%20change&sourceType=ArXiv&page=1&pageSize=20
|
GET /api/search?q=climate+change&sourceType=ArXiv&page=1&pageSize=20
|
||||||
X-API-Key: cl_your-api-key-here
|
X-API-Key: cl_your-api-key-here
|
||||||
```
|
```
|
||||||
|
|
||||||
**Response:**
|
### Get Article Details
|
||||||
|
|
||||||
|
```http
|
||||||
|
GET /api/articles/{id}
|
||||||
|
X-API-Key: cl_your-api-key-here
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example Response
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"data": {
|
"data": {
|
||||||
@@ -100,13 +75,10 @@ X-API-Key: cl_your-api-key-here
|
|||||||
"sourceType": "ArXiv",
|
"sourceType": "ArXiv",
|
||||||
"title": "Climate Change Research",
|
"title": "Climate Change Research",
|
||||||
"authors": ["Dr. Jane Smith"],
|
"authors": ["Dr. Jane Smith"],
|
||||||
"abstract": "...",
|
|
||||||
"publishedDate": "2023-01-15",
|
"publishedDate": "2023-01-15",
|
||||||
"url": "https://arxiv.org/abs/2301.12345",
|
|
||||||
"citations": {
|
"citations": {
|
||||||
"apa": "Smith, J. (2023)...",
|
"apa": "Smith, J. (2023)...",
|
||||||
"mla": "Smith, Jane...",
|
"mla": "Smith, Jane..."
|
||||||
"chicago": "..."
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@@ -115,26 +87,17 @@ X-API-Key: cl_your-api-key-here
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Get Article Details
|
|
||||||
|
|
||||||
```http
|
|
||||||
GET /api/articles/arxiv-2301.12345
|
|
||||||
X-API-Key: cl_your-api-key-here
|
|
||||||
```
|
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Change API Base URL
|
### API Base URL
|
||||||
|
|
||||||
Edit `Program.cs` line 24 to point to a different API:
|
Edit `Program.cs`:
|
||||||
|
|
||||||
```csharp
|
```csharp
|
||||||
const string API_BASE_URL = "https://citelynq.com/api";
|
const string API_BASE_URL = "https://citelynq.com/api";
|
||||||
// Or for local development:
|
|
||||||
// const string API_BASE_URL = "http://localhost:5000/api";
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Change Port
|
### Port
|
||||||
|
|
||||||
Edit `Properties/launchSettings.json`:
|
Edit `Properties/launchSettings.json`:
|
||||||
|
|
||||||
@@ -153,116 +116,35 @@ Edit `Properties/launchSettings.json`:
|
|||||||
### Prerequisites
|
### Prerequisites
|
||||||
|
|
||||||
- .NET 9.0 SDK
|
- .NET 9.0 SDK
|
||||||
- Visual Studio 2022 / VS Code / Rider
|
|
||||||
|
|
||||||
### Build
|
### Commands
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
dotnet build
|
dotnet build # Build
|
||||||
```
|
dotnet run # Run
|
||||||
|
dotnet publish -c Release # Publish
|
||||||
### Run
|
|
||||||
|
|
||||||
```bash
|
|
||||||
dotnet run
|
|
||||||
```
|
|
||||||
|
|
||||||
### Publish
|
|
||||||
|
|
||||||
```bash
|
|
||||||
dotnet publish -c Release -o ./publish
|
|
||||||
```
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
### Add More Endpoints
|
|
||||||
|
|
||||||
Add new proxy endpoints in `Program.cs`:
|
|
||||||
|
|
||||||
```csharp
|
|
||||||
app.MapGet("/api/sources", async (HttpContext context, IHttpClientFactory httpClientFactory) =>
|
|
||||||
{
|
|
||||||
var apiKey = context.Request.Headers["X-API-Key"].FirstOrDefault();
|
|
||||||
var httpClient = httpClientFactory.CreateClient();
|
|
||||||
var httpRequest = new HttpRequestMessage(HttpMethod.Get, $"{API_BASE_URL}/sources");
|
|
||||||
httpRequest.Headers.Add("X-API-Key", apiKey);
|
|
||||||
var response = await httpClient.SendAsync(httpRequest);
|
|
||||||
return Results.Content(await response.Content.ReadAsStringAsync(), "application/json");
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Customize UI
|
|
||||||
|
|
||||||
Edit `wwwroot/index.html`:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Change color scheme */
|
|
||||||
body {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Add Pagination
|
|
||||||
|
|
||||||
Add pagination controls in the HTML:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
function displayResults(data) {
|
|
||||||
// ... existing code ...
|
|
||||||
|
|
||||||
if (data.totalPages > 1) {
|
|
||||||
html += `<div class="pagination">
|
|
||||||
<button onclick="loadPage(${data.currentPage - 1})">Previous</button>
|
|
||||||
<span>Page ${data.currentPage} of ${data.totalPages}</span>
|
|
||||||
<button onclick="loadPage(${data.currentPage + 1})">Next</button>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Security Notes
|
## Security Notes
|
||||||
|
|
||||||
⚠️ **Important:**
|
- **API Keys**: The proxy pattern keeps keys server-side
|
||||||
|
- **CORS**: Configure specific origins for production
|
||||||
1. **API Key Protection**: The proxy pattern keeps API keys server-side
|
- **HTTPS**: Required for production deployments
|
||||||
2. **CORS**: Configured for development (allow all origins). Restrict in production.
|
|
||||||
3. **Input Validation**: Always validate user input
|
|
||||||
4. **HTTPS**: Use HTTPS in production environments
|
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
### Port Already in Use
|
| Issue | Solution |
|
||||||
|
|-------|----------|
|
||||||
|
| Port in use | Change port in `launchSettings.json` |
|
||||||
|
| CORS errors | Check CORS configuration in `Program.cs` |
|
||||||
|
| API key invalid | Verify key starts with `cl_` and is active |
|
||||||
|
|
||||||
Change the port in `Properties/launchSettings.json`
|
## Resources
|
||||||
|
|
||||||
### CORS Errors
|
- [CiteLynq API Docs](https://citelynq.com/docs)
|
||||||
|
- [Get API Key](https://citelynq.com/app/api-keys)
|
||||||
The application includes CORS middleware for development. For production, configure specific origins:
|
- [ASP.NET Core Docs](https://docs.microsoft.com/aspnet/core)
|
||||||
|
|
||||||
```csharp
|
|
||||||
builder.Services.AddCors(options =>
|
|
||||||
{
|
|
||||||
options.AddDefaultPolicy(policy =>
|
|
||||||
{
|
|
||||||
policy.WithOrigins("https://yourdomain.com")
|
|
||||||
.AllowAnyMethod()
|
|
||||||
.AllowAnyHeader();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### API Key Not Working
|
|
||||||
|
|
||||||
1. Verify the key starts with `cl_`
|
|
||||||
2. Check the key is active in your account
|
|
||||||
3. Ensure the key has available credits
|
|
||||||
|
|
||||||
## Learn More
|
|
||||||
|
|
||||||
- **CiteLynq API Docs**: [https://citelynq.com/docs](https://citelynq.com/docs)
|
|
||||||
- **Get API Key**: [https://citelynq.com/app/api-keys](https://citelynq.com/app/api-keys)
|
|
||||||
- **ASP.NET Core**: [https://docs.microsoft.com/aspnet/core](https://docs.microsoft.com/aspnet/core)
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
This sample is provided as-is for demonstration purposes.
|
MIT - Use freely in your own projects.
|
||||||
|
|||||||
Reference in New Issue
Block a user