| --- |
| 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, 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 bootstrapJsProps = getVersionedBsJsProps() |
| const importMap = JSON.stringify({ |
| imports: { |
| '@bootstrap': bootstrapJsProps.src |
| } |
| }) |
| --- |
| |
| <!doctype html> |
| <html lang="en" 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> |
| |
| {include_js !== false && <script type="importmap" is:inline set:html={importMap} />} |
| |
| <link rel="canonical" href={canonicalUrl} /> |
| |
| {/* Loaded as `is:inline` (not via Vite) so the theme is applied before paint. */} |
| {/* The script lives in `site/static/docs/[version]/assets/js/` so it can */} |
| {/* render-block at this exact spot in the head without going through the */} |
| {/* bundler (which would defer it and cause a flash of the wrong theme). */} |
| <script is:inline src={getVersionedDocsPath('assets/js/color-modes.js')}></script> |
| |
| <Stylesheet /> |
| <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: 2.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; |
| } |
| |
| .bd-mode-toggle { |
| z-index: 1500; |
| } |
| |
| .bd-mode-toggle .bi { |
| width: 1em; |
| height: 1em; |
| } |
| |
| .bd-mode-toggle .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="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 {...bootstrapJsProps} /> |
| {extra_js?.map((js) => ( |
| <script |
| is:inline |
| type="module" |
| async={js.async} |
| src={js.src} |
| integrity={js.integrity} |
| {...(js.integrity && { crossorigin: 'anonymous' })} |
| /> |
| ))} |
| </Fragment> |
| ) |
| } |
| </body> |
| </html> |
