Ümit Tunç
361 lines
16 KiB
PHP
361 lines
16 KiB
PHP
@php
|
|
use Knuckles\Scribe\Tools\WritingUtils as u;
|
|
@endphp
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>{!! $metadata['title'] !!}</title>
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="{!! $assetPathPrefix !!}css/theme-elements.style.css" media="screen">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
|
|
|
|
<link rel="stylesheet"
|
|
href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/docco.min.css">
|
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
|
|
<script>hljs.highlightAll();</script>
|
|
<script type="module">
|
|
import {CodeJar} from 'https://medv.io/codejar/codejar.js'
|
|
window.CodeJar = CodeJar;
|
|
</script>
|
|
|
|
@if($tryItOut['enabled'] ?? true)
|
|
<script>
|
|
var tryItOutBaseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
|
|
var useCsrf = Boolean({{ $tryItOut['use_csrf'] ?? null }});
|
|
var csrfUrl = "{{ $tryItOut['csrf_url'] ?? null }}";
|
|
</script>
|
|
<script src="{{ u::getVersionedAsset($assetPathPrefix.'js/tryitout.js') }}"></script>
|
|
<style>
|
|
.code-editor, .response-content {
|
|
color: whitesmoke;
|
|
background-color: transparent;
|
|
}
|
|
/*
|
|
Problem: we want syntax highlighting for the Try It Out JSON body code editor
|
|
However, the Try It Out area uses a dark background, while request and response samples
|
|
(which are already highlighted) use a light background. HighlightJS can only use one theme per document.
|
|
Our options:
|
|
1. Change the bg of one. => No, it looks out of place on the page.
|
|
2. Use the same highlighting for both. => Nope, one would be unreadable.
|
|
3. Copy styles for a dark-bg h1js theme and prefix them for the CodeEditor, which is what we're doing.
|
|
Since it's only JSON, we only need a few styles anyway.
|
|
Styles taken from the Nord theme: https://github.com/highlightjs/highlight.js/blob/3997c9b430a568d5ad46d96693b90a74fc01ea7f/src/styles/nord.css#L2
|
|
*/
|
|
.code-editor > .hljs-attr {
|
|
color: #8FBCBB;
|
|
}
|
|
.code-editor > .hljs-string {
|
|
color: #A3BE8C;
|
|
}
|
|
.code-editor > .hljs-number {
|
|
color: #B48EAD;
|
|
}
|
|
.code-editor > .hljs-literal{
|
|
color: #81A1C1;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
function tryItOut(btnElement) {
|
|
btnElement.disabled = true;
|
|
|
|
let endpointId = btnElement.dataset.endpoint;
|
|
|
|
let errorPanel = document.querySelector(`.tryItOut-error[data-endpoint=${endpointId}]`);
|
|
errorPanel.hidden = true;
|
|
let responsePanel = document.querySelector(`.tryItOut-response[data-endpoint=${endpointId}]`);
|
|
responsePanel.hidden = true;
|
|
|
|
let form = btnElement.form;
|
|
let { method, path, hasjsonbody: hasJsonBody} = form.dataset;
|
|
let body = {};
|
|
if (hasJsonBody === "1") {
|
|
body = form.querySelector('.code-editor').textContent;
|
|
} else if (form.dataset.hasfiles === "1") {
|
|
body = new FormData();
|
|
form.querySelectorAll('input[data-component=body]')
|
|
.forEach(el => {
|
|
if (el.type === 'file') {
|
|
if (el.files[0]) body.append(el.name, el.files[0])
|
|
} else body.append(el.name, el.value);
|
|
});
|
|
} else {
|
|
form.querySelectorAll('input[data-component=body]').forEach(el => {
|
|
_.set(body, el.name, el.value);
|
|
});
|
|
}
|
|
|
|
const urlParameters = form.querySelectorAll('input[data-component=url]');
|
|
urlParameters.forEach(el => (path = path.replace(new RegExp(`\\{${el.name}\\??}`), el.value)));
|
|
|
|
const headers = Object.fromEntries(Array.from(form.querySelectorAll('input[data-component=header]'))
|
|
.map(el => [el.name, (el.dataset.prefix || '') + el.value]));
|
|
|
|
const query = {}
|
|
form.querySelectorAll('input[data-component=query]').forEach(el => {
|
|
_.set(query, el.name, el.value);
|
|
});
|
|
|
|
let preflightPromise = Promise.resolve();
|
|
if (window.useCsrf && window.csrfUrl) {
|
|
preflightPromise = makeAPICall('GET', window.csrfUrl).then(() => {
|
|
headers['X-XSRF-TOKEN'] = getCookie('XSRF-TOKEN');
|
|
});
|
|
}
|
|
|
|
// content type has to be unset otherwise file upload won't work
|
|
if (form.dataset.hasfiles === "1") {
|
|
delete headers['Content-Type'];
|
|
}
|
|
|
|
return preflightPromise.then(() => makeAPICall(method, path, body, query, headers, endpointId))
|
|
.then(([responseStatus, statusText, responseContent, responseHeaders]) => {
|
|
responsePanel.hidden = false;
|
|
responsePanel.querySelector(`.response-status`).textContent = responseStatus + " " + statusText ;
|
|
|
|
let contentEl = responsePanel.querySelector(`.response-content`);
|
|
if (responseContent === '') {
|
|
contentEl.textContent = contentEl.dataset.emptyResponseText;
|
|
return;
|
|
}
|
|
|
|
// Prettify it if it's JSON
|
|
let isJson = false;
|
|
try {
|
|
const jsonParsed = JSON.parse(responseContent);
|
|
if (jsonParsed !== null) {
|
|
isJson = true;
|
|
responseContent = JSON.stringify(jsonParsed, null, 4);
|
|
}
|
|
} catch (e) {}
|
|
|
|
// Replace HTML entities
|
|
responseContent = responseContent.replace(/[<>&]/g, (i) => '&#' + i.charCodeAt(0) + ';');
|
|
|
|
contentEl.innerHTML = responseContent;
|
|
isJson && window.hljs.highlightElement(contentEl);
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
let errorMessage = err.message || err;
|
|
errorPanel.hidden = false;
|
|
errorPanel.querySelector(`.error-message`).textContent = errorMessage;
|
|
})
|
|
.finally(() => { btnElement.disabled = false } );
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('.tryItOut-btn').forEach(el => {
|
|
el.addEventListener('click', () => tryItOut(el));
|
|
});
|
|
})
|
|
</script>
|
|
@endif
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
@if($metadata['example_languages'])
|
|
<script>
|
|
function switchExampleLanguage(lang) {
|
|
document.querySelectorAll(`.example-request`).forEach(el => el.style.display = 'none');
|
|
document.querySelectorAll(`.example-request-${lang}`).forEach(el => el.style.display = 'initial');
|
|
document.querySelectorAll(`.example-request-lang-toggle`).forEach(el => el.value = lang);
|
|
}
|
|
</script>
|
|
@endif
|
|
|
|
<script>
|
|
function switchExampleResponse(endpointId, index) {
|
|
document.querySelectorAll(`.example-response-${endpointId}`).forEach(el => el.style.display = 'none');
|
|
document.querySelectorAll(`.example-response-${endpointId}-${index}`).forEach(el => el.style.display = 'initial');
|
|
document.querySelectorAll(`.example-response-${endpointId}-toggle`).forEach(el => el.value = index);
|
|
}
|
|
|
|
|
|
/*
|
|
* Requirement: a div with class `expansion-chevrons`
|
|
* (or `expansion-chevrons-solid` to use the solid version).
|
|
* Also add the `expanded` class if your div is expanded by default.
|
|
*/
|
|
function toggleExpansionChevrons(evt) {
|
|
let elem = evt.currentTarget;
|
|
|
|
let chevronsArea = elem.querySelector('.expansion-chevrons');
|
|
const solid = chevronsArea.classList.contains('expansion-chevrons-solid');
|
|
const newState = chevronsArea.classList.contains('expanded') ? 'expand' : 'expanded';
|
|
if (newState === 'expanded') {
|
|
const selector = solid ? '#expanded-chevron-solid' : '#expanded-chevron';
|
|
const template = document.querySelector(selector);
|
|
const chevron = template.content.cloneNode(true);
|
|
chevronsArea.replaceChildren(chevron);
|
|
chevronsArea.classList.add('expanded');
|
|
} else {
|
|
const selector = solid ? '#expand-chevron-solid' : '#expand-chevron';
|
|
const template = document.querySelector(selector);
|
|
const chevron = template.content.cloneNode(true);
|
|
chevronsArea.replaceChildren(chevron);
|
|
chevronsArea.classList.remove('expanded');
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* 1. Make sure the children are inside the parent element
|
|
* 2. Add `expandable` class to the parent
|
|
* 3. Add `children` class to the children.
|
|
* 4. Wrap the default chevron SVG in a div with class `expansion-chevrons`
|
|
* (or `expansion-chevrons-solid` to use the solid version).
|
|
* Also add the `expanded` class if your div is expanded by default.
|
|
*/
|
|
function toggleElementChildren(evt) {
|
|
let elem = evt.currentTarget;
|
|
let children = elem.querySelector(`.children`);
|
|
if (!children) return;
|
|
|
|
if (children.contains(event.target)) return;
|
|
|
|
let oldState = children.style.display
|
|
if (oldState === 'none') {
|
|
children.style.removeProperty('display');
|
|
toggleExpansionChevrons(evt);
|
|
} else {
|
|
children.style.display = 'none';
|
|
toggleExpansionChevrons(evt);
|
|
}
|
|
|
|
evt.stopPropagation();
|
|
}
|
|
|
|
function highlightSidebarItem(evt = null) {
|
|
if (evt && evt.oldURL) {
|
|
let oldHash = new URL(evt.oldURL).hash.slice(1);
|
|
if (oldHash) {
|
|
let previousItem = window['sidebar'].querySelector(`#toc-item-${oldHash}`);
|
|
previousItem.classList.remove('sl-bg-primary-tint');
|
|
previousItem.classList.add('sl-bg-canvas-100');
|
|
}
|
|
}
|
|
|
|
let newHash = location.hash.slice(1);
|
|
if (newHash) {
|
|
let item = window['sidebar'].querySelector(`#toc-item-${newHash}`);
|
|
item.classList.remove('sl-bg-canvas-100');
|
|
item.classList.add('sl-bg-primary-tint');
|
|
}
|
|
}
|
|
|
|
addEventListener('DOMContentLoaded', () => {
|
|
highlightSidebarItem();
|
|
|
|
document.querySelectorAll('.code-editor').forEach(elem => CodeJar(elem, (editor) => {
|
|
// highlight.js does not trim old tags,
|
|
// which means highlighting doesn't update on type (only on paste)
|
|
// See https://github.com/antonmedv/codejar/issues/18
|
|
editor.textContent = editor.textContent
|
|
return hljs.highlightElement(editor)
|
|
}));
|
|
|
|
document.querySelectorAll('.expandable').forEach(el => {
|
|
el.addEventListener('click', toggleElementChildren);
|
|
});
|
|
|
|
document.querySelectorAll('details').forEach(el => {
|
|
el.addEventListener('toggle', toggleExpansionChevrons);
|
|
});
|
|
});
|
|
|
|
addEventListener('hashchange', highlightSidebarItem);
|
|
</script>
|
|
|
|
<div class="sl-elements sl-antialiased sl-h-full sl-text-base sl-font-ui sl-text-body sl-flex sl-inset-0">
|
|
|
|
@include("scribe::themes.elements.sidebar")
|
|
|
|
<div class="sl-overflow-y-auto sl-flex-1 sl-w-full sl-px-16 sl-bg-canvas sl-py-16" style="max-width: 1500px;">
|
|
|
|
<div class="sl-mb-10">
|
|
<div class="sl-mb-4">
|
|
<h1 class="sl-text-5xl sl-leading-tight sl-font-prose sl-font-semibold sl-text-heading">
|
|
{!! $metadata['title'] !!}
|
|
</h1>
|
|
@if($metadata['postman_collection_url'])
|
|
<a title="Download Postman collection" class="sl-mx-1"
|
|
href="{!! $metadata['postman_collection_url'] !!}" target="_blank">
|
|
<small>Postman collection →</small>
|
|
</a>
|
|
@endif
|
|
@if($metadata['openapi_spec_url'])
|
|
<a title="Download OpenAPI spec" class="sl-mx-1"
|
|
href="{!! $metadata['openapi_spec_url'] !!}" target="_blank">
|
|
<small>OpenAPI spec →</small>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="sl-prose sl-markdown-viewer sl-my-4">
|
|
{!! $intro !!}
|
|
|
|
{!! $auth !!}
|
|
</div>
|
|
</div>
|
|
|
|
@include("scribe::themes.elements.groups")
|
|
|
|
<div class="sl-prose sl-markdown-viewer sl-my-5">
|
|
{!! $append !!}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<template id="expand-chevron">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas"
|
|
data-icon="chevron-right"
|
|
class="svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
|
|
<path fill="currentColor"
|
|
d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path>
|
|
</svg>
|
|
</template>
|
|
|
|
<template id="expanded-chevron">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas"
|
|
data-icon="chevron-down"
|
|
class="svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
|
<path fill="currentColor"
|
|
d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path>
|
|
</svg>
|
|
</template>
|
|
|
|
<template id="expand-chevron-solid">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right"
|
|
class="svg-inline--fa fa-caret-right fa-fw sl-icon" role="img" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 256 512">
|
|
<path fill="currentColor"
|
|
d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"></path>
|
|
</svg>
|
|
</template>
|
|
|
|
<template id="expanded-chevron-solid">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas"
|
|
data-icon="caret-down"
|
|
class="svg-inline--fa fa-caret-down fa-fw sl-icon" role="img"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
|
|
<path fill="currentColor"
|
|
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>
|
|
</template>
|
|
</body>
|
|
</html>
|