kylefang/scribe
1
0
Fork 0
mirror of https://github.com/ambieco/scribe.git synced 2026-04-28 21:24:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Internationalization: Extract JS-set strings

Browse Source
This commit is contained in:
shalvah
2023-04-22 20:27:37 +02:00
parent 4fd2a2645a
commit 55eb9a5898
6 changed files with 29 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lang/en.json
View File

@@ -25,8 +25,10 @@
"scribe::try_it_out.open": "Try it out ⚡",
"scribe::try_it_out.cancel": "Cancel 🛑",
"scribe::try_it_out.send": "Send Request 💥",
"scribe::try_it_out.loading": "⏱ Sending...",
"scribe::try_it_out.received_response": "Received response",
"scribe::try_it_out.request_failed": "Request failed with error",
"scribe::try_it_out.error_help": "Tip: Check that you're properly connected to the network.\nIf you're a maintainer of ths API, verify that your API is running and you've enabled CORS.\nYou can check the Dev Tools console for debugging information.",
"scribe::links.postman": "View Postman collection",
"scribe::links.openapi": "View OpenAPI spec"
}

18
resources/js/tryitout.js
View File

@@ -64,7 +64,7 @@ function cancelTryOut(endpointId) {
document.querySelector(`#btn-tryout-${endpointId}`).hidden = false;
const executeBtn = document.querySelector(`#btn-executetryout-${endpointId}`);
executeBtn.hidden = true;
executeBtn.textContent = "Send Request 💥";
executeBtn.textContent = executeBtn.dataset.initialText;
document.querySelector(`#btn-canceltryout-${endpointId}`).hidden = true;
// Hide inputs
document.querySelectorAll(`input[data-endpoint=${endpointId}],label[data-endpoint=${endpointId}]`)
@@ -89,7 +89,7 @@ function makeAPICall(method, path, body = {}, query = {}, headers = {}, endpoint
body = JSON.stringify(body)
}
const url = new URL(window.baseUrl + '/' + path.replace(/^\//, ''));
const url = new URL(window.tryItOutBaseUrl + '/' + path.replace(/^\//, ''));
// We need this function because if you try to set an array or object directly to a URLSearchParams object,
// you'll get [object Object] or the array.toString()
@@ -119,7 +119,7 @@ function makeAPICall(method, path, body = {}, query = {}, headers = {}, endpoint
headers,
body: method === 'GET' ? undefined : body,
signal: window.abortControllers[endpointId].signal,
referrer: window.baseUrl,
referrer: window.tryItOutBaseUrl,
mode: 'cors',
credentials: 'same-origin',
})
@@ -150,7 +150,7 @@ function handleResponse(endpointId, response, status, headers) {
} catch (e) {
}
responseContentEl.textContent = response === '' ? '<Empty response>' : response;
responseContentEl.textContent = response === '' ? responseContentEl.dataset.emptyResponseText : response;
isJson && window.hljs.highlightElement(responseContentEl);
const statusEl = document.querySelector('#execution-response-status-' + endpointId);
statusEl.textContent = ` (${status})`;
@@ -165,10 +165,8 @@ function handleError(endpointId, err) {
// Show error views
let errorMessage = err.message || err;
errorMessage += "\n\nTip: Check that you're properly connected to the network.";
errorMessage += "\nIf you're a maintainer of ths API, verify that your API is running and you've enabled CORS.";
errorMessage += "\nYou can check the Dev Tools console for debugging information.";
document.querySelector('#execution-error-message-' + endpointId).textContent = errorMessage;
const $errorMessageEl = document.querySelector('#execution-error-message-' + endpointId);
$errorMessageEl.textContent = errorMessage + $errorMessageEl.textContent;
const errorEl = document.querySelector('#execution-error-' + endpointId);
errorEl.hidden = false;
errorEl.scrollIntoView({behavior: "smooth", block: "center"});
@@ -177,7 +175,7 @@ function handleError(endpointId, err) {
async function executeTryOut(endpointId, form) {
const executeBtn = document.querySelector(`#btn-executetryout-${endpointId}`);
executeBtn.textContent = "⏱ Sending...";
executeBtn.textContent = executeBtn.dataset.loadingText;
executeBtn.disabled = true;
executeBtn.scrollIntoView({behavior: "smooth", block: "center"});
@@ -269,6 +267,6 @@ async function executeTryOut(endpointId, form) {
})
.finally(() => {
executeBtn.disabled = false;
executeBtn.textContent = "Send Request 💥";
executeBtn.textContent = executeBtn.dataset.initialText;
});
}

10
resources/views/themes/default/endpoint.blade.php
View File

@@ -54,11 +54,12 @@
<blockquote>{{ __("scribe::try_it_out.received_response") }}<span
id="execution-response-status-{{ $endpoint->endpointId() }}"></span>:
</blockquote>
<pre class="json"><code id="execution-response-content-{{ $endpoint->endpointId() }}" style="max-height: 400px;"></code></pre>
<pre class="json"><code id="execution-response-content-{{ $endpoint->endpointId() }}"
data-empty-response-text="<{{ __("scribe::example_response.empty") }}>" style="max-height: 400px;"></code></pre>
</span>
<span id="execution-error-{{ $endpoint->endpointId() }}" hidden>
<blockquote>{{ __("scribe::try_it_out.request_failed") }}:</blockquote>
<pre><code id="execution-error-message-{{ $endpoint->endpointId() }}"></code></pre>
<pre><code id="execution-error-message-{{ $endpoint->endpointId() }}">{{ "\n\n".__("scribe::try_it_out.error_help") }}</code></pre>
</span>
<form id="form-{{ $endpoint->endpointId() }}" data-method="{{ $endpoint->httpMethods[0] }}"
data-path="{{ $endpoint->uri }}"
@@ -82,7 +83,10 @@
</button>&nbsp;&nbsp;
<button type="submit"
style="background-color: #6ac174; padding: 5px 10px; border-radius: 5px; border-width: thin;"
id="btn-executetryout-{{ $endpoint->endpointId() }}" hidden>{{ __("scribe::try_it_out.send") }}
id="btn-executetryout-{{ $endpoint->endpointId() }}"
data-initial-text="{{ __("scribe::try_it_out.send") }}"
data-loading-text="{{ __("scribe::try_it_out.loading") }}"
hidden>{{ __("scribe::try_it_out.send") }}
</button>
@endif
</h3>

2
resources/views/themes/default/index.blade.php
View File

@@ -33,7 +33,7 @@
@if($tryItOut['enabled'] ?? true)
<script>
var baseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
var tryItOutBaseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
var useCsrf = Boolean({{ $tryItOut['use_csrf'] ?? null }});
var csrfUrl = "{{ $tryItOut['csrf_url'] ?? null }}";
</script>

8
resources/views/themes/elements/index.blade.php
View File

@@ -27,7 +27,7 @@
@if($tryItOut['enabled'] ?? true)
<script>
var baseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
var tryItOutBaseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
var useCsrf = Boolean({{ $tryItOut['use_csrf'] ?? null }});
var csrfUrl = "{{ $tryItOut['csrf_url'] ?? null }}";
</script>
@@ -75,9 +75,9 @@
responsePanel.hidden = true;
let form = btnElement.form;
let { method, path, hasjsonbody } = form.dataset;
let { method, path, hasjsonbody: hasJsonBody} = form.dataset;
let body = {};
if (hasjsonbody === "1") {
if (hasJsonBody === "1") {
body = form.querySelector('.code-editor').textContent;
} else if (form.dataset.hasfiles === "1") {
body = new FormData();
@@ -118,7 +118,7 @@
let contentEl = responsePanel.querySelector(`.response-content`);
if (responseContent === '') {
contentEl.textContent = '<Empty response>'
contentEl.textContent = contentEl.dataset.emptyResponseText;
return;
}

22
resources/views/themes/elements/try_it_out.blade.php
View File

@@ -279,23 +279,13 @@
d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path>
</svg>
</div>
Error
{{ __("scribe::try_it_out.request_failed") }}
</div>
</div>
<div class="sl-panel__content-wrapper sl-bg-canvas-100 children" role="region">
<div class="sl-panel__content sl-p-4">
<p class="sl-pb-2"><strong
class="error-message"></strong></p>
<p class="sl-pb-2">1. Double check that your computer is connected to
the internet.</p>
<p class="sl-pb-2">2. Make sure the API is actually running and
available under the specified URL.</p>
<p>3. If you've checked all of the above and still experiencing issues,
check if the API supports <a target="_blank"
rel="noopener noreferrer"
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"
class="sl-link sl-font-semibold">CORS</a>.
</p>
<p class="sl-pb-2"><strong class="error-message"></strong></p>
<p class="sl-pb-2">{{ __("scribe::try_it_out.error_help") }}</p>
</div>
</div>
</div>
@@ -314,13 +304,15 @@
d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path>
</svg>
</div>
Response
{{ __("scribe::try_it_out.received_response") }}
</div>
</div>
<div class="sl-panel__content-wrapper sl-bg-canvas-100 children" role="region">
<div class="sl-panel__content sl-p-4">
<p class="sl-pb-2 response-status"></p>
<pre><code class="sl-pb-2 response-content language-json" style="max-height: 300px;"></code></pre>
<pre><code class="sl-pb-2 response-content language-json"
data-empty-response-text="<{{ __("scribe::example_response.empty") }}>"
style="max-height: 300px;"></code></pre>
</div>
</div>
</div>