| --- |
| import type { HTMLAttributes } from 'astro/types' |
| import { getVersionedBsJsProps } from '@libs/bootstrap' |
| import { getConfig } from '@libs/config' |
| import type { ExampleFrontmatter } from '@libs/examples' |
| import { getVersionedDocsPath } from '@libs/path' |
| import Stylesheet from '@components/head/Stylesheet.astro' |
| import Favicons from '@components/head/Favicons.astro' |
| import ThemeToggler from '@layouts/partials/ThemeToggler.astro' |
| import Icons from '@layouts/partials/Icons.astro' |
| |
| type Props = ExampleFrontmatter |
| |
| const { body_class, direction, extra_css, extra_js, html_class, include_js, title = 'Example' } = Astro.props |
| |
| const pageTitle = `${title} ยท ${getConfig().title} v${getConfig().docs_version}` |
| const canonicalUrl = new URL(Astro.url.pathname, Astro.site) |
| |
| const htmlProps: HTMLAttributes<'html'> = direction === 'rtl' ? { lang: 'ar', dir: 'rtl' } : { lang: 'en' } |
| --- |
| |
| <!DOCTYPE html> |
| <html {...htmlProps} class:list={html_class} data-bs-theme="auto"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <meta name="description" content="" /> |
| <meta name="author" content={getConfig().authors} /> |
| <meta name="generator" content={Astro.generator} /> |
| <title>{pageTitle}</title> |
| |
| <link rel="canonical" href={canonicalUrl} /> |
| |
| <script is:inline src={getVersionedDocsPath('assets/js/color-modes.js')}></script> |
| |
| <Stylesheet direction={direction} layout="examples" /> |
| <Favicons /> |
| |
| <style is:global> |
| .bd-placeholder-img { |
| font-size: 1.125rem; |
| text-anchor: middle; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| user-select: none; |
| } |
| |
| @media (min-width: 768px) { |
| .bd-placeholder-img-lg { |
| font-size: 3.5rem; |
| } |
| } |
| |
| .b-example-divider { |
| width: 100%; |
| height: 3rem; |
| background-color: rgba(0, 0, 0, 0.1); |
| border: solid rgba(0, 0, 0, 0.15); |
| border-width: 1px 0; |
| box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1), inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15); |
| } |
| |
| .b-example-vr { |
| flex-shrink: 0; |
| width: 1.5rem; |
| height: 100vh; |
| } |
| |
| .bi { |
| vertical-align: -0.125em; |
| fill: currentColor; |
| } |
| |
| .nav-scroller { |
| position: relative; |
| z-index: 2; |
| height: 2.75rem; |
| overflow-y: hidden; |
| } |
| |
| .nav-scroller .nav { |
| display: flex; |
| flex-wrap: nowrap; |
| padding-bottom: 1rem; |
| margin-top: -1px; |
| overflow-x: auto; |
| text-align: center; |
| white-space: nowrap; |
| -webkit-overflow-scrolling: touch; |
| } |
| |
| .btn-bd-primary { |
| --bd-violet-bg: #712cf9; |
| --bd-violet-rgb: 112.520718, 44.062154, 249.437846; |
| |
| --bs-btn-font-weight: 600; |
| --bs-btn-color: var(--bs-white); |
| --bs-btn-bg: var(--bd-violet-bg); |
| --bs-btn-border-color: var(--bd-violet-bg); |
| --bs-btn-hover-color: var(--bs-white); |
| --bs-btn-hover-bg: #6528e0; |
| --bs-btn-hover-border-color: #6528e0; |
| --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); |
| --bs-btn-active-color: var(--bs-btn-hover-color); |
| --bs-btn-active-bg: #5a23c8; |
| --bs-btn-active-border-color: #5a23c8; |
| } |
| |
| .bd-mode-toggle { |
| z-index: 1500; |
| } |
| |
| .bd-mode-toggle .bi { |
| width: 1em; |
| height: 1em; |
| } |
| |
| .bd-mode-toggle .dropdown-menu .active .bi { |
| display: block !important; |
| } |
| </style> |
| |
| {extra_css?.map((extraCss) => <link href={extraCss} rel="stylesheet" />)} |
| </head> |
| <body class:list={body_class}> |
| <Icons /> |
| |
| <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"> |
| <ThemeToggler layout="examples" /> |
| </div> |
| |
| <slot /> |
| |
| { |
| include_js !== false && ( |
| <Fragment> |
| <script is:inline {...getVersionedBsJsProps()} /> |
| {extra_js?.map((js) => ( |
| <script |
| is:inline |
| async={js.async} |
| src={js.src} |
| integrity={js.integrity} |
| {...(js.integrity && { crossorigin: 'anonymous' })} |
| /> |
| ))} |
| </Fragment> |
| ) |
| } |
| </body> |
| </html> |
