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>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- cURL -->
|
<!-- Bloque de código único — el contenido lo genera JS -->
|
||||||
<div x-show="tab==='curl'" class="relative group">
|
<div class="relative group">
|
||||||
<div class="bg-slate-900 rounded-lg p-4">
|
<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>
|
</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\"}'`)"
|
<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>
|
|
||||||
</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())`)"
|
|
||||||
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">
|
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
|
Copiar
|
||||||
</button>
|
</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'}); },
|
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>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user