Skip to content

Commit f54d343

Browse files
ascorbicascorbic
committed
Add landing page
1 parent 8452b06 commit f54d343

File tree

2 files changed

+251
-9
lines changed

2 files changed

+251
-9
lines changed

‎netlify/edge-functions/mcp-server.ts

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,7 @@ function formatResponse(data: unknown): {
9595
}
9696

9797
// Netlify Edge Function Handler
98-
export default async function handler(req: Request, { url }: Context) {
99-
if (req.method !== "POST" || url.pathname !== "/mcp") {
100-
return Response.redirect(
101-
"https://docs.astro.build/en/guides/build-with-ai/",
102-
302
103-
);
104-
}
98+
export default async function handler(req: Request) {
10599
try {
106100
const { req: nodeReq, res: nodeRes } = toReqRes(req);
107101
const server = getServer();
@@ -134,6 +128,6 @@ export default async function handler(req: Request, { url }: Context) {
134128
}
135129

136130
export const config: Config = {
137-
path: ["/", "/mcp"],
138-
method: ["POST", "GET"],
131+
path: ["/mcp", "/"],
132+
method: ["POST"],
139133
};

‎public/index.html

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Astro Docs MCP Server</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
17+
background: #0d0f14;
18+
min-height: 100vh;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
color: white;
23+
}
24+
25+
.container {
26+
max-width: 600px;
27+
padding: 3rem 2rem;
28+
text-align: center;
29+
background: rgba(255, 255, 255, 0.03);
30+
backdrop-filter: blur(20px);
31+
border-radius: 20px;
32+
border: 1px solid rgba(255, 255, 255, 0.08);
33+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
34+
}
35+
36+
.logo {
37+
width: 80px;
38+
height: 80px;
39+
margin: 0 auto 1rem;
40+
display: block;
41+
}
42+
43+
h1 {
44+
font-size: 2.5rem;
45+
font-weight: 600;
46+
margin-bottom: 1rem;
47+
line-height: 1.2;
48+
}
49+
50+
.subtitle {
51+
font-size: 1.2rem;
52+
opacity: 0.9;
53+
margin-bottom: 2.5rem;
54+
line-height: 1.5;
55+
}
56+
57+
.server-config {
58+
background: rgba(0, 0, 0, 0.4);
59+
border-radius: 12px;
60+
padding: 1.5rem;
61+
margin: 2rem 0;
62+
text-align: left;
63+
border: 1px solid rgba(255, 255, 255, 0.05);
64+
}
65+
66+
.config-title {
67+
font-size: 1.1rem;
68+
font-weight: 600;
69+
margin-bottom: 1rem;
70+
color: #ffffff;
71+
}
72+
73+
.config-item {
74+
display: flex;
75+
justify-content: space-between;
76+
align-items: center;
77+
margin-bottom: 0.75rem;
78+
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
79+
font-size: 0.9rem;
80+
}
81+
82+
.config-key {
83+
color: #bc52ee;
84+
font-weight: 500;
85+
}
86+
87+
.config-value {
88+
color: #ffffff;
89+
background: rgba(255, 255, 255, 0.05);
90+
padding: 0.25rem 0.5rem;
91+
border-radius: 4px;
92+
cursor: pointer;
93+
transition: background-color 0.2s;
94+
}
95+
96+
.config-value:hover {
97+
background: rgba(255, 255, 255, 0.1);
98+
}
99+
100+
.links {
101+
display: flex;
102+
gap: 1rem;
103+
justify-content: center;
104+
flex-wrap: wrap;
105+
margin-top: 2rem;
106+
}
107+
108+
.cta-button {
109+
display: inline-flex;
110+
align-items: center;
111+
gap: 0.5rem;
112+
padding: 1rem 2rem;
113+
background: linear-gradient(135deg, #bc52ee 0%, #3245ff 100%);
114+
color: white;
115+
text-decoration: none;
116+
border-radius: 50px;
117+
font-weight: 600;
118+
font-size: 1.1rem;
119+
transition: all 0.3s ease;
120+
border: none;
121+
box-shadow: 0 4px 15px rgba(188, 82, 238, 0.3);
122+
}
123+
124+
.cta-button:hover {
125+
transform: translateY(-2px);
126+
box-shadow: 0 8px 25px rgba(188, 82, 238, 0.4);
127+
}
128+
129+
.secondary-link {
130+
color: rgba(255, 255, 255, 0.7);
131+
text-decoration: none;
132+
font-weight: 400;
133+
font-size: 0.9rem;
134+
transition: color 0.3s ease;
135+
}
136+
137+
.secondary-link:hover {
138+
color: white;
139+
text-decoration: underline;
140+
}
141+
142+
.icon {
143+
font-size: 1.2rem;
144+
}
145+
146+
@media (max-width: 640px) {
147+
.container {
148+
margin: 1rem;
149+
padding: 2rem 1.5rem;
150+
}
151+
152+
h1 {
153+
font-size: 2rem;
154+
}
155+
156+
.logo {
157+
width: 60px;
158+
height: 60px;
159+
}
160+
161+
.config-item {
162+
flex-direction: column;
163+
align-items: flex-start;
164+
gap: 0.5rem;
165+
}
166+
167+
.links {
168+
flex-direction: column;
169+
align-items: center;
170+
}
171+
}
172+
</style>
173+
</head>
174+
175+
<body>
176+
<div class="container">
177+
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
178+
<g>
179+
<path
180+
d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z" />
181+
</g>
182+
<path fill="url(#a)"
183+
d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z" />
184+
<defs>
185+
<linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
186+
<stop stop-color="#D83333" />
187+
<stop offset="1" stop-color="#F041FF" />
188+
</linearGradient>
189+
</defs>
190+
<style>
191+
g {
192+
fill: #fff;
193+
}
194+
</style>
195+
</svg>
196+
<h1>Astro Docs MCP Server</h1>
197+
<p class="subtitle">
198+
Connect your AI tools to the latest Astro documentation using the Model Context Protocol
199+
</p>
200+
201+
<div class="server-config">
202+
<div class="config-title">Server Configuration</div>
203+
<div class="config-item">
204+
<span class="config-key">Name:</span>
205+
<span class="config-value" onclick="copyToClipboard('Astro Docs')">Astro Docs</span>
206+
</div>
207+
<div class="config-item">
208+
<span class="config-key">URL:</span>
209+
<span class="config-value"
210+
onclick="copyToClipboard('https://mcp.docs.astro.build/mcp')">https://mcp.docs.astro.build/mcp</span>
211+
</div>
212+
<div class="config-item">
213+
<span class="config-key">Transport:</span>
214+
<span class="config-value" onclick="copyToClipboard('http')">http</span>
215+
</div>
216+
</div>
217+
218+
<div class="links">
219+
<a href="https://docs.astro.build/en/guides/build-with-ai/" class="cta-button">
220+
View Documentation
221+
</a>
222+
</div>
223+
224+
<div style="margin-top: 1rem;">
225+
<a href="https://github.com/withastro/docs-mcp" class="secondary-link">
226+
Source code
227+
</a>
228+
</div>
229+
</div>
230+
231+
<script>
232+
function copyToClipboard(text) {
233+
navigator.clipboard.writeText(text).then(() => {
234+
// Simple visual feedback
235+
const originalText = event.target.textContent;
236+
event.target.textContent = 'Copied!';
237+
event.target.style.background = 'rgba(255, 255, 255, 0.3)';
238+
239+
setTimeout(() => {
240+
event.target.textContent = originalText;
241+
event.target.style.background = 'rgba(255, 255, 255, 0.1)';
242+
}, 1000);
243+
});
244+
}
245+
</script>
246+
</body>
247+
248+
</html>

0 commit comments

Comments
 (0)