mirror of
https://github.com/ArthurDanjou/artmcp.git
synced 2026-01-14 16:54:22 +01:00
Rework index and docs pages with @nuxt/ui components
Co-authored-by: ArthurDanjou <29738535+ArthurDanjou@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
414
app/pages/docs.vue
Normal file
414
app/pages/docs.vue
Normal file
@@ -0,0 +1,414 @@
|
||||
<script setup lang="ts">
|
||||
const { data: _docs } = await useAsyncData('docs', () =>
|
||||
queryCollection('docs').first()
|
||||
)
|
||||
|
||||
const tools = [
|
||||
{
|
||||
name: 'activity',
|
||||
description: 'Real-time current activity and status of Arthur Danjou, including what he\'s currently working on.',
|
||||
inputs: []
|
||||
},
|
||||
{
|
||||
name: 'resume-link',
|
||||
description: 'Retrieves a direct download link to Arthur Danjou\'s professional resume in the specified language.',
|
||||
inputs: [{ name: 'lang', type: 'string', description: 'The language for the resume: \'en\' for English or \'fr\' for French' }]
|
||||
},
|
||||
{
|
||||
name: 'stats',
|
||||
description: 'Detailed coding statistics and analytics from WakaTime, including programming languages, time spent coding, and productivity metrics.',
|
||||
inputs: []
|
||||
},
|
||||
{
|
||||
name: 'status-page',
|
||||
description: 'Real-time status, uptime monitoring, and incident reports for Arthur Danjou\'s homelab infrastructure, powered by UptimeKuma.',
|
||||
inputs: []
|
||||
},
|
||||
{
|
||||
name: 'uses-by-category',
|
||||
description: 'Retrieves a filtered list of tools, software, and hardware used by Arthur Danjou based on a specific category.',
|
||||
inputs: [{ name: 'categoryName', type: 'string', description: 'The category to filter by: \'homelab\', \'ide\', \'hardware\', or \'software\'' }]
|
||||
},
|
||||
{
|
||||
name: 'weather',
|
||||
description: 'Get current weather for a city.',
|
||||
inputs: [{ name: 'city', type: 'string', description: 'City name' }]
|
||||
}
|
||||
]
|
||||
|
||||
const prompts = [
|
||||
{ name: 'activity', description: 'Retrieve Arthur Danjou\'s current real-time activity status' },
|
||||
{ name: 'contact', description: 'Retrieve contact information and social media links' },
|
||||
{ name: 'hobbies', description: 'Retrieve information about hobbies and interests' },
|
||||
{ name: 'languages', description: 'Retrieve languages spoken with proficiency levels' },
|
||||
{ name: 'profile', description: 'Retrieve comprehensive professional profile information' },
|
||||
{ name: 'projects', description: 'Retrieve list of personal and professional projects' },
|
||||
{ name: 'resume', description: 'Request and retrieve professional resume in specified language' },
|
||||
{ name: 'skills', description: 'Retrieve comprehensive list of technical skills' },
|
||||
{ name: 'stats', description: 'Retrieve detailed coding statistics from WakaTime' },
|
||||
{ name: 'status-page', description: 'Retrieve real-time status page of homelab infrastructure' },
|
||||
{ name: 'uses-by-category', description: 'Retrieve tools, software, and hardware by category' }
|
||||
]
|
||||
|
||||
const resources = [
|
||||
{ uri: 'resource://artmcp/profile', title: 'Professional Profile', description: 'Biography, location, availability, career goals' },
|
||||
{ uri: 'resource://artmcp/contact', title: 'Contact Information', description: 'Email, LinkedIn, GitHub, social media links' },
|
||||
{ uri: 'resource://artmcp/education', title: 'Education', description: 'Degrees, institutions, academic achievements' },
|
||||
{ uri: 'resource://artmcp/experiences', title: 'Experiences', description: 'Professional work experiences and roles' },
|
||||
{ uri: 'resource://artmcp/hobbies', title: 'Hobbies & Interests', description: 'Personal hobbies and passions' },
|
||||
{ uri: 'resource://artmcp/languages', title: 'Spoken Languages', description: 'Languages with proficiency levels' },
|
||||
{ uri: 'resource://artmcp/projects', title: 'Projects Portfolio', description: 'Technical projects and achievements' },
|
||||
{ uri: 'resource://artmcp/skills', title: 'Skills', description: 'Technical skills and tools mastered' },
|
||||
{ uri: 'resource://artmcp/uses', title: 'Tech Stack & Tools', description: 'Tools, software, and hardware used' }
|
||||
]
|
||||
|
||||
const apiEndpoints = [
|
||||
{ method: 'GET', path: '/api/profile', description: 'Profile information' },
|
||||
{ method: 'GET', path: '/api/contact', description: 'Contact information' },
|
||||
{ method: 'GET', path: '/api/skills', description: 'Technical skills' },
|
||||
{ method: 'GET', path: '/api/experiences', description: 'Work experiences' },
|
||||
{ method: 'GET', path: '/api/education', description: 'Education background' },
|
||||
{ method: 'GET', path: '/api/projects', description: 'Projects portfolio' },
|
||||
{ method: 'GET', path: '/api/languages', description: 'Spoken languages' },
|
||||
{ method: 'GET', path: '/api/hobbies', description: 'Hobbies and interests' },
|
||||
{ method: 'GET', path: '/api/uses', description: 'Tech stack and tools' },
|
||||
{ method: 'GET', path: '/api/activity', description: 'Real-time activity' },
|
||||
{ method: 'GET', path: '/api/wakatime', description: 'Coding statistics' },
|
||||
{ method: 'GET', path: '/api/status-page', description: 'Status page' },
|
||||
{ method: 'GET', path: '/api/resumes/{en|fr}', description: 'Download resume' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<!-- Hero Header -->
|
||||
<div class="bg-gradient-to-br from-primary to-primary-600 dark:from-primary-900 dark:to-primary-800">
|
||||
<UContainer class="py-16">
|
||||
<div class="text-center text-white">
|
||||
<UBadge
|
||||
color="white"
|
||||
variant="subtle"
|
||||
size="lg"
|
||||
class="mb-4"
|
||||
>
|
||||
Model Context Protocol
|
||||
</UBadge>
|
||||
<h1 class="text-4xl sm:text-5xl font-bold mb-4">
|
||||
ArtMCP Documentation
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||||
Complete documentation for ArtMCP - Arthur Danjou's Model Context Protocol Server
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<UButton
|
||||
to="/"
|
||||
size="lg"
|
||||
color="white"
|
||||
variant="solid"
|
||||
icon="i-heroicons-arrow-left"
|
||||
>
|
||||
Back to Home
|
||||
</UButton>
|
||||
<UButton
|
||||
to="https://github.com/ArthurDanjou/artapi"
|
||||
target="_blank"
|
||||
size="lg"
|
||||
color="white"
|
||||
variant="outline"
|
||||
icon="i-simple-icons-github"
|
||||
>
|
||||
View on GitHub
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<UContainer class="py-12">
|
||||
<!-- Overview -->
|
||||
<UCard
|
||||
class="mb-8"
|
||||
:ui="{ body: { padding: 'p-8' } }"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
What is ArtMCP?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-4">
|
||||
ArtMCP provides AI assistants and applications with structured access to Arthur Danjou's professional information through the Model Context Protocol. This includes:
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon
|
||||
name="i-heroicons-check-circle"
|
||||
class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
Comprehensive profile data and biography
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon
|
||||
name="i-heroicons-check-circle"
|
||||
class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
Work experiences and professional background
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon
|
||||
name="i-heroicons-check-circle"
|
||||
class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
Portfolio of projects and achievements
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon
|
||||
name="i-heroicons-check-circle"
|
||||
class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
Technical skills and expertise
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon
|
||||
name="i-heroicons-check-circle"
|
||||
class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
Education and academic background
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon
|
||||
name="i-heroicons-check-circle"
|
||||
class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
Real-time activity and coding statistics
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Quick Start -->
|
||||
<UCard
|
||||
class="mb-8"
|
||||
:ui="{ body: { padding: 'p-8' } }"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-6">
|
||||
Quick Start
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||
Get started with ArtMCP in seconds by installing it in your favorite AI assistant:
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-4">
|
||||
MCP Configuration
|
||||
</h3>
|
||||
<UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
|
||||
<pre class="text-sm text-gray-100 overflow-x-auto"><code>{
|
||||
"mcpServers": {
|
||||
"artmcp": {
|
||||
"url": "https://api.arthurdanjou.fr/mcp/mcp"
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-4">
|
||||
Direct Connection
|
||||
</h3>
|
||||
<UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
|
||||
<pre class="text-sm text-gray-100 overflow-x-auto"><code>https://api.arthurdanjou.fr/mcp/mcp</code></pre>
|
||||
</UCard>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
|
||||
Use this URL to connect your MCP client directly
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Tools Section -->
|
||||
<UCard
|
||||
class="mb-8"
|
||||
:ui="{ body: { padding: 'p-8' } }"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Tools
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||
Executable functions that AI assistants can call to perform actions or retrieve dynamic data.
|
||||
</p>
|
||||
|
||||
<UAccordion
|
||||
:items="tools.map(tool => ({
|
||||
label: tool.name,
|
||||
icon: 'i-heroicons-wrench-screwdriver',
|
||||
defaultOpen: false,
|
||||
content: tool.description,
|
||||
slot: 'tool-' + tool.name
|
||||
}))"
|
||||
>
|
||||
<template
|
||||
v-for="tool in tools"
|
||||
:key="tool.name"
|
||||
#[`tool-${tool.name}`]
|
||||
>
|
||||
<div class="p-4">
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
||||
{{ tool.description }}
|
||||
</p>
|
||||
<div
|
||||
v-if="tool.inputs.length > 0"
|
||||
class="border-t border-gray-200 dark:border-gray-700 pt-4"
|
||||
>
|
||||
<h4 class="font-semibold mb-2">
|
||||
Inputs:
|
||||
</h4>
|
||||
<ul class="space-y-2">
|
||||
<li
|
||||
v-for="input in tool.inputs"
|
||||
:key="input.name"
|
||||
class="flex gap-2"
|
||||
>
|
||||
<UBadge
|
||||
color="blue"
|
||||
variant="subtle"
|
||||
>
|
||||
{{ input.name }}
|
||||
</UBadge>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">{{ input.description }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UAccordion>
|
||||
</UCard>
|
||||
|
||||
<!-- Prompts Section -->
|
||||
<UCard
|
||||
class="mb-8"
|
||||
:ui="{ body: { padding: 'p-8' } }"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Prompts
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||
Pre-configured conversation starters that guide AI assistants on how to query specific information.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<UCard
|
||||
v-for="prompt in prompts"
|
||||
:key="prompt.name"
|
||||
:ui="{ body: { padding: 'p-4' }, ring: 'ring-1 ring-gray-200 dark:ring-gray-800' }"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon
|
||||
name="i-heroicons-chat-bubble-left-right"
|
||||
class="w-5 h-5 text-primary flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">
|
||||
{{ prompt.name }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ prompt.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Resources Section -->
|
||||
<UCard
|
||||
class="mb-8"
|
||||
:ui="{ body: { padding: 'p-8' } }"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Resources
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||
Static or semi-static data endpoints that provide structured information.
|
||||
</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<UCard
|
||||
v-for="resource in resources"
|
||||
:key="resource.uri"
|
||||
:ui="{ body: { padding: 'p-4' }, ring: 'ring-1 ring-gray-200 dark:ring-gray-800' }"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon
|
||||
name="i-heroicons-document-text"
|
||||
class="w-5 h-5 text-primary"
|
||||
/>
|
||||
<h3 class="font-semibold">
|
||||
{{ resource.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<code class="text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
|
||||
{{ resource.uri }}
|
||||
</code>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ resource.description }}
|
||||
</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- API Endpoints Section -->
|
||||
<UCard :ui="{ body: { padding: 'p-8' } }">
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
REST API Endpoints
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||
All resources are also available as REST API endpoints for direct HTTP access.
|
||||
</p>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="endpoint in apiEndpoints"
|
||||
:key="endpoint.path"
|
||||
class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<UBadge
|
||||
color="green"
|
||||
variant="subtle"
|
||||
class="font-mono text-xs"
|
||||
>
|
||||
{{ endpoint.method }}
|
||||
</UBadge>
|
||||
<code class="text-sm font-mono text-gray-900 dark:text-gray-100 flex-1">{{ endpoint.path }}</code>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">{{ endpoint.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UContainer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,19 +1,283 @@
|
||||
<script setup lang="ts">
|
||||
const { data: index } = await useAsyncData('index', () =>
|
||||
const { data: _index } = await useAsyncData('index', () =>
|
||||
queryCollection('index').first()
|
||||
)
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: 'i-heroicons-cpu-chip',
|
||||
title: 'MCP Server Integration',
|
||||
description: 'Connect AI assistants directly through the Model Context Protocol for real-time profile access.'
|
||||
},
|
||||
{
|
||||
icon: 'i-heroicons-code-bracket',
|
||||
title: 'REST API Endpoints',
|
||||
description: 'Clean, well-documented API endpoints for seamless integration into your applications.'
|
||||
},
|
||||
{
|
||||
icon: 'i-heroicons-chart-bar',
|
||||
title: 'Real-Time Data',
|
||||
description: 'Live updates on activity, coding statistics, and homelab status.'
|
||||
},
|
||||
{
|
||||
icon: 'i-heroicons-user-circle',
|
||||
title: 'Comprehensive Profile',
|
||||
description: 'Detailed information about skills, experiences, education, projects, and more.'
|
||||
},
|
||||
{
|
||||
icon: 'i-heroicons-bolt',
|
||||
title: 'Edge Deployment',
|
||||
description: 'Deployed on Cloudflare Workers for ultra-fast global access.'
|
||||
},
|
||||
{
|
||||
icon: 'i-heroicons-shield-check',
|
||||
title: 'Type-Safe & Validated',
|
||||
description: 'Built with TypeScript and Zod for robust data validation.'
|
||||
}
|
||||
]
|
||||
|
||||
const resources = [
|
||||
{ label: 'Profile', icon: 'i-heroicons-user', to: '/api/profile' },
|
||||
{ label: 'Skills', icon: 'i-heroicons-academic-cap', to: '/api/skills' },
|
||||
{ label: 'Projects', icon: 'i-heroicons-rocket-launch', to: '/api/projects' },
|
||||
{ label: 'Experiences', icon: 'i-heroicons-briefcase', to: '/api/experiences' },
|
||||
{ label: 'Education', icon: 'i-heroicons-book-open', to: '/api/education' },
|
||||
{ label: 'Activity', icon: 'i-heroicons-clock', to: '/api/activity' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ContentRenderer
|
||||
v-if="index"
|
||||
:value="index"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
>
|
||||
Loading index page...
|
||||
</div>
|
||||
<div class="min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900">
|
||||
<!-- Hero Section -->
|
||||
<UContainer class="py-16 sm:py-24">
|
||||
<div class="text-center">
|
||||
<UBadge
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
size="lg"
|
||||
class="mb-6"
|
||||
>
|
||||
Professional API & MCP Server
|
||||
</UBadge>
|
||||
|
||||
<h1 class="text-5xl sm:text-6xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
Welcome to <span class="text-primary">ArtAPI</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 mb-4 max-w-3xl mx-auto">
|
||||
Professional API and Model Context Protocol server by
|
||||
<span class="font-semibold text-gray-900 dark:text-white">Arthur Danjou</span>
|
||||
</p>
|
||||
|
||||
<p class="text-lg text-gray-500 dark:text-gray-500 mb-8 max-w-2xl mx-auto">
|
||||
Data Science & Applied AI student at Paris Dauphine-PSL University, passionate about machine learning and mathematical modelling
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
||||
<UButton
|
||||
to="/docs"
|
||||
size="xl"
|
||||
icon="i-heroicons-book-open"
|
||||
class="shadow-lg"
|
||||
>
|
||||
MCP Documentation
|
||||
</UButton>
|
||||
<UButton
|
||||
to="https://github.com/ArthurDanjou/artapi"
|
||||
target="_blank"
|
||||
size="xl"
|
||||
color="gray"
|
||||
variant="outline"
|
||||
icon="i-simple-icons-github"
|
||||
>
|
||||
View on GitHub
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 justify-center text-sm">
|
||||
<UBadge
|
||||
color="blue"
|
||||
variant="subtle"
|
||||
>
|
||||
Nuxt 4
|
||||
</UBadge>
|
||||
<UBadge
|
||||
color="green"
|
||||
variant="subtle"
|
||||
>
|
||||
MCP Protocol
|
||||
</UBadge>
|
||||
<UBadge
|
||||
color="purple"
|
||||
variant="subtle"
|
||||
>
|
||||
TypeScript
|
||||
</UBadge>
|
||||
<UBadge
|
||||
color="orange"
|
||||
variant="subtle"
|
||||
>
|
||||
Edge Deployed
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<UContainer class="py-16">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Key Features
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Everything you need to access professional profile data programmatically
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<UCard
|
||||
v-for="feature in features"
|
||||
:key="feature.title"
|
||||
:ui="{
|
||||
body: { padding: 'p-6' },
|
||||
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
|
||||
shadow: 'shadow-lg hover:shadow-xl transition-shadow duration-300'
|
||||
}"
|
||||
>
|
||||
<div class="flex flex-col items-start gap-4">
|
||||
<div class="p-3 rounded-lg bg-primary/10">
|
||||
<UIcon
|
||||
:name="feature.icon"
|
||||
class="w-6 h-6 text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{{ feature.title }}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
{{ feature.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UContainer>
|
||||
|
||||
<!-- Quick Access Resources -->
|
||||
<UContainer class="py-16">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Available Resources
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Quick access to API endpoints
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<UButton
|
||||
v-for="resource in resources"
|
||||
:key="resource.label"
|
||||
:to="resource.to"
|
||||
target="_blank"
|
||||
color="gray"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
block
|
||||
:ui="{
|
||||
padding: { lg: 'px-4 py-6' },
|
||||
base: 'hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200'
|
||||
}"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<UIcon
|
||||
:name="resource.icon"
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
<span class="text-sm font-medium">{{ resource.label }}</span>
|
||||
</div>
|
||||
</UButton>
|
||||
</div>
|
||||
</UContainer>
|
||||
|
||||
<!-- Getting Started -->
|
||||
<UContainer class="py-16">
|
||||
<UCard
|
||||
:ui="{
|
||||
body: { padding: 'p-8 sm:p-12' },
|
||||
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
|
||||
background: 'bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20'
|
||||
}"
|
||||
>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
For AI Assistants (MCP)
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Configure your MCP client to connect to my server:
|
||||
</p>
|
||||
<UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
|
||||
<pre class="text-sm text-gray-100 overflow-x-auto"><code>{
|
||||
"mcpServers": {
|
||||
"artmcp": {
|
||||
"url": "https://api.arthurdanjou.fr/mcp/mcp"
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
For Developers (REST API)
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Use REST API endpoints in your applications:
|
||||
</p>
|
||||
<UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
|
||||
<pre class="text-sm text-gray-100 overflow-x-auto"><code># Get profile information
|
||||
curl https://api.arthurdanjou.fr/api/profile
|
||||
|
||||
# Get technical skills
|
||||
curl https://api.arthurdanjou.fr/api/skills</code></pre>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UContainer>
|
||||
|
||||
<!-- Footer CTA -->
|
||||
<UContainer class="py-16">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Ready to Get Started?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
||||
Explore the full documentation or try the API now
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<UButton
|
||||
to="/docs"
|
||||
size="xl"
|
||||
icon="i-heroicons-arrow-right"
|
||||
trailing
|
||||
>
|
||||
Read Documentation
|
||||
</UButton>
|
||||
<UButton
|
||||
to="/api/profile"
|
||||
target="_blank"
|
||||
size="xl"
|
||||
color="gray"
|
||||
variant="outline"
|
||||
icon="i-heroicons-globe-alt"
|
||||
>
|
||||
Try the API
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,134 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { data: mcp } = await useAsyncData('mcp', () =>
|
||||
queryCollection('mcp').first()
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mcp-page">
|
||||
<ContentRenderer
|
||||
v-if="mcp"
|
||||
:value="mcp"
|
||||
class="content"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="loading"
|
||||
>
|
||||
Loading mcp...
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mcp-page {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.content :deep(h1) {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #1a1a1a;
|
||||
border-bottom: 2px solid #e5e5e5;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content :deep(h2) {
|
||||
font-size: 1.75rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
.content :deep(h3) {
|
||||
font-size: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.content :deep(p) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content :deep(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.content :deep(code) {
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
}
|
||||
|
||||
.content :deep(pre) {
|
||||
background-color: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.content :deep(pre code) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.content :deep(ul),
|
||||
.content :deep(ol) {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.content :deep(li) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content :deep(a) {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content :deep(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.content :deep(strong) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mcp-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.content :deep(h1) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.content :deep(h2) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.content :deep(h3) {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user