Skip to content

Commit 7d3cce1

Browse files
binarykbinaryk
committed
fix: docs
1 parent 8eef6a6 commit 7d3cce1

File tree

1 file changed

+86
-76
lines changed

1 file changed

+86
-76
lines changed

‎docs-v3/pages/playground/index.vue‎

Lines changed: 86 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@
1010
Test and experiment with Laravel Restify features in our interactive playground.
1111
See how your API endpoints work without setting up a local environment.
1212
</p>
13-
13+
1414
<!-- GitHub Repository Link -->
1515
<div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 max-w-2xl mx-auto">
1616
<div class="flex items-center justify-center space-x-2 text-blue-700 dark:text-blue-300">
1717
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
1818
<path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
1919
</svg>
2020
<span class="font-medium">Demo Repository:</span>
21-
<a
22-
href="https://github.com/BinarCode/restify-demo"
23-
target="_blank"
21+
<a
22+
href="https://github.com/BinarCode/restify-demo"
23+
target="_blank"
2424
rel="noopener noreferrer"
2525
class="font-mono text-sm hover:underline"
2626
>
@@ -67,6 +67,82 @@
6767
</div>
6868
</div>
6969

70+
<!-- Quick Examples -->
71+
<div class="mb-8">
72+
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Quick Examples</h2>
73+
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-6">
74+
<!-- HTTP API Examples -->
75+
<div v-if="activeTab === 'http'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
76+
<button
77+
@click="loadExample('api/restify/organizations', 'GET')"
78+
class="p-4 text-left bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-lg transition-colors border border-blue-200 dark:border-blue-800"
79+
>
80+
<div class="font-mono text-sm text-blue-600 dark:text-blue-400 font-medium">GET</div>
81+
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Organizations</div>
82+
</button>
83+
84+
<button
85+
@click="loadExample('api/restify/organizations?search=Roma', 'GET')"
86+
class="p-4 text-left bg-purple-50 dark:bg-purple-900/20 hover:bg-purple-100 dark:hover:bg-purple-900/30 rounded-lg transition-colors border border-purple-200 dark:border-purple-800"
87+
>
88+
<div class="font-mono text-sm text-purple-600 dark:text-purple-400 font-medium">GET</div>
89+
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Search Roma</div>
90+
</button>
91+
92+
<button
93+
@click="loadExample('api/restify/organizations?related=contacts', 'GET')"
94+
class="p-4 text-left bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-lg transition-colors border border-green-200 dark:border-green-800"
95+
>
96+
<div class="font-mono text-sm text-green-600 dark:text-green-400 font-medium">GET</div>
97+
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">With Contacts</div>
98+
</button>
99+
100+
<button
101+
@click="loadExample('api/restify/contacts', 'GET')"
102+
class="p-4 text-left bg-orange-50 dark:bg-orange-900/20 hover:bg-orange-100 dark:hover:bg-orange-900/30 rounded-lg transition-colors border border-orange-200 dark:border-orange-800"
103+
>
104+
<div class="font-mono text-sm text-orange-600 dark:text-orange-400 font-medium">GET</div>
105+
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Contacts</div>
106+
</button>
107+
</div>
108+
109+
<!-- MCP Examples -->
110+
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
111+
<button
112+
@click="loadMcpExample('mcp/restify', 'POST', JSON.stringify({method: 'initialize', params: {}}))"
113+
class="p-4 text-left bg-indigo-50 dark:bg-indigo-900/20 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 rounded-lg transition-colors border border-indigo-200 dark:border-indigo-800"
114+
>
115+
<div class="font-mono text-sm text-indigo-600 dark:text-indigo-400 font-medium">POST</div>
116+
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Initialize</div>
117+
</button>
118+
119+
<button
120+
@click="loadMcpExample('mcp/restify', 'POST', JSON.stringify({method: 'tools/list', params: {}, jsonrpc: '2.0', id: 2}, null, 2))"
121+
class="p-4 text-left bg-cyan-50 dark:bg-cyan-900/20 hover:bg-cyan-100 dark:hover:bg-cyan-900/30 rounded-lg transition-colors border border-cyan-200 dark:border-cyan-800"
122+
>
123+
<div class="font-mono text-sm text-cyan-600 dark:text-cyan-400 font-medium">POST</div>
124+
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">List Tools</div>
125+
</button>
126+
127+
<button
128+
@click="loadMcpExample('mcp/restify', 'POST', JSON.stringify({method: 'tools/call', params: {name: 'restify-list', arguments: {resource: 'organizations', search: 'Roma'}}, jsonrpc: '2.0', id: 3}, null, 2))"
129+
class="p-4 text-left bg-emerald-50 dark:bg-emerald-900/20 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 rounded-lg transition-colors border border-emerald-200 dark:border-emerald-800"
130+
>
131+
<div class="font-mono text-sm text-emerald-600 dark:text-emerald-400 font-medium">POST</div>
132+
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Organization List (Roma)</div>
133+
</button>
134+
135+
<button
136+
@click="loadMcpExample('mcp/restify', 'POST', JSON.stringify({method: 'tools/call', params: {name: 'organizations-index-tool', arguments: {search: 'BinarCode'}}, jsonrpc: '2.0', id: 2}, null, 2))"
137+
class="p-4 text-left bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 rounded-lg transition-colors border border-amber-200 dark:border-amber-800"
138+
>
139+
<div class="font-mono text-sm text-amber-600 dark:text-amber-400 font-medium">POST</div>
140+
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Search BinarCode</div>
141+
</button>
142+
</div>
143+
</div>
144+
</div>
145+
70146
<!-- API Playground -->
71147
<div class="mb-16">
72148
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -154,73 +230,6 @@
154230
</div>
155231
</div>
156232

