index.blade.php 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. @php
  2. use Knuckles\Scribe\Tools\WritingUtils as u;
  3. @endphp
  4. <!doctype html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="utf-8">
  8. <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  9. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  10. <title>{!! $metadata['title'] !!}</title>
  11. <link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">
  12. <link rel="stylesheet" href="{!! $assetPathPrefix !!}css/theme-elements.style.css" media="screen">
  13. <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
  14. <link rel="stylesheet"
  15. href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/docco.min.css">
  16. <script src="https://unpkg.com/@highlightjs/cdn-assets@10.7.2/highlight.min.js"></script>
  17. <script>hljs.highlightAll();</script>
  18. <style>
  19. .hljs {
  20. /* Remove highlightjs background color */
  21. background-color: transparent; !important;
  22. }
  23. </style>
  24. @if($tryItOut['enabled'] ?? true)
  25. <script>
  26. var baseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
  27. var useCsrf = Boolean({{ $tryItOut['use_csrf'] ?? null }});
  28. var csrfUrl = "{{ $tryItOut['csrf_url'] ?? null }}";
  29. </script>
  30. <script src="{{ u::getVersionedAsset($assetPathPrefix.'js/tryitout.js') }}"></script>
  31. @endif
  32. <script src="{{ u::getVersionedAsset($assetPathPrefix.'js/theme-elements.js') }}"></script>
  33. </head>
  34. <body data-languages="{{ json_encode($metadata['example_languages'] ?? []) }}">
  35. @if($metadata['example_languages'])
  36. <script>
  37. function switchExampleLanguage(lang) {
  38. document.querySelectorAll(`.example-request`).forEach(el => el.style.display = 'none');
  39. document.querySelectorAll(`.example-request-${lang}`).forEach(el => el.style.display = 'initial');
  40. document.querySelectorAll(`.example-request-lang-toggle`).forEach(el => el.value = lang);
  41. }
  42. </script>
  43. @endif
  44. <script>
  45. function switchExampleResponse(endpointId, index) {
  46. document.querySelectorAll(`.example-response-${endpointId}`).forEach(el => el.style.display = 'none');
  47. document.querySelectorAll(`.example-response-${endpointId}-${index}`).forEach(el => el.style.display = 'initial');
  48. document.querySelectorAll(`.example-response-${endpointId}-toggle`).forEach(el => el.value = index);
  49. }
  50. function toggleElementChildren(evt) {
  51. let elem = evt.currentTarget;
  52. let children = elem.querySelector(`.children`);
  53. if (!children) return;
  54. if (children.contains(event.target)) return;
  55. let oldState = children.style.display
  56. if (oldState === 'none') {
  57. children.style.removeProperty('display');
  58. elem.querySelector('.expand-chevron').style.display = 'none'
  59. elem.querySelector('.expanded-chevron').style.removeProperty('display')
  60. } else {
  61. children.style.display = 'none';
  62. elem.querySelector('.expand-chevron').style.removeProperty('display')
  63. elem.querySelector('.expanded-chevron').style.display = 'none'
  64. }
  65. evt.stopPropagation();
  66. }
  67. window.addEventListener('DOMContentLoaded', () => {
  68. document.querySelectorAll('.expandable').forEach(el => {
  69. el.addEventListener('click', toggleElementChildren);
  70. });
  71. });
  72. </script>
  73. <div style="height: 100%;">
  74. <div data-overlay-container="true" class="" style="height: 100%;">
  75. <div class="sl-elements sl-antialiased sl-h-full sl-text-base sl-font-ui sl-text-body">
  76. <div class="sl-elements-api sl-flex sl-inset-0 sl-h-full">
  77. @include("scribe::themes.elements.sidebar")
  78. <div class="sl-overflow-y-auto sl-flex-1 sl-w-full sl-px-16 sl-bg-canvas">
  79. <div class="sl-py-16" style="max-width: 1500px;">
  80. <div class="sl-mb-10">
  81. <div class="sl-flex sl-justify-between sl-items-center">
  82. <div class="sl-relative">
  83. <h1 class="sl-text-5xl sl-leading-tight sl-font-prose sl-font-semibold sl-mb-4 sl-text-heading">
  84. {!! $metadata['title'] !!}
  85. </h1>
  86. </div>
  87. @if($metadata['openapi_spec_url'] || $metadata['postman_collection_url'])
  88. <div>
  89. <button type="button" aria-label="Download" aria-haspopup="true"
  90. aria-expanded="false"
  91. onclick="let oldState = window['download-menu'].style.display; window['download-menu'].style.display= oldState == 'none' ? 'initial' : 'none';"
  92. class="sl-button sl-h-sm sl-text-base sl-font-medium sl-ml-2 sl-px-1.5 sl-bg-canvas hover:sl-bg-canvas-50 active:sl-bg-canvas-100 sl-rounded sl-border-button sl-border disabled:sl-opacity-60">
  93. Download
  94. <span class="sl-text-xs sl--mr-0.5 sl-ml-1">
  95. <svg aria-hidden="true" focusable="false" data-prefix="fas"
  96. data-icon="chevron-down"
  97. class="svg-inline--fa fa-chevron-down fa-fw sl-icon" role="img"
  98. xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  99. <path fill="currentColor"
  100. 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>
  101. </svg>
  102. </span>
  103. </button>
  104. <div class="sl-bg-transparent" id="download-menu" style="display: none;">
  105. <div data-ismodal="false" tabindex="-1"
  106. data-testid="popover" data-ispopover="true"
  107. class="sl-popover sl-inline-flex" role="presentation"
  108. style="position: absolute; z-index: 100000; left: 502.045px; top: 158px; max-height: 359.091px;">
  109. <div class="sl-menu sl-menu--pointer-interactions sl-inline-block sl-overflow-y-auto sl-w-full sl-py-2 sl-bg-canvas-pure sl-cursor sl-no-focus-ring"
  110. role="menu" style="min-width: 150px; max-width: 400px;">
  111. @if($metadata['postman_collection_url'])
  112. <div class="sl-menu-item sl-flex sl-items-center sl-text-base sl-whitespace-nowrap sl-pt-1 sl-pr-3 sl-pb-1 sl-pl-3"
  113. role="menuitem">
  114. <div class="sl-menu-item__title-wrapper sl-flex-1 sl-w-full sl-pr-0">
  115. <div class="sl-truncate">
  116. <a href="{!! $metadata['postman_collection_url'] !!}" target="_blank">Postman
  117. collection</a>
  118. </div>
  119. </div>
  120. </div>
  121. @endif
  122. @if($metadata['openapi_spec_url'])
  123. <div class="sl-menu-item sl-flex sl-items-center sl-text-base sl-whitespace-nowrap sl-pt-1 sl-pr-3 sl-pb-1 sl-pl-3"
  124. role="menuitem">
  125. <div class="sl-menu-item__title-wrapper sl-flex-1 sl-w-full sl-pr-0">
  126. <div class="sl-truncate">
  127. <a href="{!! $metadata['openapi_spec_url'] !!}" target="_blank">OpenAPI
  128. spec</a>
  129. </div>
  130. </div>
  131. </div>
  132. @endif
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. @endif
  138. </div>
  139. <div class="sl-relative">
  140. <div class="sl-prose sl-markdown-viewer sl-my-5">
  141. {!! $intro !!}
  142. {!! $auth !!}
  143. </div>
  144. </div>
  145. </div>
  146. @include("scribe::themes.elements.groups")
  147. <div class="sl-mb-10">
  148. <div class="sl-relative">
  149. <div class="sl-prose sl-markdown-viewer sl-my-5">
  150. {!! $append !!}
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </body>
  161. </html>