fix(websms): move code examples to JS to avoid Go template parsing error
html/template rejects escaped quotes in attribute values. Code examples are now built in getCodeExample() and rendered via x-text on the <pre>. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
f56d6891aa
commit
fa269cabf1
@@ -201,45 +201,12 @@
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- cURL -->
|
||||
<div x-show="tab==='curl'" class="relative group">
|
||||
<!-- Bloque de código único — el contenido lo genera JS -->
|
||||
<div class="relative group">
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`curl -X POST https://admin.u-site.app/api/sms/send \\\n -H 'Authorization: Bearer ${secretKey || '{API_KEY}'}' \\\n -H 'Content-Type: application/json' \\\n -d '{\n \"numero\": \"573001234567\",\n \"mensaje\": \"Hola, este es tu código: 9821\"\n }'`"></pre>
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="getCodeExample(tab)"></pre>
|
||||
</div>
|
||||
<button type="button" @click="copy(`curl -X POST https://admin.u-site.app/api/sms/send -H 'Authorization: Bearer ${secretKey}' -H 'Content-Type: application/json' -d '{\"numero\":\"573001234567\",\"mensaje\":\"Hola\"}'`)"
|
||||
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
|
||||
Copiar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<div x-show="tab==='js'" class="relative group">
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`const response = await fetch('https://admin.u-site.app/api/sms/send', {\n method: 'POST',\n headers: {\n 'Authorization': 'Bearer ${secretKey || '{API_KEY}'}',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n numero: '573001234567',\n mensaje: 'Hola, este es tu código: 9821',\n }),\n});\n\nconst data = await response.json();\nconsole.log(data); // { ok: true, id: '6a3d...' }`"></pre>
|
||||
</div>
|
||||
<button type="button" @click="copy(`fetch('https://admin.u-site.app/api/sms/send',{method:'POST',headers:{'Authorization':'Bearer ${secretKey}','Content-Type':'application/json'},body:JSON.stringify({numero:'573001234567',mensaje:'Hola'})})`)"
|
||||
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
|
||||
Copiar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- PHP -->
|
||||
<div x-show="tab==='php'" class="relative group">
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`<?php\n$ch = curl_init('https://admin.u-site.app/api/sms/send');\ncurl_setopt_array($ch, [\n CURLOPT_RETURNTRANSFER => true,\n CURLOPT_POST => true,\n CURLOPT_HTTPHEADER => [\n 'Authorization: Bearer ${secretKey || '{API_KEY}'}',\n 'Content-Type: application/json',\n ],\n CURLOPT_POSTFIELDS => json_encode([\n 'numero' => '573001234567',\n 'mensaje' => 'Hola, este es tu código: 9821',\n ]),\n]);\n$response = json_decode(curl_exec($ch), true);\ncurl_close($ch);\n// $response['ok'] === true`"></pre>
|
||||
</div>
|
||||
<button type="button" @click="copy(`<?php $ch=curl_init('https://admin.u-site.app/api/sms/send');curl_setopt_array($ch,[CURLOPT_RETURNTRANSFER=>true,CURLOPT_POST=>true,CURLOPT_HTTPHEADER=>['Authorization: Bearer ${secretKey}','Content-Type: application/json'],CURLOPT_POSTFIELDS=>json_encode(['numero'=>'573001234567','mensaje'=>'Hola'])]);echo curl_exec($ch);`)"
|
||||
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
|
||||
Copiar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Python -->
|
||||
<div x-show="tab==='python'" class="relative group">
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`import requests\n\nresponse = requests.post(\n 'https://admin.u-site.app/api/sms/send',\n headers={\n 'Authorization': 'Bearer ${secretKey || '{API_KEY}'}',\n 'Content-Type': 'application/json',\n },\n json={\n 'numero': '573001234567',\n 'mensaje': 'Hola, este es tu código: 9821',\n },\n)\n\ndata = response.json()\nprint(data) # {'ok': True, 'id': '6a3d...'}`"></pre>
|
||||
</div>
|
||||
<button type="button" @click="copy(`import requests\nresponse=requests.post('https://admin.u-site.app/api/sms/send',headers={'Authorization':'Bearer ${secretKey}','Content-Type':'application/json'},json={'numero':'573001234567','mensaje':'Hola'})\nprint(response.json())`)"
|
||||
<button type="button" @click="copy(getCodeExample(tab))"
|
||||
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
|
||||
Copiar
|
||||
</button>
|
||||
@@ -334,7 +301,83 @@ function websmsApp() {
|
||||
},
|
||||
|
||||
formatDate(d){ if(!d) return ''; return new Date(d).toLocaleDateString('es-CO',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'}); },
|
||||
copy(text){ navigator.clipboard.writeText(text); this.copied='URL copiada'; setTimeout(()=>this.copied='', 2000); },
|
||||
copy(text){ navigator.clipboard.writeText(text); this.copied='Copiado'; setTimeout(()=>this.copied='', 2000); },
|
||||
|
||||
getCodeExample(tab) {
|
||||
const key = this.secretKey || '{API_KEY}';
|
||||
const url = 'https://admin.u-site.app/api/sms/send';
|
||||
if (tab === 'curl') {
|
||||
return [
|
||||
"curl -X POST " + url + " \\",
|
||||
" -H 'Authorization: Bearer " + key + "' \\",
|
||||
" -H 'Content-Type: application/json' \\",
|
||||
" -d '{",
|
||||
' "numero": "573001234567",',
|
||||
' "mensaje": "Hola, este es tu código: 9821"',
|
||||
" }'"
|
||||
].join('\n');
|
||||
}
|
||||
if (tab === 'js') {
|
||||
return [
|
||||
"const response = await fetch('" + url + "', {",
|
||||
" method: 'POST',",
|
||||
" headers: {",
|
||||
" 'Authorization': 'Bearer " + key + "',",
|
||||
" 'Content-Type': 'application/json',",
|
||||
" },",
|
||||
" body: JSON.stringify({",
|
||||
" numero: '573001234567',",
|
||||
" mensaje: 'Hola, este es tu código: 9821',",
|
||||
" }),",
|
||||
"});",
|
||||
"",
|
||||
"const data = await response.json();",
|
||||
"console.log(data); // { ok: true, id: '6a3d...' }"
|
||||
].join('\n');
|
||||
}
|
||||
if (tab === 'php') {
|
||||
return [
|
||||
"<?php",
|
||||
"$ch = curl_init('" + url + "');",
|
||||
"curl_setopt_array($ch, [",
|
||||
" CURLOPT_RETURNTRANSFER => true,",
|
||||
" CURLOPT_POST => true,",
|
||||
" CURLOPT_HTTPHEADER => [",
|
||||
" 'Authorization: Bearer " + key + "',",
|
||||
" 'Content-Type: application/json',",
|
||||
" ],",
|
||||
' CURLOPT_POSTFIELDS => json_encode([',
|
||||
" 'numero' => '573001234567',",
|
||||
" 'mensaje' => 'Hola, este es tu código: 9821',",
|
||||
" ]),",
|
||||
"]);",
|
||||
"$response = json_decode(curl_exec($ch), true);",
|
||||
"curl_close($ch);",
|
||||
"// $response['ok'] === true"
|
||||
].join('\n');
|
||||
}
|
||||
if (tab === 'python') {
|
||||
return [
|
||||
"import requests",
|
||||
"",
|
||||
"response = requests.post(",
|
||||
" '" + url + "',",
|
||||
" headers={",
|
||||
" 'Authorization': 'Bearer " + key + "',",
|
||||
" 'Content-Type': 'application/json',",
|
||||
" },",
|
||||
" json={",
|
||||
" 'numero': '573001234567',",
|
||||
" 'mensaje': 'Hola, este es tu código: 9821',",
|
||||
" },",
|
||||
")",
|
||||
"",
|
||||
"data = response.json()",
|
||||
"print(data) # {'ok': True, 'id': '6a3d...'}"
|
||||
].join('\n');
|
||||
}
|
||||
return '';
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user