157-
<!-- Quick Examples -->
158-
<div class="mb-16">
159-
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Quick Examples</h2>
160-
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-6">
161-
<!-- HTTP API Examples -->
162-
<div v-if="activeTab === 'http'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
163-
<button
164-
@click="loadExample('api/restify/organizations', 'GET')"
165-
class="p-4 text-left bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-lg transition-colors border border-blue-200 dark:border-blue-800"
166-
>
167-
<div class="font-mono text-sm text-blue-600 dark:text-blue-400 font-medium">GET</div>
168-
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Organizations</div>
169-
</button>
170-
171-
<button
172-
@click="loadExample('api/restify/organizations?search=Roma', 'GET')"
173-
class="p-4 text-left bg-purple-50 dark:bg-purple-900/20 hover:bg-purple-100 dark:hover:bg-purple-900/30 rounded-lg transition-colors border border-purple-200 dark:border-purple-800"
174-
>
175-
<div class="font-mono text-sm text-purple-600 dark:text-purple-400 font-medium">GET</div>
176-
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Search Roma</div>
177-
</button>
178-
179-
<button
180-
@click="loadExample('api/restify/organizations?related=contacts', 'GET')"
181-
class="p-4 text-left bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-lg transition-colors border border-green-200 dark:border-green-800"
182-
>
183-
<div class="font-mono text-sm text-green-600 dark:text-green-400 font-medium">GET</div>
184-
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">With Contacts</div>
185-
</button>
186-
187-
<button
188-
@click="loadExample('api/restify/contacts', 'GET')"
189-
class="p-4 text-left bg-orange-50 dark:bg-orange-900/20 hover:bg-orange-100 dark:hover:bg-orange-900/30 rounded-lg transition-colors border border-orange-200 dark:border-orange-800"
190-
>
191-
<div class="font-mono text-sm text-orange-600 dark:text-orange-400 font-medium">GET</div>
192-
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Contacts</div>
193-
</button>
194-
</div>
195-
196-
<!-- MCP Examples -->
197-
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
198-
<button
199-
@click="loadMcpExample('mcp/restify', 'POST', JSON.stringify({method: 'initialize', params: {}}))"
200-
class="p-4 text-left bg-indigo-50 dark:bg-indigo-900/20 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 rounded-lg transition-colors border border-indigo-200 dark:border-indigo-800"
201-
>
202-
<div class="font-mono text-sm text-indigo-600 dark:text-indigo-400 font-medium">POST</div>
203-
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Initialize</div>
204-
</button>
205-
206-
<button
207-
@click="loadMcpExample('mcp/restify', 'POST', JSON.stringify({method: 'tools/list', params: {}}))"
208-
class="p-4 text-left bg-cyan-50 dark:bg-cyan-900/20 hover:bg-cyan-100 dark:hover:bg-cyan-900/30 rounded-lg transition-colors border border-cyan-200 dark:border-cyan-800"
209-
>
210-
<div class="font-mono text-sm text-cyan-600 dark:text-cyan-400 font-medium">POST</div>
211-
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">List Tools</div>
212-
</button>
213-
214-
<button
215-
@click="loadMcpExample('mcp/restify', 'POST', JSON.stringify({method: 'tools/call', params: {name: 'restify-list', arguments: {resource: 'organizations'}}}))"
216-
class="p-4 text-left bg-emerald-50 dark:bg-emerald-900/20 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 rounded-lg transition-colors border border-emerald-200 dark:border-emerald-800"
217-
>
218-
<div class="font-mono text-sm text-emerald-600 dark:text-emerald-400 font-medium">POST</div>
219-
<div class="text-sm text-gray-700 dark:text-gray-300 mt-1">Call Tool</div>
220-
</button>
221-
</div>
222-
</div>
223-
</div>
224233

225234
<!-- Sample Data Section -->
226235
<div class="mb-16">
@@ -330,11 +339,12 @@ const placeholderText = computed(() => {
330339
"description": "Sample organization"
331340
}`
332341
: `{
333-
"method": "call",
342+
"method": "tools/list",
334343
"params": {
335-
"name": "restify-list",
336-
"arguments": {}
337-
}
344+
345+
},
346+
"jsonrpc": "2.0",
347+
"id": 2
338348
}`
339349
})
340350
@@ -396,7 +406,7 @@ const sendRequest = async () => {
396406
const res = await fetch(url, options)
397407
const responseText = await res.text()
398408
let data
399-
409+
400410
if (responseText.trim()) {
401411
try {
402412
data = JSON.parse(responseText)

0 commit comments

Comments
 (0)