Server : Apache/2.4.62 (Unix) OpenSSL/1.0.2k-fips System : Linux server1.richineiserver.com 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64 User : fdshops ( 1003) PHP Version : 8.2.21 Disable Function : NONE Directory : /home/fdshops/public_html/vendor/knuckleswtf/scribe/resources/views/themes/elements/ |
@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');
});
}
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) {}
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>